We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Custom Inline Dropdown Editor on Grid

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
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.

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.

1 Reply

MS Madhu Sudhanan P Syncfusion Team December 13, 2018 02:37 AM

Hi Nigel, 

Thanks for contacting Syncfusion support. 

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

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>', 
 } }; 

Madhu Sudhanan P 

Live Chat Icon For mobile
Up arrow icon