Child grid with column input mask

[Bernard Jurlina]

I want to have input mask for the child grid column to enter the time value in format like HH:mm, and maybe with placeholders like __:__.

Is there some example?

Thanks!
Bernard.

[Rajapandiyan Settu]

Hi Bernard, 

Thanks for contacting Syncfusion support. 

By default, the EJ2 Grid supports only the number, string, Boolean, date and datetime type columns. Based on your requirement, we suspect that you want to render the time based column in the Grid. But the Grid does not have the support for time based column. 

Column Type: https://ej2.syncfusion.com/javascript/documentation/api/grid/columnType/ 

Before proceeding with your query, we need following information on your requirement. 

1. Are you want to show the time based values in the Grid column?
2. Are you want to perform Filtering, Sorting, Filtering, Grouping etc., on this time based column?
3. What is your exact requirement, explain in detail?
4. Are you want to show and save this time value in string format? How could you show and save this value?
5. What are the features you have used in the Grid?

Regards, 

Rajapandiyan S 

[Bernard Jurlina]

Hi Rajapandiyan!

My requirement is just simple. The grid column is in string format and I just want to type input string in hour format
like HH:mm but maybe with placeholders __:__ so I can only type numbers over the _.

I don't need filtering, sorting and grouping and the grid is saving string format in the database.

Is it clear enough?

Regards,
Bernard.

[Rajapandiyan Settu]

Hi Bernard, 

Thanks for your update. 

Query: The grid column is in string format and I just want to type input string in hour format
like HH:mm but maybe with placeholders __:__ so I can only type numbers over the _. 

You can achieve your requirement by using cellEditTemplate feature. Refer to the below documentation for more information. 

cellEditTemplate: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template 

The cell edit template is used to add a custom component for a particular column by invoking the following functions: 

• create - It is used to create the element at the time of initialization.
• write - It is used to create custom component or assign default value at the time of editing.
• read - It is used to read the value from the component at the time of save.
• destroy - It is used to destroy the component.

 

By using this feature, we rendered the MaskedTextBox control to edit the EntryTime field. The create, write, read and destroy functions will be triggered for each time When you editing a row. 

MaskedTextBox: https://ej2.syncfusion.com/javascript/documentation/maskedtextbox/mask-configuration/#custom-characters 

@{  

    var valueAccessor = "valueAccessorFn"; 

} 

<ejs-grid id="Grid" load="load"> 

    ---- 

        <e-grid-column field="EntryTime" headerText="Entry Time" textAlign="Right" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" valueAccessor="valueAccessor" width="120"></e-grid-column> 

</ejs-grid> 

 

<script> 

    --- 

    var elem; 

    var maskObj; 

    function create(args) { 

        // create a input element 

        elem = document.createElement("input"); 

        return elem; 

    } 

    function read(args){ 

        // renturn the value which will be bound to the Grid 

        return maskObj.value; 

    } 

    function destroy(args) { 

        // destroy the component 

        maskObj.destroy(); 

    } 

    function write(args) { 

        // render the maskedtexbox control 

        maskObj = new ej.inputs.MaskedTextBox({ 

            // sets mask format to the MaskedTextBox 

            mask: '00:00', 

            placeholder: 'Time 24 format (ex: 10:00, 20:00)', 

            // bind the cell value 

            value: args.rowData[args.column.field], 

            floatLabelType: 'Always' 

        }); 

        maskObj.appendTo(elem); 

    } 

</script> 

By using valueAccessor property, you can show the time value in customized format. It is used only for the display purpose. 

valueAccessor: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#valueaccessor 

<script> 

    function valueAccessorFn(field, data, column){ 

        var value = data[field]; 

        return value.slice(0, 2) + ":" + value.slice(2); // return the customized value 

    } 

</script> 

You can validate the EntryTime column value on Editing by using Column validationRules. 

Custom column validation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#custom-validation 

<script> 

    function load(args) { 

        this.columns[2].validationRules = { required: true, regex: [customFn, 'Enter valid time'] }; 

    } 

     

    function customFn(args) { 

        // validate the value based on your condition and return the boolean value 

        return args.value.match(/^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/); 

    }; 

</script> 

 

We have prepared a sample for your reference. You can get it from the below link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_grid_maskedtexbox-68402014.zip 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S 

[Bernard Jurlina]

Hi Rajapandiyan,

and thanks for the given example. It's working great.
Thumbs up! :)

Regards,
Bernard.

[Rajapandiyan Settu]

Hi Bernard, 

We are glad that you have achieved your requirement with the provided response. 

 

Please get back to us if you need further assistance.  

Regards, 

Rajapandiyan S