How to get Regular Expression in IgGrid cell (Infragistics)?

Question

how can i have a regular expression on a igTextEditor in igGrid Updating?

i tried to use validate option but it didn't worked.

   $("#schedulerTable").igGrid({
            columns: $scope.schedulerColumns,
            width: "87%",
            height: "300px",
            fixedHeaders: true,
            autoGenerateColumns: false,
            autofitLastColumn: true,
            autoCommit: true,
            renderCheckboxes: true,
            responseDataKey: "results",
            dataSource: $scope.schedulerData,
            updateUrl: "",
            primaryKey: 'Id',
            features: [
            {
                name: "Updating",
                generatePrimaryKeyValue: function (evt, ui) {
                    nextPrimarykey -= 1;
                    ui.value = nextPrimarykey;
                },
                enableAddRow: true,
                enableDeleteRow: true,
                editMode: "row",
                columnSettings: [
                   {
                       columnKey: "Id",
                       editorType: "numeric",
                       editorOptions: {
                           readOnly: true
                       }
                   }, {
                       columnKey: "Time",
                       editorType: "text",

                       editorOptions: {
                       },
                       validatorOptions: {
                           regExp: /^[a-zA-Z]{1}[a-zA-Z0-9_\.\-]*\@\w{2,10}\.\w{1,10}$/,
                           onblur: true,
                           onchange: true
                       },

                       required: true,
                       validation: true,
                       defaultValue: "00:00"
                   },
                   {
                       columnKey: "Mo"

                   },
                   {
                       columnKey: "Tu"

                   },
                    {
                        columnKey: "We"

                    },
                    {
                        columnKey: "Th"

                    },
                    {
                        columnKey: "Fi"

                    }]
            }]
        });

i want to achive a time picker in the Time Column but that doesn't exist so i try to get only time in the textEditor by regular expression. the grid gets loaded with columns named Time, Mo- Friday. if you click on add in grid you can click in the input field and fill your time. the time should get validated before clicking on done and show a error message.

to see how the table look like: https://codepen.io/ablablabla/pen/PJLbJz

@headmax if you use the infragistics tool you can create a grid with only calling igGrid on a id of a div. so if you would test this or check it all you have to do is callig $('#whatever').igGrid({}); to get a full working grid. — Amsel, Oct 20 '17 at 07:37
I just tell you show us your html cos is linked with JS as CSS too. i can create a div class named "schedulerTable" but what should be the others parts ??? a input text for search and ??? — , Oct 20 '17 at 07:40
sry i was new to this site . here is the link but i don't know how to reference Ignite but you can see the code which is doing the stuff.https://codepen.io/ablablabla/pen/PJLbJz — Amsel, Oct 20 '17 at 07:59
@i am on but you put mutch directive did you known when you got the error? — , Oct 20 '17 at 08:11
its not an error that happens. check again the site i added a comment. you need to add editing modules for updating feature. i don't get any error it just don't validate the field. — Amsel, Oct 20 '17 at 08:13
what i get from your code here https://codepen.io/headmax/pen/PJLbRG — , Oct 20 '17 at 08:20
it's becuase of references. in your first example there is a IgniteUI trial at the buttom right. which shows that its referenced properly but in my example its not. wenn i paseted my grid into your first example it worked. only without editing which is due to modules which you need to use : /infragistics.ui.grid.updating.js,infragistics.ui.grid.shared.js,infragistics.ui.editors.js, example; http://www.igniteui.com/help/api/2014.1/ui.iggridupdating — Amsel, Oct 20 '17 at 08:30
it should look like this https://codepen.io/ablablabla/pen/PJLbJz — , Oct 20 '17 at 08:44
https://jsfiddle.net/gh/get/jquery/1.9.1/IgniteUI/help-samples/tree/master/17.1/EN/grid/editing-api-events/fiddle shouw be like this but instead of first name input field imagine a text editor where you can only but time like 13:45 or so. and if its not time just show a notification. — Amsel, Oct 20 '17 at 08:56
i got it too, but what zone should for your regex?? wich pattern? — , Oct 20 '17 at 09:00
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/157126/discussion-between-headmax-and-amsel). — , Oct 20 '17 at 09:03
https://codepen.io/ablablabla/pen/PJLbJz got it now. idk the pattern just try the one for mail for now i can change that later. — Amsel, Oct 20 '17 at 09:03
so codepen.io jsfiddle.com solve the problem ;) lol, good done, gl for the next so. — , Oct 20 '17 at 09:05
yes but still the problem isn't the grid its validating in the grid. — Amsel, Oct 20 '17 at 09:22

Damyan Petev · Accepted Answer · 2017-10-26T10:56:28.307

The lack of validation is because the validatorOptions belong to the editorOptions (as those get passed down to whatever editor you choose as provider). The validation: true only gets some defaults, which really won't do much for a text field besides the required.

And then the RegExp option (which is for an email in the snippet above as far as I can tell) has been pattern since 15.2 :) So in the end for that time column you can try:

//...
    editorOptions: {
     validatorOptions: {
       pattern: /^\d{1,2}\:\d{2}$/,
       onblur: true,
       onchange: true
     },
    },
//..

Here's an updated codepen: https://codepen.io/anon/pen/YrgYxj

Edit: Or if you want to set the error message:

//...
    editorOptions: {
     validatorOptions: {
       pattern: {
        expression: /^\d{1,2}\:\d{2}$/,
        errorMessage: "Time should match a pattern like 00:00"
       },
       onblur: true,
       onchange: true
     },
    },
//..

Depending on your goals you could also use a Mask Editor or a Date Editor as provider. Also the obligatory docs link: https://www.igniteui.com/help/iggrid-updating

P.S. Bind to an empty array to avoid the error for that first row that has no values and more importantly primary key.

how can i change the notification if it doesn't match the pattern? thanks for your good solution. — Amsel, Oct 24 '17 at 08:35
@Amsel You can either set a global `errorMessage` or provide one for the pattern check. I've added a snippet for the latter to the answer. — Damyan Petev, Oct 26 '17 at 10:58

How to get Regular Expression in IgGrid cell (Infragistics)?

1 Answers1

Linked

Related