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

Javascript on itemtemplate button click doesnt allow passing of parameters

3 Answers 272 Views

Grid

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

Carlos asked on 28 Jul 2014, 09:29 AM

Hi Guys,

I have a radgrid which uses an item template, within the item template i have a button and a div. On button click i would like to show / hide the div using javascript.
the javascript works fine when im hardcoding the div ID which i want to hide, but as soon as i pass a parameter to the javascript it no longer works.

my end goal is to hide the div in a specific row within the radgrid, because at the moment no matter which button in a row i click on only the first div gets shown/hidden.

If you have another method of getting this to work please let me know. but for now this is the code i have.

<telerik:RadGrid ID="lvSubSections" runat="server" GridLines="None"

Width="100%" AllowPaging="false" CellSpacing="0" Visible="false"

onneeddatasource="lvSubSections_NeedDataSource"

onprerender="lvSubSections_PreRender"

onitemcommand="lvSubSections_ItemCommand"

EnableViewState="true" >

<MasterTableView AutoGenerateColumns="false" DataKeyNames="SubSectionID" ClientDataKeyNames="SubSectionID" >

<Columns>

<telerik:GridBoundColumn DataField="SubSectionID" HeaderText="SubSectionID" ItemStyle-Font-Names="Calibri" Resizable="False" UniqueName="Status" ReadOnly="True" Reorderable="False" ShowSortIcon="False" Visible="false">

<HeaderStyle HorizontalAlign="Left" Width="3%" Height="100px" Wrap="True" />

<ItemStyle HorizontalAlign="Center" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="SubSectionID" >

<HeaderStyle Height="0px" />

<ItemTemplate>

<table width="100%">

<tr>

<td style="border:none;font-size:1.2em;font-weight:bold;" >

<asp:Label ID="grdLblSubSectionName" runat="server" Text='<%# Eval("subSectionName") %>' />

</td>

<td style="border:none;" align="right">

<asp:Label ID="grdLblIsComplete" runat="server" Text='<%# Eval("IsComplete") %>' />

</td>

</tr>

<tr>

<td style="border:none;" align="Left">

<div class="onoffswitch">

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>

<label class="onoffswitch-label" for="myonoffswitch">

<span class="onoffswitch-inner"></span>

<span class="onoffswitch-switch"></span>

</label>

</div>

</td>

<td style="border:none;padding:" align="right">

<telerik:RadButton id="grdBtnComments" runat="server" Text="C" ToolTip="Comments" OnClientClicked='HideShowComments("<%# Eval("subSectionID") %>")' />

<telerik:RadButton id="grdBtnQuestions" runat="server" Text="Q" ToolTip="Questions" CommandName="SubSectionQuestions" />

</td>

</tr>

<tr>

<td colspan="2" style="border:none;">

<div id='<%# Eval("subSectionID") %>' style="display:none;">

<telerik:RadTextBox ID="grdTbComments" Width="100%" Height="50px" runat="server" TextMode="MultiLine" Text='<%# Eval("subSectionComments") %>' ></telerik:RadTextBox>

<telerik:RadButton id="grdBtnSaveComments" runat="server" Text="Save" ToolTip="Comments" />

</div>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

and this is the javascript i am currently using

function HideShowComments(ID) {

var id = document.getElementById(ID);

if (id.style.display == "none") {

id.style.display = "table-row";

}

else {

id.style.display = "none";

}

Thanks in advance

3 Answers, 1 is accepted

Accepted

answered on 28 Jul 2014, 06:11 PM

Hello,

<script type="text/javascript">

function HideShowComments(sender, args) {

var test = document.getElementById(sender.get_id().replace("Btn", "Hdn")).value;

var id = document.getElementById(test);

if (id.style.display == "none") {

id.style.display = "table-row";

}

else {

id.style.display = "none";

}

</script>

<td style="border: none; padding: " align="right">

<asp:HiddenField ID="grdHdnComments" runat="server" Value='<%# Eval("ID") %>' />

<telerik:RadButton ID="grdBtnComments" runat="server" Text="C" ToolTip="Comments"

OnClientClicked="HideShowComments" />

<telerik:RadButton ID="grdBtnQuestions" runat="server" Text="Q" ToolTip="Questions"

CommandName="SubSectionQuestions" />

</td>

Let me know if any concern.

Thanks,
Jayesh Goyani