title: ASP devexpress How to filter gridview by combobox selected item
body: <p>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.</p>
  
  <p>Model:</p>
  
  <pre><code>public class MyModel
  {
      public IEnumerable&lt;Person&gt; Persones()
      {
          return DataProvider.GetPersons();
      }
  
      public IEnumerable&lt;Role&gt; Roles()
      {
          return DataProvider.GetRoles();
      }
  
      public int SelectedRoleId { get; set; }
  }
  </code></pre>
  
  <p>Index view:</p>
  
  <pre><code>@model DXWebApplication1.Models.MyModel
  
  @Html.DevExpress().Splitter(settings =&gt; {
      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 =&gt; {
          pane.Name = "InnerContentHeader";
          pane.PaneStyle.BorderBottom.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(1);
          pane.PaneStyle.CssClass = "headerPane";
          pane.SetContent("&lt;h2&gt;Header of View&lt;/h2&gt;");
          });
  
      settings.Panes.Add(pane =&gt;
      {
          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(() =&gt;
          {
              Html.DevExpress().Splitter(splitSettings =&gt;
              {
                  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 =&gt;
                  {
                      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(() =&gt; Html.RenderPartial("ComboBoxPartialView", Model));
                  });
                  splitSettings.Panes.Add(innerpane =&gt;
                  {
                      innerpane.Name = "Content002";
                      innerpane.PaneStyle.BackColor = System.Drawing.Color.White;
  
                      innerpane.SetContent(() =&gt; Html.RenderPartial("GridViewPartialView", Model));
                  });                
              }).Render();
          });
      });
  }).GetHtml()
  </code></pre>
  
  <p>Grid partial view:</p>
  
  <pre><code>@Html.DevExpress().GridView(
      settings =&gt;
      {
          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()
  </code></pre>
  
  <p>Combobox partial view</p>
  
  <pre><code>@Html.DevExpress().ComboBox(cmbSettings =&gt;
  {
      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()
  </code></pre>
  
  <p>Controler:</p>
  
  <pre><code>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);
      }
  
  }
  </code></pre>
  
  <p>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?</p>