Load data in Telerik grid by dropdownlist selected value

Question

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.

My web model class

public class CustomerEventRolesModels
{
    public int Event { get; set; }
    public IEnumerable<System.Web.Mvc.SelectListItem> Events { get; set; }
    public Telerik.Web.Mvc.GridModel<CustomerEventRolesModel> GridData { get; set; }
}

public class CustomerEventRolesModel : BaseNopEntityModel
{
    public string Customer { get; set; }
    public bool Sponsor { get; set; }
    public bool Speaker { get; set; }
}

My .cshtml

<table id="grdCustomerEventRoleData" class="adminContent" style="display: none">
<tr>
    <td>
        <p>
        </p>
    </td>
</tr>
<tr>
    <td>
        @(Html.Telerik().Grid<CustomerEventRolesModel>(Model.GridData.Data)
    .Name("grdCustomerEventRoles")
              .Columns(columns =>
              {

                  columns.Bound(x => x.Customer);

                  columns.Bound(x => x.Speaker).Template(x => Html.CheckBox("spk", x.Speaker));
                  columns.Bound(x => x.Sponsor).Template(x => Html.CheckBox("spn", x.Sponsor));
              }
        )   .Pageable(settings => settings.Total(Model.GridData.Total)
                        .PageSize(gridPageSize)
                        .Position(GridPagerPosition.Both))
                        .ClientEvents(events => events.OnDataBinding("onDataBinding"))
                        .DataBinding(dataBinding => dataBinding.Ajax().Select("FilterByDropdown", "Customer"))
                        .EnableCustomBinding(true))
        ) )
    </td>
</tr>

<script type="text/javascript">
var initialLoad = true;
$("#select-event").change(function () {
    if ($("#select-event option:selected").val() > 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();
        }
    }

}

Actions in controller

   public ActionResult FirstBind()
    {
        if (!_permissionService.Authorize(StandardPermissionProvider.ManageCustomers))
            return AccessDeniedView();

        var model = new CustomerEventRolesModels();

        model.Event = 0;

        List<Nop.Core.Domain.Catalog.Product> products = _productRepository.Table.Where(p => p.EventDate != null && p.EventDate >= DateTime.Now).ToList();

        model.Events = products.Select(p => new System.Web.Mvc.SelectListItem
        {
            Text = p.Name,
            Value = p.Id.ToString()
        });

        var grdmodel = new GridModel<CustomerEventRolesModel>
        {
            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<CustomerEventRolesModel>
        {
            Data = roles,
            Total = roles.Count
        };

        model.GridData = grdmodel;

        return new JsonResult
        {
            Data = model
        };
    }

FilterByDropdown action is works correctly but Grid is not binded.

I am clueless.

Please help.

.DataBinding(dataBinding => dataBinding.Ajax().Select("FilterByDropdown", "Customer")) is the default action for your grid witch returns Json? no for dropdown.May be better would be to handle dropdown in veiw and pass the value to grid filter? If another filter will be added, you want to add thne new action? and another... or may be i miss something — maxs87, Mar 20 '13 at 07:41

score 1 · Answer 1 · answered Mar 20 '13 at 14:14

1

You're returning the wrong model.

Try this in FilterByDropdown:

    var grdmodel = new GridModel<CustomerEventRolesModel>
    {
        Data = roles,
        Total = roles.Count
    };

    return new JsonResult
    {
        Data = grdmodel
    };

answered Mar 20 '13 at 14:14

AndyMcKenna

2,607
3
26
35

score 1 · Accepted Answer · answered Mar 28 '13 at 11:07

If you want to add a dropdown to a Telerik MVC Grid when editing a row, you will need to follow next few steps (aside from making the grid ajax bound and the rows editable).

Let’s say we want the column representing a name (“Name” from the model) to be a dropdown, from which a name can be selected rather than typed. Add a folder named “EditorTemplates” to the folder containing the view that the grid is on. It will contain a separate partial view for each dropdown we want to show in the row that is being edited. Make a partial view (mentioned above), name it e.g. “ClientName.cshtml”, containing a Telerik DropDownList named “Name” and bound to required list of names.

@(Html.Telerik().DropDownList() .Name("Name") .BindTo(new SelectList((IEnumerable)ViewData["CustomerNames"], "Text", "Value")) )

Add the following attribute to the “Name” property of the data type that the grid uses e.g. Grid uses “Customer” class, containing “string Name” field:

public class Customer{ [UIHint("ClientName"), Required] public string Name { get; set; } }

The UIHint property specifies which field template to use when a specific column is rendered.

Add the following java script to the page containing the grid function: function onEditCustomerList(e) { if (e.dataItem != null) { $(e.form).find('#Name').data('tDropDownList').select(function (dataItem) { return dataItem.Text == e.dataItem['Name']; }); } }

This should do the trick.

Load data in Telerik grid by dropdownlist selected value

2 Answers2