Client Side binding of telerik radgrid not updating after databind

Question

I'm trying to bind a radgrid using the client side api.

I issue a call to javascript function DoUpdate(sbiId)

function DoUpdate(sbiId) {
    var input = '{"SbiId":"' + sbiId+ '"}';
    var dataSource;

    $.ajax({ url: "http://localhost/Meta.WebService/DataService.svc/GetData",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: input,
        dataType: "json",
        success: function(data) {
            updateGrid(data);
        }
    });
}

function updateGrid(result) {
    var mtv = RadGridSprintBackLogItemDetailsInstance().get_masterTableView();
    mtv.set_dataSource(result);
    mtv.dataBind();
}

The ajax call returns seemingly correct JSON data; here is the response content per fiddler:

{"d":[{"_type":"SBIRevision:#Meta.Scrum","AssignedTo":"Roger Ng","ChangedBy":"Bob Hung","ChangedDate":"8/8/2011 3:48:31 PM","Description":"","State":"Not Done","Title":"MARS Unit Tests","WorkEstimate":"50","WorkRemaining":"50"},{"_type":"SBIRevision:#Meta.Scrum","AssignedTo":"Roger Ng","ChangedBy":"Roger Ng","ChangedDate":"8/8/2011 5:12:46 PM","Description":"","State":"In Progress","Title":"MARS Unit Tests","WorkEstimate":"50","WorkRemaining":"50"},{"_type":"SBIRevision:#Meta.Scrum","AssignedTo":"Roger Ng","ChangedBy":"Roger Ng","ChangedDate":"8/8/2011 5:13:39 PM","Description":"","State":"In Progress","Title":"MARS Unit Tests","WorkEstimate":"50","WorkRemaining":"50"},{"_type":"SBIRevision:#Meta.Scrum","AssignedTo":"Roger Ng","ChangedBy":"Roger Ng","ChangedDate":"8/8/2011 5:14:25 PM","Description":"Ran into...pointing to the wrong build service","State":"In Progress","Title":"MARS Unit Tests","WorkEstimate":"50","WorkRemaining":"50"},{"_type":"SBIRevision:#Meta.Scrum","AssignedTo":"Roger Ng","ChangedBy":"Bob Hung","ChangedDate":"8/10/2011 10:59:09 AM","Description":"Ran into...pointing to the wrong build service","State":"In Progress","Title":"MARS Unit Tests","WorkEstimate":"50","WorkRemaining":"50"},{"_type":"SBIRevision:#Meta.Scrum","AssignedTo":"Roger Ng","ChangedBy":"Roger Ng","ChangedDate":"8/11/2011 12:04:09 PM","Description":"Ran into...pointing to the wrong build service","State":"Done","Title":"MARS Unit Tests","WorkEstimate":"50","WorkRemaining":"50"}]}

Here is how I declare my radgrid on the aspx page

<telerik:RadGrid runat="server" ID="RadGridSprintBackLogItemDetails" EnableViewState="false" EnableEmbeddedSkins="false" Skin="Meta">
    <MasterTableView AutoGenerateColumns="false" EnableNoRecordsTemplate="true" ShowHeadersWhenNoRecords="true">
        <ItemStyle Wrap="false"></ItemStyle>
        <NoRecordsTemplate>
            <div style="margin-left: 5px;">
                Select a Sprint Backlog Item (SBI) from above to view its Revisions</div>
        </NoRecordsTemplate>
        <Columns>
            <telerik:GridBoundColumn DataField="ChangedDate" HeaderText="Changed Date">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Title" HeaderText="Title">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Description" HeaderText="Description">
            <ItemStyle Wrap="false"></ItemStyle>
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="AssignedTo" HeaderText="Assigned To">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="WorkEstimate" HeaderText="Work Estimate">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="WorkRemaining" HeaderText="Work Remaining">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="State" HeaderText="State">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ChangedBy" HeaderText="Changed By">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Oddly enough, after the data is returned and bound, the no records template appears.

Answer 1

Change your updateGrid function as follows (use result.d for binding):

function updateGrid(result) {
  var mtv = RadGridSprintBackLogItemDetailsInstance().get_masterTableView();
  mtv.set_dataSource(result.d);
  mtv.dataBind(); 
}

Hope, this helps.

Answer 2

When binding with set_dataSource(), you need to pass the actual array of data objects. The jQuery result you are getting contains the data array in a field named .d. This is why you need to use result.d.

On a side note, did you know that RadGrid can bind to WCF Web Services automatically? Refer to RadGrid's .NET 3.5 Client-Side DataBinding demo for a live example. Service settings are specified right in RadGrid's definition through the markup. RadGrid then automatically connects to the data service, retrieves the result and databinds.