UI Grid dropdown empty space item display

[ArunMNew]

Hi,

In UI Grid when i use "'ui-grid/dropdownEditor" editableCellTemplate for display the dropdown
by default it shows an extra empty space item as first index along with actual itemsource.

I want to load actual itemsource without any selected item ...

Is there anyway to remove/hide that empty space item ?

[kranthikumar-polasa]

that empty space item rendered in the html ( )
Temp Solution is we can remove it by CSS trick like

#GridCustomId.ui-grid-cell div select option:first-child[value=""] {
display: none;
}

In the above screen selected html is the empty space item, i am identifying that using first-child[value=""].

[ArunMNew]

@Kranthikumar2555 , i have tried your suggestion with below steps, but it does not help.

Please tell me what i am doing wrong here.

below is the html div which renders the ui grid.

<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>

i have added style as below.
<style>
#gridOptions.ui-grid-cell div select option:first-child[value=""] {
display: none;
}
</style>

[JLLeitschuh]

You need to set the id of the dom element you are using the directive on. In your case:

<div id="GridCustomId" ui-grid="gridOptions" ui-grid-edit class="grid"></div>

With the style:

<style>
  #GridCustomId.ui-grid-cell div select option:first-child[value=""] {
    display: none;
  }
</style>

Lookup how CSS selectors work in order to understand how #GridCustomId.ui-grid-cell div select option:first-child[value=""] is resolved.

[ArunMNew]

@JLLeitschuh , i created sample plunker and did the same above approach. Still issue was not resolved.

Please see the plunker http://plnkr.co/edit/vhAATILeLpfd2CJONKi6?p=preview

In this plunker page the "Gender" column dropdown has empty space item.
I have added that style in "main.css" file.

[bernhard-hofmann]

The blank value will be removed when you chose one of the options. AngularJS adds this blank option when your model value is not in the options for the drop down list. If you want it to default to a value, you should set that on the object that is bound to that row in your grid.

[ArunMNew]

@bernhard-hofmann , so is it not possible to remove that blank option without setting to any default value (or) choose one of the options ?

[bernhard-hofmann]

If there wasn't a blank, which value would you expect to be selected?

The DDL (Drop Down List) will show the selected item when the list is not shown, so what you see there must be in the list. AngularJS doesn't make an assumption on your default, so it inserts a blank (to match your model). Once you select one of the options, the blank is no longer needed and removed for you.

[aarosil]

@bernhard-hofmann Should the above also apply if the choice was already set in the data? I see blank value as an option, even though my data has a value set. Is this because I am binding to object rather than ID ("field" prop of the columnDef points to an object). Is there some "track by" I can use to indicate what option is already selected in the data (such as with ng-options)?

[PaulL1]

Often the trick is 1 v's "1" in your data. i.e. string v's numeric.

[aarosil]

Thanks for the confirmation I should be able to bind to an object, display it's "name" prop and not have a "blank" dropdown option.

I confirmed both my original data in the grid as well as the data in editDropdownOptionsArray both have numeric IDs.

I thought maybe the blank option appeared because I assigned the dropdown values after async call, but I see the blank option even when I hardcode the dropdown options.

Here I created a plunk, showing the blank option still appears, even when the data is already set to an identical option that appears in the editDropdownOptionsArray. (sorry for extra code, I forked from the plunk above).

http://plnkr.co/edit/vMLKBcysXI6FsoPb3wHc?p=preview

[prasannapethe]

@ArunMNew
just update the plunker with this you will get the output

.filter('mapGender', function() {
var genderHash = {
'male': 'male',
'female': 'female'
};
and

editDropdownOptionsArray: [
{ id: 'male', gender: 'male' },
{ id: 'female', gender: 'female' }
]