Add Custom Data Parsers

You can easily add a custom data parser to the wijgrid widget to parse data. See the grid > CustomDataParsers sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/grid/CustomDataParsers for an example.

Complete the following steps:

Create a new ASP.NET MVC 5 Wijmo Application (see Creating an MVC Tools Project).
Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.
Check the dependencies to make sure the project is referencing the latest version of Wijmo. These should be placed within the <head> tags of the page. You can find the latest version of the Wijmo dependencies at http://wijmo.com/downloads/cdn/.

Add the following markup within the <body> tags of the page, just after @RenderBody():

<div class="main demo">
    <table id="demo">
        <thead>
            <tr>
                <th>Boolean</th><th>Boolean Parsed</th><th>Number</th><th>Number Parsed</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>off</td><td>off</td><td>1</td><td>1</td>
            </tr>
            <tr>
                <td>on</td><td>on</td><td>2</td><td>2</td>
            </tr>
            <tr>
                <td>off</td><td>off</td><td>1993</td><td>1993</td>
            </tr>
            <tr>
                <td>off</td><td>off</td><td>2015</td><td>2015</td>
            </tr>
            <tr>
                <td>on</td><td>on</td><td>100</td><td>100</td>
            </tr>
        </tbody>
    </table>
</div>

This markup will add content for a table.

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijgrid widgets:

 <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            var customBoolParser = {
            // DOM -> Boolean
                parseDOM: function (value, culture, format, nullString) {
                return this.parse(value, culture, format, nullString);
            },
            // String/ Boolean -> Boolean
                parse: function (value, culture, format, nullString) {
                if (typeof (value) === "boolean") {
                    return value;
                }
                if (typeof (value) === "string") {
                    value = $.trim(value);
                }
                if (!value || value === " " || value === nullString) {
                    return null;
                }
                switch ($.trim(value.toLowerCase())) {
                    case "off": return false;
                    case "on": return true;
                }
                return NaN;
            },
            // Boolean -> String
                toStr: function (value, culture, format, nullString) {
                return value ? "on" : "off";
            }
            };           
            $("#demo").wijgrid({
                allowSorting: true,
                columns: [
                    {},
                    { dataType: "boolean", dataParser: customBoolParser },
                    { dataType: "number", dataFormatString: "n0" },
                    { dataType: "number", dataParser: customRomanParser }
                ]
            });
        });
        function customRomanParser() {
            // DOM -> number
            this.parseDOM = function (value, culture, format, nullString) {
                return this.parse(value.innerHTML);
            },
            // String/ number -> number
            this.parse = function (value, culture, format, nullString) {
                if (typeof (value) === "number" && (value === 0 || isNaN(value))) {
                    return NaN;
                }
                if (!value || (value === " ") || (value === nullString)) {
                    return null;
                }
                if (!isNaN(value)) {
                    return parseInt(value);
                }
                value = roman(value);
                return !value ? NaN : value;
            },
            // number -> String
            this.toStr = function (value, culture, format, nullString) {
                if (value === null) {
                    return nullString;
                }
                return roman(value);
            };
            var arab_nums = [1, 4, 5, 9, 10, 40, 50, 90, 100, 400, 500, 900, 1000];
            var roman_nums = ['I', 'IV', 'V', 'IX', 'X', 'XL', 'L', 'XC', 'C', 'CD', 'D', 'CM', 'M'];
            function roman(value) {
                if (typeof (value) === "number") {
                    return (function (arab) {
                        var roman = "";
                        for (var i = 12; arab > 0; ) {
                            if (arab >= arab_nums[i]) {
                                roman += roman_nums[i];
                                arab -= arab_nums[i];
                            } else {
                                i--;
                            }
                        }
                        return roman;
                    })(value);
                }
                else {
                    return (function (roman) {
                        roman = roman.toUpperCase();
                        var arab = 0;
                        for (var i = 12, pos = 0, len = roman.length; i >= 0 && pos < len; ) {
                            if (roman.substr(pos, roman_nums[i].length) === roman_nums[i]) {
                                arab += arab_nums[i];
                                pos += roman_nums[i].length;
                            }
                            else {
                                i--;
                            }
                        }
                        return arab;
                    })(value);
                }
            }
        }
    </script>

This will setup data parsers in the grid.

What You've Accomplished

Press F5 to run the application, observe that the second and 4th columns of the grid have data parsers applied.