ASP devexpress How to filter gridview by combobox selected item

Question

I have problem with interaction from combobox to gridview. My use case is: User select from combox value and gridview will update its content by value from combobox. I'm using devexpress controls in aps webapplication.

Model:

public class MyModel
{
    public IEnumerable<Person> Persones()
    {
        return DataProvider.GetPersons();
    }

    public IEnumerable<Role> Roles()
    {
        return DataProvider.GetRoles();
    }

    public int SelectedRoleId { get; set; }
}

Index view:

@model DXWebApplication1.Models.MyModel

@Html.DevExpress().Splitter(settings => {
    settings.Name = "InnerContentSplitter";
    settings.AllowResize = true;
    settings.Orientation = System.Web.UI.WebControls.Orientation.Vertical;
    settings.FullscreenMode = false;
    settings.SeparatorVisible = true;
    settings.Styles.Pane.Border.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(0);
    settings.Styles.Pane.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(0);
    settings.Panes.Add(pane => {
        pane.Name = "InnerContentHeader";
        pane.PaneStyle.BorderBottom.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(1);
        pane.PaneStyle.CssClass = "headerPane";
        pane.SetContent("<h2>Header of View</h2>");
        });

    settings.Panes.Add(pane =>
    {
        pane.Name = "InnerContent01";
        pane.PaneStyle.CssClass = "mainContentPane01";
        pane.PaneStyle.BackColor = System.Drawing.Color.White;
        pane.Size = System.Web.UI.WebControls.Unit.Pixel(150);
        pane.SetContent(() =>
        {
            Html.DevExpress().Splitter(splitSettings =>
            {
                splitSettings.Name = "Splitter001";
                splitSettings.AllowResize = false;
                splitSettings.Orientation = System.Web.UI.WebControls.Orientation.Horizontal;
                splitSettings.FullscreenMode = false;
                splitSettings.SeparatorVisible = false;
                splitSettings.Styles.Pane.Border.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(0);
                splitSettings.Styles.Pane.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(0);
                splitSettings.Panes.Add(innerpane =>
                {
                    innerpane.AutoWidth = true;
                    innerpane.Name = "Content001";
                    innerpane.PaneStyle.BackColor = System.Drawing.Color.White;
                    innerpane.PaneStyle.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(10);
                    innerpane.PaneStyle.Paddings.PaddingTop = System.Web.UI.WebControls.Unit.Pixel(20);
                    innerpane.SetContent(() => Html.RenderPartial("ComboBoxPartialView", Model));
                });
                splitSettings.Panes.Add(innerpane =>
                {
                    innerpane.Name = "Content002";
                    innerpane.PaneStyle.BackColor = System.Drawing.Color.White;

                    innerpane.SetContent(() => Html.RenderPartial("GridViewPartialView", Model));
                });                
            }).Render();
        });
    });
}).GetHtml()

Grid partial view:

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

        settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
        settings.SettingsPager.Visible = false;
        settings.SettingsPager.PageSize = 20;
        settings.Settings.VerticalScrollBarMode = ScrollBarMode.Visible;
        settings.Settings.VerticalScrollableHeight = 350;
        settings.Settings.VerticalScrollBarStyle = GridViewVerticalScrollBarStyle.Virtual;
        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);

        // DXCOMMENT: Configure grid's columns in accordance with data model fields
        settings.Columns.Add("Id");
        settings.Columns.Add("Name");
        settings.Columns.Add("RoleId");
    }).Bind(Model.Persones()).GetHtml()

Combobox partial view

@Html.DevExpress().ComboBox(cmbSettings =>
{
    cmbSettings.Name = "RoleId";
    cmbSettings.Width = System.Web.UI.WebControls.Unit.Pixel(200);
    cmbSettings.Properties.ValueField = "Id";
    cmbSettings.Properties.TextField = "RoleName";
    cmbSettings.Properties.ValueType = typeof(int);
    cmbSettings.SelectedIndex = 0;
    cmbSettings.Properties.IncrementalFilteringMode = IncrementalFilteringMode.Contains;

    cmbSettings.Properties.ClientSideEvents.SelectedIndexChanged =
        "function(s, e) {GridView.PerformCallback();}";

}).BindList(Model.Roles()).Bind(Model.SelectedRoleId).GetHtml()

Controler:

public class HomeController : Controller
{
    public ActionResult Index([ModelBinder(typeof(DevExpressEditorsBinder))]MyModel mo)
    {
        return View(mo);    
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult GridViewPartialView([ModelBinder(typeof(DevExpressEditorsBinder))]MyModel mo) 
    {
        return PartialView("GridViewPartialView", mo);
    }

}

So I'm expecting in my controler updated model, but everitime I get model with not actual data. What I missed in my model usage? What's the best way to implement my use case?

Answer 1

I discuss this issue with peoples from DevExpress and they helped me to solve this.

Solution is here