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

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

8 Answers 431 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Yanesh
Top achievements
Rank 1
Yanesh asked on 31 Jul 2017, 09:21 AM

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.

8 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetina
Telerik team
answered on 01 Aug 2017, 02:49 PM
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
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
Yanesh
Top achievements
Rank 1
answered on 08 Aug 2017, 06:45 AM
Thanks. It worked.
0
Mathews
Top achievements
Rank 1
answered on 20 Nov 2019, 11:50 PM
can you please provide code snippet (datepicker in grid filter row for the date type fields) for the angularJs version of the grid?
0
Tsvetomir
Telerik team
answered on 22 Nov 2019, 12:38 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mathews
Top achievements
Rank 1
answered on 22 Nov 2019, 01:13 PM
I already know how to put a drop down,  I am specifically looking for a datepicker in place of a dropdownlist.
0
Tsvetomir
Telerik team
answered on 22 Nov 2019, 02:53 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
alex
Top achievements
Rank 1
answered on 24 Dec 2020, 10:18 PM
Could you provide example with data format changing for React please?
0
Stefan
Telerik team
answered on 05 Jan 2021, 09:58 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Yanesh
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Yanesh
Top achievements
Rank 1
Mathews
Top achievements
Rank 1
Tsvetomir
Telerik team
alex
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or