Hello Rudy,

There is a way to trigger a javascript function when the checkbox is Checked/ticked using ClientSideEvent on event "OnCheckBoxClick". But before use this way, ensure that you have set the checkbox column "Is row checker column" to true. 

 Follow this step to set the checkbox column "Is row checker column" to true :

1. Right click on WebGrid then select "WebGrid .NET designer..."
2. Select "Advanced" menu.
3. Expand the RootTable and select Columns.
4. Choose the checkBox column, then check/tick on "Is row checker column" check box.
5. Or Set IsRowChecker property to "True".
6. Then select apply and OK button.

Follow this step to trigger a javascript function when the checkbox checked/ticked:

1. Expand "Layout Setting" in WebGrid property.
2. Next, open ClientSideEvent.
3. Add new handler on "OnCheckBoxClick".
4. Finally, you can input a method which will triger when the checkbox checked/ticked.

Regarding to your scenario, I created a simple sample which use WebGrid. The WebGrid consist of checkbox column and WebRating (Using CellTemplate). After you follow the steps above, add snippet code bellow :

  var i; //used to initialize whether checkbox is checked or not.
        function WebGrid1_OnCheckBoxClick(controlId, tblName, colName, checkboxValue, originalCheckBoxValue) {
            var Grid = ISGetObject("WebGrid1");
            if (checkboxValue == true) {
                i = 1;
            } else {
                i = 0;
            }
        }
		
  	// To Set value on WebRating	
        function WebRating1_OnClick(controlId, newValue) {
            var WebRating1 = ISGetObject(controlId);
            var grid = ISGetObject("WebGrid1");
            var checkbox = grid.GetSelectedObject().ToRowObject().GetCells().GetNamedItem("Checbox1");
            if (checkbox.Value == true) {
                if (i == 1) {
                    WebRating1.SetValue(newValue);
                    return true;
                } else
                    return false;
            }
            else
                return false;
        }

It would be help if you could capture a WebGrid (for checkbox appears shrunken), so I can fix or give a solution faster because I cannot replicate this issue. For your information, the style will be works fine on XHTML.

Attached is my simple runable sample for your scenario.

Hope this helps.
Riendy

Hi Riendy,

Thank you for your reply. I have modified your sample and attach a screen shot sample of different sizes of checkboxes. Checkboxes in webgrid are smaller than real size check box.

In this example, I am using webinput because that's what I have to use to input a rate as percentage. The WebInput_Click event never gets fired.

Furthermore,I cannot really use RowChecker for the check box column. this type of column does not have a column heading (Caption).

Is there another way we can do this with normal checked box and with webinput?

Hello Rudy,

Your question is on investigation now. I have to consult to our developer before I give you any solution further, because I found an issue here.

Anyway, to set integrated WebInput in WebGrid become readOnly or cannot edited when the check box uncheck, you should set on WebGrid OnRowSelect event. Please see snippet code bellow:

// used to set WebInput editable or unable to edit when select the row.
function WebGrid1_OnRowSelect(controlId, tblName, rowIndex, rowEl) {
            var WebInput1 = ISGetObject("WebInput1");
            var grid = ISGetObject("WebGrid1");
            var checkbox = grid.GetSelectedObject().ToRowObject().GetCells().GetNamedItem("Checbox1");
            if (checkbox.Value == true) {
                WebInput1.SetReadOnly(false);
                grid.GetSelectedObject().ToRowObject().GetCells()[2].SetForceNoEdit(false);
                return true;
            } else {
                WebInput1.SetReadOnly(true);
                grid.GetSelectedObject().ToRowObject().GetCells()[2].SetForceNoEdit(true);
                return false;
            }
        }

// used to set WebInput editable or unable to edit when checkBox click.
function WebGrid1_OnCheckBoxClick(controlId, tblName, colName, checkboxValue, originalCheckBoxValue) {
            var Grid = ISGetObject("WebGrid1");
            var input = ISGetObject("WebInput1");
            var checkbox = Grid.GetSelectedObject().ToRowObject().GetCells().GetNamedItem("Checbox1");
            if (checkbox.Value == true) {
                //i = 1;
                checkbox.Value == true;
                input.SetReadOnly(false);
                Grid.GetSelectedObject().ToRowObject().GetCells()[2].SetForceNoEdit(false);
            } else {
                //i = 0;
                checkbox.Value == false;
                input.SetReadOnly(true);
                Grid.GetSelectedObject().ToRowObject().GetCells()[2].SetForceNoEdit(true);
            }
        }

 
Regarding to the checkBox in IsRowChecker become smaller than normal size, there is a style inside our template. You can use normal checkBox to implement your scenario using cellTemplate, but I suggest you to use IsRowChecker.
I will let you know for the updates soon Rudy.

Thank you.
Riendy