Grid Filter – validation in filter dialog?

[tommutParticipant]

Hi there,

I am using the Grid Filtering feature as demonstrated here:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/filtering.htm

Is it possible for the numeric filter to add validation so that only numeric input is accepted in the filter value input field? For instance, on that demo page if I filter on the Quantity column, I can enter a non-numeric value like ‘abc’. I would like to validate this input to require numeric input only. Is this possible when using the column filters?

Thanks
Tom

[DimitarParticipant]

Hi Tom,

Here is how to update the grid in the demo to achieve your requirement:

$("#jqxgrid").jqxGrid(
{
    width: 850,
    source: adapter,
    filterable: true,
    sortable: true,
    ready: function () {
        addfilter();
    },
    autoshowfiltericon: true,
    updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
        columnfilter, filtertype, filterconditions) {
        if (filtertype === 'numericfilter') {
            filterinputfield1.add(filterinputfield2).off('keypress');
            filterinputfield1.add(filterinputfield2).keypress(function () {
                return /\d/.test(String.fromCharCode(event.keyCode));
            });
        }
    },
    columns: [
        { text: 'First Name', datafield: 'firstname', width: 160 },
        { text: 'Last Name', datafield: 'lastname', width: 160 },
        { text: 'Product', datafield: 'productname', width: 170 },
        { text: 'Order Date', datafield: 'date', filtertype: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
        { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
    ]
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[tommutParticipant]

This is great and works very well for the numeric usecase. Thanks Dimitar.

One follow up: is there any way to do any further validation and display a validation error on the filter input screens? For example, I have another usecase where I want to validate a particular String filter determine if particular string values were entered, and disallow filtering and display an error message in that case? Is it possible to add this type of validation handling using the same updatefilterpanel method?

Thanks.
Tom

[DimitarParticipant]

Hi Tom,

It may be possible to apply a jqxTooltip to the filter input and show the tooltip with an error message if a condition is met (in the keypress event handler).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[tommutParticipant]

Hi Dimitar,

Thanks for the idea. I’ll give that a go.
Tom

[Author]

Posts