Format Date (dd/MM/yyyy) and Mask

[Thomaz Lima]

Hi,

I have two columns, I need format a date with dd/MM/yyyy and other column with type XXX.XXX.XXX-XX.

How I do this?

[Venkatesh Ayothi Raman]

Hi Thomaz, 

Thanks for the using Syncfusion products. 

Query #1:’Format the date column using (dd/MM/yyyy)’ 

We have achieved your requirement using Load event in Grid. In this event, we can give the appropriate format object like as follows, 

@Html.EJS().Grid("NormalEdit").Load("onLoad").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col => 

{ 

    . .  . 

    col.Field("OrderDate").HeaderText("OrderDate").Width("150").Add(); 

    . .  . 

 

}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

[Load event] 

function onLoad(args) { 

        var len = this.columns.length; 

        for (var i = 0; i < len; i++) { 

            if (this.columns[i].field == 'OrderDate') 

                this.columns[i].format = { type: 'date', format: 'dd/MM/yyyy' }; //apply the format to corresponding date column 

        } 

Query 2#:’Mask Edit’ 

As from your query, we suspect that do you want to show the value in grid ‘999.999.999-99’ when data base value is ‘99999999999’ else, would you like to edit the particular column with mask input text box with given format. Could you please confirm your requirement and share the details? It would be helpful for us to find the problem and provide the better solution as earliest. 

Regards, 

Venkatesh Ayothiraman. 

[Dan]

Yes, I'm looking for the MaskEdit grid display solution that you posted. i.e.

"you want to show the value in grid ‘999.999.999-99’ when data base value is ‘99999999999’"

For me, I don't need to be able to edit the value in the grid with that Mask, as I'm using DialogTemplate to allow editing as I'd like.

[Pavithra Subramaniyam]

Hi Dan, 

 

We have analyzed your query. To make the value in Grid display as like maskedit display, we suggest you to use the “ValueAccessor” function for the column. In the value accessor function we have rendered the mask text box component to get the mask display of the value by using the “getMaskedValue” method of MaskTextBox and later destroyed this. Please refer the cod example below, 

 

<div id="container"> 

    @Html.EJS().Grid("Grid")...Columns(col => 

    { 

       col.Field("EmployeeID").HeaderText("EmployeeID").Type("number").ValueAccessor("valueaccess").Add(); 

   }).Render() 

</div> 

 

<script type="text/javascript"> 

    function valueaccess(field, data, column) { 

        var x = document.createElement("input") 

        x.setAttribute("id", "mask"); 

        var parent = document.getElementById("container"); 

        parent.appendChild(x);   //Append the input element 

        var mask2 = new ej.inputs.MaskedTextBox({ 

            mask: "999.999.999-99", value: data[field].toString()        //here set the column data as value to mask textbox 

        }); 

        mask2.appendTo('#mask');   //Append the mask textbox 

        var value = mask2.getMaskedValue();   //We will be getting the mask like display value here 

        parent.removeChild(document.getElementsByClassName("e-mask")[0]);   //Remove the mask text box 

        return value;   

    } 

</script> 

 

We have also attached the sample for your convenience, please download the sample from the link below, 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization-381684313 

 

Please refer the screenshot below, 

 

 

Documentations :  

https://ej2.syncfusion.com/javascript/documentation/maskedtextbox/mask-configuration/ 

https://ej2.syncfusion.com/documentation/api/maskedtextbox/#getmaskedvalue 

https://ej2.syncfusion.com/aspnetmvc/documentation/maskedtextbox/getting-started-mvc/?no-cache=1 

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S.