This is a migrated thread and some comments may be shown as answers.

Filtering Grid by Dropdown

4 Answers 413 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 18 Apr 2014, 07:44 PM
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");
    }
}











4 Answers, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 21 Apr 2014, 11:26 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Stephen
Top achievements
Rank 1
answered on 21 Apr 2014, 09:11 PM
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?
0
Rosen
Telerik team
answered on 22 Apr 2014, 06:29 AM
Hello Stephen,

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

Regards,
Rosen
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Stephen
Top achievements
Rank 1
answered on 22 Apr 2014, 02:05 PM
Perfect Thanks!
Tags
Grid
Asked by
Stephen
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Stephen
Top achievements
Rank 1
Share this question
or