Hi Everyone,
I am new to Telerik world and I am very much impressed with telerik controls. My requirement is to bind web API json data to radgrid in client side(wanted to implement paging and sorting also in client side).And also when I click on my first column link button, popup window should show the selected row data
Below is my code.
Somehow data is binding to radgrid, but when I click on next page in paging nothing is showing(radgrid not displaying). And I am stuck in pass the selected row data to popup(rad window)
Please help me on this.
================================
jsonRadgridBind.aspx
================================
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="jsonRadgridBind.aspx.vb" Inherits="defaultvb.jsonRadgridBind" %>
<!DOCTYPE html>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<telerik:RadCodeBlock ID="AnnualProcessAdmin_RadCodeBlock" runat="server">
<style type="text/css">
.rgRow, .rgAltRow {
height: 40px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
jQuery.support.cors = true;
$.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
dataType: 'JSON',
url: 'http://localhost:5000/api/spaclasslegend',
success: function (result) {
GridData = result;
if (GridData.length > 0) {
var tableView = $find("<%=ClassGrid.ClientID %>").get_masterTableView();
tableView.set_dataSource(GridData);
tableView.dataBind();
}
},
error: function () {
alert('Error on binding the data');
}
});
});
</script>
</telerik:RadCodeBlock>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<div class="demo-container no-bg">
<div id="grid">
<telerik:RadAjaxPanel ID="ClassSearchRadAjaxPanel" runat="server">
<telerik:RadWindowManager ID="ClassDetailRadWindowManager" runat="server" SkinID="radWindowManager"></telerik:RadWindowManager>
<telerik:RadWindow ID="ClassDetailModal" SkinID="radWindowModal" runat="server" Width="990" Height="700" />
<telerik:RadGrid ID="ClassGrid" runat="server" SkinID="basicRadGrid"
EnableLinqExpressions="false" ShowFooter="false" PageSize="3" AllowPaging="true" PagerStyle-AlwaysVisible="true"
AllowFilteringByColumn="true" FilterItemStyle-HorizontalAlign="Left"
Visible="true">
<ClientSettings EnablePostBackOnRowClick="true">
<ClientEvents OnCommand="function(){}" />
<Scrolling FrozenColumnsCount="0" />
</ClientSettings>
<FilterMenu />
<MasterTableView
ClientDataKeyNames="atrSpaCityDistrictId,CityDistrict,legend,classCode,isActive" DataKeyNames="atrSpaCityDistrictId,CityDistrict,legend,classCode,isActive">
<CommandItemSettings ShowAddNewRecordButton="false" ShowCancelChangesButton="false" ShowRefreshButton="false" ShowExportToExcelButton="true" />
<Columns>
<telerik:GridTemplateColumn DataField="CityDistrict" HeaderText="City/District" UniqueName="CityDistrict">
<ItemTemplate>
<asp:LinkButton ID="lnkCityDistrict" runat="server"></asp:LinkButton>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="legend" HeaderText="legend" ColumnEditorID="GridTextBoxEditor">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="classCode" HeaderText="classCode" ReadOnly="true">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="isActive" HeaderText="isActive" ColumnEditorID="GridTextBoxEditor">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn DataField="atrSpaCityDistrictId" HeaderText="atrSpaCityDistrictId" UniqueName="atrSpaCityDistrictId" Display="false">
<ItemTemplate>
<asp:Label runat="server" ID="lblId"></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadAjaxPanel>
</div>
</div>
</form>
</body>
</html>
===========================
Json data
===========================
[{"classDesc":"SIDEWALK, DRIVEWAY, CURB","classCode":"EH","legend":"017","isActive":"Y","atrSpaCityDistrictId":"00D17209F8F25F6D4A00011302","atrSpaCitieDistrict":{"cityDistrict":"","isActive":"1","atrSpaClassLegends":null,"id":"00D17209F8F25F6D4A00011302"},"id":"00D1748B8DA0AB0A7400011202"},
{"classDesc":"SIDEWALK, DRIVEWAY, CURB ","classCode":"EH","legend":"017","isActive":"Y","atrSpaCityDistrictId":"00D17209F8F25F6D4A00011302","atrSpaCitieDistrict":{"cityDistrict":"","isActive":"1","atrSpaClassLegends":null,"id":"00D17209F8F25F6D4A00011302"},"id":"00D1748B8DA0AD8BCA00011202"},
{"classDesc":"REFUSE SERVICE ","classCode":"EG","legend":"186","isActive":"Y","atrSpaCityDistrictId":"00D17209F8F25F6D4A00011302","atrSpaCitieDistrict":{"cityDistrict":"","isActive":"1","atrSpaClassLegends":null,"id":"00D17209F8F25F6D4A00011302"},"id":"00D1748B8DA0A0B35200011202"}]
1 Answer, 1 is accepted
For programmatic client-side binding you could take a look at the following online demo, where you will see how the data operations are handled:
You can also take a look at the client-side binding through the RadClientDataSource control, which will handle all operations internally:
As for the popup, can you please elaborate if the popup will be used for displaying the data only or you have some other requirement?
Regards,
Konstantin Dikov
Telerik by Progress