Disable checkbox editing if cell value is a certain type

8 posts, 0 answers
  1. Candice
    Candice avatar
    7 posts
    Member since:
    May 2020

    Posted 15 Jun 2020 Link to this post

    .

    <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>
  2. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 17 Jun 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Candice
    Candice avatar
    7 posts
    Member since:
    May 2020

    Posted 17 Jun 2020 in reply to Anton Mironov Link to this post

    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>

  4. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 19 Jun 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Candice
    Candice avatar
    7 posts
    Member since:
    May 2020

    Posted 22 Jun 2020 in reply to Anton Mironov Link to this post

    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? 
  6. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 25 Jun 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  7. Candice
    Candice avatar
    7 posts
    Member since:
    May 2020

    Posted 25 Jun 2020 in reply to Anton Mironov Link to this post

    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

  8. Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 26 Jun 2020 Link to this post

    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):

    I hope this information helps.

    Regards,
    Anton Mironov
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top