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

Template of multiple <tr> Elements

17 Answers 596 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Casablanca
Top achievements
Rank 1
Casablanca asked on 14 Apr 2017, 02:28 PM

I've got a table with source binding to an array ob objects.
I want to insert multiple rows per item. Like described in the documentation, template must have only one root elment, so I thought about grouping my <tr> elemts together in an <tbody> element.

The data-binding inside the template works well. But the browser renders a second tbody element, so i ended up i something like this:

<table>
  <tbody>
    <tbody>
      <tr>
      ...
      </tr>
    </tbody>
  </tbody>
</table>

 

I've provided an exapmle: http://dojo.telerik.com/eqOSO

Does anybody has a solution for this?

THX

 

17 Answers, 1 is accepted

Sort by
0
Dragomir
Telerik team
answered on 18 Apr 2017, 01:02 PM
Hi Alexander,

You can see an example solution for your question here:
http://dojo.telerik.com/AHEVo

However keep in mind that this is not the default way you should use template binding with MVVM. And the default usage requires only one root element (as you mention).

Another solution might be to change the type of dom elements and to render div elements that can be styled to look like table.

Regards,
Dragomir
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
JohnVS
Top achievements
Rank 1
answered on 25 Feb 2018, 04:42 AM

@Dragomir,

Surely this is a bug and should be reported as such. Your workaround simply puts the source binding on a <tbody> instead of on the <table>. Why can the source binding not go on the <table> element? It appears to me that it should work, but currently, the source binding isn't removing the <tbody> tag that is automatically added to the table by browsers, resulting in two <tbody> tags in the <table>. If it removed that <tbody> tag before appending the result of the template, everything should work fine. Can you please confirm if this is a bug or not?

0
Neli
Telerik team
answered on 27 Feb 2018, 01:42 PM
Hi,

I have inspected the provided Dojo example with our latest version (2018.1.221) and it seems that currently only a single <tbody> element is rendered.
Please find the modified Dojo here and a screenshot linked here

Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
JohnVS
Top achievements
Rank 1
answered on 27 Feb 2018, 02:58 PM

@Neli,

Yes, there is only one <tbody>, and that <tbody> is there because Chrome implicitly puts a <tbody> in a table if you don't explicitly put one there. Your template did not contain a <tbody>, so if you add one there:

<script type="text/x-kendo-template" id="booked-room-tmpl">  
      <tbody><tr> <td> #= RoomName# </td></tr></tbody>  
</script>

 

You will then see two <tbody> tags in the table (see screenshot).

0
Neli
Telerik team
answered on 28 Feb 2018, 04:29 PM
Hi,

When the source binding is to an array, the elements inside the template will be rendered as many times, as the count of the items in the array, as it is described in the documentation
So, in the previous example, if <tbody> is added inside the template script, such element will be rendered for every item in the array. Here is the modified Dojo, where there is a <tbody> in the script. In the example the <tbody> is rendered for every item in the array. 

Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
JohnVS
Top achievements
Rank 1
answered on 28 Feb 2018, 05:17 PM

@Neli,

I'm not sure we're tracking here. I'm pointing out a bug. Notice in the rendered code from your Dojo that each <tbody> tag rendered by the template for each item in the array is placed inside a pre-existing <tbody> tag (see screenshot). It is invalid to place a <tbody> inside another <tbody> (see https://stackoverflow.com/questions/3953144/can-a-tbody-be-inside-another-one ). So the template is rendering the right HTML, but it is not removing the <tbody> tag from the <table> before adding the rendered HTML to the <table>.

0
Neli
Telerik team
answered on 02 Mar 2018, 08:15 AM
Hi, Alexander,

To clarify, to have a single root element is recommended, but it is not a must. That may have been a requirement at some point, but it's not now. We will update the article in our documentation accordingly. 

Just a quick example that shows two "root" elements: https://dojo.telerik.com/@joneff/EbOxiHOc.

Regarding the rendering / nesting etc -- we rely on the browsers for that part. While it is, indeed, malformed (invalid) HTML to have a TBODY inside TBODY, browsers will work with that anyway. As a general rule, standards are to be followed, but if browsers did so to letter, a bug chunk of the web would not work correctly, if at all.

Few things of note:

* practically all modern browsers will render tbody of table that has no explicit one;
* tidying HTML prior insertion would yield unexpected results. For the sake of argument, imagine we are binding template with DIV elements to a SPAN element and we need to tidy the markup...


Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
JohnVS
Top achievements
Rank 1
answered on 02 Mar 2018, 04:33 PM

It's not just that it's malformed HTML. It's that Kendo works great with any other tag (like <tr> tags in your example), but not with <tbody> tags. Kendo correctly removes existing HTML from an element bound to a template, EXCEPT if the element is a <table> with a browser-inserted <tbody> already in it. That is a bug.

And FYI, this absolutely does cause problems, and significant ones at that. I only posted here because I am experiencing the problem. For instance, using Bootstrap for styling, the extra nested <tbody> tag totally stops table styling from working:

https://dojo.telerik.com/ElIfUxAQ

Notice that the first table looks fine, because there is only one <tbody> tag that was inserted by the browser, but when Kendo renders the second template with <tbody> tags inside, it completely ruins the styling of the table because Kendo's HTML output is invalid and unexpected (i.e. bug). See attached image if the Dojo doesn't work.

I'm not sure how this doesn't qualify as a bug. Can you help me understand please?

0
Ivan Zhekov
Telerik team
answered on 06 Mar 2018, 11:52 AM
John,

in order for something to be regarded as a bug, we need it to have a couple of cases that illustrate the wrong and right behaviour. We obviously have our wrong case, but we need to right one. While it's easy to point out what seems like wrong behaviour, it's important to note that a bug is not a code that works correctly with incorrect parameters, but rather code that works incorrectly with the correct parameters. Then and only then we can establish the context of the issue.

Which brings us back to the right behaviour cases: you mentioned that in other instances Kendo correctly cleans up HTML. Could you point to those instances? Those cases will help us establish the context for the bug when we log it.

The reason why I am asking for those cases, is that looking at the code for templates (https://github.com/telerik/kendo/blob/master/src/kendo.core.js#L240-L297), there is little to suggest we perform any form of sanitizing. We do have encoding HTML baked in, but that's an optional thing and is unrelated to your case. That's not to say there isn't any sanitizing performed, but rather that it's not something baked in the template component. That might seem like a minute detail, but it's important when comes to establishing context.

I understand that you may be already frustrated because our replies thus far and probably a bit infuriated. All I am asking is to work with us a bit longer until we can verify that the reported behaviour is indeed a bug and not an edge case / a browser limitation (which is also a possibility). If it is a genuine bug, well log it at our public kendo repo; if it is browser limitation, we'll document it, as well as possible workarounds.

And to illustrate the above with a somewhat unrelated example, imagine we have a very simple calculator components that can perform mathematical operations over numbers (both integers and floats) only. So if we try to add 1 and 1, we would get whatever the result may by. In a similar manner, if we try to add string a and string b, we will get an error. If we've not documented that the calculator works with numbers only, it's stands to reason that adding two strings should conjoin them and the resulting behaviour may be considered a bug. However, since we've defined that the calculator works with numbers only, the component, while throwing an error, is working correctly.

You did raised an interesting point and we are looking forward to resolving it the best possible way.

Regards,
Ivan Zhekov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
JohnVS
Top achievements
Rank 1
answered on 06 Mar 2018, 03:09 PM

Ivan,

Thanks so much for the reply. No, I'm not one to become infuriated. My previous messages were direct and could be read with some frustration, but it just didn't seem to me that all the details here were being considered. I apologize to you and Neli if what I wrote seemed incendiary.

Thanks for the opportunity to further clarify and get to the bottom of this.

In response to your question: "In other instances Kendo correctly cleans up HTML. Could you point to those instances?" Here's another Dojo to analyze: https://dojo.telerik.com/ElIfUxAQ/2 .

Note that in the first case, the <div> tags are rendered just fine, because the browser isn't inserting any tags (i.e. <div> tags don't require <tbody> or any other tags, so nothing is ever inserted into the <div> tags by the browser). Every time the template is rendered, the previous HTML is removed, and the new rendered HTML is just placed into the parent <div>.

Then, the next <table> is bound to the template that only has root <tr> tags in it. The <table> is empty to start, then when the template is rendered, Kendo puts the <tr> tags into the <table>. The browser does a pre-check before actually inserting the HTML and detects that a <tbody> isn't present, adds it, then injects the <tr> tags into it. That works fine, and in this case, nothing breaks because <tr> tags go just fine into the <tbody> tag that the browser inserts.

For the last <table>, the same process occurs as in the previous <table> example, but in this case, the rendered HTML from the Kendo template now contains <tbody> tags around each <tr>. This appears to be where the bug is. Somehow, the browser is inserting its own <tbody> tag in the <table> before receiving Kendo's rendered HTML that also contains <tbody> tags. This is very curious, as if you manually enter <tbody> tags into the table via jQuery, the browser does not add its own <tbody> beforehand. Click the "Insert <tbody> into first table" button to see that this works as expected.

With all that said, from what I'm seeing, the problem seems to be that Kendo is somehow triggering the browser to automatically place a <tbody> tag into the table, then Kendo inserts the rendered HTML from the template that includes <tbody> tags, which causes there to be nested <tbody> tags inside an existing <tbody> tag.

Hope I explained that clearly. If I didn't, I'm glad to iterate on this to figure out what's going on. Thanks very much for your time, Ivan.

0
Ivan Zhekov
Telerik team
answered on 08 Mar 2018, 01:36 PM
It took me a while to get to the bottom of this. Inside kendo.binder (which takes care of the MVVM) there is a specific method to check if we are binding a table and if so and there is no tbody, append it https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.binder.js#L515-L526 and use it. The rest of the code flow builds the template and simply injects the HTML inside the said element without any further processing.

That code piece is about 6 yrs old and is deliberate i.e. this is the desired behaviour.

So leaves the only possible solution not to wrap rows in TBODY, but leave them as is.

Regards,
Ivan Zhekov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
JohnVS
Top achievements
Rank 1
answered on 08 Mar 2018, 02:55 PM

Ivan,

Thanks for continuing to look into this. Yes, that code is logical. With that said, while the code is deliberate, it does not take into consideration the fact that users will want to use <tbody> tags in a template bound to a <table>. Why exactly does Telerik not want to support this?

Frankly, I don't think it's right to say that there's "only [one] possible solution." There are clearly two options here:

  1. Your suggestion is that users have to somehow guess and just live with the fact that Kendo templates don't support <tbody> tags in a template bound to a <table> (which is a perfectly reasonable use-case).
  2. Kendo team changes kendo.binder code to support <tbody> tags in a template bound to a <table>.

I've come to expect from Telerik that #2 would be more normal than not when a bug is discovered, so the response of basically "just live with it" is quite disturbing.

I continue to be very confused how this is not considered a bug that needs fixing. Users should be able to use <tbody> tags in a template and have it work correctly. If Telerik plans to not support this scenario, you all should at least include a warning in the Kendo template documentation, so users know they can use Kendo templates for all scenarios, except randomly not being able to use <tbody> tags in a <table>.

0
Neli
Telerik team
answered on 12 Mar 2018, 09:29 AM
Hello John,

As it was pointed by Ivan previously, the behavior when having a <tbody> element inside a template is expected. We will review and update the documentation article regarding the Bindings in MVVM in order to have more clear description. 

Regarding the future support of having <tbody> inside a template bound to a table, I would suggest you to log the idea in our Feedback Portal. this way the other users can vote for the idea. Based on the support it receives from the community, we will decide on whether to proceed with its implementation or not.

Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
JohnVS
Top achievements
Rank 1
answered on 12 Mar 2018, 01:03 PM
For the OP and anyone else who hits this thread later, this IS a bug, regardless what the reps wrote above, and has already been marked as such in the Github Issues for kendo-ui-core at https://github.com/telerik/kendo-ui-core/issues/777. Feel free to subscribe to the issue to follow its progress.
0
Neli
Telerik team
answered on 14 Mar 2018, 12:04 PM
Hello John,

Please accept our apologies for misleading you. 
You will notice, that I have just raised the Priority of the issue. This will affect the position of the task in the queue, so it can take precedence over other issues. 

Please excuse us for any inconvenience caused by the issue.

Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
JohnVS
Top achievements
Rank 1
answered on 14 Mar 2018, 12:52 PM
Thanks very much for the follow-up, Neli. We're all interested in making Kendo better and fixing bugs, so thanks very much for escalating this bug. I did notice that it is currently not assigned to anyone. Will that keep it from being addressed?
0
Neli
Telerik team
answered on 15 Mar 2018, 02:58 PM
Hello John,

Generally, the development team review the issues depending on the priority queue. The issues are prioritized based on the demand. Note, that I have increased the priority of the bug, but it is still not with the highest possible priority. 

I would suggest you to subscribe to the GitHub issue. This way you will be notified when there is an assigned developer. Also you will be able to see the release that the fix is planned to be included in(the Milestone). 


Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
MVVM
Asked by
Casablanca
Top achievements
Rank 1
Answers by
Dragomir
Telerik team
JohnVS
Top achievements
Rank 1
Neli
Telerik team
Ivan Zhekov
Telerik team
Share this question
or