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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom Inline Dropdown Editor on Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

141449 Dec 12,2018 07:47 AM UTC Dec 13,2018 07:37 AM UTC ASP.NET Core - EJ 2 1
loading
Tags: DataGrid
yasdad
Asked On December 13, 2018 06:55 AM UTC

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 [Syncfusion]
Replied On December 13, 2018 07:37 AM UTC

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




Regards, 
Madhu Sudhanan P 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;