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

Binding data to in cell dropdown list in ej-grid

I have the following grid:

<ej-grid id="Grid" [dataSource]="dataManager" [allowSorting]="true" [allowFiltering]="true" [editSettings]="{'allowEditing':'true'}" [allowPaging]="true"  >
        <e-column field="label" editType="dropdownedit" [dataSource]="userListFull" headerText="Пользователь" ></e-column>
        <e-column field="project.id" headerText="Проект"></e-column>
        <e-column field="startDate" editType="datepicker" width="75" [allowFiltering]="false" headerText="Дата с"></e-column>
        <e-column field="endDate" editType="datepicker" width="75" [allowFiltering]="false" headerText="Дата по"></e-column>

My goal here is to implement a dropdown in replacedUser field
The description in JS syncfusion manual suggests, that editType="dropdownedit" takes data from the [dataSource] property, that should be an Array. However, as I've tried that, with "userListFull" being an array of strings, it did not work. The dropdown list was empty. Please, advise on how exactly can it be done in syncfusion for angular 2, and what data format is supposed to be given.

6 Replies

RA Rykunov Alex February 2, 2017 10:48 AM UTC

I have solved the previous problem: the dropdown requires the following JSON data format: {text:"sting", value: "string"}

With that circumstance a new problem has arisen. In the field I want to have an object, and only show that object's one property as a field text. As an example, i want to have a "user" column, that has user object inside, user= {id: 1, name: "John Doe}, so that i could identify the exact user when i'm extracting data from the cell. However, the incell dropdown seems to be pushing it's value into the field, and show it. So, if the value is an object, i will see "Object object" in the field instead of "John Doe". The manual on dropdown recommends using the "value" of the dropdown as the data i want to see. So I would have to use "John Doe" as a value. This brings me to the situation where i cannot correctly identify the field data, as i lose all the properties but the name. Is there a way to refer to the object property of the field value, showing this property, instead of the object?

RA Rykunov Alex February 3, 2017 07:18 AM UTC

One of the ways to solve the problem is to use ForeignKey.

However, yet another problem. I need dropdown to be custimozed — to have a filter search in it. As i believe, it is impossible to implement filter search without initializing a real ej-dropdown object. So, I've tried editTemplate, here's my implementation:

<e-column field="replacedUserId" enableFilterSearch="true" foreignKeyField="value" foreignKeyValue="text" [dataSource]="users" headerText="User" 
        [editTemplate]="{'create':'replacedDropCreate',read':'replacedDropRead', 'write':'replacedDropWrite'}">

And functions:

    return $("<input>")
  replacedDropRead(args) {
    return args.ejDropDownList("getSelectedValue")
  replacedDropWrite(args) {
    args.element.ejDropDownList({ width: "100%", dataSource: this.users, fields: { text: "text", value: "value" }, selectedItemIndex:0 });

Based on debug tools, none of the functions fired once. As the [editTemplate] property starts throwing errors when the syntax is wrong, i assume, that the general implementation is correct, but for some reason the functions are not recognized. Can you advise what is wrong in here?

RA Rykunov Alex February 3, 2017 08:31 AM UTC

It was a syntax error. The actual syntax for [editTemplate] in Angular 2 looks like this:

[editTemplate]="{create:dropCreate, read:dropRead, write:userDropWrite}"

MS Mani Sankar Durai Syncfusion Team February 3, 2017 12:53 PM UTC

Hi Rykunov, 

We are happy to hear that your problem has been solved. 

Please let us know if you need further assistance. 

Manisankar Durai 

SK Saad Khan July 8, 2017 09:42 AM UTC

Hi Alex!,

Can you please post your editsettings?

MS Mani Sankar Durai Syncfusion Team July 10, 2017 12:25 PM UTC

Hi Saad, 

We suspect that you would like to know how to use editSettings property and editTemplate for grid in Angular 2.  
Please refer the below documentation link. 

Please let us know if you need further assistance 

Manisankar Durai. 

Live Chat Icon For mobile
Up arrow icon