In order to support multiple key field scenario you don't need to set the DataKeyField property in the WebGrid table. We already have a sample of this scenario in HierarchicalGrid.aspx. The OrderDetails has multiply key, OrderID and ProductID, so in the OrderDetails WebGrid definition no DataKeyField property is assigned

<ISWebGrid:WebGridTable Caption="Order Details" DataMember="Order Details">

On the other hand, the Order table which has the primary key OrderID will have to be assigned the DataKeyField property

<ISWebGrid:WebGridTable Caption="Orders" DataKeyField="OrderID" DataMember="Orders">

This issue has been reported previously by another customer and logged as bug #296. Currently the status of this bug is fixed and the fix will be release on SP1.

In order to hide the filterbar you will need to set the FilterBarVisible property to false.

Here are the code in your previous post

<asp:Button runat="server" Text="Change Image" OnClientClick="changeImage(); return false;" />

<script type="text/javascript">

function changeImage() {

     var grid = ISGetObject('WebGrid1');

     var selectedObject = grid.GetSelectedObject();

     if (selectedObject != null) {

          var selectedRow = selectedObject.ToRowObject();

          if (selectedRow.Type == "Record") {

               var cells = selectedRow.GetCells();

               var ncColumnPhoto = cells.GetNamedItem("ColumnPhoto");

               ncColumnPhoto.SetText("images/Anne.jpg");

               selectedRow.SetForceNoEdit(true);

               selectedRow.GetElement().style.backgroundColor = "LightCyan";

          }

     }

else {

        alert('Please select a row');

     }

}

</script>

In order to update image in the column you will need to access the image HTML element and modify the src property.

The SetForceNoEdit function has worked if we already set the Grid to AllowEdit, after changeImage function is invoked the row will not be editable.

In order to change the background color of the row you will need to modify all the TD element background color of all the selected row. 

Here is the updated snippet:

function changeImage() {

    var grid = ISGetObject('WebGrid1');
    var selectedObject = grid.GetSelectedObject();
    if (selectedObject != null) {
        var selectedRow = selectedObject.ToRowObject();
        if (selectedRow.Type == "Record") {
            debugger;
            var cells = selectedRow.GetCells();
            var ncColumnPhoto = cells.GetNamedItem("ColumnPhoto");
            ncColumnPhoto.CellElement.getElementsByTagName('img')[0].src = "images/Anne.jpg";
            selectedRow.SetForceNoEdit(true);

            var columnList = selectedRow.GetElement().getElementsByTagName('td');

            for (var i = 1; i < columnList.length; i  ) {
                columnList[i].style.backgroundColor = "LightCyan";
            }
        }
    }
    else {
        alert('Please select a row');
    }
}

In order to enhance the default Slidebar you will need to add some modification to the slidebar.js, however part of the code in the js is ophuscated which will make it more difficult to enhance slidebar.js than I was previously thought. If possible, you could learn from other custom editor; such as Calculator.js, NumericUpDown.js, and HtmlEditor.js; which has no ophuscation to familiarize yourself with the Custom Editor workings and create your own version of Slidebar.

The currently available resource for CustomEditor are the article titled "Custom Editor Open Architecture" and the CustomEditorTypes.aspx sample in WebGrid sample.

ISDataSource has already provided a property to define the select function you could use. For this scenario, you could create a new function to select the data from both the SQL Server and Oracle Database and assign it as the select method in the ISDataSource.