Javascript on itemtemplate button click doesnt allow passing of parameters

4 posts, 1 answers
  1. Carlos
    Carlos avatar
    7 posts
    Member since:
    May 2014

    Posted 28 Jul 2014 Link to this post

    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
  2. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 28 Jul 2014 in reply to Carlos Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Carlos
    Carlos avatar
    7 posts
    Member since:
    May 2014

    Posted 29 Jul 2014 in reply to Jayesh Goyani Link to this post

    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?
  5. Carlos
    Carlos avatar
    7 posts
    Member since:
    May 2014

    Posted 29 Jul 2014 in reply to Carlos Link to this post

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

    Thank you for the help.
Back to Top