WebDataGrid- Handling CheckBoxes

Hi,

I use the below JS method to set a specific cell on a column+ row as readonly/ editable

function WebDataGrid1_CellEditing_EnteringEditMode(grid, eventArgs)
{
var cell = eventArgs.getCell();
var index = cell.get_row().get_index();
var key = cell.get_column().get_key();

if (index == "2" && key == "FIRSTNAME") // ReadOnly
{
eventArgs.set_cancel(true);
}
if(index == "0" && key == "LASTNAME") // Editable
{
eventArgs.set_cancel(false);
}
}

 

Then i set a value to a specific cell (based upon certain conditions at server side) using the server side logic

grdDataTable.Rows(rowIndex).Items(columnIndex).Text = “Hello”

However, i am facing issues with checkboxes when dealing with these two cases.

The check box is automatically shown in the grid as the dynamic data bound from the datasource is of type boolean.

1. How to Disable Checkbox(ie Not make it clickable) using the WebDataGrid1_CellEditing_EnteringEditMode JS method,
if there is a checkbox inside the cell where the // ReadOnly condition is satisified.?

2. How to Set CheckBox enabled/disabled using the server side logic that i mentioned above? I tried setting the

grdDataTable.Rows(rowIndex).Items(columnIndex).Value = false/ true (For CheckBox types) but it is throwing an exception

3. If we are to disable editing an entire column using server side logic, How to disable all the checboxes from that column?

Web Page Code: (Please note that i dynamically bind data to the grid)

Thanks,
Aravind

Hello Aravind,

About your first question, you can disable a checkbox using CellValueChanging not EnteringEditMode event.   

                       
...

function WebDataGrid1_Editing_CellValueChanging(sender, eventArgs) {
    let currentCell = eventArgs.get_cell();
    if (currentCell.get_column().get_key() == "Checkbox") {
       var index = currentCell.get_row().get_index();
           if (index == "0")
               eventArgs.set_cancel(true);
        }
     }

About your second question, it is best to modify your data source checkbox value.

About your third question, you can disable the editing of the entire column setting it as ReadOnly:

EditingColumnSetting settings = new EditingColumnSetting()
{
    ColumnKey = "Checkbox",
    ReadOnly = true
};
WebDataGrid1.Behaviors.EditingCore.Behaviors.CellEditing.ColumnSettings.Add(settings);

Let me know if you have any questions with this matter.

---

Svetla Boykova

Hi Svetla,

                    I was able to perform 1 and 3 answers clean based upon your solution.

About 2:

                 In UltraWebGrid legacy library , we were able to set a check box Checked or UnChecked  by setting the below property(value) with true/false in server side and then display grid to user. Then user clicks a button which performs a post back updating the database(based on the data shown in the grid) and then refreshing the datasource. However as per your response,  i see it is not possible to do that in webdatagrid at server side, other than to modify the datasource value directly?

grdDataTable.Rows(rowIndex).Cells(columnIndex).Value = value
            

Is there a way to achieve this(Check/UnCheck of a CheckBox) by using Client Side JS events?(What i meant is a JS logic similar to the below which goes in some Client Side event which mimics the earlier functionality from ultrawebgrid for grdDataTable.Rows(rowIndex).Cells(columnIndex).Value =…)

var cell = eventArgs.getCell();
var rowIndex = cell.get_row().get_index();
var colIndex = cell.get_column().get_index();

if (rowIndex == 3 && colIndex == 2) 
{
   //Logic-> If there is a checkbox in this cell , Check the Check box in this cell 
}

if(rowIndex == 2 && colIndex == 1)

{

   // Logic-> If there is a checkbox in this cell ,  UnCheck the Check box in this cell 

}

Thanks,

Aravind

Hello Aravind,

You can change the state of the checkbox using client side code – _setCheckState using 1 – checked and 0 – unchecked as parameter.

var grid = ig_controls["WebDataGrid1"];
var cell = grid.get_rows().get_row(row_index).get_cellByColumnKey("Checkbox");
var newCheckState = cell._getCheckState() === 1 ? 0 : 1;
cell._setCheckState(newCheckState);

Let me know if you have any questions with this matter.

---

Svetla Boykova

Svetla,

             Which client side event method will this go into which mimic the ultrawebgrid server side logic for checkboxes-> grdDataTable.Rows(rowIndex).Cells(columnIndex).Value = true/false?

          I am guessing it should go into some initialize events client side methods. If not can they be achieved on "EditingClientEvents.CellValueChanging"/"CellEditingClientEvents.EnteringEditMode" ?

Thanks,

Aravind

The Initialize client event fires after the JavaScript object is created.  You can see all client event of the grid in the API documentation by looking at the GridClientEvents members.

An approach more like what the UltraWebGrid allowed in your example would be to set the value in the DataSource that you are binding the WebDataGrid to before binding.  If the column/property doesn't exist in your DataSource currently, you should consider adding it as it is a better approach than initializing the value on the client side.

Hi Alan,

                Our app is running in an architecture where in a wrapper control(.ascx) does all the WebDataGrid functionalities which is then leveraged by other user controls(.ascx). The wrapper and all other calling functionalities where designed around the old ultrawebgrid way of setting and retrieving objects.

Eg: DataBind was done on a wrapper method  which was called from the page load of various module & setCellValue was called on certain button click events for edit features.

So based on your suggestion, if we need to change the datasource dynamically for checkbox values and then databind, it is more effort for migration considering the way our legacy app is designed using ultrawebgrid wrapper methods.

I was able to achieve the functionality of setCellValue wrapper method for checkbox scenarios using the suggestion of using client side javascripts . I dynamically created the below JavaScript method in server side logic and registered it into Client Side using Page.ClientScript.RegisterStartupScript and mapped it to the Initialize client side event. Not the straight forward way , but it is achieving what i was looking for.

function EditGrid_ctlDataTable_grdDataTable_Initialize_CheckBoxValueChange(grid, eventArgs) {
var checkState;
var cell;

cell = grid.get_rows().get_row(8).get_cell(4);
checkState = cell._getCheckState();
if(checkState == 1 || checkState == 0)
{
cell._setCheckState(0);
}

cell = grid.get_rows().get_row(10).get_cell(4);
checkState = cell._getCheckState();
if(checkState == 1 || checkState == 0)
{
cell._setCheckState(0);
}

cell = grid.get_rows().get_row(11).get_cell(4);
checkState = cell._getCheckState();
if(checkState == 1 || checkState == 0)
{
cell._setCheckState(0);
}
}

Hello Aravind,

I am glad that you manage to achieve the desired functionality.

Let me know if you have any questions with this matter.

---

Svetla Boykova