Filtering Grid by Dropdown

5 posts, 1 answers
  1. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 18 Apr 2014 Link to this post

    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");
        }
    }











  2. Answer
    Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 21 Apr 2014 Link to this post

    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.

     
  3. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 21 Apr 2014 in reply to Rosen Link to this post

    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?
  4. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 22 Apr 2014 Link to this post

    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.

     
  5. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 22 Apr 2014 in reply to Rosen Link to this post

    Perfect Thanks!
Back to Top