Intersoft Community - WebGrid Enterprise - ClientBinding, BatchUpdate, and JavaScript

ClientBinding, BatchUpdate, and JavaScript

james — Sat, 22 Aug 2009 02:41:41 GMT

Dan,

Could you check what's the ColumnType of the cell that contains the image?

AFAIK, the SetImage method should work well for Image and ImageAndText column type. This method is also used in BatchUpdate_AllowReview sample, so it suppose to work fine.

ClientBinding, BatchUpdate, and JavaScript

danjransom@gmail.com — Fri, 21 Aug 2009 14:07:44 GMT

Thanks. The SetImage method didn't work for me, but the CellElement version did. Note: the plus signs ( ) are missing from the for loop in the code block and this caused an infinate JavaScript loop.

ClientBinding, BatchUpdate, and JavaScript

james — Fri, 21 Aug 2009 10:01:50 GMT

Instead of accessing the image element manually, you can also try using cell.SetImage method.

Example:

cell.SetImage("images/Anne.jpg");

This way, your code looks much elegant and clean.

- James.

ClientBinding, BatchUpdate, and JavaScript

Glayaar — Fri, 21 Aug 2009 00:37:58 GMT

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');
    }
}

ClientBinding, BatchUpdate, and JavaScript

danjransom@gmail.com — Thu, 20 Aug 2009 15:10:08 GMT

* Apparently this forum behaves very badly when script is pasted directly into the edit window rather than using the "insert code" feature.

We are using a grid that has ClientBinding and BatchUpdate enabled and are trying to make changes using JavaScript without sucess. we do not want to post back to the server. Here's what we need:

1. Update the image in an image colum

2. Set a row as uneditable (SetForceNoEdit)

3. Change the background color of a row.

How can we accomplish this?