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.
Unfortunately, activation email could not send to your email. Please try again.

Binding data to in cell dropdown list in ej-grid

Thread ID:

Created:

Updated:

Platform:

Replies:

128637 Feb 2,2017 03:32 AM Jul 10,2017 08:25 AM Angular 6
loading
Tags: ejGrid
Rykunov Alex
Asked On February 2, 2017 03:32 AM

I have the following grid:

<ej-grid id="Grid" [dataSource]="dataManager" [allowSorting]="true" [allowFiltering]="true" [editSettings]="{'allowEditing':'true'}" [allowPaging]="true"  >
    <e-columns>
        <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>
    </e-columns>
</ej-grid>

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.

Rykunov Alex
Replied On February 2, 2017 05:48 AM

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?

Rykunov Alex
Replied On February 3, 2017 02:18 AM

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:

 replacedDropCreate(){
    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?


Rykunov Alex
Replied On February 3, 2017 03:31 AM

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

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

Mani Sankar Durai [Syncfusion]
Replied On February 3, 2017 07:53 AM

Hi Rykunov, 

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

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai 


Saad Khan
Replied On July 8, 2017 05:42 AM

Hi Alex!,

Can you please post your editsettings?


Mani Sankar Durai [Syncfusion]
Replied On July 10, 2017 08:25 AM

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 

Regards, 
Manisankar Durai. 




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.

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.

;