This is a migrated thread and some comments may be shown as answers.

Kendo UI Binding in Client Template

7 Answers 530 Views
Grid
This is a migrated thread and some comments may be shown as answers.
jwize
Top achievements
Rank 1
jwize asked on 21 Aug 2014, 01:18 AM
Is there a way to bind a in a KendoGrid ClientTemplate? 

Normal binding 
<span data-bind='html: title'></span>

Why not in a client template? 

        Model.Template(x => { }).ClientTemplate("<span data-bind='html: title'></span>").Width(50);

Clearly this is a no-brainer and should work by default. 

7 Answers, 1 is accepted

Sort by
0
jwize
Top achievements
Rank 1
answered on 21 Aug 2014, 01:23 AM
And don't dare tell me that I should do this.

      Model.Template(x => { }).ClientTemplate("<span>#=title#</span>").

Because then you are going to tell me I can't do this.

      Model.Template(x => { }).ClientTemplate(" <div data-bind="visible: isVisible">...</div>").

Humour me and show me an elegant solution that is better than the previous line.
0
jwize
Top achievements
Rank 1
answered on 21 Aug 2014, 10:43 PM
I suppose one dirty hack could look like this.

@(Html.Kendo().Grid()...
 .Events(e => e.dataBound("dobinding");
 ...
     
function dobinding() {
    ko.utils.arrayForEach(e.sender.items(), function(tr) {
        var uid = $(tr).data("uid");
        var mod = e.sender.dataSource.getByUid(uid);
        kendo.bind(tr, mod);
    });
 }
0
jwize
Top achievements
Rank 1
answered on 21 Aug 2014, 10:46 PM
Or using jQuery each

$.each(e.sender.items(), function(idx, tr) {
    var uid = $(tr).data("uid");
    var mod = e.sender.dataSource.getByUid(uid);
    kendo.bind(tr, mod);
});

0
jwize
Top achievements
Rank 1
answered on 21 Aug 2014, 11:29 PM
Although, this is a little hacky it is light weight and seems to work through reads. The problem with using the change event of the datasource is that the rows haven't rendered so I had to timeout in order to get the element for binding. 


dataSource.Ajax()
    .Events(e => e.Change("taskservice.bindFields"))
    ...
bindFields: function (e) {
    setTimeout(function() {
        $.each(e.items, function (idx, mod) {
            // Get the associated tr.
            var tr = $("tr[data-uid='" + mod.uid + "']");
            kendo.bind(tr, mod);
        });
    }, 0);
},




0
Alexander Popov
Telerik team
answered on 22 Aug 2014, 02:25 PM
Hi Jaime,

Binding the Grid's items to the elements rendered inside the column, with our without using templates, is not supported as it would introduce a huge performance hit. All of the approaches you suggested are viable, although we usually recommend using the DataBound event, as the rows are already rendered. 

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
jwize
Top achievements
Rank 1
answered on 23 Aug 2014, 10:48 AM
I think you are wrong in your performance assessment. If you are only processing the pages on the screen the footprint should be very small. I tried the code I provided with virtualization and there are no noticeable slow downs. I added 30 extra columns with bindings and didn't notice any problems. Without virtualization you would have to take into account the pages maybe Can you elaborate on the performance considerations? 
0
Alexander Popov
Telerik team
answered on 27 Aug 2014, 06:51 AM
Hello Jaime,

Automatically binding the row elements to their corresponding data items makes little sense in the vast majority of use cases, as the Grid is designed to work in two modes - read and edit. Doing this enables the user to modify the items without entering edit mode, which creates issues like losing cell focus, selection, expanded rows/groups, dirty markers and etc. due to the Grid being redrawn on dataSource change. In addition to solving just a fraction of the problem, binding the row elements to the Grid items also introduces unnecessary overhead, which although not always noticeable is there, especially on older browsers and machines or mobile devices. Nevertheless I would encourage you to submit this suggestion on our feedback portal, where it could be publicly discussed and voted for. As you probably know, most popular ideas get implemented in future Kendo UI releases.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
jwize
Top achievements
Rank 1
Answers by
jwize
Top achievements
Rank 1
Alexander Popov
Telerik team
Share this question
or