RadGrid Client-Side DataBinding

1 Answer 135 Views
Grid
Fred
Top achievements
Rank 2
Iron
Iron
Fred asked on 02 Nov 2022, 02:35 PM

I'm having issues with attempting to use client-side databinding on a Grid (Version 2022 R2) to a simple JSON formatted string as described in the documentation.  The issue I'm having is that the MasterTableView is not exposed to the client and is always null.

Thanks for any help. 

Grid Markup:

 <telerik:RadGrid ID="GridDiag" runat="server" AutoGenerateColumns="false" Width="100%" Height="95%" AllowPaging="false" ShowGroupPanel="false" EnableViewState="false">
      <ClientSettings Scrolling-AllowScroll="true">   
          <Resizing AllowRowResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="false" AllowColumnResize="True"></Resizing>
       </ClientSettings>
   <MasterTableView Name="Diags" HeaderStyle-Font-Bold="true" HeaderStyle-Font-Size="9pt" HeaderStyle-Width="200px" ItemStyle-Font-Size="9pt" Visible="true">
     <Columns>
       <telerik:GridBoundColumn DataField="UM_Row_ID" UniqueName="UM_Row_ID" DataType="System.Int32" Visible="false">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="Claim_Number" UniqueName="Claim_Number" DataType="System.String" Visible="false">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="Diag_Number" UniqueName="Diag_Number" DataType="System.Int32" HeaderText="Sequence">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="Diag_Code" UniqueName="Diag_Code" DataType="System.String"HeaderText="Code">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="Description" UniqueName="Description" DataType="System.String" HeaderText="Description">
       </telerik:GridBoundColumn>
       <telerik:GridBoundColumn DataField="Type" UniqueName="Type" DataType="System.String" HeaderText="Type">
       </telerik:GridBoundColumn> 
     </Columns>
   </MasterTableView>
 </telerik:RadGrid>

JS:

 function GetdiagGrid(recordid, claimid) {
            var source = document.getElementById("<%=hdnSource.ClientID%>").value;
            PageMethods.GetClaimDiagnosis(source, recordid, claimid, onSucsess, onFailure);

            function onSucsess(response) {
                var dxGrid = $find("<%=GridDiag.ClientID%>");
                var masterView = dxGrid.get_masterTableView();
                //masterView returns null value code errors on next line..
                masterView.set_dataSource(response);
                masterView.dataBind();
                
            }

1 Answer, 1 is accepted

Sort by
0
Accepted
Attila Antal
Telerik team
answered on 07 Nov 2022, 09:03 AM

Hello Fred,

When binding data to Grid on the client side using the simple data binding technique (DataSource + DataBind) you will need to attach an event listener for the OnCommand event of the Grid. See Client-side Binding

<telerik:RadGrid ID="RadGrid1" runat="server">
    <ClientSettings>
        <ClientEvents OnCommand="function(){}" />
    </ClientSettings>
</telerik:RadGrid>

 

Although, I highly recommend using the approach of Binding the Grid via a ClientDataSource control, for that supports more functionalities, see Integration with RadGrid

 

I hope this will prove helpful.

 

Regards,
Attila Antal
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Fred
Top achievements
Rank 2
Iron
Iron
commented on 08 Nov 2022, 05:39 PM

Thank you for your quick response Attilia.

I had a feeling there was something I was overlooking.

 

 

 

 
Tags
Grid
Asked by
Fred
Top achievements
Rank 2
Iron
Iron
Answers by
Attila Antal
Telerik team
Share this question
or