Find controls in template column of radgrid on client side

5 posts, 0 answers
  1. Lokesh
    Lokesh avatar
    89 posts
    Member since:
    Jul 2012

    Posted 22 Aug 2011 Link to this post

    Hi Team,
    I have a radgrid with some TemplateColumns in it.
    Two such template columns have Raddatepicket in EditItemTemplate.
    I want to find those two raddatepickers (which are in two different columns) and fire the Selected Datechanged client side event.
    How can I do this??
    Please help..

    Regards,
    Lok..
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 Aug 2011 Link to this post

    Hello Lokesh,

    You can directly attach the ClientEvent OnDateSelected from aspx and access the DatePicker using the two default parameters:sender and args. Here is the sample code that I tried which worked as expected.

    aspx:
    <telerik:GridTemplateColumn>
          <EditItemTemplate>
         <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
        <ClientEvents  OnDateSelected="OnDateSelected"/>
        </telerik:RadDatePicker>
         </EditItemTemplate>
    </telerik:GridTemplateColumn>

    Javascript:
    function OnDateSelected(sender,args)
     {
        alert(sender.get_selectedDate());
     }
          

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lokesh
    Lokesh avatar
    89 posts
    Member since:
    Jul 2012

    Posted 22 Aug 2011 Link to this post

    Hi Princy,
    Thanks for your reply.
    I want to find those two raddatepickers in two columns so that I can perform some operations on dates.
    How can I do this??
  5. Lokesh
    Lokesh avatar
    89 posts
    Member since:
    Jul 2012

    Posted 23 Aug 2011 Link to this post

    Hey Princy,
    I found those raddatepickers on client side as follows :

    var

     

    masterTable = $find("ctl00_MainContentPlaceHolder_rgContarctItems").get_masterTableView();

     

     

    var StartDate = masterTable.get_dataItems()[0].findControl('rdServiceStartDate');

     

     

    var EndDate = masterTable.get_dataItems()[0].findControl('rdServiceEndDate');

    This way I get the controls and their dates also.
    But I have another TemplateColumn with asp-textbox in EditeItemTemplate.
    I am not able to find it using above code...
    Could you please help me at this..

    This is what my grid looks like..

     

    <telerik:RadGrid ID="rgContarctItems" runat="server" PageSize="5" AllowPaging="true"
                                                        OnDeleteCommand="RGrid_ContarctItems_DeleteCommand" OnItemCommand="RGrid_ContarctItems_ItemCommand"
                                                        OnNeedDataSource="RGrid_ContarctItems_NeedDataSource" OnUpdateCommand="RGrid_ContarctItems_UpdateCommand"
                                                        OnItemDataBound="RGrid_ContarctItems_ItemDataBound" OnItemCreated="RGrid_ContarctItems_ItemCreated">
                                                        <MasterTableView EditMode="InPlace" AutoGenerateColumns="False">
                                                            <Columns>
                                                                <telerik:GridBoundColumn UniqueName="ContractID" HeaderText="ContractID" DataField="ContractID"
                                                                    Display="false">
                                                                </telerik:GridBoundColumn>
                                                                <telerik:GridBoundColumn DataField="ContractItemID" HeaderText="Contract Item ID"
                                                                    UniqueName="ContractItemID" Visible="False">
                                                                    <ItemStyle HorizontalAlign="Left" />
                                                                </telerik:GridBoundColumn>
    <telerik:GridTemplateColumn HeaderText="Service Start Date" UniqueName="TemplateColumn_ServiceStartDate" DataField="ServiceStartDate"
                                                                    DataType="system.datetime" SortExpression="ServiceStartDate" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo">
                                                                    <ItemTemplate>
                                                                        <asp:Label ID="lblServiceStartDate" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"ServiceStartDate","{0:d}") %>'>
                                                                        </asp:Label
                                                                    </ItemTemplate>
                                                                    <EditItemTemplate>
                                                                        <telerik:RadDatePicker ID="rdServiceStartDate" runat="server" MaxDate="9999-12-31"
                                                                            OnSelectedDateChanged="SetContractItemTenure" AutoPostBack="false" MinDate="1999-01-01"
                                                                            DbSelectedDate='<%# DataBinder.Eval(Container.DataItem,"ServiceStartDate") %>'>
                                                                            <ClientEvents  OnDateSelected="OnDateSelected"/>
                                                                        </telerik:RadDatePicker>
                                                                    </EditItemTemplate>
                                                                    <ItemStyle />
                                                                    <HeaderStyle HorizontalAlign="Center" Width="10%" />
                                                                    <ItemStyle Width="10%" />
                                                                </telerik:GridTemplateColumn>
                                                                <telerik:GridTemplateColumn HeaderText="Service End Date" UniqueName="TemplateColumn_ServiceEndDate" DataField="ServiceEndDate"
                                                                    DataType="system.datetime" SortExpression="ServiceEndDate" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo"
                                                                    <ItemTemplate>
                                                                        <asp:Label ID="lblServiceEndDate" runat="server" Height="20px" Text='<%# DataBinder.Eval(Container.DataItem,"ServiceEndDate","{0:d}") %>'>
                                                                        </asp:Label
                                                                    </ItemTemplate>
                                                                    <EditItemTemplate>
                                                                        <telerik:RadDatePicker ID="rdServiceEndDate" runat="server" MaxDate="9999-12-31"
                                                                            OnSelectedDateChanged="SetContractItemTenure" AutoPostBack="false" MinDate="1999-01-01"
                                                                            DbSelectedDate='<%# DataBinder.Eval(Container.DataItem,"ServiceEndDate") %>'>
                                                                            <ClientEvents  OnDateSelected="OnDateSelected"/>
                                                                        </telerik:RadDatePicker>
                                                                    </EditItemTemplate>
                                                                    <ItemStyle />
                                                                    <HeaderStyle HorizontalAlign="Center" Width="10%" />
                                                                    <ItemStyle Width="10%" />
                                                                </telerik:GridTemplateColumn>
                                                                <telerik:GridTemplateColumn HeaderText="Tenure" UniqueName="Tenure" DataType="System.Int32" DataField="Tenure" 
                                                                    AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo">
                                                                    <ItemTemplate>
                                                                        <asp:Label ID="lblContractItemTenure" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Tenure") %>'>                                                                    
                                                                        </asp:Label>
                                                                    </ItemTemplate>
                                                                    <EditItemTemplate>
                                                                        <asp:TextBox ID="tbContractItemTenure" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Tenure") %>'
                                                                            Width="75px" >
                                                                        </asp:TextBox>
                                                                    </EditItemTemplate>
                                                                    <HeaderStyle HorizontalAlign="Center" Width="5%" />
                                                                    <ItemStyle Width="5%" />
                                                                </telerik:GridTemplateColumn>
    </MasterTableView>
                                                        <GroupingSettings CaseSensitive="False" />
                                                        <HeaderStyle />
                                                        <PagerStyle Mode="NextPrevAndNumeric" />
                                                    </telerik:RadGrid>

    And my javscript function is  :
    function OnDateSelected(sender,args)
                        {                        
                            var masterTable = $find("<%=rgContarctItems.ClientID%>").get_masterTableView();  
      
                            var StartDate = masterTable.get_dataItems()[0].findControl('rdServiceStartDate');
                            var EndDate = masterTable.get_dataItems()[0].findControl('rdServiceEndDate');
                            var txtTenure = masterTable.get_dataItems()[0].findControl('tbContractItemTenure');
                
                            StartDate = StartDate.get_selectedDate();
                            EndDate = EndDate.get_selectedDate();   
                             
                            if (StartDate != null && EndDate != null) {
                                var Tenure = (12 * (EndDate.getFullYear() - StartDate.getFullYear()) + EndDate.getMonth() - StartDate.getMonth()) + 1;
                                txtTenure.value = Tenure;
                            }
                        }


    I want to set the result of my date calculations to that textbox..
    Colud you please help me at this..??

    Regards,
    Lok..

  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 23 Aug 2011 Link to this post

    Hello Lokesh,

    You can try the same approach in the following code library to access controls in EditItemTemplate.
    Accessing server controls in a grid template on the client.

    Thanks,
    Princy.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017