Grid with external dropdown filter

[n/a]

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

 

[n/a]

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

[Tsvetomir]

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

[n/a]

Thanks! That helped me to get it right.