Dropdownlist Missing Label in Grid EditTemplate Dialog Editing

Question

I can't seem to figure out how to get a nice looking dropdownlist instead of a GridColumn EditTemplate when doing dialog editing. I want there to be a label like all of the other input fields.

Another issue is that the dropdownlist shows a blank default entry if there is no placeholder and no empty options in the datasource. My datasource currently only has 2 items, and I want the first option to be visibly selected. It is "selected" by default whether I leave the placeholder blank or not and it passes validation, but the UX here is not intuitive. All documentation I've found either doesn't not show the class of what the dropdownlist is bound to, or it's just bound to a string array which doesn't seem helpful if you need a traditional dropdownlist whose options have both a text and value field.

My datasource currently looks like this:

public RequestTypes

{

public int Id {get; set;}

public string Name {get; set;}

}

I've also tried using a Template inside of GridEditSettings and I made my own <select> HTML element by looping over my RequestTypes list and creating the options. When I made this inside the template the same issue described above exists where the dropdownlist would initially show a blank selection. I did the same thing outside of the Grid and it rendered a select HTML element appropriately. Maybe this has something to do with binding to a property which doesn't have a value yet because it's a new item? Not really sure, but other component libraries don't act like this.

I could try making my datasource a list of SelectListItem rather than a list of RequestTypes. I'm just really not sure what else to think here. If anyone has some insights, it would be much appreciated.

Jeevakanth Palaniappan · Accepted Answer

Hi Frank, 

Greetings from Syncfusion support. 

We have checked your query and we would like to inform you that we have default dropdown edit in grid. Also you can do customization in dropdown by rendering the SfDropDownList in Edit template. Please refer the below documentation for your reference. 

https://blazor.syncfusion.com/documentation/datagrid/editing/#dropdownedit 
https://blazor.syncfusion.com/documentation/datagrid/editing/#cell-edit-template 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp1712887688 

Query : I don't want users to edit since AllowAdding and AllowEditing only prevent the fields from being edited but they still display on the dialog form 

For this we suggest you to use the dialog template feature. Please refer the below documentation for your reference. 

https://blazor.syncfusion.com/documentation/datagrid/editing/#dialog-template 

If you are still facing any problem then kindly share us the below details, 


Share us the Syncfusion NuGet version.
Share us the video demo showing the reported problem.
Kindly share us the issue reproducing sample or reproduce the issue in the above provided sample.

The above requested details will be helpful for us to validate the issue and provide you with a better solution as early as possible. 

Regards, 
Jeevakanth SP.

Frank · Answer

I've just mimicked the styles of the other labels for now and I used CSS to set display: none on the elements I don't want users to edit since AllowAdding and AllowEditing only prevent the fields from being edited but they still display on the dialog form. This will serve for now (I might try the GridEditSettings Template instead).

Still don't like how the placeholder doesn't count as the selected and invalid item in the dropdownlist though, but I guess I'll have to live with that for now.