title: Load data in Telerik grid by dropdownlist selected value
body: <p>I am a beginner in Telerik Grid in ASP.NET MVC3. I try to bind Grid with dropdownlist selected value. Please see my code below.</p>
  
  <p>My web model class</p>
  
  <pre><code>public class CustomerEventRolesModels
  {
      public int Event { get; set; }
      public IEnumerable&lt;System.Web.Mvc.SelectListItem&gt; Events { get; set; }
      public Telerik.Web.Mvc.GridModel&lt;CustomerEventRolesModel&gt; GridData { get; set; }
  }
  
  public class CustomerEventRolesModel : BaseNopEntityModel
  {
      public string Customer { get; set; }
      public bool Sponsor { get; set; }
      public bool Speaker { get; set; }
  }
  </code></pre>
  
  <p>My .cshtml </p>
  
  <pre><code>&lt;table id="grdCustomerEventRoleData" class="adminContent" style="display: none"&gt;
  &lt;tr&gt;
      &lt;td&gt;
          &lt;p&gt;
          &lt;/p&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;
          @(Html.Telerik().Grid&lt;CustomerEventRolesModel&gt;(Model.GridData.Data)
      .Name("grdCustomerEventRoles")
                .Columns(columns =&gt;
                {
  
                    columns.Bound(x =&gt; x.Customer);
  
                    columns.Bound(x =&gt; x.Speaker).Template(x =&gt; Html.CheckBox("spk", x.Speaker));
                    columns.Bound(x =&gt; x.Sponsor).Template(x =&gt; Html.CheckBox("spn", x.Sponsor));
                }
          )   .Pageable(settings =&gt; settings.Total(Model.GridData.Total)
                          .PageSize(gridPageSize)
                          .Position(GridPagerPosition.Both))
                          .ClientEvents(events =&gt; events.OnDataBinding("onDataBinding"))
                          .DataBinding(dataBinding =&gt; dataBinding.Ajax().Select("FilterByDropdown", "Customer"))
                          .EnableCustomBinding(true))
          ) )
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var initialLoad = true;
  $("#select-event").change(function () {
      if ($("#select-event option:selected").val() &gt; 0) {
          $("#grdCustomerEventRoleData").show();
          $("#grdCustomerEventRoles").data("tGrid").rebind();
      }
      else {
          $("#grdCustomerEventRoleData").show();
      }
  });
  
  function onDataBinding(e) {
      if (initialLoad == true) {
          e.preventDefault();
          initialLoad = false;
      }
      else {
          var classificationId = $("#select-event option:selected").val();
          if (classificationId != "")
              e.data = $.extend(e.data, {
                  selEvent: classificationId
              });
          else {
              e.preventDefault();
              $("#grdCustomerEventRoleData").hide();
          }
      }
  
  }
  </code></pre>
  
  <p></p>
  
  <p>Actions in controller</p>
  
  <pre><code>   public ActionResult FirstBind()
      {
          if (!_permissionService.Authorize(StandardPermissionProvider.ManageCustomers))
              return AccessDeniedView();
  
          var model = new CustomerEventRolesModels();
  
          model.Event = 0;
  
          List&lt;Nop.Core.Domain.Catalog.Product&gt; products = _productRepository.Table.Where(p =&gt; p.EventDate != null &amp;&amp; p.EventDate &gt;= DateTime.Now).ToList();
  
          model.Events = products.Select(p =&gt; new System.Web.Mvc.SelectListItem
          {
              Text = p.Name,
              Value = p.Id.ToString()
          });
  
          var grdmodel = new GridModel&lt;CustomerEventRolesModel&gt;
          {
              Data = null,
              Total = 0
          };
  
          model.GridData = grdmodel;
  
          return View(model);
      }
  
      [HttpPost, GridAction(EnableCustomBinding = true)]
      public ActionResult FilterByDropdown(GridCommand command, int selEvent)
      {
          if (!_permissionService.Authorize(StandardPermissionProvider.ManageCustomers))
              return AccessDeniedView();
  
          if (selEvent == 0)
              return View();
  
          var model = new CustomerEventRolesModels();
  
          model.Event = selEvent;
  
          var roles = (from lst in _customerEventRoleRepository.Table
                       join cust in _customerRepository.Table on lst.CustomerId equals cust.Id
                       join product in _productRepository.Table on lst.EventId equals product.Id
                       join role in _customerRoleRepository.Table on lst.RoleId equals role.Id
                       orderby lst.Id descending
                       select new CustomerEventRolesModel
                       {
                           Id = lst.Id,
                           Customer = cust.Email,
                           Sponsor = (role.Name == "Sponsor") ? true : false,
                           Speaker = (role.Name == "Speaker") ? true : false
                       }).ToList();
  
          var grdmodel = new GridModel&lt;CustomerEventRolesModel&gt;
          {
              Data = roles,
              Total = roles.Count
          };
  
          model.GridData = grdmodel;
  
          return new JsonResult
          {
              Data = model
          };
      }
  </code></pre>
  
  <p><strong>FilterByDropdown</strong> action is works correctly but Grid is not binded.</p>
  
  <p>I am clueless.</p>
  
  <p>Please help.</p>