How to find/send the client id of asp.net controls in java script

[3i infotech]

hi Everyone,

i am having a FORMTEMPLATE inside which i have taken some text boxes which are bound to data corresponding to their colums.
Along with these textboxes are, INSERT AND UPDATE buttons.

Now my issue is that when i click on either of the two buttons, i need to perform client side (java script) validations like checking that mandatory fields should not be empty.
My Questions :-
 1.) Where to register the client side function call.
        For example :- if i have to call abc() then where should i write
                BtnUpdate.Attributes.Add("OnClick","abc()")
 2.) And secondly how to pass the ID's of the text boxes that i have taken inside the form template since these gets renderedto a different client id's.
Is there some client side method exposed by APi through which i could extract these fields.
I am attaching the code snipet

<

telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" GridLines="None"

PageSize="6" AutoGenerateColumns="False" Skin="Default2006">

<ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">

<Selecting AllowRowSelect="True" />

</ClientSettings>

<MasterTableView CommandItemDisplay="Top" ClientDataKeyNames="CURR_SYS_ID" DataKeyNames="CURR_SYS_ID,curr_Appr,curr_mdel" EditMode="PopUp" >

<EditFormSettings>

<PopUpSettings ScrollBars="None" />

</EditFormSettings>

<ExpandCollapseColumn

Resizable="False" Visible="False">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<RowIndicatorColumn

Visible="False">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<CommandItemTemplate>

<div style="padding:10px 0px;">

<asp:LinkButton runat="server"

ID="lnkEdit" CommandName="EditSelected">

<img style="border:0px;vertical-align:middle;" alt="" src="Images/icon_edit.gif" />

Edit Selected Record

</asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<asp:LinkButton runat="server" ID="lnkReject"

Text="Reject" CommandName="Reject">

<img style="border:0px;vertical-align:middle;" alt="" src="Images/icon_delete.gif" />

Reject Selected Record

</asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<asp:LinkButton runat="server" ID="LinkApprove" Text="Approve" CommandName="Approve">

<img style="border:0px;vertical-align:middle;" alt="" src="Images/icon_delete.gif" />

Approve Record

</asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<asp:LinkButton runat="server" ID="lnkInsert" CssClass="MyImageButton" Text="UpdateEdited" CommandName="InitInsert">

<img style="border:0px;vertical-align:middle;" alt="" src="Images/icon_add.gif" />Insert New Record

</asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<asp:LinkButton ID="LinkButton2" runat="server" CommandName="DeleteRecord" >

<img style="border:0px;vertical-align:middle;" alt="" src="Images/icon_add.gif" /> Delete this Record

</asp:LinkButton>

</CommandItemTemplate>

<Columns>

<telerik:GridBoundColumn DataField="curr_code" HeaderText="Currency Code" MaxLength="3" UniqueName="Currency Code"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="curr_name" HeaderText="Currency Name" MaxLength="25" UniqueName="Currency Name"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="curr_sign" HeaderText="Currency Sign" MaxLength="5" UniqueName="Currency Sign"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="curr_desc" HeaderText="Currency Description" MaxLength="240" UniqueName="Currency Description"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="curr_decimal" HeaderText="Decimal Spaces" MaxLength="1" UniqueName="Currency Decimal"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Curr_Sys_Id" ForceExtractValue="Always" HeaderText="Currency Sys Id" ReadOnly="True" UniqueName="curr_sys_id" Visible="False"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="curr_Appr" ForceExtractValue="Always" HeaderText="Approval Flag" MaxLength="2" ReadOnly="True" UniqueName="curr_Appr" Visible="False"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="curr_mdel" ForceExtractValue="Always" HeaderText="Deletion Flag" ReadOnly="True" UniqueName="curr_mdel" Visible="False"></telerik:GridBoundColumn>

</Columns>

<EditFormSettings EditFormType="Template">

<PopUpSettings Width="60%" />

<FormTemplate>

<table id="Table1" class="TableWidth" cellspacing="1" cellpadding="1" width="250" border="0">

<tr>

<td colspan="4" >

</td>

</tr>

<tr class="DataRowColor">

<td> Currency Code </td>

<td><asp:TextBox ID="txtCurrCode" OnBlur="return validateCurrencyCode();" Text='<%# DataBinder.Eval( Container, "DataItem.CURR_CODE") %>' runat="server">

</asp:TextBox></td>

<td>Currency Name </td>

<td>

<asp:TextBox ID="txtCurrName" Text='<%# DataBinder.Eval( Container, "DataItem.CURR_NAME") %>' runat="server">

</asp:TextBox></td>

</tr>

<tr class="DataAlternateRowColor">

<td>Currency Sign</td>

<td>

<asp:TextBox ID="txtCurrSign" OnBlur="return checkMandatory('Currency Sign cannot be blank');" Text='<%# DataBinder.Eval( Container, "DataItem.CURR_SIGN") %>' runat="server">

</asp:TextBox></td>

<td>Currency Description</td>

<td>

<asp:TextBox ID="txtCurrDesc" TextMode="SingleLine" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.CURR_DESC") %>'>

</asp:TextBox></td>

</tr>

<tr>

<td>Decimal Places</td>

<td><asp:TextBox ID="txtCurrDecimal" OnBlur="return checkMandatory('Currency Sign cannot be blank');" OnKeyUp="return validateRange();" TextMode="SingleLine" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.CURR_DECIMAL") %>'>

</asp:TextBox></td>

<td colspan="2"></td>

</tr>

<tr>

<td align="right" colspan="2">

<asp:button id="btnUpdate" text="Update" runat="server" commandName="Update" Visible='<%# Not RadGrid1.MasterTableView.IsItemInserted %>' ></asp:button>

<asp:button id="btnInsert" text="Insert" runat="server" CommandName="PerformInsert" Visible='<%# RadGrid1.MasterTableView.IsItemInserted %>' ></asp:button>

&nbsp;

<asp:button id="btnCancel" text="Cancel" runat="server" causesvalidation="False" commandname="Cancel"></asp:button></td>

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

[Shinu]

Hi,

Go through the following demo link.
Flexible server-side validation

Shinu.

[3i infotech]

Hi Shinu,

I have gone throught the link.

In this page the validations have bee taken care using validator controls like requiredfieldvalidator etc.

In my case i need to perform validation on client side.

I have to perform the validation on "OnClick" of btnUpdate and btnInsert button.

For this purpose i need to know where to register :- 

    btnUpdate.Attributes.Add("OnClick","abc(param1, param2,....)")

in which event should i write this...
ItemCommand , itemCreated ................. or which one .............

secondly could you tell me if there is any method exposed by client api to retrieve the id and alue of asp.net controls designed inside FORMTEMPLATE

[Princy]

Hi,

Go through the following code library link.
Accessing server controls in a grid template on the client

Princy.

[3i infotech]

Hi Princy,

I went through the link and somehow this is something i was looking for but still when i tried using the snippet in my scenario, i am facing an issue
    * In this sample, we are registering client id's of template controls inside an array at the client side, when i tried to implement the same using the provided snippet, the array is not getting the Client id's of template control.

Due to this i am not able to go any forward.

Kindly let me know a way to fetch the client id of template controls at the client side.

I am attaching the code snippet of my js file and my aspx

ASPX

<

telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" GridLines="None"

PageSize="6" AutoGenerateColumns="False" Skin="Default2006">

<ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">

<Selecting AllowRowSelect="True" />

</ClientSettings>

<%

-- <ValidationSettings EnableValidation="true" CommandsToValidate="PerformInsert,Update" />--%>

<MasterTableView CommandItemDisplay="Top" ClientDataKeyNames="CURR_SYS_ID" DataKeyNames="CURR_SYS_ID,curr_Appr,curr_mdel" EditMode="PopUp" >

<EditFormSettings>

<PopUpSettings ScrollBars="None" />

</EditFormSettings>

<ExpandCollapseColumn

Resizable="False" Visible="False">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<RowIndicatorColumn

Visible="False">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<CommandItemTemplate>

<div style="padding:10px 0px;">

<asp:LinkButton runat="server" ID="lnkEdit" CommandName="EditSelected">

<img style="border:0px;vertical-align:middle;" alt="" src="Images/icon_edit.gif" />

Edit Selected Record

</asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<asp:LinkButton runat="server" ID="lnkReject" Text="Reject" CommandName="Reject">

<img style="border:0px;vertical-align:middle;" alt="" src="Images/icon_delete.gif" />

Reject Selected Record

</asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<asp:LinkButton runat="server" ID="LinkApprove" Text="Approve" CommandName="Approve">

<img style="border:0px;vertical-align:middle;" alt="" src="Images/icon_delete.gif" />

Approve Record

</asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<asp:LinkButton runat="server" ID="lnkInsert" CssClass="MyImageButton" Text="UpdateEdited" CommandName="InitInsert">

<img style="border:0px;vertical-align:middle;" alt="" src="Images/icon_add.gif" />

Insert New Record

</asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<asp:LinkButton ID="LinkButton2" runat="server" CommandName="DeleteRecord" >

<img style="border:0px;vertical-align:middle;" alt="" src="Images/icon_add.gif" />

Delete this Record

</asp:LinkButton>

</CommandItemTemplate>

<Columns>

<telerik:GridBoundColumn DataField="curr_code" HeaderText="<%$ Resources:Resources, CurrencyCode %>" MaxLength="3" UniqueName="Currency Code"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="curr_name" HeaderText="<%$ Resources:Resources, CurrencyName %>" MaxLength="25" UniqueName="Currency Name"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="curr_sign" HeaderText="<%$ Resources:Resources, CurrencySign %>" MaxLength="5" UniqueName="Currency Sign"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="curr_desc" HeaderText="<%$ Resources:Resources, CurrencyDesc %>" MaxLength="240" UniqueName="Currency Description"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="curr_decimal" HeaderText="<%$ Resources:Resources, DecimalPlaces %>" MaxLength="1" UniqueName="Currency Decimal"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Curr_Sys_Id" ForceExtractValue="Always" HeaderText="Currency Sys Id" ReadOnly="True" UniqueName="curr_sys_id" Visible="False"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="curr_Appr" ForceExtractValue="Always" HeaderText="Approval Flag" MaxLength="2" ReadOnly="True" UniqueName="curr_Appr" Visible="False"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="curr_mdel" ForceExtractValue="Always" HeaderText="Deletion Flag" ReadOnly="True" UniqueName="curr_mdel" Visible="False"></telerik:GridBoundColumn>

</Columns>

<EditFormSettings EditFormType="Template" >

<PopUpSettings Width="60%" />

<FormTemplate >

<table id="Table1" class="TableWidth" cellspacing="1" cellpadding="1" width="250" border="0">

<tr>

<td colspan="4" >

</td>

</tr>

<tr class="DataRowColor" >

<td>

<asp:Label ID="lblCurrencyCode" runat="server" Text="<%$ Resources:Resources, CurrencyCode %>"></asp:Label></td>

<td>

<asp:TextBox ID="txtCurrCode" CausesValidation="true" OnBlur="return validateCurrencyCode();" Text='<%# DataBinder.Eval( Container, "DataItem.CURR_CODE") %>' runat="server">

</asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator4" SetFocusOnError="true" ControlToValidate="txtCurrCode" runat="server" ErrorMessage="<%$ Resources:ErrorMessages, strWarnCurrencyCodeMandatory %>"></asp:RequiredFieldValidator>

</td>

<td>

<asp:Label ID="lblCurrencyName" runat="server" Text="<%$ Resources:Resources, CurrencyName %>"></asp:Label></td>

<td>

<asp:TextBox ID="txtCurrName" CausesValidation="true" Text='<%# DataBinder.Eval( Container, "DataItem.CURR_NAME") %>' runat="server">

</asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtCurrName" ErrorMessage="<%$ Resources:ErrorMessages, strWarnCurrencyNameMandatory %>"></asp:RequiredFieldValidator>

</td>

</tr>

<tr class="DataAlternateRowColor">

<td>

<asp:Label ID="lblCurrencySign" runat="server" Text="<%$ Resources:Resources, CurrencySign %>"></asp:Label></td>

<td>

<asp:TextBox ID="txtCurrSign" CausesValidation="true" OnBlur="return checkMandatory('hdnWarnCurrencySignMandatory');" Text='<%# DataBinder.Eval( Container, "DataItem.CURR_SIGN") %>' runat="server">

</asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtCurrSign" ErrorMessage="<%$ Resources:ErrorMessages, strWarnCurrencySignMandatory %>"></asp:RequiredFieldValidator>

</td>

<td>

<asp:Label ID="lblCurrencyDescription" runat="server" Text="<%$ Resources:Resources, CurrencyDesc %>"></asp:Label></td>

<td>

<asp:TextBox ID="txtCurrDesc" TextMode="SingleLine" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.CURR_DESC") %>'>

</asp:TextBox></td>

</tr>

<tr class="DataRowColor" >

<td>

<asp:Label ID="lblDecimalPlaces" runat="server" Text="<%$ Resources:Resources, DecimalPlaces %>"></asp:Label></td>

<td><asp:TextBox ID="txtCurrDecimal" CausesValidation="true" OnBlur="return checkMandatory('hdnWarnDecimalMandatory');" OnKeyUp="return validateRange();" TextMode="SingleLine" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.CURR_DECIMAL") %>'>

</asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtCurrDecimal" ErrorMessage="<%$ Resources:ErrorMessages, strWarnDecimalMandatory %>"></asp:RequiredFieldValidator>

</td>

<td colspan="2"></td>

</tr>

<tr>

<td align="right" colspan="2">

<asp:button id="btnUpdate"

text="Update" runat="server" OnClientClick="validateUpdateRequest();" commandName="Update" Visible='<%# Not RadGrid1.MasterTableView.IsItemInserted %>' ></asp:button>

<asp:button id="btnInsert" text="Insert" runat="server" CommandName="PerformInsert" Visible='<%# RadGrid1.MasterTableView.IsItemInserted %>' ></asp:button>

&nbsp;

<asp:button id="btnCancel" text="Cancel" runat="server" causesvalidation="False" commandname="Cancel"></asp:button></td>

</td>

</tr>

</table>

<script type="text/javascript">

registeredElements.push(

'<%# Container.FindControl("txtCurrCode").ClientID %>');

registeredElements.push(

'<%# Container.FindControl("txtCurrName").ClientID %>');

registeredElements.push(

'<%# Container.FindControl("txtCurrSign").ClientID %>');

registeredElements.push(

'<%# Container.FindControl("txtCurrDecimal").ClientID %>');

</script>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

JAVASCRIPT FILE

/*JScript File*/

/* Created By:- Sagar Kamra */

/* Module Name :- Currency Master*/

/*Modification Done By:- */

/*Modofication Date :- */

/*Reason Of Modification:-- */

/*****************************************************************************************************************/

/*GLOBAL VARIABLES*/

/*****************************************************************************************************************/

var

registeredElements = [];

 

/*Form level Validation*/

/*****************************************************************************************************************/

function

validateUpdateRequest()

{

var objCurrCode=GetRegisteredServerElement('txtCurrCode');

var objCurrName=GetRegisteredServerElement("txtCurrName");

var objCurrSign=GetRegisteredServerElement("txtCurrSign");

var objDecimalPlaces=GetRegisteredServerElement("txtCurrDecimal");

if(objCurrCode.value == "")

{

alert(

'Currency Code cannot be blank');

return false;

}

else if(objCurrName.value == "")

{

alert(

'Currency Name cannot be blank');

return false;

}

else if(objCurrSign.value == "")

{

alert(

'Currency Sign cannot be blank');

return false;

}

else if(objDecimalPlaces.value == "")

{

alert(

'Number of decimal spaces cannot be blank');

return false;

}

return true;

}

/*****************************************************************************************************************/

function GetSelectedItems()

{

alert($find(

"<%= RadGrid1.MasterTableView.ClientID %>").get_selectedItems().length);

}

//looks for an element that has been registered with the global array

//requires that we emit a registration script block for each server control

function GetRegisteredServerElement(serverID)

{

var clientID = "";

for (var i = 0; i < registeredElements.length; i++)

{

clientID = registeredElements[i];

if (clientID.indexOf(serverID) >= 0)

break;

}

return $get(clientID);

}

 

function GetGridServerElement(serverID, tagName)

{

if (!tagName)

tagName =

"*"; //* means all elements

var grid = $get("<%=RadGrid1.ClientID %>");

var elements = grid.getElementsByTagName(tagName);

for (var i = 0; i < elements.length; i++)

{

var element = elements[i];

if (element.id.indexOf(serverID) >= 0)

return element;

}

}

Thanks & Regards

Sagar Kamra
3i-Infotech

[Marc]

I tried the same thing and have the exact same scenario and nothing gets pushed to registeredElements[].  I have a ticket open already and waiting to hear back and will post what I find.

[Chad Johnson]

Marc,

Did you ever hear back on the ticket you opened in regards to nothing getting pushed to "registeredElements[]"?  I am currently experiencing the exact same problem.