locked
Gridview inside of Listview sorting and Paging RRS feed

  • Question

  • User2029907261 posted

    Hi,

    Is there a way to page and sort a gridview within a listview, the error I'm getting is?

    BC31143: Method 'Protected Sub GridView_PageIndexChanging(sender As Object, e As DataGridPageChangedEventArgs)' does not have a signature compatible with delegate 'Delegate Sub GridViewPageEventHandler(sender As Object, e As GridViewPageEventArgs)'.

    My Gridview looks like this :

      <asp:ListView ID="ListView1" runat="server" GroupItemCount="3" GroupPlaceholderID="groupPlaceHolder1"
                    ItemPlaceholderID="itemPlaceHolder1" OnItemDataBound="DataBound" DataKeyNames="Reporttitle,ReportQuery,ChartCheck,IconImage">
                    <LayoutTemplate>
                        <div>
                            <table border="0">
                                <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
                            </table>
                        </div>
                    </LayoutTemplate>
                    <GroupTemplate>
                        <tr>
                            <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
                        </tr>
                    </GroupTemplate>
                    <ItemTemplate>
                        <td runat="server" id="ReportSpan">
                            <div class="box">
                                <div class="box-header">
                                    <asp:Literal ID="BoxIcon" runat="server"></asp:Literal>
                                  
                                    <h5><%# Eval("Reporttitle") %></h5>
                                </div>
                          
    
                        
                            <div runat="server" id="Window_Box" >
                  
               
                                <div runat="server" id="Boxscroller">
                                <asp:GridView   class="table table-striped table-bordered table-responsive-md" RowStyle-Wrap="true" OnPageIndexChanging="GridView_PageIndexChanging" OnSorting="OnSorting" ID="gvDetails" runat="server" AutoGenerateColumns="true">
                                </asp:GridView>
       <div >
       <asp:Chart ID="Chart1" runat="server" Height="400px" width="385" Visible = "FALSE">
        <Titles>
            <asp:Title ShadowOffset="3" Name="Items" />
        </Titles>
        <Legends>
            <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Count" LegendStyle="Row" />
        </Legends>
        <Series>
            <asp:Series Name="Default" />
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1" BorderWidth="0" />
        </ChartAreas>
    </asp:Chart>
           <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <canvas id="chLine"></canvas>
                    </div>
                </div>
            </div>
         </div>     
    </div>
       </div>                          </div></div></div>
                            
                            <div class="box-footer">
                            </div>
    
                        </td>
                    </ItemTemplate>
                </asp:ListView>


    Protected Sub GridView_PageIndexChanging(sender As Object, ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs)

    Dim gvDetails As GridView = TryCast(FindControl("gvDetails"), GridView)

    gvDetails.PageIndex = e.NewPageIndex

    End Sub

    Thanks

    Wednesday, March 25, 2020 8:56 PM

Answers

  • User-1330468790 posted

    Hi andysismey,

     

    The direction is pretty clear if you use the event "PageIndexChanging" of the GridView control.

    Solution:

    Add the event handler for the event "PageIndexChanging" and a) Cast the sender to that grid view instance, b) take the "NewPageIndex" property from the argument "GridViewPageEventArgs".

     

    More details, you can refer to below code which is constructed based on your code. Focus on the content in yellow background.

    .aspx Page:

    <head runat="server">
        <title></title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
    
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ListView ID="ListView1" runat="server" GroupItemCount="3" GroupPlaceholderID="groupPlaceHolder1"
                    ItemPlaceholderID="itemPlaceHolder1" OnItemDataBound="DataBound" DataKeyNames="Reporttitle,ReportQuery">
                    <LayoutTemplate>
                        <div>
                            <table>
                                <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
                            </table>
                        </div>
                    </LayoutTemplate>
                    <GroupTemplate>
                        <tr>
                            <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
                        </tr>
                    </GroupTemplate>
                    <ItemTemplate>
                        <td runat="server" id="ReportSpan">
                           
                                <div >
    
                                    
                                    <h5><%# Eval("Reporttitle") %></h5>
                                </div>
                            
                            
                            <div runat="server" id="Window_Box" >
    
                                <asp:GridView class="table table-bordered " RowStyle-Wrap="true" 
    ID="gvDetails" runat="server"
    AllowPaging="true" PageSize="2" OnPageIndexChanging="gvDetails_PageIndexChanging" AutoGenerateColumns="true"> </asp:GridView> </div> <br /> </td> </ItemTemplate> </asp:ListView> </div> </form> </body>

     

    Code behind:

    // Simulation of the LV data
            //[Request] has 5 columns of data
            //[TestTable1] has 15 columns of data
            //[Product] has 3 columns of data
            private static DataTable _listviewDT;
            public static DataTable ListviewDT
            {
                get
                {
                    if (_listviewDT == null)
                    {
                        _listviewDT = new DataTable();
    
                        _listviewDT.Columns.Add("Reporttitle", typeof(string));
                        _listviewDT.Columns.Add("ReportQuery", typeof(string));
    
                        _listviewDT.Rows.Add("ReportFromRequest", "[Request]");
                        _listviewDT.Rows.Add("ReportFromTestTable1", "[TestTable1]");
                        _listviewDT.Rows.Add("ReportFromProduct", "[Product]");
                        _listviewDT.Rows.Add("ReportFromItem", "[Items]");
                        _listviewDT.Rows.Add("ReportFromTestTable1", "[TestTable1]");
                        _listviewDT.Rows.Add("ReportFromRequest", "[Request]");
                        _listviewDT.Rows.Add("ReportFromRequest", "[Request]");
                        _listviewDT.Rows.Add("ReportFromRequest", "[Request]");
                        _listviewDT.Rows.Add("ReportFromRequest", "[Request]");
    
    
                    }
    
                    return _listviewDT;
                }
                set
                {
                    _listviewDT = value;
                }
            }
    
            
    
            protected void Page_Load(object sender, EventArgs e)
            {
    
                if (!IsPostBack)
                {
                    ListView1.DataSource = ListviewDT;
                    ListView1.DataBind();
                  
                }
    
    
            }
    
            
    
            int count = 0;
            protected void DataBound(object sender, ListViewItemEventArgs e)
            {
                
    
                if (e.Item.ItemType == ListViewItemType.DataItem)
                {
                    ListViewDataItem item = (ListViewDataItem)e.Item;
                    string ReportQuery = ListView1.DataKeys[item.DataItemIndex]["ReportQuery"].ToString();
    
                    // reset the count for a new table row
                    if (item.DataItemIndex % 3 == 0)
                    {
                        count = 0;
                    }
    
                    string query = (Convert.ToString("SELECT  * FROM " + ReportQuery));
                    GridView gvDetails = e.Item.FindControl("gvDetails") as GridView;
                    
    
                    var reportSP = 4;
                    gvDetails.DataSource = GetData(query);
                    gvDetails.DataBind();
    
                    if (gvDetails.Rows.Count > 0)
                    {
                        int GVColumns = gvDetails.Rows[0].Cells.Count;
                        
    
                        // Set col grid 
                        if (GVColumns >7)
                        {
                            reportSP = 8;
                        }
                        else if (GVColumns >=4)
                        {
                            reportSP = 4;
                        }
                        else if (GVColumns <= 3)
                        {
                            reportSP = 2;
                        }
    
    
                        // set properties of the table cell
                        var td = (HtmlTableCell)e.Item.FindControl("ReportSpan");
                        if(count >= 18)
                        {
                            //The third one should be listed in a new line and width = 100%
                            td.Style.Add("display", "block");
                            td.Attributes.Add("class", "col");
                        }
                        else
                        {
                            //if the number of the previous columns less than 18, the table cells should be listed in the same row 
                            td.Style.Add("display", "inline-block");
                            td.Attributes.Add("class", "col-" + reportSP.ToString());
                        }
    
                        count += GVColumns;
                    }
    
                }
            }
    
    
            public static DataTable GetData(string sql)
            {
                string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
                using (SqlConnection con = new SqlConnection(constr))
                {
    
                    using (SqlCommand cmd = new SqlCommand(sql, con))
                    {
    
                        using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
                        {
                            DataTable dt = new DataTable();
                            sda.Fill(dt);
                            return dt;
                        }
                    }
                }
            }
    
            protected void gvDetails_PageIndexChanging(object sender, GridViewPageEventArgs e)
            {
                GridView gv = (GridView)sender;
                int index = e.NewPageIndex;
                string clientID = gv.ClientID;
                Page.ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('gv clientID is " + clientID + " and next page index is " + index + " (zero-based)')", true);
    
            }
        }

     

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 27, 2020 2:55 AM

All replies

  • User-1330468790 posted

    Hi andysismey,

     

    The problem is what the error already said that you have wrongly usedd an event argument for the event "PageIndexChanging".

    If you are using the VS IDE to develop the pages, you will see the event handler below would be automatically created:

    Protected Sub gvDetails_PageIndexChanging(sender As Object, e As GridViewPageEventArgs)
    
        End Sub

    As you can see, the type of the argument  for the GridView control is "GridViewPageEventArgs" while the type in your code is "DataGridPageChangedEventArgs" which is designed for the DataGrid control.

      

    Moreover, since the GridView control is nested in the ListView control in your code, you would better to retrieve the GridView control by casting sender.

    Protected Sub gvDetails_PageIndexChanging(sender As Object, e As GridViewPageEventArgs)
            Dim gv As GridView = CType(sender, GridView)
    End Sub

     

    Hope this can help you.

    Best regards,

    Sean

    Thursday, March 26, 2020 2:27 AM
  • User2029907261 posted

    Hi Sean,

    Thank you for your response, that really helps, but I'm stuck on a complicated issue.... I think, my listview is binding to an array of SQL queries and each one then populates a gridview inside the listview , so I basically have a grid layout each with a gridview , when I do the paging I cant get it to databind to the gridview I'm trying to page?

    if you could point me in he right direction,  I would grateful ?

    thanks

    Thursday, March 26, 2020 4:20 PM
  • User-1330468790 posted

    Hi andysismey,

     

    The direction is pretty clear if you use the event "PageIndexChanging" of the GridView control.

    Solution:

    Add the event handler for the event "PageIndexChanging" and a) Cast the sender to that grid view instance, b) take the "NewPageIndex" property from the argument "GridViewPageEventArgs".

     

    More details, you can refer to below code which is constructed based on your code. Focus on the content in yellow background.

    .aspx Page:

    <head runat="server">
        <title></title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
    
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ListView ID="ListView1" runat="server" GroupItemCount="3" GroupPlaceholderID="groupPlaceHolder1"
                    ItemPlaceholderID="itemPlaceHolder1" OnItemDataBound="DataBound" DataKeyNames="Reporttitle,ReportQuery">
                    <LayoutTemplate>
                        <div>
                            <table>
                                <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
                            </table>
                        </div>
                    </LayoutTemplate>
                    <GroupTemplate>
                        <tr>
                            <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
                        </tr>
                    </GroupTemplate>
                    <ItemTemplate>
                        <td runat="server" id="ReportSpan">
                           
                                <div >
    
                                    
                                    <h5><%# Eval("Reporttitle") %></h5>
                                </div>
                            
                            
                            <div runat="server" id="Window_Box" >
    
                                <asp:GridView class="table table-bordered " RowStyle-Wrap="true" 
    ID="gvDetails" runat="server"
    AllowPaging="true" PageSize="2" OnPageIndexChanging="gvDetails_PageIndexChanging" AutoGenerateColumns="true"> </asp:GridView> </div> <br /> </td> </ItemTemplate> </asp:ListView> </div> </form> </body>

     

    Code behind:

    // Simulation of the LV data
            //[Request] has 5 columns of data
            //[TestTable1] has 15 columns of data
            //[Product] has 3 columns of data
            private static DataTable _listviewDT;
            public static DataTable ListviewDT
            {
                get
                {
                    if (_listviewDT == null)
                    {
                        _listviewDT = new DataTable();
    
                        _listviewDT.Columns.Add("Reporttitle", typeof(string));
                        _listviewDT.Columns.Add("ReportQuery", typeof(string));
    
                        _listviewDT.Rows.Add("ReportFromRequest", "[Request]");
                        _listviewDT.Rows.Add("ReportFromTestTable1", "[TestTable1]");
                        _listviewDT.Rows.Add("ReportFromProduct", "[Product]");
                        _listviewDT.Rows.Add("ReportFromItem", "[Items]");
                        _listviewDT.Rows.Add("ReportFromTestTable1", "[TestTable1]");
                        _listviewDT.Rows.Add("ReportFromRequest", "[Request]");
                        _listviewDT.Rows.Add("ReportFromRequest", "[Request]");
                        _listviewDT.Rows.Add("ReportFromRequest", "[Request]");
                        _listviewDT.Rows.Add("ReportFromRequest", "[Request]");
    
    
                    }
    
                    return _listviewDT;
                }
                set
                {
                    _listviewDT = value;
                }
            }
    
            
    
            protected void Page_Load(object sender, EventArgs e)
            {
    
                if (!IsPostBack)
                {
                    ListView1.DataSource = ListviewDT;
                    ListView1.DataBind();
                  
                }
    
    
            }
    
            
    
            int count = 0;
            protected void DataBound(object sender, ListViewItemEventArgs e)
            {
                
    
                if (e.Item.ItemType == ListViewItemType.DataItem)
                {
                    ListViewDataItem item = (ListViewDataItem)e.Item;
                    string ReportQuery = ListView1.DataKeys[item.DataItemIndex]["ReportQuery"].ToString();
    
                    // reset the count for a new table row
                    if (item.DataItemIndex % 3 == 0)
                    {
                        count = 0;
                    }
    
                    string query = (Convert.ToString("SELECT  * FROM " + ReportQuery));
                    GridView gvDetails = e.Item.FindControl("gvDetails") as GridView;
                    
    
                    var reportSP = 4;
                    gvDetails.DataSource = GetData(query);
                    gvDetails.DataBind();
    
                    if (gvDetails.Rows.Count > 0)
                    {
                        int GVColumns = gvDetails.Rows[0].Cells.Count;
                        
    
                        // Set col grid 
                        if (GVColumns >7)
                        {
                            reportSP = 8;
                        }
                        else if (GVColumns >=4)
                        {
                            reportSP = 4;
                        }
                        else if (GVColumns <= 3)
                        {
                            reportSP = 2;
                        }
    
    
                        // set properties of the table cell
                        var td = (HtmlTableCell)e.Item.FindControl("ReportSpan");
                        if(count >= 18)
                        {
                            //The third one should be listed in a new line and width = 100%
                            td.Style.Add("display", "block");
                            td.Attributes.Add("class", "col");
                        }
                        else
                        {
                            //if the number of the previous columns less than 18, the table cells should be listed in the same row 
                            td.Style.Add("display", "inline-block");
                            td.Attributes.Add("class", "col-" + reportSP.ToString());
                        }
    
                        count += GVColumns;
                    }
    
                }
            }
    
    
            public static DataTable GetData(string sql)
            {
                string constr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
                using (SqlConnection con = new SqlConnection(constr))
                {
    
                    using (SqlCommand cmd = new SqlCommand(sql, con))
                    {
    
                        using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
                        {
                            DataTable dt = new DataTable();
                            sda.Fill(dt);
                            return dt;
                        }
                    }
                }
            }
    
            protected void gvDetails_PageIndexChanging(object sender, GridViewPageEventArgs e)
            {
                GridView gv = (GridView)sender;
                int index = e.NewPageIndex;
                string clientID = gv.ClientID;
                Page.ClientScript.RegisterStartupScript(this.GetType(), "Alert", "alert('gv clientID is " + clientID + " and next page index is " + index + " (zero-based)')", true);
    
            }
        }

     

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 27, 2020 2:55 AM
  • User2029907261 posted

    Hi Sean,

    That really helped and its now working, thank you, I needed to add an extra label to the listview to store the SQLQuery Name and then call that when paging, here is the final "working" code for anyone else.

    Protected Sub gvDetails_PageIndexChanging(ByVal sender As Object, ByVal e As GridViewPageEventArgs)
    		Dim gv As GridView = CType(sender, GridView)
    		Dim ReportQuery = (CType(ListView1.Items(0).FindControl("ReportQuerylabel"), Label)).Text
    		Dim query As String = (Convert.ToString("SELECT  * FROM  " & ReportQuery.ToString))
    		Dim index As Integer = e.NewPageIndex
    		Dim clientID As String = gv.ClientID
    		gv.PageIndex = e.NewPageIndex
    		gv.DataSource = GetData(query)
    		gv.DataBind()
    
    
    	End Sub

    Friday, March 27, 2020 6:06 PM