How to make the columns to become rows in Grid / Detail template ? - Forum - Kendo UI Builder - Progress Community

How to make the columns to become rows in Grid / Detail template ?

 Forum

How to make the columns to become rows in Grid / Detail template ?

This question is answered

Hello,

My question is it possible when you use Grid / Detail template in the dropdown result to change the colums and rows. My idea is to use this detailed template like "View details" and there will be only one result (one row from the source table), but showed like this:

Customer: Sauron
Position:  Lord of the Rings
Skills:  Rule the world
etc: etc



Verified Answer
  • Hello,

    The example that you mentioned for the detail template is interesting ( demos.telerik.com/.../detailtemplate ).

    To make the template look like what you want you would need to change the HTML for the template (detailTemplate) to something like the following:

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

                           <div class='employee-details'>

                               <ul>

                                   <li><label>Country:</label>#= Country #</li>

                                   <li><label>City:</label>#= City #</li>

                                   <li><label>Address:</label>#= Address #</li>

                                   <li><label>Home Phone:</label>#= HomePhone #</li>

                               </ul>

                           </div>

               </script>

    I hope this helps.

  • You are welcome Giorgi.

    Here is a sample of this approach (it is not using a style at the moment):

       oemobiledemo.progress.com/.../hierarchical-grid3

    The code in the onShow is the following:

       this.scope.grid0.options.detailTemplate = function (data) {

           var template = kendo.template(angular.element("#template").html());

           return template(data);

       };

    You can see the code using the following URLs:

    view-source:oemobiledemo.progress.com/.../topSection.html

    oemobiledemo.progress.com/.../view-factory.js

    This code sets the detailTemplate property to a function that will be invoked when the detail view is expanded.

    A function is used here instead of using " detailTemplate = kendo.template($("#template").html()) " because at the time of the onShow, the HTML for the template in the topSection.html file has not been loaded yet.

    I hope this helps you and Martin V. as well.

    Cheers,

    Edsel

All Replies
  • Hello,

    The example that you mentioned for the detail template is interesting ( demos.telerik.com/.../detailtemplate ).

    To make the template look like what you want you would need to change the HTML for the template (detailTemplate) to something like the following:

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

                           <div class='employee-details'>

                               <ul>

                                   <li><label>Country:</label>#= Country #</li>

                                   <li><label>City:</label>#= City #</li>

                                   <li><label>Address:</label>#= Address #</li>

                                   <li><label>Home Phone:</label>#= HomePhone #</li>

                               </ul>

                           </div>

               </script>

    I hope this helps.

  • Thanks egarcia, i have tried something similar as your suggestion, but i couldn't invoke it to my grid. details view is working perfectly, but i have tried to add something like menu bar in details view, same approach as Martin is tring to achieve. but i failed.

  • You are welcome Giorgi.

    Here is a sample of this approach (it is not using a style at the moment):

       oemobiledemo.progress.com/.../hierarchical-grid3

    The code in the onShow is the following:

       this.scope.grid0.options.detailTemplate = function (data) {

           var template = kendo.template(angular.element("#template").html());

           return template(data);

       };

    You can see the code using the following URLs:

    view-source:oemobiledemo.progress.com/.../topSection.html

    oemobiledemo.progress.com/.../view-factory.js

    This code sets the detailTemplate property to a function that will be invoked when the detail view is expanded.

    A function is used here instead of using " detailTemplate = kendo.template($("#template").html()) " because at the time of the onShow, the HTML for the template in the topSection.html file has not been loaded yet.

    I hope this helps you and Martin V. as well.

    Cheers,

    Edsel

  • can i use same approach to add entire grid in popup window, for example in blank view when i choose crud operation and setup columns popup window allows me to add information which is shown in grid, but my goal is to have clientnumber and name in grid and entire base in popup.

  • Thanks egarcia,

    Now it's working. I have only the problem with cyrillic " ����� " .

  • Giorgi

    I think you can just use the edit option of the grid as a pop up and customize it.

    Perhaps, the following thread on formatting the pop up might be useful:

    community.progress.com/.../29787

    Martin

    The following threads on internationalization might help:

    community.progress.com/.../28352

    community.progress.com/.../29173

    добър ден

    Dobir Den