CODEWITHSUNDEEP
javascriptkendo-uikendo-gridmasking
Casey ScriptFu Pharr
Casey ScriptFu Pharr

Reputation: 1680

Need specific masking functionality for Kendo Grid Filters

I am currently adding a date mask to the kendo grid columns that are dates. I have two issues I am coming across with this though. When i use the below code to add the mask globally, it works as expected.

 function runDateMaskingUtility() {
            $("[data-role='datepicker']").each(function () {
                var datepicker = $(this);
                datepicker.kendoMaskedTextBox({
                    mask: "00/00/0000"
                });

                datepicker.kendoDatePicker({
                    format: "MM/dd/yyyy"
                });

                datepicker.closest(".k-datepicker")
                    .add(datepicker)
                    .removeClass("k-textbox");
            });                
        }

Now, when i do this it adds the masking in the filter header of the column correctly. The problem is that our dates are formatted like so:

3/01/2018 or 11/01/2018

When the user uses the filter it appends the zero on the front of a month with a single digit and in this happening, the filter does not find the string that matches it. Looking for (03/01/2018) when the data is like (3/01/2018). I thought about going through all of our razor grid definitions, and formatting the date to have a two digit month no matter what, but hoping instead of updating dozens of pages, there was a way i could make the mask handle this correctly.

The second issue, is that even though the filter header of the column is masked, when you click the drop down at the top of the column to do a advanced filter, they do not contain the mask on date inputs. I'm pretty sure it is because these are dynamic so when i run the masking function it does not touch these filter inputs. How can I also apply the masking to those filters? I have tried to bind to the hover event of the "Filter" list item that then displays the advanced filter form but with no success. Thanks in advance!

Upvotes: 0

Views: 556

Answers (1)

OnaBai
OnaBai

Reputation: 40917

According the documentation of kendoMaskedTextBox(https://docs.telerik.com/kendo-ui/api/javascript/ui/maskedtextbox/configuration/mask#mask) the following mask rules are supported for digits:

  • 0 - Digit. Accepts any digit between 0 and 9.
  • 9 - Digit or space. Accepts any digit between 0 and 9, plus space.
  • # - Digit or space. Like 9 rule, but allows also (+) and (-) signs.

Given that you want to accept both digits between 0 and 0 as well as space, you should have used:

datepicker.kendoMaskedTextBox({
    mask: "90/90/0000"
});

instead of:

datepicker.kendoMaskedTextBox({
    mask: "00/00/0000"
});

I hope that this answers your question.

Upvotes: 1

Related Questions