Hi,
I am using Infragistics UltraWebGrip (Version=7.3.20073.1053). Following is the design code that is being used:
</
igtbl:ultrawebgrid><igtbl:ultrawebgrid id="grdPOItem"
style="Z-INDEX: 114; LEFT: 8px; POSITION: absolute; TOP: 281px" runat="server"
Height="192px" width="849" ImageDirectory="/ig_common/Images/" EnableViewState="False"
Browser="Xml">
<Bands>
<igtbl:UltraGridBand>
<
AddNewRow Visible="NotSet" View="NotSet"></AddNewRow>
</igtbl:UltraGridBand>
</Bands>
<DisplayLayout UseFixedHeaders="True" StationaryMargins="HeaderAndFooter" AllowSortingDefault="OnClient"
RowHeightDefault="20px" Version="3.00" SelectTypeRowDefault="Extended" RowsRange="1000" HeaderClickActionDefault="SortMulti"
BorderCollapseDefault="Separate" AllowColSizingDefault="Free"
EnableInternalRowsManagement="True" Name="grdPOItem" LoadonDemand="Xml" TableLayout="Fixed">
However, after implementing the UltraWebGrid in the above manner, paging is not happening. A separate method for InitializeDataSource is not written in this page because the grid is getting populated using DataSet.
When "next' link is clicked, the grid does not show the next page. It is showing the first page only. Though I can see a partial postback call is happening.
How can I make Browser="Xml" and LoadonDemand="Xml" successful work in this page? Partial postback is an absolute necessary for this grid on this page.
Hello sormita,
Thank you for posting on Infragistics forum.
Can you tell me what kind of Data Source do you use for the grid?
You can follow this example that shows how to configure the grid to work with Xml “LoadOnDemand” property - http://help.infragistics.com/Help/NetAdvantage/ASPNET/2010.3/CLR4.0/html/Infragistics4.WebUI.UltraWebGrid.v10.3~Infragistics.WebUI.UltraWebGrid.UltraGridLayout~LoadOnDemand.html
In the example SQL Data Source is used that is then applied to a “DataSet” trough adapter.
The description below the example explains how the usage of Xml “LoadOnDemad” affects the usage of the grid functionalities including paging.
The usage of paging itself is explained in the following article - http://help.infragistics.com/Help/NetAdvantage/ASPNET/2010.3/CLR4.0/html/WebGrid_Setting_Basic_Paging.html
Follow these guides and let me know if you have any additional questions.
Hi Alex,
I have implemented all the things suggested by you in your reply. But still the pagination is not happening.
I created a separate solution for using this Ultrawebgrid with Browser="Xml" and LoadOnDemand="Xml". In this solution, the grid pagination works perfectly fine but in the main solution it is not working.
Please have a look in the following code which I have created for testing and where pagination is working:
<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title></title> <style type="text/css"> .style1 { width: 354px; } </style></head><body> <form id="form1" runat="server"> <table style="width:50%;"> <tr> <td class="style1"> <asp:TextBox ID="txtPONumber" runat="server"></asp:TextBox> </td> <td> <asp:Button ID="btnSrch" runat="server" Text="Search" /> </td> <td> </td> </tr> <tr> <td class="style1"> <igtbl:UltraWebGrid ID="grdPOnumber" runat="server" Width="323px"> <bands> <igtbl:UltraGridBand> <addnewrow view="NotSet" visible="NotSet"> </addnewrow> </igtbl:UltraGridBand> </bands> <displaylayout name="UltraWebGrid1" selecttyperowdefault="Single" stationarymarginsoutlookgroupby="True" tablelayout="Fixed" version="4.00" colfootersvisibledefault="Yes"> <framestyle bordercolor="#999999" borderstyle="None" borderwidth="3px" cursor="Default" width="323px"> </framestyle> <rowalternatestyledefault backcolor="#E9E9F7"> <borderdetails colorleft="233, 233, 247" colortop="233, 233, 247" /> </rowalternatestyledefault> <headerstyledefault backcolor="#2B64A7" bordercolor="Black" borderstyle="Solid" forecolor="White"> <borderdetails colorleft="White" colortop="White" widthleft="1px" widthtop="1px" /> </headerstyledefault> <rowstyledefault backcolor="#C7D5E8" bordercolor="Gray" borderstyle="Solid" borderwidth="1px"> <padding left="3px" /> <borderdetails colorleft="199, 213, 232" colortop="199, 213, 232" /> </rowstyledefault> <selectedrowstyledefault backcolor="#0A75F0" forecolor="White"> </selectedrowstyledefault> <activationobject bordercolor="Black" borderstyle="Dotted" borderwidth=""> </activationobject> <filteroptionsdefault> <filterdropdownstyle backcolor="White" bordercolor="Silver" borderstyle="Solid" borderwidth="1px" customrules="overflow:auto;" font-names="Verdana,Arial,Helvetica,sans-serif" font-size="11px" width="200px"> <padding left="2px" /> </filterdropdownstyle> <filterhighlightrowstyle backcolor="#151C55" forecolor="White"> </filterhighlightrowstyle> <filteroperanddropdownstyle backcolor="White" bordercolor="Silver" borderstyle="Solid" borderwidth="1px" customrules="overflow:auto;" font-names="Verdana,Arial,Helvetica,sans-serif" font-size="11px"> <padding left="2px" /> </filteroperanddropdownstyle> </filteroptionsdefault> </displaylayout> </igtbl:UltraWebGrid> </td> <td> </igtbl:ultrawebgrid><igtbl:ultrawebgrid id="grdPOItem" style="Z-INDEX: 114; LEFT: 8px; POSITION: absolute; TOP: 281px" runat="server" Height="192px" width="849" ImageDirectory="/ig_common/Images/" EnableViewState="False" Browser="Xml" onpageindexchanged="grdPOItem_PageIndexChanged"> <Bands> <igtbl:UltraGridBand><AddNewRow Visible="NotSet" View="NotSet"></AddNewRow> </igtbl:UltraGridBand> </Bands> <DisplayLayout UseFixedHeaders="True" StationaryMargins="HeaderAndFooter" AllowSortingDefault="OnClient" RowHeightDefault="20px" Version="3.00" SelectTypeRowDefault="Extended" RowsRange="1000" HeaderClickActionDefault="SortMulti" BorderCollapseDefault="Separate" AllowColSizingDefault="Free" EnableInternalRowsManagement="True" LoadOnDemand="Xml" Name="grdPOItem" TableLayout="Fixed"> <AddNewBox BoxStyle-BorderWidth="1px" BoxStyle-BorderStyle="Solid" BoxStyle-BackColor="LightGray" BoxStyle-BorderDetails-ColorTop="White" BoxStyle-BorderDetails-WidthLeft="1px" BoxStyle-BorderDetails-WidthTop="1px" BoxStyle-BorderDetails-ColorLeft="White"> <BoxStyle BackColor="LightGray" BorderWidth="1px" BorderStyle="Solid"><BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px"></BorderDetails></BoxStyle> </AddNewBox> <HeaderStyleDefault BorderColor="Black" BorderStyle="Solid" HorizontalAlign="Left" ForeColor="Black" BackColor="LightGray"> <BorderDetails ColorTop="White" WidthLeft="1px" WidthTop="1px" ColorLeft="White"></BorderDetails> </HeaderStyleDefault> <FrameStyle width="849px" Cursor="Default" BorderWidth="1px" Font-Size="8pt" Font-Names="Verdana" BorderColor="#999999" BorderStyle="Solid" BackColor="#F3F3F6" Height="192px"></FrameStyle>
<Images ImageDirectory="/ig_common/Images/"></Images>
<FooterStyleDefault BorderWidth="1px" BorderStyle="Solid" BackColor="LightGray"> <BorderDetails ColorTop="White" WidthLeft="1px" WidthTop="1px" ColorLeft="White"></BorderDetails> </FooterStyleDefault> <ClientSideEvents AfterXmlHttpResponseProcessed="grdPOItem_AfterXmlHttpResponseProcessed" MouseOverHandler="grdPOItem_OnMouseOver" MouseOutHandler="grdPOItem_MouseOutHandler"></ClientSideEvents> <ActivationObject BorderStyle="Dotted" BorderWidth="" BorderColor="Black"></ActivationObject> <Images></Images> <Pager AllowPaging="True"> </Pager> <EditCellStyleDefault BorderWidth="0px" BorderStyle="None"></EditCellStyleDefault> <SelectedRowStyleDefault ForeColor="White" BackColor="#0A246A"></SelectedRowStyleDefault> <RowAlternateStyleDefault BackColor="Lavender"> <Padding Left="3px"></Padding> <BorderDetails ColorTop="255, 255, 192" ColorLeft="255, 255, 192"></BorderDetails> </RowAlternateStyleDefault> <RowStyleDefault BorderWidth="1px" Font-Size="8pt" Font-Names="Verdana" BorderColor="Gray" BorderStyle="Solid" BackColor="#C7D5E8"> <Padding Left="3px"></Padding> <BorderDetails ColorTop="White" WidthLeft="0px" WidthTop="0px" ColorLeft="White"></BorderDetails> </RowStyleDefault> <FilterOptionsDefault> <FilterDropDownStyle width="200px" BorderWidth="1px" Font-Size="11px" Font-Names="Verdana,Arial,Helvetica,sans-serif" BorderColor="Silver" BorderStyle="Solid" BackColor="White" CustomRules="overflow:auto;"> <Padding Left="2px"></Padding> </FilterDropDownStyle> <FilterHighlightRowStyle ForeColor="White" BackColor="#151C55"></FilterHighlightRowStyle> </FilterOptionsDefault> </DisplayLayout> </igtbl:UltraWebGrid> <asp:Label ID="oldLbl" runat="server"></asp:Label> <asp:Label ID="newLbl" runat="server"></asp:Label> </td> <td> </td> </tr> <tr> <td class="style1"> <asp:Label ID="lblFrm" runat="server" Text="From:"></asp:Label> <igsch:WebDateChooser ID="frmWebDateChooser" runat="server"> <CalendarLayout NextMonthImageUrl="ig_cal_blueN0.gif" PrevMonthImageUrl="ig_cal_blueP0.gif" ShowMonthDropDown="False" ShowYearDropDown="False" TitleFormat="Month"> <CalendarStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" BackColor="#CCDDFF" BorderColor="SteelBlue" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt"> </CalendarStyle> <DayHeaderStyle BackColor="#E0EEFF" Font-Bold="True" Font-Size="8pt" ForeColor="#8080A0" Height="1pt"> <BorderDetails ColorBottom="LightSteelBlue" StyleBottom="Solid" WidthBottom="1px" /> </DayHeaderStyle> <NextPrevStyle BackgroundImage="ig_cal_blue2.gif" /> <OtherMonthDayStyle ForeColor="SlateGray" /> <SelectedDayStyle BackColor="SteelBlue" /> <TitleStyle BackColor="#CCDDFF" BackgroundImage="ig_cal_blue2.gif" Font-Bold="True" Font-Size="10pt" ForeColor="#505080" Height="18pt" /> <TodayDayStyle BackColor="#E0EEFF" /> <FooterStyle BackgroundImage="ig_cal_blue1.gif" Font-Size="8pt" ForeColor="#505080" Height="16pt"> <BorderDetails ColorTop="LightSteelBlue" StyleTop="Solid" WidthTop="1px" /> </FooterStyle> </CalendarLayout> </igsch:WebDateChooser> </td> <td> <asp:Label ID="lblTo" runat="server" Text=" To: "></asp:Label> <igsch:WebDateChooser ID="ToWebDateChooser" runat="server" Value=""> <CalendarLayout NextMonthImageUrl="ig_cal_blueN0.gif" PrevMonthImageUrl="ig_cal_blueP0.gif" ShowMonthDropDown="False" ShowYearDropDown="False" TitleFormat="Month"> <CalendarStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" BackColor="#CCDDFF" BorderColor="SteelBlue" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt"> </CalendarStyle> <DayHeaderStyle BackColor="#E0EEFF" Font-Bold="True" Font-Size="8pt" ForeColor="#8080A0" Height="1pt"> <BorderDetails ColorBottom="LightSteelBlue" StyleBottom="Solid" WidthBottom="1px" /> </DayHeaderStyle> <NextPrevStyle BackgroundImage="ig_cal_blue2.gif" /> <OtherMonthDayStyle ForeColor="SlateGray" /> <SelectedDayStyle BackColor="SteelBlue" /> <TitleStyle BackColor="#CCDDFF" BackgroundImage="ig_cal_blue2.gif" Font-Bold="True" Font-Size="10pt" ForeColor="#505080" Height="18pt" /> <TodayDayStyle BackColor="#E0EEFF" /> <FooterStyle BackgroundImage="ig_cal_blue1.gif" Font-Size="8pt" ForeColor="#505080" Height="16pt"> <BorderDetails ColorTop="LightSteelBlue" StyleTop="Solid" WidthTop="1px" /> </FooterStyle> </CalendarLayout> </igsch:WebDateChooser> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="style1"> </td> <td> </td> <td> </td> </tr> <tr> <td class="style1"> </td> <td> </td> <td> </td> </tr> </table> <div> </div> </form></body></html>
Following code does not work:
<%
%>
<!
"-//W3C//DTD HTML 4.0 Transitional//EN">
>
="GENERATOR"/>
="CODE_LANGUAGE"/>
="vs_defaultClientScript"/>
="vs_targetSchema"/>
="stylesheet"/>
="text/javascript">
<!--
objRequest;
grid;
adjustDateRange()
{
//document.getElementById("radDocDateRange");
);
).value;
selectedFromDate = fromDate.getValue();
selectedToDate = toDate.getValue();
//alert(DtRangVal[1].checked);
(DtRangVal[1].checked)
toDate.setValue(selectedFromDate);
}
else
(toDt.length > 0)
fromDate.setValue(document.getElementById(
).value);
toDate.setValue(document.getElementById(
//alert('SelectedFromDate is null');
grdPO_AfterRowActivateHandler(gridName, rowId)
rowIndex = r[2];
row = igtbl_getRowById(rowId);
col = igtbl_getElementById(grid.Bands[0].Columns[0].Id);
filValue = row.getCell(0).getValue();
(window.XMLHttpRequest)
objRequest =
XMLHttpRequest();
(window.ActiveXObject)
// This is the method that Infragistics recommends to apply a grid
// filter. It getts pretty messy when you have more than 1 Query String
// which is the case when you go out to a "child window"
+ filValue;
objRequest.onreadystatechange = ProcessResponse;
)
objRequest.open(
//alert(url);
objRequest.send(
ProcessResponse()
// If the request has been processed completely
(objRequest.readyState == 4)
// See if was successful
(objRequest.status == 200)
// Get the grid object, and call its built-in AJAX request function to make it load its first page
// after the filter has been completed
grid = igtbl_getGridById(
grid.invokeXmlHttpRequest(grid.eReqType.Page,grid,1);
// If the AJAX call was not sucessful, inform the user
alert(
//alert(objRequest.responseText);
function
grdPOItem_MouseOutHandler(gridName, id, objectType){
//Add code to handle your event here.
window.status =
;
check4fullPONumber(){
//alert('Checking PO');
//alert(POText);
(POText.length == 10)
fromDate.setValue(
toDate.setValue(
//it was erased
-->
grdPOItem_AfterXmlHttpResponseProcessed(gridName){
//igtbl_setActiveRow("grdPOItem",igtbl_getElementById("grdPOItem_r_0"));
count = grid.Rows.length;
(i=0; i<count; i++)
//get the row object from the grid object from row number
row = grid.Rows.getRow(i);
val = row.getCell(31).getValue();
//alert(val);
foundOne =
//exit for;
(foundOne)
document.getElementById(
//var col = igtbl_getElementById(grid.Bands[0].Columns[30].Value);
//alert("Col Val.: " + col);
igtbl_selectRow(
grdPOItem_OnMouseOver(gridName, cellId){
//Find and Set next editable cell and set it active
myGrid = igtbl_getGridById(gridName);
row = igtbl_getRowById(cellId);
cell = igtbl_getCellById(cellId);
k;
newcell;
i = cell.Index;
strIsEditable;
strKey =row.Band.Columns[i].Key;
cell.Element.style.cursor =
/*cell.Element.style.color = "red"*/
cellPoSoldTo = igtbl_getCellById(row.getCellFromKey(
).Id);
cellPoShipTo = igtbl_getCellById(row.getCellFromKey(
cellPoPlantTo = igtbl_getCellById(row.getCellFromKey(
cellPoNumber = igtbl_getCellById(row.getCellFromKey(
))
poItem = cell.Element.innerText;
length = cell.Element.innerText.length;
poItem = cell.Element.innerText.substring(0,length-1);
shipTo = cellPoShipTo.Element.innerText;
plant = cellPoPlantTo.Element.innerText;
+ plant;
window.status = status;
window.status=
+ cell.Element.innerText;
="GridLayout">
="server">
17px"
="1"
65px"
="1px"
="Null">
="ig_cal_silverP0.gif"
="ig_cal_silverN0.gif">
="Solid"
="ig_cal_silver2.gif"
480px"
="server"
="#404040">
0px"
4px"
"
="Horizontal">
48px"
61px"
="168px">
="3.00"
="Separate"
="Fixed"
="RowSelect">
="LightGray"
="Solid">
="Black"
="LightGray">
="Verdana"
="Verdana,Arial,Helvetica,sans-serif"
="overflow:auto;">
="Lavender">
="#C7D5E8">
="grdPOItem_PageIndexChanged">
="OnClient"
="SortMulti"
="Fixed">
="grdPOItem_OnMouseOver"
="True">
="Silver"
Please help me out...
I was going through the following sample:
http://samples.infragistics.com/aspnet/Samples/WebDataGrid/Editing-and-Selection/Activation-Client-Events/Default.aspx?cn=data-grid&sid=8660f7f9-0338-41d7-a5b9-a40e2f5778b7
As you can see in this sample paging is implemented. Ajax calls are made whenever the next page number is clicked. Similar thing is done in my application. However unlike the WebDataGrid in my application, the WebDataGrid in this sample does not use Browser=XML or LoadOnDemand=XML to enable partial post back during paging.
Can you please point out exactly what property is used to implement paging in the above sample?
Just using "<ig:Paging PagerAppearance="Bottom" PageSize="10" Enabled="true" />" does not enable partial post back during pagination. It is doing full post back.
Thanks for your help.
Sormita
Thanks for the sample Alex, I will try out the code in the sample and get back to you if I face some further issue.