CODEWITHSUNDEEP
c#asp.net-mvcdevexpress
Aavery
Aavery

Reputation: 66

How to add paging functionally to a DevExpress GridView with page controls

I am creating a new DevExpress GridView with pagination, but the links to other pages do not do anything when they are clicked. I need to add this functionallity, but I am not sure where to start.

The new DevExpress GridView is based off a view that doesn't use DevExpress. This page will be a list of the corporate directory, so it has columns like name, telephone, and location. The view has been created and displays with paging controls. I have done a bit of looking around on the DevExpress forums for similar issues, but those are all using .aspx and I am using .cshtml for my GridView.

public ActionResult DevExpressView()
{
   return View(EmployeeList);
}

@Html.DevExpress().GetStyleSheets(new StyleSheet { ExtensionSuite = ExtensionSuite.GridView})

@Html.DevExpress().GridView(
    settings =>
    {
        settings.Name = "GridView";
        settings.CallbackRouteValues = new { Controller = "DevExpessController", Action = "DevExpressView" };

        settings.KeyFieldName = "Clock";
        settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
        settings.SettingsPager.PageSize = 32;
        settings.Settings.VerticalScrollBarMode = ScrollBarMode.Visible;
        settings.Settings.VerticalScrollableHeight = 350;
        settings.ControlStyle.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(0);
        settings.ControlStyle.Border.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(0);
        settings.ControlStyle.BorderBottom.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(1);


        settings.Columns.Add("FirstName");
        settings.Columns.Add("LastName");
        settings.Columns.Add("Department");
        settings.Columns.Add("Title");
        settings.Columns.Add("PlantNO");
        settings.Columns.Add("Telephone");
        settings.Columns.Add("Mobile");
        settings.Columns.Add("Pager");

    }).Bind(Model).GetHtml()

There are controls at the bottom of the GridView to handle pagination, but nothing happens when they are clicked. I would like these controls to change the page of employees being displayed. Sorry if my question doesn't make sense, I am new to DevExpress.

Upvotes: 0

Views: 2162

Answers (1)

Marc
Marc

Reputation: 3959

Having only one Controller Action is not enough for the DevExpress server side controls. You need 2 Controller Actions, 1 View and 1 PartialView for that to work. Also make sure to load the scripts for GridView (see below).

Client navigates to:

public ActionResult DevExpressView()
{
    IQueryable<Employee> model = GetYourDataFromSomewhere();
    return View("EmployeeList", model);
}

EmployeeList.cshtml (View)

@model IEnumerable
@Html.DevExpress().GetScripts(new Script { ExtensionSuite = ExtensionSuite.GridView })
@Html.DevExpress().GetStyleSheets(new StyleSheet { ExtensionSuite = ExtensionSuite.GridView})

@Html.Partial("GridView", Model)

GridView.cshtml (Partial View)

Important: This view only needs to include the grid. Nothing else!

@Html.DevExpress().GridView(
settings =>
{
    settings.Name = "GridView";
    settings.CallbackRouteValues = new { Controller = "DevExpessController", Action = "DevExpressViewPartial" };

    settings.KeyFieldName = "Clock";
    settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
    settings.SettingsPager.PageSize = 32;
    settings.Settings.VerticalScrollBarMode = ScrollBarMode.Visible;
    settings.Settings.VerticalScrollableHeight = 350;
    settings.ControlStyle.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(0);
    settings.ControlStyle.Border.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(0);
    settings.ControlStyle.BorderBottom.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(1);


    settings.Columns.Add("FirstName");
    settings.Columns.Add("LastName");
    settings.Columns.Add("Department");
    settings.Columns.Add("Title");
    settings.Columns.Add("PlantNO");
    settings.Columns.Add("Telephone");
    settings.Columns.Add("Mobile");
    settings.Columns.Add("Pager");

}).Bind(Model).GetHtml()

Callback Action for the grid:

public ActionResult DevExpressViewPartial()
{
    IQueryable<Employee> model = GetYourDataFromSomewhere();
    return PartialView("GridView", model);
}

Have a look at their demo. If you copy that code (except the NorthwindDataProvider of course), you should have a working sample.

Upvotes: 1

Related Questions