Disable Kendo Grid

[Chatra]

Hi,

I am trying to disable kendo Grid Sorting ,Filtering and couple of Button click functionality out of grids  when a check box is Checked.

I tried something like adding k-state-Disabled class ;But it just gays out the grid and doesn't stop any click events on grid or buttons.

Next I tried with having a DIV Cover over the Buttons outside the grid ,which didn't work for me.

Please see the snippet below with the sample project attached below.

Steps to go to master check box in the project:

Click on the Edit row of User Grid-->Click on Roles Tab-->Click Edit of any row of the  Roles Grid--> Click "Next" on Select Role Wizard Tab-->Here You can see the Two Agents Grids where trying to move row "Data items" between the Grids; like a List Box and Master Check Box which Grays out the Grids and Buttons.

  //Master CheckBox Click
            $('#agentMaster').on('click', function () {
                if (this.checked === true) {
                  
                    $("#availableAgentsGrid").addClass("k-state-disabled");
                    $("#selectedAgentsGrid").addClass("k-state-disabled");
                    $("#pushbtn").addClass("k-state-disabled");
                    $("#popbtn").addClass("k-state-disabled");


                    //create a transparent <div> to cover the button

                    //For the Push button element
                    var createBtn = $(".k-button .popbtn .k-state-disabled");
                    //create a div
                    var div = $("<div id='myCover'>").css({
                        "position": "absolute",
                        "left": createBtn.offset().left,
                        "top": createBtn.offset().top,
                        "width": createBtn.outerWidth(),
                        "height": createBtn.outerHeight()
                    }).appendTo($("body"));


                    //For the Filter button element
                    var filterBtns = $("a.k-grid-filter");
                    var width = filterBtns.eq(0).outerWidth();
                    var height = filterBtns.eq(0).outerHeight();
                    filterBtns.each(function (index) {
                        var position = $(this).offset();
                        $("<div class='cover'>").css({
                            "width": width,
                            "height": height,
                            "position": "absolute",
                            "top": position.top,
                            "left": position.left
                        }).appendTo($("body"));
                    });


                } else {
                    $("#selectedAgentsGrid").removeClass("k-state-disabled");
                    $("#availableAgentsGrid").removeClass("k-state-disabled");
                    $("#pushbtn").removeClass("k-state-disabled");
                    $("#popbtn").removeClass("k-state-disabled");


                    //remove Cover
                    $("#myCover").remove();
                    $(".cover").remove();
                }

              
            });

Thanks,
Chatrapathi Chennam

[Dimo]

Hello Chatra,

Please refer to:

http://www.telerik.com/forums/disable-the-grid-or-and-functionality

Regards,
Dimo
Telerik