How to changing date format of text box within the grid filter (date) menu

[Yanesh]

I need to change the date format in the grid filter context menu. After choosing a date from calendar, it gets displayed in the text box. The default format is 'm/dd/yyyy' which I want to change to a dynamically defined format. We allow user to set date format preferences in our website. It works fine for data. I need to do the same for grid search filter.

This is a server side grid.

[Tsvetina]

Hi Yanesh,

The simplest option is to customize the Grid filter UI by creating your own picker with any needed settings applied:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID).Filterable(false);
        columns.Bound(p => p.Freight);
        columns.Bound(p => p.OrderDate).Filterable(filterable => filterable.UI("orderDateFilter"));
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity);
    })

<script>
    function orderDateFilter(element) {
        element.kendoDatePicker({
            format: "MMM dd, yyyy" // set custom defined format
        });
    }
</script>

Regards,
Tsvetina
Progress Telerik

[Yanesh]

Thanks. It worked.

[Mathews]

can you please provide code snippet (datepicker in grid filter row for the date type fields) for the angularJs version of the grid?

[Tsvetomir]

Hi Mathews,

The filter customization of the Kendo UI Grid would happen with the help of the filterable.ui option. An example of this customization could be found here:

https://dojo.telerik.com/udOQAwUX

In case further assistance is required, let me know.

 

Kind regards,
Tsvetomir
Progress Telerik

[Mathews]

I already know how to put a drop down,  I am specifically looking for a datepicker in place of a dropdownlist.

[Tsvetomir]

Hi Mathews,

Thank you for specifying that you are looking for an example that features the DatePicker widget instead of the DropDownList. In general, you could modify the filterable.ui handler according to your preferences. For instance:

            filterable:{
              ui:function(el){
                el.kendoDatePicker({
                  format: "MMM dd, yyyy" // set custom defined format
                });
              }
            }

Here is the updated Dojo sample:

https://dojo.telerik.com/otIjUXOV

 

Best regards,
Tsvetomir
Progress Telerik

[alex]

Could you provide example with data format changing for React please?

[Stefan]

Hello, Аlex,

In KendoReact this will require using a custom filter component where the developer can set the required format to the DatePicker used for filtering:

https://www.telerik.com/kendo-react-ui/components/grid/filtering/#toc-custom-filter-cells

As React recommends small reusable components, making a full cell only to change the format may seem a lot, but in the long run, this custom cell can be reused in many Grids and if another common change is needed it can be done to this cell and then applied to all other instances.

Regards,
Stefan
Progress Telerik