Find controls in template column of radgrid on client side

[Lokesh]

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..

[Princy]

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.

[Lokesh]

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??

[Lokesh]

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..

[Princy]

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.