Migrating to Kendo - Help with templates

[Gabriel]

Hello All !

First of all I want to say that you are doing a great job with Kendo ! It is a AWESOME framework.

BUT, before I buy a license, I need to know if I will be able to migrate my currently running app to kendo.

I must confess that I am not a javascript master, I am a OK developer, my focus was always PHP...

 

The part of my app that is giving me headaches is the javascript templates.

 

My app strongly rely on templates. Mostly to build complex html forms. Also, it is important to say, that my app uses the SINGLE PAGE structure, so, the javascript is loaded only once into the page.

 

Currently I use Boris Moore plugin, called jQuery tmpl. (https://github.com/BorisMoore/jquery-tmpl)

 

I will show you the logic I use in my app, so you can tell me if I can do the same with KendoUI templating engine.

 

First of all, I make a AJAX request to get from php a JSON structure of my form (for this example I will make it a JS array)

This is the object:

var form = [
    {
        method: "post",
        action: "save.php",
        id: "new_form",
        title: "Add new invoice",
        sections: [
            {name: "Details",
             id : "Details",
             fields : [
                 {
                     name: "Client Name",
                     type: "Text"
                 },
                 {
                     name: "Client Address",
                     type: "Text"
                 },
                 {
                     name: "Client Sex",
                     type: "Radio",
                     options: [
                         {
                             name: "Male",
                             value: "1"
                         },
                         {
                             name: "Female",
                             value: "2"
                         }
                     ]
                 }
             ]
            }
        ]
    }
];

 

OK, now, this are the templates that are ALL defined in a javascript loaded once.

I am showing a basic example, made only for this post, I didnt even test it, in my app it is MUCH more complex

 

01.var form_wrapper = "<form> {{if method}} method='{{>method}}' {{/if}} {{if action}} action='{{>action}}' {{/if}} id='{{>id}}' <h3>{{>title}}</h3> {{for sections tmpl='#form_section'/}} </form>";
02.var form_section = "<h4 id='{{>id}}'>{{>name}}</h4> {{for fields tmpl='#form_field'/}} ";
03.var form_field_wrapper = "<div> {{for this tmpl = formInputTemplate( this.type ) /}} </div>";
04.
05.var form_field_text = "<legend>{{>name}}</legend><input type='text' name='{{>name}}' >";
06.var form_field_radios = "<legend>{{>name}}</legend><input type='radio' name='{{>name}}' >";
07.
08.$.templates("form_wrapper", form_wrapper);
09.$.templates("form_section", form_section);
10.$.templates("form_field_wrapper", form_field_wrapper);
11.$.templates("form_field_wrapper", form_field_text);
12.$.templates("form_field_wrapper", form_field_radios);
13.
14.function formInputTemplate(input) {
15.
16.    if (input.type === "1")
17.        var template = 'form_field_text';
18.
19.    if (input.type === "2")
20.        var template = 'form_field_radios';
21.
22.    return template;
23.}
24.
25.$("#form").html(
26.    $.templates.form_wrapper.render(form)
27.);

The main part of the code is when, to determine the INPUT template, it will run a function that will return the tamplate name that must be used for that input based on its TYPE.

 My question: If you show me how this example would run with kendo template engine, I would be able to make my whole app run with it !!!

Thank you VERY MUCH !

 

 

[Dimo]

Hello Gabriel,

The described scenario can be achieved with Kendo UI templates like this:

- use Kendo UI template(s) with script expressions (loops and conditionals) inside it

http://docs.telerik.com/kendo-ui/framework/templates/overview#handle-external-templates-and-expressions

- pass the form configuration that you get via Ajax as data to the function, which is returned by the kendo.template() function.

If needed, you can use auxiliary variables and functions to output content inside the Kendo UI template, as long as these variables and functions are defined in the global JavaScript scope. You can also use multiple Kendo UI templates (e.g. for the different form field types) and combine their output. All this depends pretty much on your preferences.

Regards,
Dimo
Telerik

[Gabriel]

Hello Dimo !

Thank you for your response !

The documentation you sent me did help ( a lot ) but did not solve my questions.

 First, it didn´t explain how to use javascript expressions inside a STRING TEMPLATE. The example shows a very simple example.

How to use javascript IF or FOR loop inside a string template ? Can you show me a example ? Also, can you show me a example how to call a function inside a string template ?

 

Thank you VERY MUCH !

[Dimo]

Hello Gabriel,

Script expressions in a string template are implemented in exactly the same way, as in an external <scrtipt> template. Simply replace the <script> tags with opening and closing quotation marks. You will also need to remove all new lines, or use string concatenation for better code readability.

Regards,
Dimo
Telerik