Question 201733 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to count grid row size when the page is loaded?

I want to set visibility of a div according to the size of grid which are on the same page; grid is loaded when the page is opened How can I do this ? I wrote following js but took errors.

    <asp:GridView ID="grid" runat="server" AutoGenerateColumns="false" ShowHeader="false" ShowFooter="false"
        CssClass="table table-bordered table-condensed"
        EmptyDataText="Kayıtlı İş Tecrübesi Bilgisi Bulunmamaktadır."
        OnRowDataBound="OnGridRowDataBound" OnRowCommand="OnGridRowCommand" OnRowCreated="OnGridRowCreated"
        DataKeyNames="KAYITNO"
        RowStyle-CssClass="ozgecmis-grid-row" AlternatingRowStyle-CssClass="ozgecmis-grid-row-alternate" SelectedRowStyle-CssClass="ozgecmis-grid-row-selected">
        <Columns>
            <asp:TemplateField ItemStyle-CssClass="ozgecmis-data-key">
                <ItemTemplate>
                    <asp:Button runat="server" ID="dataKeyButton" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"KAYITNO") %>' Visible="false" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ItemStyle-CssClass="ozgecmis-data-command" ItemStyle-VerticalAlign="Middle">
                <ItemTemplate>
                    <a href="#" class="btn btn-small btn-info">Seç</a>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField ItemStyle-CssClass="ozgecmis-data-text">
                <ItemTemplate>
                    <%#FormatData(Eval("ISYERIUNVAN"),Eval("GIRISTARIHSTR"),Eval("CIKISTARIHSTR"),Eval("ISTANIMI"),Eval("SEKTOR"),Eval("POZISYON"),Eval("MESLEK"),Eval("MESLEKUZMANLIK")) %>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>



    $( "#grid" ).on( "load", function() {
        var gridView = document.getElementById("<%=grid.ClientID %>");
        var rows = gridView.getElementsByTagName("tr")
        if (rows.length>0){
            isTecrubesiBos.Visible = true;
        }
        } );
Tags:

2

Answers


  1. 0

    Do that check WHEN you load the grid and set its data source.

    So, say this:

    <asp:GridView ID="GHotels" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="ID" CssClass="table">
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
        <asp:BoundField DataField="LastName" HeaderText="LastName"    />
        <asp:BoundField DataField="HotelName" HeaderText="HotelName"  />
        <asp:TemplateField HeaderText="Active" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:CheckBox ID="chkActive" runat="server" 
                    Checked='<%# Eval("Active") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Description" HeaderText="Description"  />
        <asp:TemplateField HeaderText="Hotel Information" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:Button ID="cmdView" runat="server" Text="Edit" CssClass="btn" 
                    OnClick="cmdView_Click" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<asp:TextBox ID="isTecrubesiBos" runat="server"></asp:TextBox>

    And now in code, you can do this:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        LoadGrid
    End If
End Sub

Sub LoadGrid()

    Dim rstData As DataTable
    rstData = MyRst("SELECT * FROM tblHotelsA ORDER BY HotelName")
    isTecrubesiBos.Visible = rstData.Rows.Count > 0
    GHotels.DataSource = rstData
    GHotels.DataBind()

End Sub

    So, we get/see this:

    enter image description here

    So, since the data source has a row count > 0, then we at that point in time are free to set the visible of the text box in question.

    Login or Signup to reply.
  2. 0

    Your grid and div both are server side control, they change there id when page load. So after page load means document.ready show your div via document.getElementById("<%= isTecrubesiBos.ClientID %>").style.display = 'block'; .

    Example:

    $(function() {
  var gridView = document.getElementById("<%= grid.ClientID %>").rows.length;
  if (gridView.length > 0) {
     document.getElementById("<%= isTecrubesiBos.ClientID %>").style.display = 'block';
  }
});

    If any case, need to hide div :

     document.getElementById("<%= isTecrubesiBos.ClientID %>").style.display = 'none';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search