CODEWITHSUNDEEP
javascriptjqueryasp.netgridview
boshkash
boshkash

Reputation: 1

call jquery function inside gridview

call jquery function inside gridview .what i want to happen when i click on the link button open the div . i have problem here with this case didn't work .

JavaScript

function toggleDiv(divId) {
    $("#shoow").toggle('slow');
}

HTML Markup

<asp:GridView ID="GridView1" runat="server" 
    AutoGenerateColumns="False" 
    CellPadding="4"
    ForeColor="#333333" 
    GridLines="None" 
    Width="507px" 
    Height="294px">
    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'></asp:Label>
                <br />
                <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="toggleDiv('Shoow'); return false;">
                    LinkButton</asp:LinkButton>
                <div id="Shoow" style="background-color: blue; width: 150px; height: 150px; display: none;">
                </div>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label ID="Label2" runat="server" Text='<%# Eval("Description")%>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <EditRowStyle BackColor="#999999" />
    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#E9E7E2" />
    <SortedAscendingHeaderStyle BackColor="#506C8C" />
    <SortedDescendingCellStyle BackColor="#FFFDF8" />
    <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>

Upvotes: 0

Views: 1515

Answers (2)

fnostro
fnostro

Reputation: 4591

Whenever I need to execute JS from a Gridview I try to avoid using asp controls like LinkButton as they tend to cause a postback which you then need to prevent, which can be done, but I find it far easier to just embed a basic html button or img tag with an onclick set for your JS. No postback and no extra code to prevent a postback.

<asp:TemplateField>
  <ItemTemplate>
    <asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'></asp:Label>
    <br />
    <button ID="LinkButton1" runat="server">Button Text</button>
    <div id="Shoow" runat=server style="background-color: blue; width: 150px; height: 150px; display: none;">
    </div>
  </ItemTemplate>
</asp:TemplateField>

Then in the OnRowDatabound event you do the following because runat="server" has been set:

dim btn as HtmlButton = e.Row.FindControl("LinkButton1")
dim div as HtmlContainer = e.Row.FindControl("Shoow")

dim js as String = String.Format("toggleDiv('#{0}')", div.UniqueID)
btn.Attributes.Add("onclick", js)

and the JS:

function toggleDiv(divId) {
  $(divId).toggle('slow');
}

Upvotes: 0

codeandcloud
codeandcloud

Reputation: 55298

Make these changes

Markup

  1. Pass the clicked element as itself like toggleDiv(this)
  2. Remove the id of the div

Sample Code

<ItemTemplate>
    <asp:Label ID="Label1" runat="server" Text='<%# Eval("CategoryName")%>'>
    </asp:Label>
    <br />
    <asp:LinkButton ID="LinkButton1" runat="server" 
            OnClientClick="javascript:toggleDiv(this);return false;">
        LinkButton</asp:LinkButton>
    <div style="background-color: blue; width: 150px; height: 150px; display: none;">
    </div>
</ItemTemplate>

JavaScript (Toggle the visibility of the element next to the element that's clicked)

function toggleDiv(elm) {
    $(elm).next().toggle('slow');
}

Upvotes: 1

Related Questions