client-side binding: record count is always 11

[Matt DiPietro]

I'm experiencing an issue that was that is similar to the issue found at https://www.telerik.com/forums/client-side-service-binding-11-empty-rows. I have a radgrid that I'm binding to JSON results on the client-side. Regardless of the number of records, the record count always reads 11 items in 2 pages.

I've followed all of the recommendations in the previous issue, but I don't think there was ever any actual resolution to that problem.

Here's what I have, and a screenshot to show the symptoms:

Markup:

<div class="tab-pane row in active" id="selected">
  <div class="col-md-12">
    <telerik:RadAjaxLoadingPanel runat="server" Skin="Default" ID="loadPanel" />
    <sg:IPGrid runat="server" ID="rgSelected">
      <MasterTableView CommandItemDisplay="Top" AutoGenerateColumns="false"  AllowPaging="True">
        <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="True" Position="Bottom" />
        <Columns>
          <telerik:GridTemplateColumn HeaderStyle-Width="50px">
            <ItemTemplate>
              <asp:Button runat="server" ID="Button1" Text="Add" CssClass="btn btn-sm" />
            </ItemTemplate>
          </telerik:GridTemplateColumn>
          <telerik:GridBoundColumn DataField="Title" HeaderText="Title" HeaderStyle-Width="450px" />
          <telerik:GridBoundColumn DataField="AssignedTo" HeaderText="Assigned To" />
          <telerik:GridBoundColumn DataField="HotfixOwner" HeaderText ="Hotfix Owner" />
          <telerik:GridBoundColumn DataField="Target Release" HeaderText="Target Release" />
          <telerik:GridBoundColumn DataField="Target Date" HeaderText="Target Date" DataFormatString="{0:yyyy-MM-dd}" />
        </Columns>
      </MasterTableView>
      <ClientSettings>
        <ClientEvents OnCommand="function() {}" OnGridCreated="OnGridCreated" OnDataBound="OnDataBound" />
      </ClientSettings>
    </sg:IPGrid>
  </div>
</div>

 

Javascript:

function OnGridCreated(sender, args) {
  $find('<%= loadPanel.ClientID%>').show('selected');
}
function OnDataBound(sender, args) {
  $find('<%= loadPanel.ClientID%>').hide('selected');
}
$(function () {
  $.ajax({
    type: "POST",
    url: "/pageinformation/styleguide.api/internaldocgeneratorws.asmx/getworkitemcollection",
    data: '{ workItems: ' + JSON.stringify(deployment.WorkItems) + ' }',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    cache: true
  }).done(function (data) {
    var tableView = $find('<%= rgSelected.ClientID %>').get_masterTableView();
    tableView.set_dataSource(JSON.parse(data.d));
    tableView.dataBind();
  }).fail(function (jqXHR, textStatus) {
    // If there is no communication between the server, show an error
    $find('<%= MessageBox.ClientID %>').addError(jqXHR.responseJSON.Message, false);
  });
});

[Marin Bratanov]

Hello Matt,

If you will be using client binding, I'd recommend you consider the Kendo UI for jQuery grid, as it is desgined for client-side rendering and binding, so it will provide you with more flexibility: https://demos.telerik.com/kendo-ui/grid/index.

If you will be binding the grid to a JSON literal, I recommend you follow this demo: https://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/client-side/programmatic/defaultcs.aspx. The key points:

• you need the total count of items and to set it to the grid through the  tableView.set_virtualItemCount method
• you need to put data in controls inside templates in the RowDataBound event
• if you will be using filtering, you need to handle that through the data source by using the OnCommand event

I would also recommend firing the data request in the Sys.Application.Load event to ensure it will try to use the grid in its promise after it has been created.

Regards,
Marin Bratanov
Progress Telerik