Filter Grid with Dropdown and Dates

[Allan]

Hi,

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) {
         grid.dataSource.filter({
             field: "fixture_stop",
             operator: "eq",
             value: ddl.value
         });
     } else {
         grid.dataSource.filter({});
     }
 }

Here is my grid code

@(Html.Kendo().Grid<MyProject.ViewModels.VesselsViewModel>()
           .Name("Grid")
           .Columns(columns =>
           {
               columns.Bound(c => c.vessel_idx).Title("")
                   .ClientTemplate("<div class='status_flags'></div>")
                   .Width(40);
               columns.Bound(c => c.owner_company)
                   .Filterable(filterable => filterable.UI("companyFilter"))
                   .Title("Owner").Width(200);
               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))
          .Pageable()
          .Events(e => e.DataBound("prompt"))
          .Sortable(sortable => sortable.AllowUnsort(true)
              .SortMode(GridSortMode.MultipleColumn))
              .Groupable().ToolBar(toolbar =>
              {
                  toolbar
                      .Template(@<text>

          <label class="date-label" for="periods">Period:</label>

          @(Html.Kendo().DropDownList()
                          .Name("periods")
                          .OptionLabel("All")
                          .DataTextField("Text")
                          .DataValueField("Value")
                          .AutoBind(false)
                          .Events(e => e.Change("periodChange"))
                          .BindTo(new List<SelectListItem>() {
                              new SelectListItem() {
                                  Text = "21 Days"

                              },
                              new SelectListItem() {
                                  Text = "3 Months"
                              }
                          })
          )</text>);
              })//Toolbar
          .DataSource(dataSource => dataSource
          .Ajax()
          .Events(events => { events.RequestEnd("onRequestEnd"); })
          .Sort(sort =>
              {
                  sort.Add(
                  company => company.owner_company).Ascending();
              })
          .PageSize(40)
          .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.

[Boyan Dimitrov]

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 http://dojo.telerik.com/iVelO example that shows how to apply multiple filter conditions to the Kendo UI DataSource.

 

Regards,
Boyan Dimitrov
Telerik