Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Atul Pandey
70
How to implement remote paging in infragistic ASP.net MVC grid?
posted

I'm reading about igGrid remote paging here : http://help.infragistics.com/NetAdvantage/jQuery/2013.1/CLR4.0?page=igGrid_Paging.html.

As per the link above, it says :

"If you are implementing your own remote service (for example in ASP.NET or PHP), in order to properly initialize and render the pager, your service must specify both the responseDataKey (grid option) and the recordCountKey (paging option). The recordCountKey member tells the Paging widget how many records in total are in the backend. The responseDataKey specifies which property in the response contains the resulting data.

I am returning my data in responseDataKey and recordCountKey but it  is not working for me. I have tried by removing [GridDataSourceAction] attribute from my Action.

Below is my code : 

CSHTML : 

@( Html.Infragistics().Grid<Searchclient>()
.ID("igGrid1")
.Width("auto")
.EnableHoverStyles(false)

// Enable continuous virtualization
.PrimaryKey("PartyId1")

.Columns(column =>
{
column.For(x => x.FullName).DataType("string").HeaderText("Full Name").Template("<div style='min-width:100px'>${FullName}</div> ");

//column.For(x => x.TelPremise).DataType("string").HeaderText("Tel Premise").Template("<div style='min-width:100px'>${TelPremise}</div> ");

//column.For(x => x.TelCell).DataType("string").HeaderText("Tel Cell").Template("<div style='min-width:100px'>${TelCell}</div> ");

column.For(x => x.CompanyName).DataType("string").HeaderText("Company Name").Template("<div style='min-width:150px'>${CompanyName}</div> ").Hidden(true);
column.For(x => x.FirstName1).DataType("string").HeaderText("FirstName1").Template("<div style='min-width:130px'>${FirstName1}</div> ").Hidden(true);
column.For(x => x.LastName1).DataType("string").HeaderText("Last Name1").Template("<div style='min-width:130px'>${LastName1}</div> ").Hidden(true);
column.For(x => x.Firstname2).DataType("string").HeaderText("First Name2").Hidden(true);
column.For(x => x.Lastname2).DataType("string").HeaderText("Last Name2").Hidden(true);
column.For(x => x.StreetNo).DataType("string").HeaderText("Street No").Template("<div style='min-width:100px'>${StreetNo}</div> ").Hidden(true);
column.For(x => x.Street).DataType("string").HeaderText("Street").Template("<div style='min-width:100px'>${Street}</div> ").Hidden(true);
column.For(x => x.Address).DataType("string").HeaderText("Address").Template("<div style='min-width:100px'>${Address}</div> ");
column.For(x => x.City).DataType("string").HeaderText("City").Template("<div style='min-width:80px'>${City}</div> ");
column.For(x => x.State).DataType("string").HeaderText("State").Template("<div style='min-width:80px'>${State}</div> ");
column.For(x => x.Zipcode).DataType("string").HeaderText("Zipcode").Template("<div style='min-width:100px'>${Zipcode}</div> ");
column.For(x => x.CustomerNumber).DataType("string").HeaderText("Customer Number").Hidden(true);
column.For(x => x.AccountNumber).DataType("string").HeaderText("Account Number").Template("<div style='min-width:120px'>${AccountNumber}</div> ");
column.For(x => x.Email1).DataType("string").HeaderText("Email1").Template("<div style='min-width:100px'>${Email1}</div> ");
column.For(x => x.Email2).DataType("string").HeaderText("Email2").Template("<div style='min-width:100px'>${Email2}</div> ");
column.For(x => x.Email3).DataType("string").HeaderText("Email3").Hidden(true);
column.For(x => x.Email4).DataType("string").HeaderText("Email4").Hidden(true);
//column.For(x => x.PartyId).DataType("string").HeaderText("PartyId");
column.For(x => x.PartyId1).HeaderText("PartyId").DataType("int").Hidden(true);

})
.Features(features =>
{

features.Responsive().ForceResponsiveGridWidth(false).EnableVerticalRendering(false).ColumnSettings(setting =>
{
setting.ColumnSetting().ColumnKey("FullName").Classes("ui-visible-phone ui-visible-tablet ui-visible-desktop").Configuration(conf => conf.AddColumnModeConfiguration("phone", c => c.Template("<span>${FullName}</span>")));

setting.ColumnSetting().ColumnKey("telpremise").Classes("ui-hidden-phone");
setting.ColumnSetting().ColumnKey("firstname1").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("telcell").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("street").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("address").Classes("ui-hidden-phone");
setting.ColumnSetting().ColumnKey("lastname1").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("email1").Classes("ui-hidden-phone");
setting.ColumnSetting().ColumnKey("address").Classes("ui-hidden-phone");
setting.ColumnSetting().ColumnKey("zipcode").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("accountnumber").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("email2").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("city").Classes("ui-visible-desktop");
setting.ColumnSetting().ColumnKey("state").Classes("ui-hidden-phone");
setting.ColumnSetting().ColumnKey("PartyId1").Classes("ui-hidden-phone");

});

features.Hiding().HiddenColumnIndicatorHeaderWidth(14).ColumnSettings(s => s.ColumnSetting().ColumnKey("CompanyName").AllowHiding(true));
features.Resizing().AllowDoubleClickToResize(true).DeferredResizing(true);
features.Paging().Type(OpType.Remote).PageSize(10).PrevPageLabelText("Prev").NextPageLabelText("Next");
features.Sorting().Type(OpType.Local).Mode(SortingMode.Single).ColumnSettings(settings =>
{
settings.ColumnSetting().ColumnKey("PartyId").AllowSorting(true);

});
features.RowSelectors().EnableCheckBoxes(true).EnableRowNumbering(false);
features.Selection().MouseDragSelect(false).MultipleSelection(false).Mode(SelectionMode.Row);
features.Filtering().Mode(FilterMode.Simple);
features.Sorting().Type(OpType.Remote);
})

.DataSourceUrl(Url.Action("GetAccountList"))
.Width("auto")


.DataBind()
.Render()
)

CS : 

// [GridDataSourceAction]
public ActionResult GetAccountList(int page, int pageSize)
{
if (Session["Condition"] != null)
{
string condition = (string)Session["Condition"];
var searchlist = DBmain.GetSearchClientPaging(condition, page, pageSize);
return Json(new
{
responseDataKey = searchlist,
recordCountKey = 295207
}, JsonRequestBehavior.AllowGet);

}
}

Please help. Let me know if you have any question.

Parents
No Data
Reply
  • 485
    Offline posted

    Hello Atul,

     

    Thank you for posting in our forum.

     

    The ‘responseDataKey’ option tells the igGrid which property in the server response would contain the data that would be used when databinding. It should be present in the grid initialization configuration – here is just an example:

     

    @(Html.Infragistics()
.Grid(Model)
.ID("grid")
.Width("100%")
.Height("600px")
.PrimaryKey("ProductID")
.AutoGenerateColumns(false)
.AutoCommit(true)
.Columns(column =>
{
    column.For(x => x.ProductID).HeaderText("Id").Width("20%");
    column.For(x => x.ProductName).HeaderText("Name").Width("50%");
    column.For(x => x.StartDate).HeaderText("Date").DataType("date").Width("30%");
})
.Features(features =>
{
    features.Paging().PageSize(10).Type(OpType.Remote).RecordCountKey("TotalRecordsCount");
})
.DataSourceUrl(Url.Action("GetData1"))
.ResponseDataKey("Records")
.Render()
)

     

    The [GridDataSourceAction] attribute allows you to use the remote grid features out-of-the-box. Removing it would mean you would have to implement all the data handling server logic yourself, so unless you have some specific requirement, I would suggest that you do not remove it, and use the default implementation (if it suits your scenario, of course).

     

    I have attached an isolated MVC code sample you may find helpful: it has a grid with remote features and uses [GridDataSourceAction] in the Controller. I have used Ignite UI 18.2 – you may want to change the dll files and CDN links in case it differs from the version you use in your own application.

    igGridRemoteFeatures.zip

     

    In case adding ‘responseDataKey’ to your grid configuration and [GridDataSourceAction] to your Controller does not solve your problem, I would appreciate some additional information regarding your scenario:

    • Which version of Ignite UI do you use?
    • Do you get an error in the browser console when the grid calls the server?
    • Are you able to build the solution at all, or do you get some error in Visual Studio?

     

     

    I look forward to your reply.

Children