none
SharePoint 2010 question on showing asp.net panel only when data grid has data RRS feed

  • Question

  • I know this is crude, but I was wondering, I am sure this can be done using JQuery and or JScript.

    I have three panels.

    panel 1 (search panel) 

    Panel 1 is always showing. it has the search filters.

    panel 2 (Sort Panel)

    this panel will ONLY show if datagrid has data to sort.

    panel 3 (has a datagrid inside of it)

    this panel will show when the panel 1 button is clicked and it returns data.

    my Script code so far has this. I am stuck trying to figure out the logic for the Sort panel to show when Panel #3's gridview has data.


    <script src="</script">https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div>
        <asp:Panel runat="server" ID="pnlSearch" Style="visibility: visible;">
     <input type="button" id="btnSearch" value="Search" />
        </asp:Panel>

    </div>
    <div>
        <asp:Panel ID="pnlSort" runat="server" Style="display: none;"></asp:Panel>
    </div>

    <div>
        <asp:Panel ID="pnlDataGrid" runat="server" Style="display: none;"></asp:Panel>
    </div>


    <script>
    $("#btnSearch").click(function(evt) {
        evt.preventDefault();

    $('#pnlSearch').show();

    if $('#gvData'.Rows.Count == 0)
         $('#pnlSort').hide();
         $('#pnlDataGrid').hide();
    else
         $('#pnlSort').show();


    $('#pnlDataGrid').show();

    </script>


    this is he code I want to add  but not sure how to add it so that if the Datagrid is empty to hide the sort panel and he dataview panel



    Or something related to the above to hide the sort panal.

    what about this possible solution for the C# code behind

    Would the below work:

    protected void Page_Load(object sender, EventArgs e)
    {
        if(!Page.IsPostBack){
            pnlSearch.Visible = true;
            pnlSort.Visible = false;
            pnlDataGrid.Visible = false;
        }
    }


    protected void btnSearch_Click(object sender, EventArgs e)
    {
          
    if(gvMultiResults.Rows.Count == 0)
         pnlSort.Visible = false;
    else
     pnlSearch.Visible = true;
     pnlSort.Visible = true;
     pnlDataGrid.Visible = true;
         
    }




    • Edited by cowboy2066 Friday, August 23, 2019 11:23 PM
    Friday, August 23, 2019 5:24 PM

All replies

  • Hi ,

    Here is my sample test demo for your reference.

    <div>
        <asp:Panel runat="server" ID="pnlSearch" Style="visibility: visible;">
            <asp:Button ID="btnSearch" runat="server" OnClick="btnSearch_Click" Text="Button" />
        </asp:Panel>
    
    </div>
    <div>
        <asp:Panel ID="pnlSort" runat="server"> <%--Style="display: none;"--%>
            content here
        </asp:Panel>
    </div>
    
    <div>
        <asp:Panel ID="pnlDataGrid" runat="server" ><%--Style="display: none;"--%>
            <asp:GridView ID="gvMultiResults" AutoGenerateColumns="true" runat="server"></asp:GridView>
        </asp:Panel>
    </div>

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    pnlSearch.Visible = true;
                    pnlSort.Visible = false;
                    pnlDataGrid.Visible = false;
                }
            }
    
    
            protected void btnSearch_Click(object sender, EventArgs e)
            {
                // Create a new DataTable.    
                DataTable custTable = new DataTable("Customers");
                DataColumn dtColumn;
                DataRow myDataRow;
    
                // Create id column  
                dtColumn = new DataColumn();
                dtColumn.DataType = typeof(Int32);
                dtColumn.ColumnName = "id";
                dtColumn.Caption = "Cust ID";
                dtColumn.ReadOnly = false;
                dtColumn.Unique = true;
                // Add column to the DataColumnCollection.  
                custTable.Columns.Add(dtColumn);
    
                // Create Name column.    
                dtColumn = new DataColumn();
                dtColumn.DataType = typeof(String);
                dtColumn.ColumnName = "Name";
                dtColumn.Caption = "Cust Name";
                dtColumn.AutoIncrement = false;
                dtColumn.ReadOnly = false;
                dtColumn.Unique = false;
                /// Add column to the DataColumnCollection.  
                custTable.Columns.Add(dtColumn);
    
                // Create Address column.    
                dtColumn = new DataColumn();
                dtColumn.DataType = typeof(String);
                dtColumn.ColumnName = "Address";
                dtColumn.Caption = "Address";
                dtColumn.ReadOnly = false;
                dtColumn.Unique = false;
                // Add column to the DataColumnCollection.    
                custTable.Columns.Add(dtColumn);
    
                // Make id column the primary key column.    
                DataColumn[] PrimaryKeyColumns = new DataColumn[1];
                PrimaryKeyColumns[0] = custTable.Columns["id"];
                custTable.PrimaryKey = PrimaryKeyColumns;           
    
                // Add data rows to the custTable using NewRow method    
                // I add three customers with their addresses, names and ids   
                myDataRow = custTable.NewRow();
                myDataRow["id"] = 1001;
                myDataRow["Address"] = "43 Lanewood Road, cito, CA";
                myDataRow["Name"] = "George Bishop";
                custTable.Rows.Add(myDataRow);
                myDataRow = custTable.NewRow();
                myDataRow["id"] = 1002;
                myDataRow["name"] = "Rock joe";
                myDataRow["Address"] = " kind of Prussia, PA";
                custTable.Rows.Add(myDataRow);
                myDataRow = custTable.NewRow();
                myDataRow["id"] = 1003;
                myDataRow["Name"] = "Miranda";
                myDataRow["Address"] = "279 P. Avenue, Bridgetown, PA";
                custTable.Rows.Add(myDataRow);
    
                gvMultiResults.DataSource = custTable;
                gvMultiResults.DataBind();
                if (gvMultiResults.Rows.Count == 0)
                    pnlSort.Visible = false;
                else
                {
                    pnlSearch.Visible = true;
                    pnlSort.Visible = true;
                    pnlDataGrid.Visible = true;
                }
    
            }

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, August 26, 2019 2:23 AM
  • Lee:

    Were you able to figure out the logic for the Sort Panel to show if there is data and stay hidden if there is no data?

    Nice animation.


    • Edited by cowboy2066 Tuesday, August 27, 2019 3:50 PM
    Tuesday, August 27, 2019 3:49 PM
  • Hi ,

    What’s your issue now?

    The pnlSort will display if gvMultiResults.Rows.Count != 0 with existing logic, otherwise hidden.(you could check the condition by datasource rows count also)

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, August 28, 2019 3:51 AM
  • to be honest, I didn't review the code I was looking at the animation and I didn't see the sort panel open in it. so that is what prompted the question about the sort panel.
    Wednesday, August 28, 2019 7:57 PM
  • Hi,

    I just insert content here into pnlSort, you would see the text display in above gif.

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, August 29, 2019 2:00 AM
  • Ok, Cool.. thx

    I have created another posting with additional questions...

    Friday, August 30, 2019 7:51 PM