This is a migrated thread and some comments may be shown as answers.

Radgrid client side data binding issue

0 Answers 72 Views

Grid

This is a migrated thread and some comments may be shown as answers.

diep asked on 29 May 2017, 10:38 AM

I am trying to make an example about Client side binding. I have 18 data objects and I set page size of grid to 18 but the grid just shows 11 rows on browsers. I don't know what I did wrong. Please give me your advice.

1.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 <br

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><

br> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> 

<form id="form1" runat="server"> 

<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> 

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> 

<script type="text/javascript"> 

function pageLoad(sender, args) { var tableView = $find("<%= cartRadGrid1.ClientID %>").get_masterTableView(); var data = [ { "RecordID": 1, "Manufacturer": "IBM", "Productname": "foo185", "Quantity": 4 }, { "RecordID": 2, "Manufacturer": "MSFT", "Productname": "bar215", "Quantity": 8 }, { "RecordID": 3, "Manufacturer": "UHU", "Productname": "upi235", "Quantity": 12 }, { "RecordID": 4, "Manufacturer": "IBM", "Productname": "foo185", "Quantity": 4 }, { "RecordID": 5, "Manufacturer": "MSFT", "Productname": "bar215", "Quantity": 8 }, { "RecordID": 6, "Manufacturer": "UHU", "Productname": "upi235", "Quantity": 12 }, { "RecordID": 7, "Manufacturer": "IBM", "Productname": "foo185", "Quantity": 4 }, { "RecordID": 8, "Manufacturer": "MSFT", "Productname": "bar215", "Quantity": 8 }, { "RecordID": 9, "Manufacturer": "UHU", "Productname": "upi235", "Quantity": 12 }, { "RecordID": 10, "Manufacturer": "IBM", "Productname": "foo185", "Quantity": 4 }, { "RecordID": 11, "Manufacturer": "MSFT", "Productname": "bar215", "Quantity": 8 }, { "RecordID": 12, "Manufacturer": "UHU", "Productname": "upi235", "Quantity": 12 }, { "RecordID": 13, "Manufacturer": "IBM", "Productname": "foo185", "Quantity": 4 }, { "RecordID": 14, "Manufacturer": "MSFT", "Productname": "bar215", "Quantity": 8 }, { "RecordID": 15, "Manufacturer": "UHU", "Productname": "upi235", "Quantity": 12 }, { "RecordID": 16, "Manufacturer": "IBM", "Productname": "foo185", "Quantity": 4 }, { "RecordID": 17, "Manufacturer": "MSFT", "Productname": "bar215", "Quantity": 8 }, { "RecordID": 18, "Manufacturer": "UHU", "Productname": "upi235", "Quantity": 12 } ]; tableView.set_dataSource(data); tableView.dataBind(); } function rowDataBound(sender, args) { var gridItem = args.get_item(); var record = args.get_dataItem(); var templateCell = gridItem.get_cell("TemplateColumn"); $get("Manufacturer", templateCell).innerHTML = record.Manufacturer; $get("Productname", templateCell).innerHTML = record.Productname; var editCell = gridItem.get_cell("TemplateEditColumn"); $get("Quantity", editCell).innerHTML = record.Quantity; } </script> </telerik:RadScriptBlock> <div> 

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="100%" Width="100%"> <telerik:RadGrid ID="cartRadGrid1"  runat="server" AllowPaging="True"> <PagerStyle Mode="NumericPages" /> <MasterTableView AutoGenerateColumns="False" DataKeyNames="RecordID" ClientDataKeyNames="RecordID" Width="100%" CommandItemDisplay="None" PageSize="18"> <Columns> <telerik:GridBoundColumn DataField="RecordID" HeaderText="RecordID" ReadOnly="True" SortExpression="RecordID" UniqueName="RecordID" Visible="false"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="ARAGRNR" HeaderText="ARAGRNR" SortExpression="ARAGRNR" UniqueName="ARAGRNR" Visible="false"> </telerik:GridBoundColumn> <telerik:GridTemplateColumn UniqueName="TemplateColumn"> <HeaderTemplate></HeaderTemplate> <ItemTemplate> <span id="Manufacturer"> <br /> <span id="Productname"> </ItemTemplate> </telerik:GridTemplateColumn> <telerik:GridTemplateColumn UniqueName="TemplateEditColumn"> <HeaderTemplate></HeaderTemplate> <ItemTemplate> <span id="Quantity"> <asp:HyperLink ID="EditLink" runat="server" Text="Edit"></asp:HyperLink> </ItemTemplate> </telerik:GridTemplateColumn> </Columns> <CommandItemTemplate> <a href="#" onclick="return false;">Add New Record</a> </CommandItemTemplate> </MasterTableView> <ClientSettings> <Selecting AllowRowSelect="true" /> <ClientEvents OnRowDataBound="rowDataBound" OnCommand="function() {}" /> </ClientSettings> </telerik:RadGrid> </telerik:RadAjaxPanel> </div> </form> </body> </html>

Radgrid client side data binding issue

No answers yet. Maybe you can help?