Append Layout to another layout (ES6)

4 posts, 0 answers
  1. Pedro
    Pedro avatar
    3 posts
    Member since:
    Jan 2017

    Posted 31 Jan Link to this post

    01.buildForm(form) {
    02.    const tableLayout = new kendo.Layout('<table class="table table-bordered" id="tbl"></table>' ,{wrap: false});
    03. 
    04.    for(var i=0;i<form.rows.length;i++) {
    05.      const trLayout = new kendo.Layout('<tr id="tbl_row_'+i+'"></tr>' ,{wrap: false});
    06.      for(var j=0;j<form.rows[i].cols.length;j++) {
    07.        const tdLayout = new kendo.Layout('<td><a href="#" data-bind="click: alertme">'+form.rows[i].cols[j].label+'</a></td>' ,
    08.        {
    09.          wrap: false,
    10.          evalTemplate: true,
    11.          model: {
    12.            alertme: function() {
    13.              console.log('alert!');
    14.            }
    15.          }
    16.        });
    17.        trLayout.append('#tbl_row_'+i+, tdLayout);
    18.      }
    19.      tableLayout.append('#tbl',trLayout);
    20.    }
    21.    return tableLayout;
    22.  }

    01.const form = {
    02.     rows: [{
    03.        cols: [{
    04.           label: 'Row 1 Col 1'
    05.       }, {
    06.           label: 'Row 1 Col 2'
    07.       }]
    08.     },{
    09.        cols: [{
    10.           label: 'Row 2 Col 1'
    11.       }, {
    12.           label: 'Row 2 Col 2'
    13.       }]
    14.     }]
    15.   };

    Hi,
    I'm trying to append child layouts to a parent layout.
    Is it feasible?

    I'm using ES6, npm and bower to install kendo ui professional.

    Thanks
  2. Pedro
    Pedro avatar
    3 posts
    Member since:
    Jan 2017

    Posted 31 Jan in reply to Pedro Link to this post

    I'm working for a company which wants to replace its old single page application (GWT) with modern javascript technologies.
    They are impressed by kendo ui components (mostly by the pivot grid) and they do want to use them.
    Unfortunately the development is blocked by the above-written issue.
    Solving this issue is critical because it will be decisive on licenses buy. 
  3. Pedro
    Pedro avatar
    3 posts
    Member since:
    Jan 2017

    Posted 31 Jan in reply to Pedro Link to this post

    Unfortunately testing is blocked by the above-written issue.
  4. Stefan
    Admin
    Stefan avatar
    828 posts

    Posted 02 Feb Link to this post

    Hello Pedro,

    Thank you for your interest in Kendo UI.

    In general, the layout it's an instance of the view, which is allowing nesting multiple layouts:

    http://docs.telerik.com/kendo-ui/framework/spa/layout#functionalities

    I can also suggest checking the following article for the SPA applications with Kendo UI:

    https://ssnenov.wordpress.com/2013/03/24/single-page-up-with-kendo-ui/

    If additional assistance is needed, please provide a fully runnable example, so I can investigate further.

    Regards,
    Stefan
    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.
Back to Top