Filtering Grid by Dropdown

[Stephen]

Hello,

I need to reload the grid based on a dropdown change but I don't want to do the filtering.  I don't want the grid to preload all of the data and then filter.  I want it only to load based on the dropdown.  But when I set it up the way I think it should work it is calling my controller method twice.  The first time passing the parameter correctly from the dropdown and the second time passing a null.

Here is the view:

<div class="filter">
    <label class="filter-label" for="filter">Filter:</label>
    @(Html.Kendo().DropDownList()
        .Name("filter")
        .DataTextField("Text")
        .DataValueField("Value")
        .Events(e => e.Change("onChange"))
        .BindTo(new List<SelectListItem>() {
            new SelectListItem() {
                Text = "Pending Reviews",
                Value = "N"
            },
            new SelectListItem() {
                Text = "Complete Reviews",
                Value = "Y"
            }
        })
    )
</div>

<br class="clear" />
<br />


@(Html.Kendo().Grid<PASSAdmin.ViewModels.ResourceReviewer.ResourceReviewViewModel>()
    .Name("gridResourceReviews")
    .Columns(columns =>
    {
        columns.Command(command => { command.Edit(); }).Width(50);
        columns.Bound(m => m.Proposal_ID).Title("Proposal ID");
        columns.Bound(m => m.Proposal_Title).Title("Title");
        columns.Bound(m => m.PI_BNL_ID).Title("PI");
        columns.Bound(m => m.Date_Submitted).Title("Date Submitted");
    })
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ResourceReviewer/ResourceReview").Window(window => window.Width(700)))
    .Pageable()
    .Sortable()
    .Events(e => e.Edit("onEdit"))
    .DataSource(dataSource => dataSource
        .Server()
        .Model(model =>
        {
            model.Id(m => m.Beamtime_Request_ID);
            model.Field(m => m.Beamline_Request_ID);
        })
        .Read(read => read.Action("GetResourceReviews", "ResourceReviewer"))
        .Update(update => update.Action("AddResourceReview", "ResourceReviewer"))
    ))

<script type="text/javascript">
function onEdit(e) {
    $(e.container).parent().css({
        width: '700px',
        height: '350px'
    });
    $(e.container.find(".k-edit-buttons.k-state-default")).css("width", "660px");
}

function onChange() {
    var filter = this.value();
    alert(filter);
    $.get('/ResourceReviewer/GetResourceReviews', { reviewComplete: filter }, function (data) {
        var grid = $("#gridResourceReviews").data("kendoGrid");
        grid.dataSource.read();
    });
}
</script>

And here is the controller method:

public ActionResult GetResourceReviews(string reviewComplete, [DataSourceRequest]DataSourceRequest request)
{
    User user = new User();
    int user_id = user.GetUserIDByBNLAccount(User.Identity.Name);
    int resource_id = UserSession.LastViewedResourceID.GetValueOrDefault();

    if (UserPermissions.VerifyResourceRole(user_id, resource_id, "Resource_Reviewer"))
    {
        using (PASSEntities context = new PASSEntities())
        {
            var vm = (from a in context.Beamtime_Requests
                      join b in context.Proposals on a.Proposal_ID equals b.ID
                      join c in context.Technique_Requests on a.ID equals c.Beamtime_Request_ID
                      join d in context.Beamline_Requests on c.ID equals d.Technique_Request_ID
                      join e in context.Beamlines on d.Beamline_ID equals e.ID
                      join f in context.Users on b.PI_User_ID equals f.ID
                      where a.Status == "BLREV" && d.Beamline_ID == resource_id && d.Beamline_Review_Complete == reviewComplete
                      select new ResourceReviewViewModel()
                      {
                          Date_Submitted = a.Date_Submitted,
                          Beamline_Request_ID = d.ID,
                          Beamtime_Request_ID = a.ID,
                          Proposal_ID = b.ID,
                          Proposal_Type_ID = b.Proposal_Type_ID,
                          Beamline_Review_Complete = d.Beamline_Review_Complete,
                          Current_Cycle_Request = a.Current_Cycle_Request,
                          PI_User_ID = b.PI_User_ID,
                          PI_BNL_ID = b.User.BNL_ID,
                          Proposal_Title = b.Title,
                          Refused_By_Beamline = d.Refused_By_Beamline
                      }).ToList();

            DataSourceResult result = vm.ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }
    else
    {
        return RedirectToAction("Index");
    }
}

[Rosen]

Hi Stephen,

In order to implement the requested functionality you will need to pass the DropDownList value as additional data as part of Read request. Then it will be sufficient to call DataSource read method when the DropDownList selected value is changed.

@(Html.Kendo().Grid<PASSAdmin.ViewModels.ResourceReviewer.ResourceReviewViewModel>()
    .Name("gridResourceReviews")
    /*..*/
    .AutoBind(false) // prevents Grid's initial binding
    .DataSource(dataSource => dataSource
        .Ajax()
        /*..*/
        .Read(read => read.Action("GetResourceReviews", "ResourceReviewer").Data("additionalData"))
    ))

<script>
    function additionalData(e) {
        var value = $("#filter").data("kendoDropDownList").value();
        return { reviewComplete: value }; // send the filter value as part of the Read request
    }

    function onChange() {
        var grid = $("#gridResourceReviews").data("kendoGrid");
        grid.dataSource.read(); // rebind the Grid's DataSource
    }
</script>

Regards,
Rosen
Telerik

 

 

[Stephen]

Ok this works great thanks!  Is there a way I can have the grid initially load with the first option of the dropdown menu?  Do I simply set Autobind to true?

[Rosen]

Hello Stephen,

Indeed, as the DropDownList widget is bound to local data setting Grid's autoBind to true should be sufficient.

Regards,
Rosen
Telerik

 

 

[Stephen]

Perfect Thanks!