Telerik grid simple example

Simple Grid Binding Example

       The following example is bind data into grid from client side program without using SQL result set.

Bind value using Javascript/jQuery

var EmpCode = "";

var virtual_result = [];

var tableView = $find("<%=Student_details.ClientID %>").get_masterTableView();

for (i = 0; i < result.length; i++) {

 var obj = new Object();

 obj.EmpCode = "Reviewer" + (i+1);

 obj.Name = result[i].Name;

 virtual_result.push(obj);   

}        

tableView.set_dataSource(virtual_result);



tableView.set_virtualItemCount(result.length);

tableView.dataBind();

Example Program

<script type="text/javascript">

var EmpCode = "";

var virtual_result = [];

var tableView = $find("<%=Student_details.ClientID %>").get_masterTableView();

for (i = 0; i < 10; i++) {

 var obj = new Object();

 obj.SNO = i;

 obj.Name = "Name "+i;

 obj.RegNo = "Register Number "+(1000+i);

 virtual_result.push(obj);   

}        

tableView.set_dataSource(virtual_result);



tableView.set_virtualItemCount(virtual_result.length);

tableView.dataBind();

</script>



<div>

<telerik:RadGrid ID="Student_details"  runat="server">                                   

<MasterTableView EnableNoRecordsTemplate="true">

 <NoRecordsTemplate>

  <div>

   There are no records to display

  </div>

 </NoRecordsTemplate>

 <Columns>

  <telerik:GridBoundColumn HeaderText="S.No" DataField="SNO">

  </telerik:GridBoundColumn>



  <telerik:GridBoundColumn HeaderText="Name List" DataField="Name">

  </telerik:GridBoundColumn>



  <telerik:GridBoundColumn HeaderText="Register Number" DataField="RegNo">

 </telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings>

 <ClientEvents OnCommand="fun_OnCommand" OnRowDataBound="fun_OnRowDataBound" />

</ClientSettings>

</telerik:RadGrid>

</div>