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

Bind Web API Json to Radgrid in client side

1 Answer 170 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Naren
Top achievements
Rank 1
Naren asked on 17 Oct 2016, 05:06 AM

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

Sort by
0
Konstantin Dikov
Telerik team
answered on 19 Oct 2016, 11:46 AM
Hi Naren,

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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Grid
Asked by
Naren
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or