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

The introduction of an underscore alters the accessibility of a variable

Is there a way for me to extract text from a leaflet popup in order to generate the complete URL for an AJAX request?

Selenium Assistance: I'm encountering a scenario where on a webpage, two elements share the same Xpath, making it difficult to differentiate them based on even

Is there a way in Angular Material to consistently display both the step values and a personalized description for each step?

Issue with Orgchart JS: The requested resource does not have the 'Access-Control-Allow-Origin' header present

What could be the reason for the lack of response from the jquery element on an

Keeping extensive files/information on disk in order to alleviate browser memory usage in JavaScript

Hiding javascript code within comment tags ""

Unique phrase: "Personalized text emphasized by a patterned backdrop

Select state and city options similar to the national breakdown page

Implementing mouse event listeners on dynamically created elements in Vue.js

Decrease the space between slide items by reducing margins or increasing their width

Updating values within a nested JSON file during iteration in JavaScript

Instructions for passing the chosen value to Django

Retrieve JSON data and use a button to sort and display markers on a Google Map

Unable to modify the appearance of an HTML element when injected via a Chrome extension

Draw rectangles in real-time on a canvas as the mouse is clicked and dragged

Validation is not being enforced for the input field labeled as 'name' in the form

Is there a way to locate an element within innerHTML using getElementById?

JS Issues with generating accurate dates in JS/JS Date perplexities