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

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

6 Answers 252 Views
Grid
This is a migrated thread and some comments may be shown as answers.
3i infotech
Top achievements
Rank 1
3i infotech asked on 23 Apr 2008, 12:53 PM
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>


6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 23 Apr 2008, 12:59 PM
Hi,

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

Shinu.
0
3i infotech
Top achievements
Rank 1
answered on 23 Apr 2008, 01:28 PM
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
0
Princy
Top achievements
Rank 2
answered on 24 Apr 2008, 06:24 AM
Hi,

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

Princy.
0
3i infotech
Top achievements
Rank 1
answered on 25 Apr 2008, 06:52 AM
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

0
Marc
Top achievements
Rank 1
answered on 02 Sep 2011, 07:15 PM
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.
0
Chad Johnson
Top achievements
Rank 1
answered on 03 Aug 2012, 08:06 PM
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.
Tags
Grid
Asked by
3i infotech
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
3i infotech
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Marc
Top achievements
Rank 1
Chad Johnson
Top achievements
Rank 1
Share this question
or