Looking for a way to extract Regular Expressions from an IgGrid cell in Infragistics?

Question

Looking for a way to extract Regular Expressions from an IgGrid cell in Infragistics?

Is it possible to apply a regular expression to a igTextEditor within an igGrid Updating?

I attempted to utilize the validate option, but it was unsuccessful.

   $("#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: "Fr"

                    }]
            }]
        });

I am aiming to implement a time picker in the Time Column, although this feature does not currently exist. Therefore, I am attempting to extract only the time using a regular expression in the textEditor. The grid is initially populated with columns labeled Time, Mo-Friday. When you click on "add" within the grid, you can enter a time in the input field. The time should be validated before clicking on "done" to display any error messages.

To preview how the table appears, visit: https://codepen.io/ablablabla/pen/PJLbJz

javascript infragistics ignite-ui iggrid

Answer 1

Answer №1

The reason for the lack of validation is that the validatorOptions are associated with the editorOptions (which are passed down to the selected editor). The validation: true only provides default settings, which may not be sufficient for a text field except for required fields.

The RegExp option (used for email validation in the code snippet above) has been using pattern since version 15.2 :) For validating time input in a column, you can try the following:

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

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

Edit: If you want to customize 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 requirements, you can also consider using a Mask Editor or a Date Editor as the provider. Make sure to check out the documentation here:

P.S. To avoid errors for rows without values and especially the primary key, bind to an empty array.

Answer 2

The reason for the lack of validation is that the validatorOptions are associated with the editorOptions (which are passed down to the selected editor). The validation: true only provides default settings, which may not be sufficient for a text field except for required fields.

The RegExp option (used for email validation in the code snippet above) has been using pattern since version 15.2 :) For validating time input in a column, you can try the following:

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

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

Edit: If you want to customize 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 requirements, you can also consider using a Mask Editor or a Date Editor as the provider. Make sure to check out the documentation here:

P.S. To avoid errors for rows without values and especially the primary key, bind to an empty array.

Looking for a way to extract Regular Expressions from an IgGrid cell in Infragistics?

Answer №1

Similar questions

Limiting multiple checkbox inputs in a React application can be easily achieved by utilizing React

Changing a single variable into an array that holds the variable in JavaScript

What is the best way to switch from http to https in a React application?

Utilizing Material-UI Select for creating a number range dynamically

What strategies and techniques should be considered when creating websites optimized for mobile devices?

Tips on customizing the appearance of JavaScript output?

The React class component is throwing an unexpected error with the keyword 'this'

Is there a way to incorporate electron methods within Svelte files, specifically in Svelte 3, or is there an alternative approach to achieve this integration?

What is the best way to include keys in my JSON data, rather than just values?

What is the correct way to send parameters in the action tag?

Searching Text Boxes with Javascript: A Better Way to Handle Arrays

GSAP also brings scale transformations to life through its animation capabilities

Passing object attributes to a modal in AngularJS

Unleashing the potential of Chrome's desktop notifications

Tips for delaying the rendering of a directive in AngularJS until the data from a tsv file has been fully loaded

Assistance with offsetting a jQuery drop down menu

Guide on utilizing automatic intellisense in a standard TextArea within a web application

Can you share a method in javascript that extracts href= and title values, similar to PHP's preg_match_all() function?

Populate a Dropdown Menu with Directory Content for User Selection of d3.js JSON Data

The email protected function is failing to display components and is not generating any error logs