DropdownList not loading in Defaultly in Grid

3 posts, 0 answers
  1. Mohammed
    Mohammed avatar
    26 posts
    Member since:
    May 2020

    Posted 02 May 2020 Link to this post

    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. Anton Mironov
    Admin
    Anton Mironov avatar
    210 posts

    Posted 05 May 2020 Link to this post

    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.
  3. Mohammed
    Mohammed avatar
    26 posts
    Member since:
    May 2020

    Posted 06 May 2020 in reply to Anton Mironov Link to this post

    Thank you Anton that worked and solved my problem!!!
Back to Top