Grid with external dropdown filter

4 posts, 0 answers
  1. Ernest Baldridge
    Ernest Baldridge avatar
    3 posts
    Member since:
    Oct 2018

    Posted 24 Aug 2019 Link to this post

    Hello, with my code below I want to populate the dropdown and the grid(with all rows), then if the user makes a selection in the dropdown I want the grid to be refreshed with the filtered rows. The NewPartsRead controller action does return the filtered rows, but the grid does not rebind to the filtered rows returned.

    What am I doing wrong?

    Index:

     @using (Html.BeginForm())
                    {    <div class="demo-section k-content" style="padding:20px;">
                         
                            @(Html.Kendo().DropDownList()
                                                        .Name("EngMake")
                                                        .DataTextField("Text")
                                                        .DataValueField("Value")
                                                        .BindTo(Model.EngMakeList)
                                                        .SelectedIndex(0)
                                                        .OptionLabel("Select Engine Manufacturer")
                                                        .HtmlAttributes(new { style = "width:300px" })
                                                        .Filter(FilterType.Contains)
                            )

     

     

                        </div>

                             @(Html.Kendo().Grid(Model.NewParts)
                                               .Name("grid")
                                               .Columns(columns =>
                                               {
                                                   columns.Bound(p => p.EngDescription);
                                                   columns.Bound(p => p.PartType);
                                                   columns.Bound(p => p.EngYear);
                                                   columns.Bound(p => p.EngCylinders);
                                                   columns.Bound(p => p.EngBore);
                                                   columns.Bound(p => p.PartYears);
                                                   columns.Bound(p => p.Partieb);
                                                   columns.Bound(p => p.PartNotes);
                                               })
                                               .Pageable()
                                               .Sortable()
                                               .Scrollable()
                                               .Filterable()
                                               .HtmlAttributes(new { style = "height:550px;" })
                                               .DataSource(dataSource => dataSource
                                                   .Ajax()
                                                   .PageSize(20)
                                                   .Read(read => read.Action("Index", "NewPartsRead"))
                                                )
                        )
                    }

     

    Controller:

      public class NewPartsController : Controller
        {
            // GET: NewParts
            public ActionResult Index()
            {
                var model = new NewPartsModel();
                return View(model);
            }
            [HttpPost]
            public ActionResult NewPartsRead(NewPartsModel newPartsModel)
            {
                newPartsModel.NewParts = newPartsModel.NewPartsRead(newPartsModel.EngMake);

                return Json(newPartsModel.NewParts);
            }
        }

     

    Model:

     protected readonly NewPartsProvider newPartsProvider = new NewPartsProvider();

            public string EngMake { get; set; }

            public List<DataObjects.NewPart> NewParts { get; set; }

            public List<SelectListItem> engMakeList = new List<SelectListItem>();

            public IEnumerable<SelectListItem> EngMakeList { get; set; }

            public NewPartsModel()
            {
                foreach (var engMake in newPartsProvider.GetEngMakeList())
                    engMakeList.Add(new SelectListItem() { Text = engMake, Value = engMake });

                EngMakeList = engMakeList;
                NewParts = newPartsProvider.GetNewParts();
            }

            public List<DataObjects.NewPart> NewPartsRead(string engMake)
            {
                List<DataObjects.NewPart> NewParts = new List<DataObjects.NewPart>();

                NewParts = newPartsProvider.GetNewPartsByMake(engMake);

                return NewParts;
            }

     

  2. Ernest Baldridge
    Ernest Baldridge avatar
    3 posts
    Member since:
    Oct 2018

    Posted 24 Aug 2019 in reply to Ernest Baldridge Link to this post

    My apologies as I forgot to provide the JavaScript for the dropdown selection:

        $("#EngMake").change(function (event) {
            $.ajax({
                url: "NewPartsRead",
                data: { EngMake: $(this).val() /* add other additional parameters */ },
                cache: false,
                type: "POST",
                dataType: "html",

                success: function (data, textStatus, XMLHttpRequest) {
                   /* $("#divPartialView").html(data);*/ // HTML DOM replace
                }
            });
        });

  3. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 27 Aug 2019 Link to this post

    Hi Ernest,

    I have investigated the provided code snippets and I have noticed that in the change event of the dropdown, a request is sent to the server-side. And it would return the relevant data items. 

    However, the way the grid has been set-up it mixed two different types of bindings which is recommended to avoid. The returned data via the model would get assigned only if the grid is initially initialized. Therefore, in the current case it would not automatically update.
     
    What I can recommend in the current case is to remove the local binding (via the model). And in the change event instead of making an AJAX request, simply use the API of the data source to filter the data. And more specifically, the filter() method of the data source:

    https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/filter

    Since the data source is configured for server operations, the filter() method would perform a Read request to the server-side and would send the relevant parameters. Therefore, it would return and load the filtered data.

    Let me know in case additional clarifications are needed.


    Best regards,
    Tsvetomir
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Ernest Baldridge
    Ernest Baldridge avatar
    3 posts
    Member since:
    Oct 2018

    Posted 27 Aug 2019 in reply to Tsvetomir Link to this post

    Thanks! That helped me to get it right.
Back to Top