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 Reply
  • 485
    Offline posted in reply to Atul Pandey

    Hello Atul,

     

    As I am getting a little confused, let me clarify several things:

    1. Do you use an igGrid, or an igHierarchicalGrid? If you are using a hierarchical grid, then the ‘.ColumnLayouts’ option has to be set in the configuration, otherwise the grid would be a simple grid, not hierarchical. As far as I can see, this option is missing in your configuration. Here is how it may look like, for example:

     

    .ColumnLayouts(layouts =>
{
    layouts.For(x => x.ChildData)
    .Key("ChildData")
        .PrimaryKey("ProductID")
        .ForeignKey("ParentProdID")
        .Columns(childcolumn =>
        {
            childcolumn.For(x => x.ProductID).HeaderText("ProductID").Width("170px");
            childcolumn.For(x => x.Name).HeaderText("Name").Width("170px");
            childcolumn.For(x => x.Name).HeaderText("New Name").Template("<input class='comboTask' data-value='${Name}'/>").Width("170px");
        }).AddClientEvent(GridClientEvents.RowsRendered, "rowsRenderedChildAPT")
            .Features(features =>
            {
                features.Sorting().Mode(SortingMode.Multiple);
                features.Paging().Type(OpType.Local).PageSize(8).ShowPageSizeDropDown(false).NextPageLabelText("Next").PrevPageLabelText("Prev");
            });
})

     

    This option lets you set the features, columns and options for the child grids. This might explain why your child grid do not render.

     

    1. Regarding the [GridDataSourceAction]:

    In case you use Entity Framework, using LINQ would create a single request to the DB and the [GridDataSourceAction] might still be applicable and performant for your controller method. 

    Otherwise the remote Paging, Sorting and Filtering (if this is what you refer to as “searching”?) would not work out-of-the-box and would have to be handled manually on the server.

    There is a detailed help topic you may find useful, which shows handling remote Paging, Sorting, Filtering and Summaries.

    Would you please elaborate some more on your concerns and why you do not want to use the [GridDataSourceAction] attribute? 

    Please let me know if you need some further assistance or some additional information.

Children