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 31 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Carlos
Top achievements
Rank 2
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

Sort by
0
Accepted
Jayesh Goyani
Top achievements
Rank 2
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
0
Carlos
Top achievements
Rank 2
answered on 29 Jul 2014, 07:04 AM
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?
0
Carlos
Top achievements
Rank 2
answered on 29 Jul 2014, 08:27 AM
Found the issue, i set AutoPostBack = false on the button click.

Thank you for the help.
Tags
Grid
Asked by
Carlos
Top achievements
Rank 2
Answers by
Jayesh Goyani
Top achievements
Rank 2
Carlos
Top achievements
Rank 2
Share this question
or