Custom Inline Dropdown Editor on Grid

[yasdad]

Hi,

I'm developing with Razor Pages and have a grid on a page that populates as I would like. However when I try to customize a dropdown editor for one of the columns, using a property from the Model, I fail to see anything in the resulting editor - I get a dropdown that seems empty even though I can verify the data is present.

For the purposes of testing, I have created a class and property on the .cs file. The contents are:

public class UserStatus

{

public int Status { get; set; }

public string StatusDescription { get; set; }

public string StatusCSSClass { get; set; }

}

public List Dropdown

{

get

{

return new List {

new UserStatus { Status = 1, StatusDescription= "Status 1", StatusCSSClass = "icon-s1" },

new UserStatus { Status = 2, StatusDescription = "Status 2", StatusCSSClass = "icon-s2" },

new UserStatus { Status = 3, StatusDescription = "Status 3", StatusCSSClass = "icon-s3" },

new UserStatus { Status = 4, StatusDescription = "Status 4", StatusCSSClass = "icon-s4" },

new UserStatus { Status = 5, StatusDescription = "Status 5", StatusCSSClass = "icon-s5" },

};

}

}

My .cshtml page has a variable declared like so:

var editParams = new { @params = new { dataSource = Model.Dropdown, fields = new { value = "StatusDescription" } } };

and my grid column looks like this:

e-grid-column field="StatusDescription" textAlign="Center" headerText="" editType="dropdownedit" edit="editParams" template="#statusTemplate"

Finally, for completeness, the template for this column looks like this:

Please advise where I am going wrong as I would expect to see a dropdown list with 5 entries.

If possible, please extend your reply to show how I could customize the dropdown list contents to show the span with a class of the StatusCSSClass and the StatusDescription next to it.

Your help is much appreciated.

[Edit]

I spotted a mistake in my edit parameters, which I have corrected. The above now works. I would still appreciate some help with customizing the look of the dropdown items, thanks.

[Madhu Sudhanan P]

Hi Nigel, 

Thanks for contacting Syncfusion support. 

For provide custom data source to the dropdown editor, please refer our documentation. 

https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list/ 

To customize the dropdown list item you can use the itemTemplate property of the Dropdownlist. Please refer to the below code example. 

var editParams = new { @params = new {  

    ... 

    itemTemplate: '<span class="${StatusCSSClass}">${StatusDescription}</span>', 

    ... 

 } }; 

https://ej2.syncfusion.com/javascript/documentation/drop-down-list/templates/?no-cache=1#item-template 

https://ej2.syncfusion.com/aspnetcore/DropDownList/Template#/material 

Regards, 

Madhu Sudhanan P