This is a migrated thread and some comments may be shown as answers.

[Solved] Find controls in template column of radgrid on client side

4 Answers 946 Views

Grid

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 22 Aug 2011, 06:36 AM

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.

answered on 23 Aug 2011, 09:37 AM

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