Disable checkbox editing if cell value is a certain type

[Candice]

.

<p>Columns(columns =><br>
                                                                {<br>
<br>
                                                                    columns.Bound(p => p.Type).EditorTemplateName("TypeEditor").ClientTemplate("#=     data.TypeText #");<br>
                                                                    columns.Bound(p => p.Something);<br>
                                                                    columns.Bound(p => p.Something else);<br>
                                                                    columns.Command(command =><br>
                                                                    {<br>
                                                                        command.Edit();<br>
                                                                        command.Custom("Delete").Click("delete_click");<br>
                                                                    });<br>
                                                                })</p> <p>This is my grid, there is an edit inline section to it, what I want, when the grid is in edit mode, and the type is set to a certain value, the checkboxes of the other two columns become disabled/ uneditable change the type, they become editable again, <br>
How do I do this?    </p>

[Anton Mironov]

Hello, Candice,

In order to disable checkboxes on a row by condition try using the Edit Event of the grid. Within this Event handler, add an "input" event listener for the needed field (ShipName in the example below). Check if the needed value is populated (value = "Disabled" in the example), get the checkboxes in the row, and disable each one by adding the k-state-disabled class. Here is an example:

// The Edit Event for the grid
    .Events(e => e.Edit("onEdit"))

// Executed JavaScript function
 function onEdit(e) {

        $("#ShipName").on("input", function (e) {
            if (e.target.value == "Disable") {
                var inputs = $(e.target).closest("tr").find("input[type='checkbox']");
                $(inputs).each(function () {
                    $(this).addClass("k-state-disabled")
                });
            }
        })
    }

Let me know if further assistance is needed.

 

 

Regards,
Anton Mironov
Progress Telerik

[Candice]

Thanks,

 

Although what I am trying to do is the following:

depending on the value of the column.bound drop down, I want to disable two other column.bound input boxes, if the dropdown value changes, then re-enable those checkboxes,

the code:

I have added .event.Change("OnEdit") to the event list.

The bound column I want the value of is 

 columns.Bound(p => p.Type).EditorTemplateName("TypeEditor").ClientTemplate("#= data.TypeText #"); //what the value of this is, will determine whether these two are disabled 

columns.Bound(p => p.Checkbox1);
                    columns.Bound(p => p.CheckBox2);

here is the OnEdit Function

<script type="text/javascript">
    function OnEdit(e) {
        console.log("we got this far");
        var grid = $('#grid').data('kendoGrid');
        var Types = grid.dataItem("Type");
        if (Types == 'Email') {
            var inputs = $(e.target).closest("#CheckBox1").find("input[type='checkbox']");

var input_2 = $(e.target).closest("#CheckBox2").find("input[type='checkbox']");
            $(inputs && input_2).each(function () {
                $(this).addClass("k-state-disabled")
            });
        }
    }
</script>

[Anton Mironov]

Hello, Candice,

Thank you for the provided code.

In order to handle the change of a dropdown column, a good approach is to use the Change Event in the EditorTemplate:

.Events(e => e.Change("onCategoryChange"))

Here is an example of a JavaScirpt function that will be executed(in the example: "Disable" is the value that will disable the checkboxes on the row):

    function onCategoryChange(e) {
        var categoryTextValue = e.sender._oldText;
        var currRow = e.sender.element.closest("tr");
        var inputs = currRow.find("input[type='checkbox']");

        if (categoryTextValue == "Disable") {
            $(inputs).each(function () {
                $(this).addClass("k-state-disabled")
            });
        }
        else {
            $(inputs).each(function () {
                $(this).removeClass("k-state-disabled")
            });
        

In order to solidify this behavior when editing the grid inline, keep the onEdit Event handler. Here is an example of the needed function :

   function onEdit(e) {

        var currRow = $("#grid").data("kendoGrid").tbody.find("tr[data-uid='" + e.model.uid + "']");
        var inputs = currRow.find("input[type='checkbox']");

        if (e.model.Category.CategoryName == "Disable") {
            
            $(inputs).each(function () {
                $(this).addClass("k-state-disabled")
            });
        }

        else {
            $(inputs).each(function () {
                $(this).removeClass("k-state-disabled")
            });
        }
    }

Let me know if you have any other questions.

 

Best Regards,
Anton Mironov
Progress Telerik

[Candice]

Is there a way I can get a working example of this please? also, there is more than one checkbox I want to disable based on the value selected from the drop down, When I apply the .k-state-disabled class, the checkboxes are still clickable even though they are greyed out? 

[Anton Mironov]

Hi, Candice,

Attached is a sample project with the needed behavior implemented. The name of the template is Category(find it in the EditorTemplates folder). 

The Edit Event handler in the example disables all checkboxes in the current editing row.

I will be glad to assist you further.

Greetings,
Anton Mironov
Progress Telerik

[Candice]

I dont want all checkboxes disabled just two if the value from the dropdown is x, 

so: grid is in edit mode, I have a dropdown with two values in in it a and b, I have 4 checkboxes, these have ids and are column.bound, if I am in edit mode and I select value b from the drop down I want to hide 2 of the checkboxes becuae k-state-disabled you can still click on the checkboxes, also, could I have a dojo example this time.

Thank you

[Anton Mironov]

Hello, Candice,

In order to disable only the desired checkboxes, add a custom class. In the event handler, add logic to target and disable/hide them. Here is an example(setting the value in the DropDownList to "Produce" will remove the first two checkbox elements):

• https://dojo.telerik.com/EFAbiLiY

I hope this information helps.

Regards,
Anton Mironov
Progress Telerik