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. 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"}]