Drop down list in grid

[Megha]

I want to show dropdownlist in grid, could you tell me how it is posssible?

[James Lamar]

Try initializing the grid from a table. I have tried a few samples with a grid populated from remote JSON, but I cannot get any kendo styling or functionality to work inside the grid that way. You can simple include a "select" form tag as your template though and you will get a drop down inside the grid, albeit, not a pretty one :)

Here is the code for the first example:

<div id="example" class="k-content">

                <table id="grid">

                    <thead>

                        <tr>

                            <th data-field="rank">Rank</th>

                            <th data-field="rating">Rating</th>

                            <th data-field="title">Title</th>

                            <th data-field="year">Year</th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr>

                            <td>1</td>

                            <td>9.2</td>

                            <td><input class="titles"/></td>

                            <td>1994</td>

                        </tr>

                        <tr>

                            <td>2</td>

                            <td>9.2</td>

                            <td><input class="titles"/></td>

                            <td>1972</td>

                        </tr>

                        <tr>

                            <td>3</td>

                            <td>9</td>

                            <td><input class="titles"/></td>

                            <td>1974</td>

                        </tr>

                        <tr>

                            <td>4</td>

                            <td>8.9</td>

                            <td><input class="titles"/></td>

                            <td>1966</td>

                        </tr>

                        <tr>

                            <td>5</td>

                            <td>8.9</td>

                            <td><input class="titles"/></td>

                            <td>1994</td>

                        </tr>

                        <tr>

                            <td>6</td>

                            <td>8.9</td>

                            <td><input class="titles"/></td>

                            <td>1957</td>

                        </tr>

                        <tr>

                            <td>7</td>

                            <td>8.9</td>

                            <td><input class="titles"/></td>

                            <td>1993</td>

                        </tr>

                        <tr>

                            <td>8</td>

                            <td>8.8</td>

                            <td><input class="titles"/></td>

                            <td>1975</td>

                        </tr>

                        <tr>

                            <td>9</td>

                            <td>8.8</td>

                            <td><input class="titles"/></td>

                            <td>2010</td>

                        </tr>

                        <tr>

                            <td>10</td>

                            <td>8.8</td>

                            <td><input class="titles"/></td>

                            <td>2008</td>

                        </tr>

                    </tbody>

                </table>

<script>

$(document).ready(function() {

  $("#grid").kendoGrid({

    height: 250

  });

});

$(document).ready(function(){

     $(".titles").kendoDropDownList([{text: "Item1", value: "1"}, {text: "Item2", value: "2"}]);

  });

</script>

Here is an example of the select form as a template:

{ field: "COL_NAME", title: "COL_NAME", template: "<select name='COL_NAME'><option>Item 1</option><option>Item 2</option><option>Item 3</option></select>"}

Hope that helps!

[Leo]

Hi Megha,

You may also want to try to load the grid data from XML.

In turn, the XML can contain CDATA with HTML and/or Javascript code.



So, for example, in my action I return the following XML snippet:

<title><![CDATA[ <a href='http://www.amazon.com/Eloquent-JavaScript-Modern-Introduction-Programming/dp/1593272820'>Amazon URL</a> ]]></title>

Here, I can embed HTML and/or Javascript code that in turn adds functionality to my page/widgets.

In your HTML page, you would do something like this to load the data:

var dataSource = new kendo.data.DataSource({

    transport: {

        read: "/site/GetBooksXML.action"

        },

        schema: {...

I’m using a Java action to build my XML string but you can use whatever technology you may require for your purpose.

This is something that I’m working on so I hope it helps you resolve your issue.