Control in ItemTemplate not present on new row

2 posts, 0 answers
  1. Stephen
    Stephen avatar
    2 posts
    Member since:
    Aug 2015

    Posted 26 Jun 2017 Link to this post

    I have a RadGrid with some GridTemplateColumns. I have an ItemTemplate and EditItemTemplate. In the ItemTemplate I have an <asp:CheckBox>. On page load everything is fine (pic1), but when I add a new row client-side (no postback) using the following javascript function the new row does not show the CheckBox in the ItemTemplate. The column (look at "Analytical Method Required") looks blank (pic2). The EditItemTemplate appears to work...if I click the column on that row the checkbox appears and I can set it (pic3). Then when focus leaves the column the text "true" is displayed instead of the ItemTemplate's checkbox (pic4). 

    I have tried debugging in the javascript and can't seem to get a reference to the ItemTemplate's checkbox control (using row.findElement())...it returns null.

    Anyone know how I can get the ItemTemplate's checkbox to be present when I add a new row client-side? Thanks.

    JS:

    function AddNewRowInGrid(sender, args) {      
    var grid = $find("<%= grdActivityType.ClientID %>");      
    var masterTable = grid.get_masterTableView();      
    grid.get_batchEditingManager().addNewRecord(masterTable);     }

    TemplateColumn:

    <telerik:GridTemplateColumn DataField="AnalyticalMethodRequired" UniqueName="AnalyticalMethodRequired" HeaderText="Analytical Method Required"           HeaderStyle-Width="10%" SortExpression="IGNORE_CASE actyp_anl_mth_req_yn"           ItemStyle-VerticalAlign="Top" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center">          
    <ItemTemplate>            
    <asp:CheckBox ID="chkAnalyticalMethodRequiredItemTemplate" runat="server" Checked='<%# Eval("AnalyticalMethodRequired") %>' onclick='checkBoxClicked(this, event);' />          
    </ItemTemplate>          
    <EditItemTemplate>            
    <asp:CheckBox ID="chkAnalyticalMethodRequiredEditItemTemplate" runat="server" Checked='<%# Bind("AnalyticalMethodRequired") %>' />          
    </EditItemTemplate>        
    </telerik:GridTemplateColumn>

     

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    910 posts

    Posted 29 Jun 2017 Link to this post

    Hello Stephen,

    I am sharing the answer from the support thread for convenience and better visibility from the community.

    This is expected as the control in the ItemTemplate is a server one and without a postback request to the server, it cannot be created on the client. 

    The workaround for this case is creating the HTML of the checkbox and insert it in the cell client-side.  

    Please find attached a sample project that implements such approach.

    Regards,
    Peter Milchev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top