Show Multiple Spaces in Grid Cells

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	Created with version 2017.3.1026

Description

When I enter a value with multiple spaces in the Grid, how can I display all spaces and avoid trimming the spaces down to a single space?

Solution

The skipping of all spaces but one is due to the default HTML behavior—in HTML, additional spaces are trimmed. To display the text as is, specify a template for the Grid cell which will display the value in a pre element.

<div id="grid"></div>

<script>
    $(document).ready(function () {
        var dataSource = new kendo.data.DataSource({
            data: [
                { "TextField": "Text     with     multiple    spaces" }
            ]
        });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            height: 550,
            columns: [
                { field: "TextField", template: "<pre>#=TextField#</pre>" }
            ],
            editable: true
        });
    });

</script>