Hi,
I am new to Infragistics. I am developing an application for my company based on Service oriented architecture. The application consists of a generic service layer built using ASP.Net Web Api and the front-end is being built on MVC.Net 4.5 . The front end has no idea about the business logic except for two things :1)the models of entities placed in a 'Common' folder shared by all layers and 2) the name of the service method that should be called for the desired client-side page. The DAL uses ADO.Net to execute queries and return results in either DataTable format or in the form of an object model. We are not using Entity Framework.
QUESTION#1: The client-end is a separate MVC 4.5 project, The controller ReadsAsAsync the action result of the service and the respective view renders it on the browser.We dont want to use the rest full datasource property of Infragistic control because we need to wrap the request along with some other required data which is then passed along to the service layer. therefore we cannot use " .DataSourceUrl(Url.Content("~/api/products")) " directly because the generic service controllers needs some data in the header to process the request ( or maybe we could use it ? ). Can we do all that(i.e Add some Http Request headers with the request) and still bind the grid to the WebApi. Is this possible ?
QUESTIOn#2: Now there is a possibility that some pages might request for a huge amount of data in the form of a GET request from the service. In IgniteUI's grid, the remote pagination implements itself without writing any query to fetch a desired set from the whole SELECT statement.From what i understand is that the Remote pagination automatically implements this remote pagination by requesting chunks of page sized rows from the .AsQueryable() data object which means that the SQL Server would have already execuated the "Select" query which might contain many rows of data and hence not an efficient way. So in a way the remote pagination is also getting data from the already executed query stored in the .AsQueryable() object returned from the service layer which we dont want or is this the normal procedure of pagination? Wont this still put load on SQL Server for selecting too many rows at one go.
Please point me in the right direction. Am I worrying about a potential issue or is this normal?
Hello,
For your first question it sounds like you would be better off letting your controller handle the calls to your service. I'd recommend setting up an Action in your Controller and then using that as the DataSourceUrl for the Grid. In that Action you can then generate the request as you like and make the call out to your service.
For paging, the grid is going to make a call to whatever data source you set for the control, adding on pageIndex and pageSize parameters to the request. Again you can make use of the Controller Action here, pulling out the pageIndex and pageSize parameters, and requesting only the amount of records from your service that you require. Please note that it is important that you have some way to get a count of the total records matching your query from the service that you can serialize and send back to the view with the data, so that the total number of pages can be correctly determined by the grid. These paging parameters will also apply to the first pull of data from the service, so the grid will only request the amount of records that it needs. This can then be handled by your service and you can determine how you want that to interact with your database, limiting the total number of records that get pulled initially.
Please let me know if you have any further questions or concerns about this matter or if I may be of any other assistance.
ohkay , got it. thanks alot.
One other thing i am facing regarding the layout of the grid i think it would be ok to ask it here or do i have to create another thread for it?
QUESTION: The columns of my igGrid are too many to be accommodated in a 800px wide div, instead of getting a horizontal scrollbar inside the grid container the columns are piling up on top of one another like a key value pair columns where key=column_name and its corresponding value on its side, Why is the grid behaving this way?
When I increase the width of the grid so wide so that it could fit all the columns in itself, the grid comes to the normal layout which i want , but the problem is I dont want to increase the width of the grid(the outer container) , instead i want a horizontal scrollbar inside the container/grid(inner container) so that i can see other columns using the horizontal scrollbar placed above the footer of the igGrid container.
What property do I have to change to get the default behavior of the grid and not get all the columns piling up on top of each other. Also how could i make my grid responsive so that if the window is wide enough to show all the columns ,it gets displayed & if i shorten the width of the browser window then a horizontal scrollbar appears inside the grid container.
P.S I need to place the igGrid inside a div which has a bootstrap class set on it because the dashboard is built using bootstrap3 , just saying because i dont know whether bootstrap conflicts with IgGrid or not.
The way to resolve this issue is to set a width on your columns. By default, if the columns have no width the grid is going to try to evenly size them to fit in the container as you are seeing. If you don't want to manually set a width for each column then you can use the defaultColumnWidth property of the grid which will apply for any column that you don't hardcode a width for. As soon as the total width of the columns exceeds that of the grid container a horizontal scrollbar will appear.
As for the responsive design, I recommend you check out the igGrid's Responsive Design Mode:
http://help.infragistics.com/Doc/jQuery/Current/CLR4.0?page=igGrid_Responsive_Web_Design_Mode_LandingPage.html
Also, please note that we do support using the igGrid with Bootstrap:
http://igniteui.com/grid/twitter-bootstrap
I have set the defaultcolumn width but still my grid is not displaying columns normally. Please have a look at my view and check the output i am seeing. Where am i going wrong. Also when i change .Width("1000px") to any other size it is not changing , it remains the same size when i run the view.
@(Html.Infragistics().Grid<COMMON.Models.User>() .ID("MyGrid") .PrimaryKey("usr_Username") .Features(features => { features.Tooltips(); features.Responsive(); features.Resizing(); features.Sorting(); features.Paging().PageSize(10); features.Filtering().FilterDialogContainment("window").Mode(FilterMode.Advanced).Type(OpType.Local); features.Updating().ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("usr_Username").ReadOnly(true); cs.ColumnSetting().ColumnKey("usr_Password").EditorType(ColumnEditorType.Text).Required(true); cs.ColumnSetting().ColumnKey("usr_Fullname").EditorType(ColumnEditorType.Text).Required(true); cs.ColumnSetting().ColumnKey("usr_IsDeleted").EditorType(ColumnEditorType.Text).Required(false); cs.ColumnSetting().ColumnKey("usr_IsActive").EditorType(ColumnEditorType.Text).Required(false); cs.ColumnSetting().ColumnKey("usr_Designation").EditorType(ColumnEditorType.Text).Required(true); cs.ColumnSetting().ColumnKey("usr_IsAdmin").EditorType(ColumnEditorType.Text).Required(false); cs.ColumnSetting().ColumnKey("usr_IsPwdExpired").EditorType(ColumnEditorType.Text).Required(false); cs.ColumnSetting().ColumnKey("usr_PwdLastResetDate").EditorType(ColumnEditorType.Text).Required(false); cs.ColumnSetting().ColumnKey("usr_InvalidLoginAttempts").EditorType(ColumnEditorType.Text).Required(false); cs.ColumnSetting().ColumnKey("usr_IsWindowsAuth").EditorType(ColumnEditorType.Text).Required(true); cs.ColumnSetting().ColumnKey("usr_IsLocked").EditorType(ColumnEditorType.Text).Required(false); cs.ColumnSetting().ColumnKey("usr_CreateTimeStamp").EditorType(ColumnEditorType.Text).Required(false); cs.ColumnSetting().ColumnKey("usr_ModifyTimeStamp").EditorType(ColumnEditorType.Text).Required(false); }); }) .DataSourceUrl(Url.Action("GetUsers")) .Width("1000px") .Height("400px") .DefaultColumnWidth("60px") .AutoGenerateColumns(false) .Columns(column => { column.For(x => x.usr_Username).HeaderText("Username"); column.For(x => x.usr_Password).HeaderText("Password"); column.For(x => x.usr_Fullname).HeaderText("Fullname"); column.For(x => x.usr_IsDeleted).HeaderText("IsDeleted"); column.For(x => x.usr_IsActive).HeaderText("usr_IsActive"); column.For(x => x.usr_Designation).HeaderText("usr_Designation"); column.For(x => x.usr_IsAdmin).HeaderText("usr_IsAdmin"); column.For(x => x.usr_IsPwdExpired).HeaderText("usr_IsPwdExpired"); column.For(x => x.usr_PwdLastResetDate).HeaderText("usr_PwdLastResetDate"); column.For(x => x.usr_InvalidLoginAttempts).HeaderText("usr_InvalidLoginAttempts"); column.For(x => x.usr_IsWindowsAuth).HeaderText("usr_IsWindowsAuth"); column.For(x => x.usr_IsLocked).HeaderText("usr_IsLocked"); column.For(x => x.usr_CreateTimeStamp).HeaderText("usr_CreateTimeStamp"); column.For(x => x.usr_ModifyTimeStamp).HeaderText("usr_ModifyTimeStamp"); }) .DataBind() .AvgRowHeight("200px") .UpdateUrl(Url.Action("UpdateUsers")).AutoCommit(true) //.ExpandColWidth("300px") .Render() )
OUTPUT is in the screenshot.
What you are seeing is the Responsive Vertical Rendering mode kicking in for your grid's configuration. By default the Responsive feature will try to determine if the columns can be displayed properly for the size of the grid and render them as key/value pairs if not. It is not really supposed to be used for grids with fixed size, however. Depending on your needs you can try altering its properties using our help docs as a guide - https://www.igniteui.com/help/api/2014.1/ui.iggridresponsive and https://www.igniteui.com/help/14.1/iggrid-responsive-web-design-mode-landingpage or remove it altogether (advisable if you plan on having fixed width for the grid).
I hope this helps!
Best regards,
Stamen Stoychev
Thanks alot, this solved it -> features.Responsive().EnableVerticalRendering(false);