Grid with edit type dropdown clearing white space incorrectly

[Emma Beviss]

We have an issue with the ejgrid that means that when you have a piece of data with white space, e.g. "Customer ID with Missing            gap", the grid is incorrectly removing the white space in some instances.

The white space has been stripped from the read-only view of the record and on the entry on the dropdown, the white space is present in edit mode once you've selected from the dropdown.

We want to retain any white space. Can you help?

http://jsplayground.syncfusion.com/riz1fuhm

[Venkatesh Ayothi Raman]

Hi Emma, 

Thanks for using Syncfusion products. 

We went through your sample that you have share for us and we are able to reproduced the issue at our end. The reason is, HTML usually normalises white space, collapsing consecutive spaces, tabs, and new lines into a single space. Please refer to the following online forum for more information, 

http://code.stephenmorley.org/html-and-css/white-space-handling/ 

https://stackoverflow.com/questions/6151554/text-inside-div-not-showing-multiple-white-spaces-between-words 

We suggest you to use cssClass property of columns to avoid this issue. In that cssClass, set the white-space property value as “pre-wrap” like as follows, 

[Style] 

<style> 

        .space { 

            white-space: pre-wrap !important; 

        } 

    </style> 

[Grid] 

var data = [{ OrderID: "Example 1", CustomerID: "Customer ID 1" }, 

            { OrderID: "Example 2", CustomerID: "Customer ID with Missing            gap" }]; 

 

            $("#Grid").ejGrid({ 

 

                dataSource: data, // to bind oData 

 

                allowPaging: true, 

 

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },// enable editSettings 

 

                columns: [ 

 

                        { field: "OrderID", isPrimaryKey: true, headerText: 'Order ID', width: 90 }, 

 

                       { field: "CustomerID", headerText: 'Customer ID', cssClass: "space", width: 90, editType: ej.Grid.EditingType.Dropdown } 

                ] 

            }); 

 

So, there is no need to assign the column data source for Dropdown for editing the row. We have also modified the sample which can be referred from following link, 

Sample: http://jsplayground.syncfusion.com/jb3522pn 

Regards, 

Venkatesh Ayothiraman. 

[Emma Beviss]

I have reviewed the playground you have supplied and it only partially works.

It corrects the readonly gap on the grid, but the gap is still missing on the dropdown entry, please see the attached image demonstrating this.

Attachment: Syncfusion_133368_f048c3bb.zip

[Venkatesh Ayothi Raman]

Hi Emma, 

Thanks for the update. 

If we using cssClass property in grid columns, then it was working with Grid control only. So, we have achieved your requirement using actionComplete event in Grid by applying a same cssClass property to Dropdown list control like as follows, 

$("#Grid").ejGrid({ 

 

        . . . 

        actionComplete: function (args) { 

 

            //actionComplete event in Grid 

            if (args.requestType == "beginedit") { 

                //here we can apply the cssClass property while editing the Grid 

                $("#" + this._id + "CustomerID").ejDropDownList({ cssClass: "space" }); 

            } 

        }, 

        columns: [ 

 

                    . . . 

        ] 

    }); 

 

Sample: http://jsplayground.syncfusion.com/t4relqut 

Refer to the following Help documentation for more information, 

https://help.syncfusion.com/api/js/ejdropdownlist#members:cssclass 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

Regards, 

Venkatesh Ayothiraman.