Bind Web API Json to Radgrid in client side

2 posts, 0 answers
  1. Naren
    Naren avatar
    1 posts
    Member since:
    Oct 2016

    Posted 17 Oct Link to this post

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

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 19 Oct Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top