Date Range filter with GridFilterMode.Row

[Ross]

Hello,  

I am a new user to Kendo and using Grids for a ASP.NET MVC project.   What I am trying to do is achieve a Date Range filter for my grid for a single column, while keeping the default GridFilterMode.Row filters for all other columns.

 

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

 

I have successfully implemented the Date Range filter by setting the Grid to .Filterable()  and using some additional scripts to customize the fields for the dropdown menu.

 

@(Html.Kendo().Grid<MyWebSite.Models.OrderViewModel>()
      .Name("grid")
      .HtmlAttributes(new { @class = "orderGrid" })
      .Pageable()
      //.Filterable(ftb => ftb.Mode(GridFilterMode.Row))    // Switches all Columns to Row type filters
      //.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))  // Switches all Columns to Menu type filters
          .Filterable()  // Does the same as line above I assume ? ^
      .Scrollable()
      .Resizable(resize => resize.Columns(true))
      .Columns(columns =>
      {
      columns.Template(c => { }).ClientTemplate("<input class='k-checkbox chkbx' type=\"checkbox\" name=\"cb_#=Id#\" id=\"cb_#=Id#\" /><label class='k-checkbox-label'></label>").Width(40);
      columns.Bound(o => o.OrderNo).ClientTemplate(Html.ActionLink("#=OrderNo#", "OrderDetails", "Order", new { orderId = "#=Id#" }, null).ToHtmlString()).Title("Order #");
      columns.Bound(c => c.DateCreated).Title("Date Placed").Format("{0:MM/dd/yy}").Width(180);
      columns.Bound(c => c.EstimatedTotal).Format("{0:c}").Title("Total Amount").Width(150);
      columns.Bound(c => c.OrderStatus).ClientTemplate("#=GetOrderStatusHtml#").Title("Status");
      columns.Bound(c => c.PONo).Title("Purchase Order #").ClientTemplate("#if(PONo != null) { #PONo# } else { #N/A# }#");

      if (isUserAdmin)
      {
          columns.Bound(c => c.SOFromMAS).Title("Sage Order #");
          columns.Bound(o => o.PropertyName).Title("Property");
          columns.Bound(c => c.IsPropertyRehab).Title("Rehab").Width(100);
          columns.Bound(c => c.WhosInChargeName).Title("Who's in Charge");
      }
      columns.Template(@<text> </text>).Hidden(); //Keep for css coloring of filter bar
      })
                  .ToolBar(tools => tools.Excel())
                  .Excel(excel => excel
                      .FileName(string.Format("My Orders Report - {0:yyyy-MM-dd}.xlsx", DateTime.Now))
                      .Filterable(true)
                      .ProxyURL(Url.Action("Excel_Export_Save", "Order"))
                  )
                  .Scrollable()
                  .DataSource(dataSource => dataSource
                      .Ajax()
                      .PageSize(15)
                      .Model(model => { model.Id(p => p.Id); })
                      .Read(read => read.Action("OrderViewModels_Read", "Order"))
                  )
                  .Events(x => x.DataBinding("resizeKendoGrid"))
                    .Events(e => e.DataBound("onDataBound")) //Callback after data is retrieved
                        .Events(e => e.FilterMenuInit("onFilterMenuInitDateRange"))

)

<script type="text/javascript">
    function onFilterMenuInitDateRange(e) {
        if (e.field == "DateCreated") {
            console.log("Condition passed!")
            var beginOperator = e.container.find("[data-role=dropdownlist]:eq(0)").data("kendoDropDownList");
            beginOperator.value("gte");
            beginOperator.trigger("change");

            var endOperator = e.container.find("[data-role=dropdownlist]:eq(2)").data("kendoDropDownList");
            endOperator.value("lte");
            endOperator.trigger("change");
            e.container.find(".k-dropdown").hide()
        }
    }
</script>

 

My issue is when I set the Grid to have Menu type filters ,  All the other columns will too!  How can I set one column to use the menu type filter (for Date Ranges) while keeping .Row type filters for the rest of the columns?

 

Thank you in advance.

[Viktor Tachev]

Hello Ross,

I am afraid that mixing row with menu type filtering is not available. Nevertheless, there is a feature request for the feature you describe. You can find a link to the request below.

Furthermore, in the request description you can find how you can add multiple components in the filter with Row filter mode. 

• http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/19441012-using-second-criterion-input-in-row-mode-for-filte

Regards,
Viktor Tachev
Progress Telerik

[Ross]

Thank you Viktor!