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

Grid with external DatePicker filter

1 Answer 481 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dario
Top achievements
Rank 1
Veteran
Dario asked on 15 Apr 2020, 02:16 PM

I have a view that contains a DatePicker and Grid.

I would load data to Grid, using DatePicker value.

I'm using a submit form that fires an Action.

I use this approach, because the data to be recovered are many and also have fields that must be calculated according to the date indicated, before loading the collection

What is the best practice to post the data filter and then load the data in the grid? I do not know how to do! :-(

01.<form asp-action="Item_Read" asp-controller="Home">
02.        <p>Filtri disponibili</p>
03.        <div class="form-group">
04.            <label>Data</label>
05.            @(Html.Kendo().DatePicker()
06.                .Name("dateFilterDatepicker") // The name of the DatePicker is mandatory. It specifies the "id" attribute of the widget.
07.                .Min(new DateTime(1900, 1, 1)) // Sets the min date of the DatePicker.
08.                .Max(new DateTime(2099, 12, 31)) // Sets the max date of the DatePicker.
09.                .Value(DateTime.Today) // Sets the value of the DatePicker.
10.                .DateInput(true)
11.                  )
12.        </div>
13.        <div class="form-group">
14.            @(Html.Kendo().Button()
15.                    .Name("textSearchButton")
16.                    .HtmlAttributes( new {type = "submit"} )
17.                    .Content("Ricerca")
18.)
19.        </div>
20. 
21.        <div class="text-center form-group">
22.            @(Html.Kendo().Grid<ItemModel>()
23.              .Name("itemGrid")
24.              .ToolBar(t => t.Search())
25.              .Filterable()
26.              .Columns(columns =>
27.              {
28.                  columns.Bound(f => f.No);
29.                  columns.Bound(f => f.Description);
30.                  columns.Bound(f => f.Brand);
31.                  columns.Bound(f => f.NetChange);
32.                  columns.Bound(f => f.PurchasesQty);
33.                  columns.Bound(f => f.LastEntryDate).Format("{0:dd/MM/yyyy}"); ;
34. 
35.              })
36.              .Pageable() // Enable paging
37.              .Sortable() // Enable sorting
38.              .Scrollable(scrollable => scrollable.Virtual(true))
39.              .HtmlAttributes(new { style = "height:430px;" })
40.              .DataSource(dataSource => dataSource //Configure the Grid data source.
41.                  .Ajax() //Specify that Ajax binding is used.
42.                  .PageSize(20)
43.                   
44.               )
45.        )
46.        </div>
47.    </form>

1 Answer, 1 is accepted

Sort by
0
Accepted
Georgi
Telerik team
answered on 17 Apr 2020, 07:31 AM

Hi Dario,

Generally speaking, for handling large amounts of data we suggest using paging, virtualization or endless scrolling with enabled server operations. This way the grid will request only a single page of data at a time, thus the performance improces. Here are some demos, which you can see:

Other things that matter for the performance:

  • Number and content of columns: if there are many columns or if they contain templates with other Kendo UI widgets, the Grid page size needs to be set to as small a number as your design allows.
  • Respectively, the page size. It shouldn't be too big, to avoid loading to much DOM content in the page, slowing down its performance. I would recommend a page size not bigger than 50, unless you are using virtualization, when 100 is also ok.

As for the filter, I would suggest instead of submitting a form, use either of the aforementioned configurations and when the user selects a value from the picker, filter the dataSource of the grid.

e.g.

var grid = $('#grid').data('kendoGrid');
grid.dataSource.filter({field: '...', operator: 'eq', value: 'value from picker'})

 

Regards,
Georgi
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Dario
Top achievements
Rank 1
Veteran
Answers by
Georgi
Telerik team
Share this question
or