This is a migrated thread and some comments may be shown as answers.
DropdownList not loading in Defaultly in Grid
2 Answers 7 Views
This is a migrated thread and some comments may be shown as answers.
Mohammed
Top achievements
Rank 1
Veteran
Mohammed asked on 02 May 2020, 04:44 PM

Hi 

Is there any option to display the DropdownList in the Grid default page loading. I tried this option when we click the cell only its displaying dropdownlist.

https://demos.telerik.com/aspnet-mvc/grid/editing-custom?_ga=2.231591000.698409247.1588223224-368114355.1588223224

 

Help will be appreciated!!

2 Answers, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 05 May 2020, 04:20 PM

Hello, Mohammed,

Thank you for this question.

In general the ClientTemplate functionality of the Kendo UI Grid is especially for rendering HTML elements. Usually it is not used as an editor.
Below is a code snippet with needed logic:

In columns bound:

columns.Bound(c => c.Category).HtmlAttributes(new { @class="templateCell"}).ClientTemplate(
                Html.Kendo().DropDownList().Name("ddl#=OrderID#")
                .DataValueField("CategoryId")
                .DataTextField("CategoryName")
                .HtmlAttributes(new { data_bind="value: Category"})
                .BindTo(new List<Category>() { new Category() { CategoryId=1, CategoryName="Name1"},
                 new Category() { CategoryId=2, CategoryName="Name2"}
                })
                .ToClientTemplate().ToHtmlString()
                ).Width(100);
            columns.Command(c => c.Edit());
After DataSource functionality add in .Events this code:
.Events(ev => ev.DataBound("bindRowToDataItem"))
For the javascript part use this:
<script>
    function bindRowToDataItem(e) {
        var grid = e.sender;
        $(".templateCell").each(function () {
            eval($(this).children("script").last().html());
            var row = $(this).closest("tr");
            var dataItem = grid.dataItem(row);
            kendo.bind($(row), dataItem);
        });
    }
</script>

Another way to achieve desired behavior can be found in this demo:
https://dojo.telerik.com/UGeroder

 

Let me know if any further assistance is needed.

Regards,
Anton Mironov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Mohammed
Top achievements
Rank 1
Veteran
answered on 06 May 2020, 05:58 PM
Thank you Anton that worked and solved my problem!!!
Tags
Grid
Asked by
Mohammed
Top achievements
Rank 1
Veteran
Answers by
Anton Mironov
Telerik team
Mohammed
Top achievements
Rank 1
Veteran
Share this question
or