Templating & Binding confusion

[Paul]

I did hit a bit of an oddity around the binding today, can anyone lend any light on the subject:

Say I have a column defined like this:

{
    field:'ID',
    title:'',
    template: kendo.template($('#id').html()),
    editor: kendo.template($('#id_Editor').html())
 }

And the templates like this:

<script id="id" type="text/x-kendo-template">
      <span data-bind="text: ID"></span>
</script>

<script id="id_Editor" type="text/x-kendo-template">
      <span data-bind="text: ID"></span>
</script>

When I initialise the grid like this ...

var model = someModel();
$("#grid").kendoGrid({ source: model });

<div id="grid" data-role="grid"
             ...
             data-columns="[ ..., { command: ['edit', 'destroy'] }]">
 </div>

... for some odd reason when I load the grid all looks good, then I hit the edit button in a row the cell goes blank.

Any ideas why the same template results in 2 different results?

[Alexander Valchev]

Hello Paul,

The issue occurs because template bindings are not re-evaluated after a cell is closed for editing. That is done for performance reasons.
In case you use the standard template syntax to display the value you should not have any issues.

<script id="id" type="text/x-kendo-template">
      <span>#= ID #</span>
</script>

Binding should be left in the edit template.

If using data-bind in the display template is a must for you, you may hook up to the cancel/save events of the Grid and re-bind the cell (using setTimeout) manually.

Regards,
Alexander Valchev
Telerik

 

 

[Paul]

I think you mis-read what I wrote.
When I click EDIT the read only template is supposed to be switched to the editor template but all I get are blank cells.

If what you say is correct then binding should be happening in this situation so why would I get a blank row?

For example, if I change the templates above to this ...

1.<script id="id" type="text/x-kendo-template">
2.      <span data-bind="text: ID">#= ID#</span>
3.</script>
4.
5.<script id="id_Editor" type="text/x-kendo-template">
6.      <span data-bind="text: ID">#= ID#</span>
7.</script>

I get the same result.

As I said above, when the grid is initially loaded with the previous version and this version of the display template all is good, (initially). Making the row editable causes the problem, from there on out the problem remains.



In other words your statement:
The issue occurs because template bindings are not re-evaluated after a cell is closed for editing.

Is not the problem because I'm not getting that far.

My understanding is that in an ideal world I would have only 2 sets of templates (but I don't think this is possible), just like how MVC works on the server. 1 template for display and another for edit.
If what you say is true does this also mean I need different templates for use in a grid to what I would use outside of a grid?

for example:
If I have an item like this:

var obj = { ID: 1, Name: "Test", Created: new Date() }

When I want to bind this to a grid do I have to use a different template to when I'm not in a grid?

01.<div id="viewOfObj">
02.    <ul>
03.        //Read only version:
04.       <li>
05.          <label>ID</label>
06.          <div class="value" data-bind="text: ID" />
07.        </li>
08.    </ul>
09.    <ul>
10.        //Editor version:
11.       <li>
12.          <label>ID</label>
13.          <div class="value">
14.              <input name="ID" type="text" data-bind="value: ID" />
15.          </div>
16.        </li>
17.    </ul>
18.</div>

Now when I want to use an ID anywhere I tell MVC "this is the display version of an ID and this is the Editor version of an ID", from here on out all ID fields only need one thing on the type def [UIHint("ID")]

With kendo it sounds like you are saying that when I'm just doing a straight bind with no kendo controls I need 1 pair of templates and when I'm in a grid I need another, but it's the same field on the same object so why a different template?

...

Putting that issue down for a bit though my current problem is that when a kendo grid is given what you say is the correct template information I get a blank row when switching to edit mode for a single row using the kendo built in edit command.

[Paul]

I probably didn't make it clear above but essentially my understanding is that I can create MVC views to produce the correct bits I need for kendo.

so in my MVC view I can do something like this ...

<script id="id_Editor" type="text/x-kendo-template">
      @Html.EditorFor(m => m.ID)
</script>

Now the whole idea behind MVC is that that 1 line call will figure out the exact markup needed to produce a template for that specific ID field on that specific type, which may be different to other id fields on other id types.

Kendo is simply given a lump of markup.

However:
Using 
either data-bind or #= ID # syntax for me results in an empty cell when I have the following scenario ...

Grid NOT EDITABLE rendering fine with the id field as per the first template in this thread.
Grid rows have the command column showing an edit button.
Clicking this edit button should make just that row editable.
The result is a blank row.

It doesn't matter what syntax I use, but this only seems to happen when I override the templates from the defaults.
And it's only my overridden templates that cause this issue.
I figured that the first templates should work as they were essentially the simplest scenario I could think of to replicate the issue but they don't.

[Alexander Valchev]

Hi Paul,

You are correct, I misread your initial question for which I apologize.

In your case you may not use an editable template, at least not in the way you expect to. The custom editor is set via columns.editor configuration option which expects a function.
In MVVM the implementation will look like:

• http://dojo.telerik.com/@valchev/oXoTU

Pay attention to the following parts of the code:

data-columns='["id", { field: "name", template: $("#view-tmp").html(), editor: nameEditor }, { command: ["edit", "destroy" ] }]'

function nameEditor(container, options) {
  var editorHTML = kendo.template($("#edit-tmp").html())({}); //render the template
  container.html(editorHTML); //append the rendered template to the container
}

The template are defined as:

<script id="view-tmp" type="text/x-kendo-template">
  <span style="color: red;">#=name#</span>
</script>
<script id="edit-tmp" type="text/x-kendo-template">
  <span style="color: blue;" data-bind="text: name"></span>
</script>

In other words the framework will not automatically get the edit template. You should manually render and set it as a content of the editable container.

In case you plan to use MVC wrappers you should follow this help topic: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/editor-templates

Regards,
Alexander Valchev
Telerik