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

Date Range filter with GridFilterMode.Row

2 Answers 275 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ross
Top achievements
Rank 1
Ross asked on 26 May 2017, 03:53 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Viktor Tachev
Telerik team
answered on 30 May 2017, 08:25 AM
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.
0
Ross
Top achievements
Rank 1
answered on 30 May 2017, 01:52 PM
Thank you Viktor!
Tags
Grid
Asked by
Ross
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Ross
Top achievements
Rank 1
Share this question
or