Ajax binding performing full page refresh regardless

[Colin]

I've got the MVC grid (MVC 2 / Telerik 2012.2.607) and I'm trying to make the paging work without having to perform a full page refresh every time. I've searched quite a bit to find an answer and I'm not really getting anywhere.

<% Html.Telerik().Grid<StagedProductGroupListItemViewModel>()

    .Name("List")

    .DataBinding(dataBinding => dataBinding

        .Ajax()

        .OperationMode(GridOperationMode.Client)

        .Select("_DraftProductsListAjax", "ProductGroupList"))

    .Columns(columns =>

                    {

                        columns.Bound(o => o.ProductCode)

                            .Title(Html.LocalisedLabel("label_pgto_product_code"));

 

                        columns.Bound(o => o.Products)

                            .Title(Html.LocalisedLabel("label_pgto_product"));

 

                        columns.Bound(o => o.Brand)

                            .Title(Html.LocalisedLabel("label_pgto_brand"));

 

                        columns.Bound(o => o.ProductType)

                            .Title(Html.LocalisedLabel("label_pgto_product_type"));

 

                        columns.Bound(o => o.Collection)

                            .Title(Html.LocalisedLabel("label_pgto_collection"));

 

                        columns.Bound(o => o.DateCreated)

                            .Title(Html.LocalisedLabel("label_pgto_date_created"));

 

                        columns.Bound(o => o.DateLastEdited)

                            .Title(Html.LocalisedLabel("label_pgto_date_last_edited"));

 

                        columns.Bound(o => o.LastEditedBy)

                            .Title(Html.LocalisedLabel("label_pgto_last_edited_user"));

                    })

    .Pageable(paging => paging.Position(GridPagerPosition.Top))

    .Render();

%>

When the page is first rendered the controller action to handle the Ajax calls is called and the grid is shown. Any attempt to use the paging controls on the grid fail. The URL gets a # on the end of it and that's all that I can see happening. Chrome's network tab shows no activity.

On my master page I have the line:

    <%= Html.Telerik().ScriptRegistrar().jQuery(false) %>

So, I know it isn't that common mistake. Also, there is at least one ajax call being made when the grid is initially displayed.

However, I am completely stumped. I can get the page as a whole to refresh and paging works fine. If I attempt to use Ajax so I'm only refreshing the bits I need then it doesn't do anything.

Is there anything obvious that I've missed?

[Colin]

I'm still at a loss as to explain what's going wrong. I created a brand new project and copied and pasted everything across so it was isolated and it worked. I have no idea why it worked, like I said, I copied and pasted everything across.

So, I'm thinking something else on the page must be interfering, but I cannot tell what that could be. I looked in the console on Chrome and there is nothing there. I was hoping for some logging message to tell me that some operation was attempted but failed. Is there anything like that I could turn on?

[Colin]

Okay, so I changed a line in our master page to this:

    <%= Html.Telerik().ScriptRegistrar().jQuery(true) %>

It was false previously.

Now, according to the documentation this ensures that jQuery is included. However, I already had jQUery 1.7.2 included before adding any Telerik controls to the project, so I don't understand why it needs two copies of jQuery. I looked at the network tab in Chrome and it is now downloading our reference to jQuery 1.7.2 and then it does its own version of jQuery 1.7.1 later on when the above line is set to true, but only our reference to jQuery 1.7.2 when sent to false.

So, now I have to versions of jQuery being loaded into the page, but it works. Surely 1.7.1 to 1.7.2 is just a bug fix release. Why would it cause the Grid to fail?

[Colin]

I found out what it was. The site used an older version of jQuery Validate which was incompatible with the Grid control to some extent.

We were using jQuery.validate v1.6 which caused the issue. When I upgraded that to jQuery.validate v1.8 (the same that the Telerik MVC ships with) then it started working again.