This is a migrated thread and some comments may be shown as answers.

DropDownList in grid

5 Answers 39 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 26 May 2015, 06:29 PM

See attached.

I'm working on populating a dropdownlist in a grid, using data sent down from the server. For the purposes of this question, I have converted my project to local data. I'm having difficulty creating the DDL - the data (JSON object) is shown as [object Object] and I'm not sure how to resolve this issue. Take a look at the function getDropDownListData().  This is called from the column template and should return the option elements for the select, given the JSON object for that row.

Thanks,

--Ed

5 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 28 May 2015, 12:39 PM

Hello Ed,

 

When binding the DropDownList widget to collection of complex objects text and value field should be defined. This way the widget will know which property value to display as text and value for the items. 

 

Please refer to dataTextField and dataValueField configuration options. 

 

 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ed
Top achievements
Rank 1
answered on 28 May 2015, 04:41 PM

Hi Boyan,

I'm not sure you looked at the sample I provided. I'm trying to create the <option> tags from a complex data structure in a column sent down to the grid.

Please look at the sample and let me know.

--Ed

0
Boyan Dimitrov
Telerik team
answered on 01 Jun 2015, 12:07 PM

Hello Ed,

I managed to find the problem in the provided example. 

In the model configuration of the data source the Service field is defined as "String". In this case the value will be converted to string instead of object (or collection of objects). 

Please refer to the modified version of the attached code http://dojo.telerik.com/UjaTA. I removed the model configuration for the Service field. Now the console.log method in the code below returns the expected result. 

var getDropDownListData = function (jsonSelectData) { 
          console.log(jsonSelectData);
          return "";
       
           
      };

 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ed
Top achievements
Rank 1
answered on 02 Jun 2015, 02:30 PM

Hello Boyan,

That was very helpful. Now that the first issue is fixed, I have a couple more issues.

  1. The dropdownlist in the grid has the triangle in a strange place - it's too high for the dropdownlist. I'm not sure what is causing this. It looks very odd. Is it because it is in the grid? What can we do to resolve this?
  2. I have 12 rows in the grid, but I can only scroll to 11 of them. Is it because the grid is virtual? How can we resolve this?

http://dojo.telerik.com/@edsinek/iRIXO/2

Thanks,

--Ed

0
Accepted
Boyan Dimitrov
Telerik team
answered on 04 Jun 2015, 10:14 AM

Hello Ed,

Straight to your questions: 

     1. The problem is due to the Doctype used in the example. Please use <!DOCTYPE html> in order to fix the triangle image position.

    2.  Please note that we recommend not to use virtual scrolling and paging at the same time. If you remove the pageSize from your snippet it will work fine. Please refer to Grid Virtual Scrolling for more information.

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Ed
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Ed
Top achievements
Rank 1
Share this question
or