[Solved] Grid with Editors in each cell

[Thomas]

I would like to use Kendo Editors in a Kendo Grid. My goal is to edit directly a concern and press a small button at the editor widget to save the changes. Attached a picture how it should looks like at the end.
Here are the single elements: http://jsfiddle.net/nKRzh/19/

I tried already to add the editors in the grid with that:

<script id="detail-template" type="text/x-kendo-template">

    @(Html.kendo().editor()

      .name("editor")

      .value("<p>initial value</p>")
         .ToClientTemplate()


       )

</script>

 

$("#ConcernList").kendoGrid({

    dataSource: dataSource,

    columns:[

        {

            field:"Text",

            title:"Concerns"

            template: kendo.template($("#detail-template").html()),

        },

    ],     

});

But the result is only normal text fields with no button.
Thanks in advance!

I am using ASP.Net MVC 5 and
Kendo UI version: 2014.2.903
OS: Window 7 64-bit
browser version: Chrome 37.0.2062.124 m (64-bit)

[Petur Subev]

Hello Thomas,

Adding an editor widget inside the client template is a task that needs extra handling. Because the initialization script should happen the moment the rows are created you should initialize the widgets like explained here:

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-do-i-use-a-kendo-ui-widget-inside-a-grid-client-column-template

Once you have created the widget inside the template you will have to handle the saving. The easiest way to save the value of the editor into the Grid would be to to handle the click of that custom button that you have inside the editor.

http://demos.telerik.com/kendo-ui/editor/custom-tools

And find the closest tr element so you can get the Grid model with the dataItem method of the Grid and set the corresponding field.

exec: function(){
     var model = $("#gridName").data("kendoGrid").dataItem($(this).closest("tr"));
     model.set("MyField", this.value);
}

I hope this helps.

Kind Regards,
Petur Subev
Telerik

 

 

[Thomas]

@(Html.Kendo().Grid(Model)

    .Name("GridID")

    .Columns(columns => {

        columns.Bound(o => o.Name);

        columns.Template(@<text></text>).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate

        (

            "test"

        );

    })

    .Events(ev => ev.DataBound("initMenus"))

)

 
<script type="text/javascript">

    function initMenus(e) {

        $(".templateCell").each(function(){

           eval($(this).children("script").last().html());

         });

      }
</script>


The code is not working. If I initialize a menu widget or a editor widget or only the string "test" nothing appears. There is always only an empty cell. There is no event, which would executes the initMenu() function. The debugging tool shows no error.

[Petur Subev]

Hello Thomas,

Your Grid is configured to use Server binding. In such case you should provide template and the evaluation of the scripts is not required since everything is rendered on the server.

Here is what I tried on my side and it is working fine.

@model IEnumerable<Kendo.Mvc.Examples.Models.Product>

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(p => p.ProductID).Template(@<text>@Html.Kendo().Editor().Name("ed" + item.ProductID)</text>).Groupable(false);
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice);
        columns.Bound(p => p.UnitsInStock);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Groupable()
)

When using server binding it is not required to eval the script manually when the dataBound event is triggered.

Kind Regards,
Petur Subev
Telerik