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
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
Rank 1
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
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
Rank 1
Hello Boyan,
That was very helpful. Now that the first issue is fixed, I have a couple more issues.
- 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?
- 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
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