iSeller Commerce
iSeller POS Retail
iSeller POS F&B
iSeller POS Express
Crosslight
WebUI
ClientUI
What's New
Download Trial
Web Solution
Mobile Solution
Enterprise Solution
Custom Development
Blog
Community
Latest Development Blogs
ForumPostTopic
Browse By Tag
Hi,
I had migrated my application from WebUIStudioNET2008R2 to intersoftstudio2014r2. In the newer version of the controls I am seeing an issue in the InterSoft WebGrid 9 where the Grid pager is not fixed. Pager disappears as the number of rows in the grid increases. To see the pager I will have to scroll down the scroll bar of web tab. [ Web grid is sitting inside the Web Tab]
I believe if the number of rows increases in the grid auto scroll bar should appear and the pager should always be fixed on the page. I am not seeing this behaviour in the web grid control.
More details below.
WebTab Settings:
<ISWebDesktop:WebTab ID="TabCtrl" runat="server" Height="100%" Width="100%" AllowTextWrapping="False"
DefaultTabSeparatorWidth="0px" RenderMode="ComplexImages" TabSeparator="False"
AllowClose="Yes" AllowScrolling="True">
<FrameStyle Overflow="Hidden" OverflowY="Hidden" OverflowX="Hidden" BackColor="#BFDBFF">
<Padding Top="5px" />
</FrameStyle>
<ContainerStyle Overflow="Auto" OverflowY="Auto" OverflowX="Auto" BackColor="#BAD3F5"
BorderColor="#8DB2E3" BorderStyle="Solid" BorderWidth="1px" Height="100%" Width="100%"
Font-Names="segoe ui,tahoma" Font-Size="9pt">
<Padding Top="5px" Left="5px" Right="5px" Bottom="5px"></Padding>
</ContainerStyle>
WebGrid Settings:
<ISWebGrid:WebGrid ID="GridCtrl" runat="server" DataSourceID="MOInquiryLinqDataSource"
RenderingMode="HTML5" DefaultStyleMode="Elegant" Height="100%" UseDefaultStyle="True"
Width="100%" OnInitializeRow="OnInitializeRow" DataCacheStorage="Session">
<LayoutSettings AllowColumnFreezing="Yes" AllowColumnMove="Yes" AllowExport="Yes"
AllowFilter="Yes" AllowSorting="Yes" ApplyFiltersKey="Enter" Hierarchical="True"
ShowFilterStatus="True" VirtualPageSize="250" RowHeightDefault="-1px" AutoHeight="True"
HideColumnsWhenGrouped="No" PagingExportMode="ExportAllData" PagingMode="ClassicPaging"
PagingSize="20" PagingStyleUI="Slider" VirtualLoadMode="LargeData">
<ClientSideEvents OnRowContextMenu="OnRowContextMenu" OnCellDblClick="OnCellDblClick" />
<HeaderStyle CssClass="WG5E-Header" CustomRules="height: auto" />
</LayoutSettings>
Please let me know what I am doing wrong here.
I created a simple sample of WebGrid based on the provided snippet code. However, I was unable to reproduce the reported problem in my local end.
I enclosed my simple sample as attachment (Sample_PagerIsNotShowing.zip). Extract the zip file and add the sample file (PagerIsNotShowing_WebTab.aspx and PagerIsNotShowing_WebGrid.aspx) into WebGrid sample website in your development machine.
Could you please modify this sample so it replicates the reported problem? I will continue my investigation from the modified sample.
Look forward to hearing back from you.
Hi Yudi,
Thanks for your response.
You can see the issue in the attached sample (OPS Create page). In this page web tab is occuppying the complete 100% height. I modified the styles still it is not coming perfect to me.
Regards,
Jagadhish
Exception, "Integration Error: Can't find DesktopManager instance!", persist when I tried to open OpsCreate.aspx sample file. The exception is no longer persist if IntegratedToDesktopManager property of ProgressDlg WebDialogBox is set to False.
In this page web tab is occuppying the complete 100% height. I modified the styles still it is not coming perfect to me.
Please correct me if I'm wrong but there is no WebTab in OpsCreate.aspx page. Could you please inform me about the expected result of OpsCreate.aspx page so that I can assist you further.
The only issue i wanted the fix is to set the web tab height to 100% of the page height. For your reference i have attached the screen shot that shows the actual issue.
Thank you for the explanation. It helps a lot to identify the problem.
Please follow the steps below in order to fix the problem.
<style type="text/css"> html, body, form { height: 100%; width: 100%; margin: 0; padding: 0; } </style>
<body id="body" runat="server" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" bgcolor="#BAD3F5"> <form id="form1" runat="server"> <div style="height: 100%;"> <table style="height: 100%; table-layout: fixed; border-collapse: collapse; width: 100%;"> ... </table> </div> </form> </body>
The result will look like following.
For your reference, I enclosed the modified project. Please give it a spin and let us know how it works on your end.
I have modified the styles and i was able to fix the web tab issue. But the web grid pager issue still not resolved.
If the web grid has more than 30 rows it doesnt show the pager on screen but it shows the vertical and horrizontal scroll bars. To see the pager i will have to scroll down the vertical scroll bar. Actually pager is hidden inside ther webtab(frame).
I modified the unbound grid in OpsCreate.aspx page and bind it to Customers table of Northwind. The grid now has 91 rows. Next, simply enable paging feature and the pager is rendered without any issues on browser.
Screenshot:
Please let me know if you have different result.
This problem doesn't deals with WebGrid control. It is simply about layout using html and css.
Let's focus on the OpsCreate.aspx page. This page has a header and content. In the header, I add the Refresh and Create button. WebGrid will be added in the content area.
First, I wrap the header in a div element and define the style as follow.
div#header { top: 0px; left: 0px; right: 0px; height: 40px; position: absolute; } <div id="header"> <table class="style1" style="background-color: #bad3f5; vertical-align: middle; text-align: center; height: 40px"> <tr> <td> <input id="RefreshCtrl" type="button" value="Refresh" onclick="OnRefresh()" style="width: 80px" /> </td> <td> <input id="CreateCtrl" type="button" value="Create" onclick="OnCreate()" style="width: 80px" /> </td> </tr> </table> </div>
Next, add another div as the container for content. The height of this div is 100% minus the height of header. The snippet below shows how to do this using css.
div#content { top: 40px; left: 0px; right: 0px; bottom: 0px; position: absolute; } <div id="content"> <div style="position: relative; height: 100%; overflow: hidden;"> <ISWebGrid:WebGrid ID="GridCtrl" runat="server" Width="100%" Height="100%" UseDefaultStyle="True" RenderingMode="HTML5" DataSourceID="AccessDataSource1"> ... </ISWebGrid:WebGrid> </div> </div>
I enclosed the modified version of OpsCreate.aspx page for reference. By applying the above snippet code, your requirement - to show pager in WebGrid - now works.
This should helps.
or
Choose this if you're already a member of Intersoft Community Forum. You can link your OpenID account to your existing Intersoft Social ID.
Choose this if you don't have an Intersoft account yet. Your authenticated OpenID will be automatically linked to your new Intersoft account.
Enter your Wordpress Blogname