How to make the columns to become rows in Grid / Detail temp

Posted by Martin Velikov on 15-Feb-2017 05:02

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



Posted by egarcia on 15-Feb-2017 11:06

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

Posted by egarcia on 15-Feb-2017 06:48

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.

All Replies

Posted by egarcia on 15-Feb-2017 06:48

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.

Posted by Giorgi Kviraia on 15-Feb-2017 07:10

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.

Posted by egarcia on 15-Feb-2017 11:06

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

Posted by Giorgi Kviraia on 16-Feb-2017 01:53

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.

Posted by Martin Velikov on 16-Feb-2017 02:06

Thanks egarcia,

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

Posted by egarcia on 16-Feb-2017 03:17

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

This thread is closed