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

Grid with external dropdown filter

3 Answers 512 Views
Grid
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 24 Aug 2019, 06:35 PM

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

 

3 Answers, 1 is accepted

Sort by
0
n/a
Top achievements
Rank 1
answered on 24 Aug 2019, 06:38 PM

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

0
Tsvetomir
Telerik team
answered on 27 Aug 2019, 10:39 AM
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.
0
n/a
Top achievements
Rank 1
answered on 27 Aug 2019, 04:58 PM
Thanks! That helped me to get it right.
Tags
Grid
Asked by
n/a
Top achievements
Rank 1
Answers by
n/a
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or