I have a WebDataGrid using a custom pager that I built in an ASCX file (attached to this post). The SelectCommand for my SqlDataSource is being built in the code behind and bound to the grid on Button.Click based on several conditions that the user specifies. My pager is not properly changing pages when the buttons are clicked. Can anyone please point me in the right direction regarding what might be causing this problem?
Here is my grid:
<ig:WebDataGrid ID="WDGWells" OnDataFiltered="WDGWells_DataFiltered" OnCustomDataBinding="WDGWells_CustomDataBinding" runat="server" Height="550px" Width="99.8%" AutoGenerateColumns="False" DataSourceID="SDSWells" >
<Columns>
<ig:BoundDataField DataFieldName="ID" Key="ID" Hidden="true">
<Header Text="ID" />
</ig:BoundDataField>
<ig:TemplateDataField Key="Options" Width="120px" Hidden="false">
<Header Text="Options" />
<ItemTemplate>
<asp:ImageButton runat="server" ID="iBTNShowLogs" CommandArgument='<%#Eval("ID")%>' Visible="true" CommandName="ShowLogs" ImageUrl="~/icons/binoculars_24.png" ToolTip="View Logs for this well" />
<asp:ImageButton ID="iBTNAdd2APIPickList" runat="server" ImageUrl="~/icons/notes_24.png" CommandArgument='<%# Eval("ID")%>' CommandName="Add2PickAPIList" ToolTip="Add to API Pick List" />
<a href='<%#"http://rrcsearch.neubus.com/esd-rrc/api.php?function=GetWellLogs&api_no=" & Eval("APINumber").ToString.Substring(2, Eval("APINumber").ToString.Length - 2)%>' id="HLKTXComp" target="_blank"><img alt="" src="../icons/tx.png" /></a>
<a href='<%#"http://gis2.rrc.state.tx.us/cgi-bin/vwf.cgi?apinum=" & Eval("APINumber").ToString.Substring(2, Eval("APINumber").ToString.Length - 2)%>' id="HLKTXLogs" target="_blank"><img alt="" src="../icons/tx.png" /></a>
</ItemTemplate>
</ig:TemplateDataField>
<ig:BoundDataField DataFieldName="LogKey" Key="LogKey" Width="35px" Header-Tooltip="Click to Sort by PDL #">
<Header Text="PDL #" />
<ig:BoundDataField DataFieldName="Name" Key="Name" Width="165px" Header-Tooltip="Click to Sort by Well Name">
<Header Text="Well Name" />
<ig:BoundDataField DataFieldName="Number" Key="Number" Width="25px" Header-Tooltip="Click to Sort by Number">
<Header Text="Num" />
<ig:BoundDataField DataFieldName="County" Key="County" Header-Tooltip="Click to sort by County" >
<Header Text="County" />
<ig:BoundDataField DataFieldName="API" Key="API" Width="80px" Header-Tooltip="Click to Sort by API">
<Header Text="API" />
<ig:BoundDataField DataFieldName="Depth" Key="Depth" Width="40px" Header-Tooltip="Click to Sort by Depth">
<Header Text="Depth" />
<ig:BoundDataField DataFieldName="AbstractNumber" Key="AbstractNumber" Width="50px" Hidden="false" Header-Tooltip="Click to Sort by Abstract Number">
<Header Text="Abstract" />
<ig:BoundDataField DataFieldName="FieldName" Key="FieldName" Header-Tooltip="Click to Sort by Field Name">
<Header Text="Field" />
<ig:BoundDataField DataFieldName="Operator" Key="Operator" Hidden="false" Header-Tooltip="Click to Sort by Operator">
<Header Text="Operator" />
</Columns>
<Behaviors>
<ig:Filtering></ig:Filtering>
<ig:Sorting></ig:Sorting>
<ig:Paging PageSize="15" PagerAppearance="Bottom">
<%--<PagingClientEvents Initialize="WebDataGridView_Initialize" PageIndexChanged="WebDataGridView_PageIndexChanged"
PageIndexChanging="WebDataGridView_PageIndexChanging" />--%>
<PagerTemplate>
<eml:SearchPager id="CustomerPager" runat="server" />
</PagerTemplate>
</ig:Paging>
</Behaviors>
</ig:WebDataGrid>
Here is the code that loads my pager's DropDownList (the available pages in the grid) when they click the "Search" button:
' get a reference to the drop down list within the pager
Dim DDLPager As DropDownList = DirectCast(DirectCast(WDGWells.Behaviors.Paging.PagerTemplateContainerBottom.FindControl("CustomerPager"), SearchPager).FindControl("PagerPageList"), DropDownList)
DDLPager.Items.Clear()
For i As Integer = 1 To Math.Ceiling(WellCount / 15)
DDLPager.Items.Add(New ListItem(i, i))
Next
' refresh the grid
SDSWells.SelectCommand = sqlCommandString
SDSWells.DataBind()
WDGWells.Rows.Clear()
WDGWells.DataBind()
WDGWells.Behaviors.Filtering.ApplyFilter()
' add the PageChanged event handler to the custom pager
Dim pagerControl As SearchPager = DirectCast(WDGWells.Behaviors.Paging.PagerTemplateContainerBottom.FindControl("CustomerPager"), SearchPager)
AddHandler pagerControl.PageChanged, AddressOf currentPageControl_PageChanged
pagerControl.DataBind()
pagerControl.SetCurrentPageNumber(DDLPager.SelectedValue)
Here are my WebDataGrid events:
Protected Sub WDGWells_DataFiltered(sender As Object, e As Infragistics.Web.UI.GridControls.FilteredEventArgs) Handles WDGWells.DataFiltered
Dim OfLabel As System.Web.UI.WebControls.Label = DirectCast(DirectCast(WDGWells.Behaviors.Paging.PagerTemplateContainerBottom.FindControl("CustomerPager"), SearchPager).FindControl("LBLOf"), System.Web.UI.WebControls.Label)
OfLabel.Text = "Of " & Math.Ceiling(WellCount / 15)
For i As Integer = 1 To (WellCount / 15)
End Sub
Protected Sub WDGWells_CustomDataBinding(sender As Object, e As DataBindingEventArgs)
Dim currentPage As Integer = grid.Behaviors.Paging.PageIndex
Dim pageSize As Integer = grid.Behaviors.Paging.PageSize
Dim startIndex As Integer = currentPage * pageSize
' I OMITTED THE LONG CODE HERE THAT BUILDS THE SelectCommand FOR MY SqlDataSource
Thank you so much! This was indeed the problem.
I was using document.getElementById("<%=WebDataGrid1.ClientID%>"); which returned the grid rendered as a DIV. What I should have been using was $find("<%=WebDataGrid1.ClientID%>"); which returns the actual grid object.
Thank you for your help!
Hello Jouin,
Thank you for the update. I have done some further looking into this matter. You are getting the error/break because the id you are trying to get the grid and dropdown list by are not their client ids. You should do the following to get the client id’s:
var grid = $find("<%=WebDataGrid1.ClientID%>"); var dropdownlist = document.getElementById("ctl00_CPHContent_WebDataGrid1_ctl00_DropDownList1");
Note to check the client id of the DropDownList1 I ran the code in the browser then did a right click view source and searched for “DropDownList1” until I found the element and get its generated client id.
I added the pages you provided to my project. They work perfectly. However, in MY page where I am trying to implement this paging behavior, it breaks on the grid.get_behaviors() line every time. I have attached your example as the "IGPagerTest.aspx" page and my example which is very similar as the "PagerTest.aspx" page. I am using Infragistics version 14.1. Can you see any difference between my page and your page that is causing this problem?
Thank you for the update. As long as you have the behaviors enabled as you should and get a handle to the grid you shouldn’t get any errors. I am attaching a working sample of the custom pager behavior for you to look at it. Please review the sample and let me know if you have any questions concerning this matter. Note I have removed the ig_res folder for file size to be attached to the fourms.
My goal is to make the grid page through JavaScript as your first example shows. However, I followed your first example exactly and my JavaScript functions seem to have a problem with grid.get_behaviors().
Are there any JavaScript references that I might be missing in my page or files missing on my server?