[Solved] Grid Rebind Parameters

[Marc Flerin]

First of all, great job with the MVC grid.

I'm having a problem passing multiple paramters to the my controller using the rebind method.

Here is some sample javacript that works ok (1 rebind parameter)

 

        function BindGrid() {

            var firstNameSearchTerm = $('#FirstNameSearch').val();
            var lastNameSearchTerm = $('#LastNameSearch').val();

            var grid = $("#MyGrid").data("tGrid");

            grid.rebind({ firstNameSearchTerm: firstNameSearchTerm});
        }

When I try to pass in a second param things start to go wrong

        function BindGrid() {

            var firstNameSearchTerm = $('#FirstNameSearch').val();
            var lastNameSearchTerm = $('#LastNameSearch').val();

            var grid = $("#MyGrid").data("tGrid");

            grid.rebind({ firstNameSearchTerm: firstNameSearchTerm, lastNameSearchTerm: lastNameSearchTerm});
        }

When I use Firebug to look at the params being posted I get:  firstNameSearchTerm BilllastNameSearchTerm=Gates

Can I use a comma to separate my parameters? 
Can the rebind method take more than one parameter?  If not should I be putting all my search strings into a collection and pass that to the rebind method?

[Atanas Korchev]

Hello Marc Flerin,

This is a known issue with the rebind method. Please check this forum thread for a resolution.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Manu Sarin]

For multiple key/value pair in ajax binding the query string that is being created is not correct  . For two key/value pairs "sort" and "filter"  the below jquery  function creates a ajax url as

"/AddressBook/_Index?sort=IDfilter=foo"

instead of 

"/AddressBook/_Index?sort=ID&filter=foo"

Do you have any upadates to below telerik.grid.js file which we can use . 

telerik.grid.js

 for (var key in args) {

 var regExp = new RegExp($t.formatString('({0})=([^&]*)', key), 'g');

 if (regExp.test(this.ajaxUrl))

 this.ajaxUrl = this.ajaxUrl.replace(regExp, '$1=' + args[key]);

 else {

 var url = new $t.stringBuilder();

 url.cat(this.ajaxUrl);

 if (this.ajaxUrl.indexOf('?') < 0)

 url.cat('?');

 this.ajaxUrl = url.cat(key).cat('=').cat(args[key]).string();

 }

[Atanas Korchev]

Hello Manu Sarin,

Which version are you using? The forum thread mentioned earlier contains the fix for any version older than 2009.3.1320.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Patrick Barranis]

For anyone else seeking a fix to the same problem, the updated copy of the "rebind" method is below.  I pursued getting this resolved via a support ticket, and Atanas was extremely helpful!

If I'm not mistaken, this fix will ship with the upcoming RTW of the 2010 Q1 release.  Atanas, correct me if I'm wrong...

Fix:

rebind: function(args) {
    this.sorted = [];
    this.filterBy = '';
    this.currentPage = 1;

    $.each(this.columns, function() {
        this.order = null;
        this.filters = [];
    });

    $('.t-filter-options', this.element)
        .find('input[type="text"], select')
        .val('')
        .removeClass('t-state-error');

    for (var key in args) {
        var regExp = new RegExp($t.formatString('({0})=([^&]*)', key), 'g');
        if (regExp.test(this.ajax.selectUrl))
            this.ajax.selectUrl = this.ajax.selectUrl.replace(regExp, '$1=' + args[key]);
        else {
            var url = new $t.stringBuilder();
            url.cat(this.ajax.selectUrl);
            if (this.ajax.selectUrl.indexOf('?') < 0)
                url.cat('?');
            else
                url.cat('&');
            this.ajax.selectUrl = url.cat(key).cat('=').cat(args[key]).string();
        }
    }

    this.ajaxRequest();
}

[Atanas Korchev]

Hello Patrick Barranis,

No, this fix won't ship with Q1 2010 since the problem was discovered after we shipped.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Kamau]

The page is no longer available. Is there a new URL?

[Atanas Korchev]

Hello Kamau,

 This is a rather old thread (more than year old). Are you using the same version which is discussed here? Or you have probably hit the change in behavior of the rebind method. The latter is described here.

Best wishes,
Atanas Korchev
the Telerik team

[Kamau]

I'm using version 2010.3.1318. I guess what is not clear to me is how rebind should behave. The Telerik Grid has a refresh link/icon in it's lower left hand corner. I'm attempting to capture that click event, and call rebind(). However, rebind does not refresh the grid. By that I mean, I send in additional parameters to rebind, but i get an error (this.ajax is undefined). If i call rebind without parameters the grid seems to be refreshed with the same data, which is not what i want, as the data has been filtered on a previous request, and I now want an unfiltered view of the data. Additionally, the client side dataBind() method is always undefined. Not sure what I should do.

[Atanas Korchev]

Hello Kamau,

 Can you paste the code which you are using? It is not clear now what has gone wrong.

Greetings,
Atanas Korchev
the Telerik team

[Kamau]

Here is the code in question:

    function initGridEvents(){
        $('a.t-refresh').click(
            function(event){
             //event.preventDefault();
             //Rebind the grid
             var grid =  $("#PCPGrid").data("tGrid");
             grid.rebind({practitionerSpecialty : ''});
            }
        );
    }

In the code above, '$('a.t-refresh')' is a jquery selector to retrieve the refresh link in the lower left corner of the grid. The function is called after the grid has been already been bound with a value for practitionerSpecialty during the page load, and I am attempting to rebind the grid with the value for practitionerSpecialty cleared, so that the grid is no longer filtered by practitionerSpecialty.  I am attempting to capture the click event on the grid's refresh button and rebind manually. Perhaps there is a different approach?

After debugging in Firefox, I've noticed that rebind fails on line 721, which reads as:
                     if (regExp.test(this.ajax.selectUrl))
The failure ocurs because 'ajax' is undefined. 'this' refers to the grid.

[Atanas Korchev]

Hello Kamau,

 Could it be that your grid is not ajax bound? The rebind method works for ajax bound grids only. 

Regards,
Atanas Korchev
the Telerik team

[Kamau]

The grid is definitely Ajax bound. I've attached the code to this message, but here is the grid definition:

@(
 Html.Telerik().Grid(Model.PractitionerDisplayItems).Name("PractitionersGrid").Pageable(pager => pager.Total(Model.TotalPractitionerRecords)).Sortable()
             .DataBinding(dataBinding => dataBinding.Ajax().Select("PractitionerGridAjaxBinding", "MemberProvider"))
             .Columns(columns =>
             {
                 columns.Bound(prac => prac.PractitionerId).ClientTemplate("<input type='checkbox' name='chkPractitioner' value='<#= PractitionerId #>' onclick='handleProviderSelected(this)' />").Width(45).HeaderTemplate(" ");
                 columns.Bound(prac => prac.LastName).ClientTemplate("<#= LastName #>");
                 columns.Bound(prac => prac.FirstName);
                 columns.Bound(prac => prac.NPI);
                 columns.Bound(prac => prac.SpecialtyName).HeaderTemplate("Specialty");
                 columns.Bound(prac => prac.Address1).HeaderTemplate("Address");
                 columns.Bound(prac => prac.City);
                 columns.Bound(prac => prac.StateCode).HeaderTemplate("State").Width(25);
                 columns.Bound(prac => prac.PostalCode).HeaderTemplate("Zip Code").Width(25);
                 columns.Bound(prac => prac.Phone).Width("55");
             }).Selectable().ClientEvents(events => events.OnRowSelect("handleOnRowSelect"))
)

[Atanas Korchev]

Hi Kamau,

 According to your code the PCPGrid is not ajax bound:

@(Html.Telerik().Grid(Model.PCP).Name("PCPGrid")
.Columns(columns =>
{
    columns.Bound(prac => prac.DisplayName).HeaderTemplate("Name");
    columns.Bound(prac => prac.NPI).HeaderTemplate("NPI");
    columns.Bound(prac => prac.SpecialtyName).HeaderTemplate("Specialty");
    columns.Bound(prac => prac.DisplayAddress).HeaderTemplate("Address");
    columns.Bound(prac => prac.Phone).HeaderTemplate("Phone");
}
).ClientEvents(events => events.OnDataBound("PCPGRIDDatabinding")))

Your JavaScript code calls the rebind method of the PCPGrid:
function initGridEvents(){
        $('a.t-refresh').click(
            function(event){
             //event.preventDefault();
             //Rebind the grid
             var grid =  $("#PCPGrid").data("tGrid");
             grid.rebind({practitionerSpecialty : ''});
            }
        );
    }

Greetings,
Atanas Korchev
the Telerik team

[venky]

This rebind workaround to pass additional parameters works great when fetching data for the mvc grid. How to pass these additional parameters when the grid updates the data. I am using the grid in batch editing mode.

[Rosen]

Hello Venky,

You may use onSave client-side event to extend the send values with additional value(s) : 

        function onSave(e) {
            e.values = $.extend(e.values, {foo: "bar"});
        }

Best wishes,
Rosen
the Telerik team

[venky]

Hello Rosen,
Thank you for the reply. Adding values in OnSave client event works and I get the values across to the controller update method when the grid is not in the Batch Editing mode. Any idea how the same can be achieved for Batch Editing updates?
Thanks, Venky

[Rosen]

Hi Venky,

 In such case you should use SubmitChanges event instead.

Regards,
Rosen
the Telerik team

[Mahesh]

Hi,

When I want to rebind the grid, DO i need to create 2 overloaded "indexajax" methods,one with empty parameters and another with the arguments?????????????