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

Best practice to populate/read/write a DropDownList inside a grid dialog edit

Greetings. Let's say that I have these entites:

public class Slave{
public virtual Int32 Id { get; set; }
public virtual String Name { get; set; }
public virtual Boolean IsEnabled { get; set; }
public virtual Master Master { get; set; }

where Master entity is:

public class Master
public virtual Int32 Id{get;set;}
public virtual String Name {get;set;}

Now, I need a grid where one could view / insert / update Slaves. When the user clicks on an existing slave the grid editing dialog shows up: In the Master field there should be a dropdownlist with the master list, so that the user can choose any master to be associated with the current slave. So, the datasource that the grid has to deal with is of this kind: [{"Id":1,"Name":"Slave 1","IsEnabled":true,"Master":{"Id":1,"Name":"Master 1"}},{"Id":2,"Name":"Slave 2","IsEnabled":true,"Master":{"Id":3,"Name":"Master 3"}}]. The DropDownList should show the master names as text and keep a reference to their Ids. So it's data source is of this kind: [{"Id":1,"Name":"Master 1"},{"Id":2,"Name":"Master 2"}]. I've done the following to satisfy the requirement:

->in the grid declaration:

                        .ValidationRules(v => v.AddRule("required", true))
                        .EditTemplate(a => { a

and then:

<script id="masterDropDownList" type="text/template">
    {{:Master.Name}} <!-- so that the current row master's name is shown in the grid column "Master"-->

<script type="text/javascript">

    var source = @(Html.Raw(Json.Encode(ViewBag.MasterDataSource)))

    var dropDownList;

    function getIndex(datasource, currentId) {
        for(var i=0;i<datasource.length;i++){
            if (datasource[i].Id === currentId)
                return i;

    function createMasterDropDownList() {
        return $("<input>");


    function writeMasterDropDownList(args) {

        var selectedItem = (args.rowdata["Master"] !== undefined) ? getIndex(source, args.rowdata["Master"]["Id"]) : 0;

        dropDownList = args.element;

            width: "100%",
            height: "40px",
            dataSource: source,
            fields: { id: 'Id', text: 'Nome', value: 'Id' },
            selectedItemIndex: selectedItem,

    function readMasterDropDownList(args) {

        var currentIndex = dropDownList.ejDropDownList("option", "selectedItemIndex");

        var currentMaster = source[currentIndex];

        return currentMaster;

This works; it populates the master dropdownlist when a slave is edited and pre-selects the current master. The grid is also able to get the selected master id through the "readMasterDropDownList" when a slave is edited or created. The problem with this approach is that:

1) Is my code regarding the 3 dropdownlist helper functions (create/write/read master) following a correct approach at all? Is it necessary to hold a reference to the actual dropdown list in the variable "dropDownList"? I get the reference in writeMasterDropDownList ( dropDownList = args.element;) and use it in readMasterDropDownList this way: (var currentIndex = dropDownList.ejDropDownList("option", "selectedItemIndex");). Is there a better way to do this?
2) Trying to accomplish another requirement ( https://www.syncfusion.com/forums/121030/conditional-template-column-with-a-button-in-a-grid ) I added the following line to my grid declaration:

".ClientSideEvents(eve => { eve.TemplateRefresh("refreshTemplate"); })"

-> this alone causes the grid edit dialog not to create the correct DropDownList input: the field becomes a normal textbox. Why is this happening?

Thanks a lot for your kind help.

1 Reply

JK Jayaprakash Kamaraj Syncfusion Team November 12, 2015 04:05 PM UTC

Hi Carlo,

Query 1: edit template with dropdown list:


We have analyzed your provided code snippet and we suggest you to use “args” as element in read function of EditTemplate. Please find the code snippet.



Code example,

<script type="text/javascript">
    function create() {
        return $("<input>");
    function write(args) {
        obj = $('#Edittemplate').ejGrid('instance');
        var data = ej.DataManager(obj.model.dataSource).executeLocal(new ej.Query().select("CustomerID"));
        args.element.ejDropDownList({ width: "100%", dataSource: data, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" });
    function read(args) {
        return args.ejDropDownList("getSelectedValue");



In above code snippet we can get current target html element in its “args” through “read” function of EditTemplate.   



Query 2:”.ClientSideEvents(eve => { eve.TemplateRefresh("refreshTemplate"); })"


Please share the following information to  provide a prompt solution.


Did you face any script error while performing edit/add operation.




Jayaprakash K.

Live Chat Icon For mobile
Up arrow icon