how to disable/hide fields/columns in a row dynamically

[riz]

I have a few groups of columns in my inline grid using columns.Group. I know I can hide these column groups entirely, but I have a dropdown in each row of the grid, and based on what is selected in that dropdown, I am firing a javascript event and examining the selected value. Based on this selected value, I would like to disable or hide these groups of columns in that particular row only! How can I go about doing this?

<p>//this is where I am firing the event:<br>columns.Bound(p => p.sb).Width(200).ClientTemplate("#= sbchange(sb) #");</p><p></p><p>//this is the js function:</p><p>//can i get the row num passed in as a parameter as well?<br>function sbchange(sb) {</p><p>//i would like to disable  columns/fields.of the row where the sb was changed. It's better if i can somehow access the whole column group for that row,</p><p>//so i don't have to go field by field and disable them.</p><p>}</p>

[riz]

wow telerik. Have any of you used StackOverflow before? Your forum editor is 90s era clunky. Completely messed up my code formatting, and I can't even edit my post? Very frustrating user experience.

[Preslav]

Hi Riz,

I understand your frustration. Thank you for the feedback about the forums.

Unfortunately, based on the current information, I cannot fully understand the scenario. Having said that, could you please share the code snippet again? 


Regards,
Preslav
Progress Telerik

[riz]

Hi Preslav, the code is not that important. The scenario is quite simple: 

For Inline edit in a grid, I have some fields that are a Dropdown. When I select a dropdown value in a particular field, I want certain other fields in the same row to be disabled/enabled depending on the value selected in the dropdown. How can I go about doing that with Kendo?

[Preslav]

Hello Riz,

One of the possible solutions to achieve the desired behavior is to assign the "pointer-events: none" style to the desired inputs, based on the DropDown selection.

For example, during the edit event of the Grid bind a select event handler to the DropDown. In the select event handler, based on the selection, use the addClass and removeClass jQuery methods to assign the styles to the inputs.

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/edit
• https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/methods/select
• https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
• https://api.jquery.com/addClass/
• https://api.jquery.com/removeClass/

The code could look like:

<style>
    .disable-cells {
        pointer-events: none;
        opacity: 0.2;
        background-color: #d3d3d3;
    }
</style>

//...
.Events(e => e.Edit("onEdit"))
//...

<script>
    function onEdit(e) {
        var ddl = e.container.find("[data-role='dropdownlist']").data("kendoDropDownList");

        ddl.bind("select", function (e) {
            if (e.dataItem.CustomerName !== "Customer3") {
                e.sender.element.closest("tr").find("input.text-box").addClass("disable-cells");
            } else {
                e.sender.element.closest("tr").find(".disable-cells").removeClass("disable-cells");
            }
        });
    }
</script>

For your convenience, I am attaching a sample MVC project.


Regards,
Preslav
Progress Telerik