[Solved] Setting Selectable from javascript

[Garry]

Is there anyway to set the Selectable property from javascript?  We have a grid setup on a page and based the selected tab, we want to make the grid non-selectable.

I am trying to use ViewData, but the Selectable property is not reading the updated value when it is set.

 .Sortable(oo => oo.Enabled((bool)ViewData["IsSelectable"]))

I have stepped through the action method that is used to populate the grid with data and the IsSelectable for ViewData is being set correctly.  Whether it is false or true, the grid still allows for a row to be selected.

Thanks in advance...

[John DeVight]

Hi Garry,

To set selectable in the grid using javascript, I implemented the OnLoad client event and extended the grid using the $.extend function with a function called enableSelect.  I then called the enableSelect function for the grid.

Here is the grid declaration:

@{
    Html.Telerik().Grid<TelerikMvcRazorApp.Models.Person>()
        .Name("PersonGrid")
        .DataKeys(keys => keys.Add(m => m.Id))
        .DataBinding(dataBinding => dataBinding.Ajax()
            .Select("SelectPeople", "Home")
        )
        .Columns(columns =>
        {
            columns.Bound(m => m.FirstName);
            columns.Bound(m => m.LastName);
        })
        .ClientEvents(events => events
            .OnLoad("PersonGrid_onLoad")
            .OnRowSelect("PersonGrid_onSelect")
        )
        .Render();
}

Here is the PersonGrid_onLoad event handler:

PersonGrid_onLoad=function (e) {
    var gridExtensions={
        enableSelect: function () {
            var s="tr:not(.t-grouping-row,.t-detail-row,.t-no-data,:has(>.t-edit-container))";
            var n=this.$tbody[0];
            var p=this;
            p.selectable=true;
            this.$tbody.delegate(s,"click",function (t) {
                if(this.parentNode==n) {
                    p.rowClick(t)
                }
            }).delegate(s,"hover",function (t) {
                if(this.parentNode==n) {
                    if(t.type=="mouseenter") {
                        jQuery(this).addClass("t-state-hover")
                    }
                    else {
                        jQuery(this).removeClass("t-state-hover")
                    }
                }
            });
        }
    };
    $.extend(true,$.telerik.grid.prototype,gridExtensions);

    $('#PersonGrid').data('tGrid').enableSelect();
}

Here is the PersonGrid_onSelect event handler:

PersonGrid_onSelect=function (e) {
    alert("Row Selected");
}

Please let me know if this works out for you by marking this as the answer, and I'll update my: telerik.extensions.js to incorporate the enableSelect function.

Attached is a sample project.

Regards,

John DeVight

[Garry]

Thanks John, I will give it a try and let you know...

[Garry]

Unfortunately, this did not work.  I am wanting to be able to change the selectable property anytime the grid is re-bound to data.  The onLoad only does it once, which is expected.  I did end up implementing the javascript function like you suggested and it did make the grid selectable, but was unable to change the selectability via javascript once it was set.

I guess what I am asking is if there is a way to change the selectability property once the grid has been loaded..

Thanks

[John DeVight]

I'll see what I can do....

[John DeVight]

Hey Garry,

I've updated the javascript for the PersonGrid_onLoad to the following so that enableSelect takes a parameter of true or false:

PersonGrid_onLoad=function (e) {
    var gridExtensions={
        enableSelect: function (enable) {
            var p=this;
            if(p.selectable!==enable) {
                var s="tr:not(.t-grouping-row,.t-detail-row,.t-no-data,:has(>.t-edit-container))";
                var n=this.$tbody[0];
                p.selectable=enable;
                $(p.element).find('tr.t-state-selected').removeClass('t-state-selected');
                this.$tbody.undelegate(s,"click")
                this.$tbody.undelegate(s,"hover");
                if(p.selectable) {
                    this.$tbody.delegate(s,"click",function (t) {
                        if(this.parentNode==n) {
                            p.rowClick(t)
                        }
                    });
                    this.$tbody.delegate(s,"hover",function (t) {
                        if(this.parentNode==n) {
                            if(t.type=="mouseenter") {
                                jQuery(this).addClass("t-state-hover")
                            }
                            else {
                                jQuery(this).removeClass("t-state-hover")
                            }
                        }
                    });
                }
            }
        }
    };
    $.extend(true,$.telerik.grid.prototype,gridExtensions);
}

Enable select with the following:

$('#PersonGrid').data('tGrid').enableSelect(true);

Disable select with the following:

$('#PersonGrid').data('tGrid').enableSelect(false);

Attached is a sample project where buttons are used to enable/disable select.

Regards,

John DeVight

[Garry]

That worked, sort of.
If I pass in true it does not make it selectable, false does.
But if I pass in false to make it selectable and true to make it non selectable it works.

[John DeVight]

Are you experiencing this in the sample application that I attached?  Or are you experiencing this in your application?  Or is it both?

Regards,

John DeVight

[Garry]

In my application, I have not opened the application that you have created.

[John DeVight]

Can you try downloading the sample application and see if you experience the same beharior?

Also, can you post the code that you have for declaring your grid as well as the javascript you are using for enabling/disabling select?

Regards,

John DeVight

[Garry]

It will be a while before I can try your application, but here is my code:

(statements calling to enable)

$('#GridCases').data('tGrid').enableSelect(false);

(statements calling to disable)

$('#GridCases').data('tGrid').enableSelect(true);

(on load function)
(this differs from yours in that you had p.selectable !== enable and I changed mine to p.selectable != enable)

function GridCases_onLoad(e)
        {
 
            var gridExtensions = {
                enableSelect: function (enable)
                {
 
                    var p = this;
 
                    if (p.selectable != enable)
                    {
                        var s = "tr:not(.t-grouping-row,.t-detail-row,.t-no-data,:has(>.t-edit-container))";
                        var n = this.$tbody[0];
                        p.selectable = enable;
                        $(p.element).find('tr.t-state-selected').removeClass('t-state-selected');
                        this.$tbody.undelegate(s, "click")
                        this.$tbody.undelegate(s, "hover");
                        if (p.selectable)
                        {
                            this.$tbody.delegate(s, "click", function (t)
                            {
                                if (this.parentNode == n)
                                {
                                    p.rowClick(t)
                                }
                            });
                            this.$tbody.delegate(s, "hover", function (t)
                            {
                                if (this.parentNode == n)
                                {
                                    if (t.type == "mouseenter")
                                    {
                                        jQuery(this).addClass("t-state-hover")
                                    }
                                    else
                                    {
                                        jQuery(this).removeClass("t-state-hover")
                                    }
                                }
                            });
                        }
                    }
                }
            };
            $.extend(true, $.telerik.grid.prototype, gridExtensions);
            
        }

(declaration of grid)

<%  
                    Html.Telerik().Grid<CodingCaseViewModel>()
                        .Name("GridCases")
                        .DataBinding(dataBinding => dataBinding.Ajax().Select("CodingSpreadsheetBinding", "Coding"))
                        .ClientEvents(events =>
                                        {
                                            events.OnRowSelect("onRowSelected");
                                            events.OnDataBound("onDataBound");
                                            events.OnError("onError");
                                            events.OnLoad("GridCases_onLoad");
                                           
                                        })
                        .Columns(columns =>
                                     {
 
                                         columns.Bound(c => c.CodingInfo.PatientName).Title("Patient Name");
                                         columns.Bound(c => c.CodingInfo.CaseId).Title("ID #");
                                         columns.Bound(c => c.CodingInfo.DOS).Format("{0:MM/dd/yyyy}").Title("DOS").Width(80);
                                         columns.Bound(c => c.CPTCodeWithBreaks).Title("CPT Code");
                                         columns.Bound(c => c.APCCodeWithBreaks).Title("APC");
                                         columns.Bound(c => c.MODCodeWithBreaks).Title("MOD");
                                         columns.Bound(c => c.ICD9CodeWithBreaks).Title("ICD9");
                                         columns.Bound(c => c.ICDV3CodeWithBreaks).Title("ICD V3");
                                         columns.Bound(c => c.CodingInfo.PhysicianName).Title("Physician");
                                         columns.Bound(c => c.CodingInfo.CustomerComments).Title("Comments");
                                         columns.Bound(c => c.CodingInfo.ClientId).Hidden(true).HeaderHtmlAttributes(new { style = "display:none" }).HtmlAttributes(new { style = "display:none" });
                                         columns.Bound(c => c.CodingInfo.CaseId).Hidden(true).HeaderHtmlAttributes(new { style = "display:none" }).HtmlAttributes(new { style = "display:none" });
                                     })
                        .Sortable()
                        .Pageable()
                        .Filterable()
                        .Selectable(oo => oo.Enabled(true))
                        .Render(); 
                %>

[Garry]

I tried to open your project, but cannot.  We are using MVC2 and not MVC3, so not running Razor.

[John DeVight]

The only real difference that I saw was that you had Selectable enabled in the declaration of you grid.  I made the same change to mine and am getting the expected behavior.

I'll try setting up the sample application using MVC 2.  What version of Telerik are you using?

[Garry]

As near as I can tell, we are using version 2010.2.9629.35.

[John DeVight]

I'll need your help to get that version of telerik.  Could you locate the C:\Program Files\Telerik\[Version of Telerik you are using] folder, and zip up the following child folders:
1. Binaries
2. Content
3. Scripts
and post to this thread.

Thanks,

John DeVight

[John DeVight]

Attached is a sample app using MVC2 and Telerik 2011 Q2.

[Garry]

Attached are the files that you requested.
I will try your new solution this morning.

[Garry]

Just tried your application and it worked.  I am thinking it is something in the application that I am working on.  I am a newbie to the MVC, jQuery and Telerik world.  So, I honestly think your solution will work.

Thanks again for the help.  I will go ahead and mark your solution as the answer I needed...

[Garry]

Noticed that your version of Telerik is newer, could that be the issue??

[John DeVight]

I'll take a look at the version of telerik that you have attached and let you know what kind of results I get...

Regards,

John DeVight

[John DeVight]

Hi Garry,

I found that using the script that I provided doesn't work with the version of telerik that you have (2010 Q2).  I'm looking into it for you now....

Regards,

John DeVight

[Garry]

Talking to my boss, we are going to upgrade to version 2011_2_712, so I wouldn't bother, unless you want to make your extensions copmatible with older versions.

Again, thanks.

[John DeVight]

No worries.

If you want to check and see if the telerik version was the issue, I've attached a sample project using telerik 2010 Q2 and provided the code below for the "PersonGrid_onLoad" function:

PersonGrid_onLoad=function (e) {
    var gridExtensions={
        enableSelect: function (enable) {
            var j=this;
            if(j.selectable!=enable) {
                var e="tr:not(.t-grouping-row,.t-detail-row)";
                var k=this.$tbody[0];
                j.selectable=enable;
                $(j.element).find('tr.t-state-selected').removeClass('t-state-selected');
                this.$tbody.undelegate(e,"click")
                this.$tbody.undelegate(e,"hover");
                if(j.selectable) {
                    this.$tbody.delegate(e,"click",function (i) {
                        if(this.parentNode==k) {
                            j.rowClick(i)
                        }
                    });
                    this.$tbody.delegate(e,"hover",function () {
                        if(this.parentNode==k) {
                            jQuery(this).toggleClass("t-state-hover")
                        }
                    });
                }
            }
        }
    };
    $.extend(true,$.telerik.grid.prototype,gridExtensions);
}

Regards,

John DeVight

[Garry]

Yep, that worked.

Thanks