Mask column

[Jorge Pampin]

Hello,

How to set this mask "#00° 00' 00'' / #000° 00' 00''" to a column? It's a mask to enter gps localization values.

Thanks!

[Ajith R]

Hi Jorge,

Thanks for using Syncfusion products.

Query 1: How to set this mask "#00° 00' 00'' / #000° 00' 00''" to a column?

We suggest you to use QueryCellInfo client side event and set the corresponding format using grid formatting method to achieve your requirement. Refer the below code snippet for further details.

<ej:Grid ID="Grid" runat="server" AllowPaging="true">

        <ClientSideEvents QueryCellInfo="cellInfo" />

        ---------

        ---------

</ej:Grid>

<script type="text/javascript">

     function cellInfo(args) {           

            if (args.column.headerText == "GPS") {

                if (args.text.indexOf("°") == -1) {

                    var dms = getDMS(args.data.Location["Latitude"]); // Get DMS value from latitude

                    // Set DMS format using grid formatting method

                    var text = this.formatting("{0:D2}", dms.degree) + "°" + this.formatting("{0:D2}", dms.min) + "'" + this.formatting("{0:D2}", dms.sec) + "''";

                    $(args.cell).text(text); // Set formatted text to the cell

                }               

            }

        }       

        function getDMS(val) {

            // convert decimal degree to DMS

            var dms = {};

            var degree = dms["degree"] = Math.floor(val);

            var min = dms["min"] = Math.floor((val - degree) * 60);

            dms["sec"] = Math.floor((val - degree - min / 60) * 3600);

            return dms;

        }

</script>

Query 2: It's a mask to enter gps localization values.

We suggest you to use EditTemplate for the corresponding column to render Mask control while editing in the Grid. Please refer the below code snippet and UG Documentation for further details.

<ej:Grid ID="Grid" runat="server" AllowPaging="true">       

        <Columns>

            --------

            --------

            <ej:Column Field="Location.Latitude" HeaderText="GPS" Width="100" Type="String">

                <EditTemplate Create="create" Read="read" Write="write" />

            </ej:Column>

        </Columns>
</ej:Grid>

<script type="text/javascript">

        function create() {

            return $("<input>");

        }

        function write(args) {

            args.element.ejMaskEdit({ width: "100%", maskFormat: "##° ##' ##''", value: args.rowdata.Location !== undefined ? getMaskValue(args.rowdata.Location["Latitude"]) : "" });

        }

        function read(args) {

           return args.ejMaskEdit("get_UnstrippedValue");

        }
    </script>

UG Doc: http://help.syncfusion.com/aspnet/grid/editing?cs-save-lang=1&cs-lang=html#cell-edit-template

Online Demo: http://asp.syncfusion.com/demos/web/grid/edittemplate.aspx

For your convenience we have created a simple sample and the same can be downloaded from the below link.

Sample: http://www.syncfusion.com/downloads/support/forum/122089/ze/Sample-746212353

We have created the above sample with data structure of [{Location: {Latitude: 11.11, Longitude: 23.43}}]. Please get back to us If you need the solution for any other data structure and provide us more detailed information regarding your requirement, so that we can provide you the solution based on your requirement.

Please let us know if you have any further concerns.

Regards,
Ajith R

[Jorge Pampin]

Hello,
How to add the simbols '+' '-' to the mask? The latitude/longitude can be a positive or a negative value.

Thanks!

[Gowthami V]

Hi Jorge,
 

We have an issue "MaskFormat character # not allowed +/- symbol” and created a new support incident under your account. . Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,

Gowthami V.