Grid Detail Template

[Toby]

So how do we add a Detail Template? The docs are seriously lacking for Vue wrappers!!

I have this - which i assume would reference a $ref od "detail" but instead outputs a string

<kendo-grid ref="grid"
:data-source-ref="'dataSource'"
:menu="true"
:sortable='true'
:pagable="true"
:groupable="false"
:detail-template="'detail'">

[Dimitar]

Hello Toby,

With the 2018 R1 release, we have launched a brand new site, where you can find documentation and examples for all of the available Kendo UI components for Vue:

• Kendo UI for Vue Documentation

In addition to the above, I have also prepared a plunkr demo, where you can find a Grid implementation with detail template:

• Grid Detail Template Demo

There is also an available article in the documentation that demonstrates how to use composite array options:

• Using Composite Array Options

Regards,
Dimitar
Progress Telerik

[Toby]

You're right. There is a new documentation site. However very little expanding on Vue. Care to point me to the specific documentation related to Vue Grid and the Detail View, or even custom buttons which you guided me on?

Most of your documentation for Vue suggests looking at the jQuery documentation which is not a great help as it requires breaking down and *guessing* what the appropriate Vue attribute would be against the jQuery options. Furthermore, in some cases there are specific Vue components kendo-grid-column as an example for a child of a kendo-grid component. It took a Google search (not your documentation) to find out that there is no kendo-toolbar child, but instead to throw in a div and work it out from there. It's hit or miss as to whether or not a message for no data appears and there's no *Vue* documentation pertaining to that either.

In a nutshell, your Vue docs are mostly padding and links to the jQuery docs. Your Grid Template demo is greatly appreciated, but again, there is *nothing* on the docs that detail how one implements this functionality. Getting much from Vue wrappers and documentaion is a tiring game of whack-a-mole.

 

 

[Dimitar]

Hello Toby,

Thank you for the feedback provided. 

In general, Kendo UI for Vue allows you to utilize all of the configuration options for the jQuery widgets as follows:

• Each configuration option that is available in the jQuery API could be used as a prop in the component for vue.
  
  
• Each Camel-case options (e.g pageSize) can be used as properties by translating them into Kebab case (:page-size).
  
  
• Composite options (e.g schema option of the DataSource) can be used either by configuring them by using the root option to pass an object for the setting (e.g :schema="{ data: '#= data.value #' }") or translating them to Kebab case and then appending the inner option (:schema-data="'#= data.value #'").
  
  
• Composite array options can be used just like the composite options - you can directly declare an array of the items to configure them either as a value to the prop inline or through the Vue data.
  
  
• Each event can be configured by utilizing the native Vue v-on directive or its @ shorthand. Also, widget events that are named in Camel case should be transitioned into lowercase (e.g requestEnd has to become @requestend).

The above information is also available in the Kendo UI for Vue Configuration Documentation Article. There, you could find additional information and examples on the topic.

Concerning the documentation and demos - we are gradually adding new demos and information to the new website. The Detail Templates Demo that I have provided with my previous reply will be added in the upcoming week. Also, on the specific question about grid-columns, you can checkout the following section of the Grid documentation, where the use of the component is demonstrated.

 

Also, In case any issues arise with the widgets, you are struggling to configure them in a specific scenario or need more information about the built-in APIs, you can alwasy open a separate support thread and we will be happy to assist you.

Regards,
Dimitar
Progress Telerik

[David]

I've tried following the example you posted on Plunkr, but there are a few issues. First, no details for the rows, don't even see the arrows to indicate that the row can be expanded. Instead of saying something like "1-4 of 4 items, it is saying NaN of NaN of 4 items. I feel like this should be a lot more straightforward, there's not any errors in the console either. 

I am playing with some dummy data right now in a local array. I brought in the data by 

 

import * as dataSource from "./sampleData.json"

 

and store it in the data object of my vue instance:

data () {
  return {
     dummyData: dataSource
    }
}

[David]

Sorry, accidentally submitted before I was finished.

I am not sure what the problem is, this is what my kendo-grid component looks like. 
I will second what was said earlier, it seems that the Vue docs could be a lot better. 

<kendo-grid
            :data-source="this.dummyData"
            :pageable="true"
            :editable=" 'inline' "
            :sortable="true"
            :filterable="true"
            v-on:detailInit="detailInit"
            v-on:databound="dataBound"
            :filterable-mode=" 'row '">
          <kendo-grid-column
                 :field=" 'assetnum' "
                 :title=" 'Asset Number' "></kendo-grid-column>

               <kendo-grid-column
                   :field=" 'siteid.name' "
                   :title=" 'Site Id '"></kendo-grid-column>
</kendo-grid>

[Dimitar]

Hello David,

We have recently made a significant upgrade to the Vue website by adding several new demos for each component. Concerning the Grid - there are more than 30 new demos available which demonstrate the most common configuration scenarios for the widget. 

I would suggest referring to the Grid DataBinding demos, where binding the component to local data is demonstrated:

• Grid Data Binding Demo.
  
  
• Grid Local Binding StackBlitz.

Check out the above example on binding the Grid to local data and try to integrate a similar approach in your application. In case the issue with binding the data continues to persist, you could modify the above StackBlitz example accordingly and post it here, so that I can inspect the exact scenario.

Concerning improving the documentation of the Vue components - I am happy to let you know that we are currently working on an API Reference for Vue that will be available soon. This will significantly reduce the time needed to utilize all of the configuration options.

Regards,
Dimitar
Progress Telerik

[David]

I am not having a problem with actual data binding, I can bind data to the grid no problem. I can't get the grid detail (nested grid) functionality to work like in this demo: plunkr demo

My data is proprietary so I am going to have to figure out how to post some sort of example to show you what I'm trying to do.

[David]

Here's a stackblitz: not working

Not sure why that's giving that error, I have had it working where it filters how I want it to, at least to the first level. Another strange thing, it won't filter when this code is running locally for me. But I am running webpack and babel so I don't know if that's the reason?

[Dimitar]

Hello David,

There are two issues with the linked StackBlitz example:

1) The dataSource transport.read.dataType is set to "odata". However, the default type "json" should be used instead.

2) The detail Grid's dataSource initialization is not correct, thus throwing the observed error. This is the case as when using local data, the collection should be set to the data property of the dataSource:

methods: {
    detailInit(e) {
      $("<div />")
        .appendTo(e.detailCell)
        .kendoGrid({
          dataSource: {
            data: this.localDataSource,
            filter: {
              field: "assetnum",
              operator: "eq",
              value: e.data.assetnum
            }
          },
          scrollable: true,
          sortable: true,
          pageable: true,
          columns: [

          ]
        });
    }
  }

Here is an updated StackBlitaz example where the above patches are implemented.

Regards,
Dimitar
Progress Telerik

[David]

I realized the data type error not too long after my last reply.  A couple more questions:

I need n-level nesting.Each parent server object has servers under it, that has columns Server Name and VM Name. I've attached an image to show what I need. The VM name isn't being populated. 
The next level of nesting is to expand the row that has server name and vm name. The objects "versions", "applications", and "ports" should also be expandable to show the related data. 

 Here's another stackblitz

[Dimitar]

Hello David,

To achieve the desired result, the servers collections that is injected into the nested Grid should be homogeneous:

servers: [
  {...},
  {...},
  {...}
]

Regards,
Dimitar
Progress Telerik

[David]

Not sure how it isn't? 

servers: [
       {
         name: "Server 1",
         vm: "VM 1",
         jvm: {
           initialHeapSize: 6144,
           maximumHeapSize: 6144
         },
         versions: {
           webSphereVersion: "8.5.5.10",
           sdkVersion: "1.7"
         },
         applications: ["MAXIMO"],
         ports: {
           SOAP_CONNECTOR_ADDRESS: 8080,
           SIP_DEFAULTHOST_SECURE: 8081
         }
       },
       {
         name: "Server 2",
         vm: "VM 2",
         jvm: {
           initialHeapSize: 6144,
           maximumHeapSize: 6144
         },
         versions: {
           webSphereVersion: "8.5.5.10",
           sdkVersion: "1.7"
         },
         applications: ["MAXIMO"],
         ports: {
           SOAP_CONNECTOR_ADDRESS: 8080,
           SIP_DEFAULTHOST_SECURE: 8081
         }
       }
     ]
   }]

[David]

I've made a little progress but this is still not doing what I need. The objects "jvm", "versions", "applications", and "ports" should all be able to click and drill down to see the details of the object. Is this something I could make a vue component for and insert the vue component? 
 Stackblitz

Also, when I run this code on stackblitz, it functions like I'd expect, with the buttons to drill down through the nested tables. When I try and run that code in my local dev environment (simple vue app built on webpack) all I get is a plain grid. 

[Dimitar]

Hello David,

I have prepared an example that uses homogeneous services and provides a 3 level deep nesting:

• https://stackblitz.com/edit/ugxkv9

In the above example there are 3 sources - Employees, Orders, Order_Details. Each of those have a connecting field. Thus, when expanding an item in the parent Grid, the Child Grid source is filtered based on the respective ID as follows:

dataSource: {
  ...
  filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
}

With the above example you should be able to implement N levels of nesting. In addition to this, you should be able to inspect the different services response through the browser network tab, so that you can build similar data structures. 

Concerning the local environment issue - I would suggest to debugg the application and verify that there are no JavaScript errors in the browser console. Also, make sure that the example is being run on an http server and all of the required client-side resources are being successfully loaded.

Regards,
Dimitar
Progress Telerik

[David]

Thanks, but this just isn't working with my data. I don't think Kendo is going to be an option for us. 

[Dimitar]

Hello David,

I have created a separate support thread on your behalf, where we can continue our conversation on the topic. In it I will try to address the issues that you are experiencing with configuring the Grid.

Regards,
Dimitar
Progress Telerik