Javascript on itemtemplate button click doesnt allow passing of parameters

[Carlos]

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

[Jayesh Goyani]

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

[Carlos]

Good Morning,

Thank you the correct divs are now being displayed, one little issue though.

when i click on the comments button to display the div, it is shown for about a second and then hides again.

how can i get this div to remain shown once the comments button is clicked?

[Carlos]

Found the issue, i set AutoPostBack = false on the button click.

Thank you for the help.