Filter Grid with Dropdown and Dates

2 posts, 0 answers
  1. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 07 Mar Link to this post


    I currently filter my grid using a kendo dropdown box, that's all fine and it works well.  I have a requirement here to add another dropdown that fitlers the grid data by the dates list but plus additional dates.  For example the dropdown must take a date fromt he grid and add 21 days to it and show only the results for those items.  How can this be accomplished? 

    Here is my code for my current filter

    function periodChange() {
         var ddl = document.getElementById("dates");
         var value = this.value(),
              grid = $("#Grid").data("kendoGrid");
         if (value) {
                 field: "fixture_stop",
                 operator: "eq",
                 value: ddl.value
         } else {

    Here is my grid code

               .Columns(columns =>
                   columns.Bound(c => c.vessel_idx).Title("")
                       .ClientTemplate("<div class='status_flags'></div>")
                   columns.Bound(c => c.owner_company)
                       .Filterable(filterable => filterable.UI("companyFilter"))
                   columns.Bound(c => c.fixture_stop)
                       .ClientTemplate("#=fixture_stop ? kendo.toString(kendo.parseDate(fixture_stop), 'dd/MM/yyyy') : '' #")
                       .Title("Off Hire");                
              .Editable(editable => editable.Mode(GridEditMode.InLine))
              .Events(e => e.DataBound("prompt"))
              .Sortable(sortable => sortable.AllowUnsort(true)
                  .Groupable().ToolBar(toolbar =>
              <label class="date-label" for="periods">Period:</label>
                              .Events(e => e.Change("periodChange"))
                              .BindTo(new List<SelectListItem>() {
                                  new SelectListItem() {
                                      Text = "21 Days"
                                  new SelectListItem() {
                                      Text = "3 Months"                                                                                            
              .DataSource(dataSource => dataSource
              .Events(events => { events.RequestEnd("onRequestEnd"); })
              .Sort(sort =>
                      company => company.owner_company).Ascending();
              .Model(model =>
                      model.Id(p => p.vessel_idx);                 
            .Read(read => read.Action("vessels_Read", "Home"))
            .Update(update => update.Action("vessels_Update", "Home"))

    What I need to do here is grab the date value from the grid and add 21 to it but I'm not sure how I would do this using my code.  Any help is appreciated. Thanks.

  2. Boyan Dimitrov
    Boyan Dimitrov avatar
    1728 posts

    Posted 09 Mar Link to this post

    Hello Allan,


    As far as I understand you want to get records for specific date span (from date to date). In this case you can simply apply multiple filters to the DataSource. Please take a look at the example that shows how to apply multiple filter conditions to the Kendo UI DataSource.


    Boyan Dimitrov
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET AJAX banner
Back to Top