This is a migrated thread and some comments may be shown as answers.

Disable Kendo Grid

1 Answer 4011 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Chatra
Top achievements
Rank 1
Chatra asked on 20 Jul 2014, 02:54 PM
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

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 22 Jul 2014, 03:10 PM
Hello Chatra,

Please refer to:

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

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Chatra
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or