Grouping Error With Local DataSource

[Matt]

Hi All,

I am binding a Grid to a local DataSource.  It is working great UNTIL I add the groupable: true property to the Grid config.  Once I do that I get the following error in Firebug:

Uncaught TypeError: Cannot call method 'replace' of undefined

d.extend._Deferred.f.resolveWithj

v

d.support.ajax.d.ajaxTransport.send.c

The error suggests that I am trying to use an Ajax transport, but I never specify that.  Do I need to somehow specify a local datasource implicitly?

I am getting this error when I init the grid, before I add data to my datasource.  Everything else works really well (sorting, row templates, etc).

Here is my DataSource:

$.xxxx.voice.localData.agentHGDS = new kendo.data.DataSource({

    data: $.xxxx.voice.localData.agentHGData /* This is my data array*/

});

Here is my Grid:

var rowTemplate = "<tr class='s#= HGInfo.CurrentState #'>" +

        "<td>${ AgentInfo.CSLAgentId }</td>" +

        "<td>${ AgentInfo.CSLAgentName }</td>" +

        "<td>${ HGInfo.Number }</td>" +

        "<td>${ $.xxxx.utils.getCSLStateDisplay(HGInfo.CurrentState) }</td>" +

        "<td>${ $.xxxx.utils.formatJSONTimeCasual(HGInfo.CurrentStateDateTime) }</td>" +

        "<td>${ HGInfo.GroupCalls }</td>" +

        "<td>${ AgentInfo.OutboundCalls }</td>" +

        "<td>${ HGInfo.OpportunitiesMissed }</td>" +

        "</tr>";

 

 

$("#grid-id").kendoGrid({

    dataSource: $.xxx.voice.localData.agentHGDS,

    sortable: { mode: "multiple" },

    height: 250,

    groupable: true, /* if I take this line out, the error goes away and all is right with the world */

    rowTemplate: rowTemplate,

    columns: [{ field: "AgentInfo.CSLAgentId", title: "AgentId", width: 20 },

          { field: "AgentInfo.CSLAgentName", title: "AgentName", width: 20 },

          { field: "HGInfo.Number", title: "HuntGroup", width: 20 },

          { field: 'aaa', title: "State", width: 20 },

          { field: "HGInfo.CurrentStateDateTime", title: "StateTime", width: 20 },

          { field: "HGInfo.GroupCalls", title: "# GroupCalls", width: 20 },

          { field: "AgentInfo.OutboundCalls", title: "# OutboundExt", width: 20 },

          { field: "HGInfo.OpportunitiesMissed", title: "# OppMissed", width: 20} ]

});

Any ideas?  Is it data related (data values I mean).

[Matt]

Just to close the loop on this - it was a jQuery version issue.

I was using jQuery 1.5.1 (because the Telerik MVC controls were not yet working fully with 1.7.1).  I updated my jQuery to 1.7.1 and updated my Telerik MVC Controls to 2011.3.1306 and all is well.