Date Range filter with GridFilterMode.Row

3 posts, 1 answers
  1. Ross
    Ross avatar
    6 posts
    Member since:
    Sep 2016

    Posted 26 May 2017 Link to this post

    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.

  2. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    2480 posts

    Posted 30 May 2017 Link to this post

    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. 





    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Ross
    Ross avatar
    6 posts
    Member since:
    Sep 2016

    Posted 30 May 2017 in reply to Viktor Tachev Link to this post

    Thank you Viktor!
Back to Top