Grid with edit type dropdown clearing white space incorrectly

Question

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 · Answer

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 · Answer

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 · Answer

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.