Questions on Kendo UI for Vue Forum

10 answers

478 views

I can't find anything about using a loading indicator with the native grid. Looking at the API, it doesn't look as if there is even an event that fires when the data is loaded for the native grid. Anyone able to shed any light on this?

Grid

answered on 27 Jun 2019

7 answers

342 views

Native Grid: Add a class to a row based on data

Native Grid: Is there a way to assign a class to a row (tr) based on the data without having to completely render the row in a row template? Seems like it would be a pretty common operation.

Grid

answered on 07 Aug 2020

1 answer

348 views

Grid checkbox column issue

Hello

I'm using the kendo Vue wrapper to implement a grid. I want to have the first column of my grid to be a checkbox column so i can select rows. As the docs suggested I wrote a selectable="true" kendo grid colomn. But no checkboxes are visible, I checked the DOM and it's because there are only input type checkbox tags with class "k-checkbox" added and not the nessecary labels with class "k-checkbox-label". I'm not sure if I'm missing something or the kendo grid column with binding :selectable isn't working properly.

<kendo-grid

ref="vehicleGrid"

:data-source-ref="'vehicleDataSource'"

:groupable="true"

:sortable="true"

:resizable="true">

<kendo-grid-column :selectable="true" :width="50"></kendo-grid-column>

...Other columns....

</kendo-grid>

Thanks for helping me!

Kind regards

Grid

answered on 16 Apr 2020

1 answer

148 views

enable scrollable virtual and set grid height cause row be blocked by grouping

Hi,

I am using Kendo Grid Wrapper Component with Vue3.0 compositon API and typescript but we have encountered a problem.The problem is that when I enable scrollable virtual and set the grid height，I drag the column header cells by grouping on the grid,it causes the grid row be blocked when the grid scroll to the bottom.

Thank you very much and greetings

<body>
  <div style="height:200px;">
    <div id="grid"></div>
  </div>
<script>
$("#grid").kendoGrid({
  height:'200px',
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  scrollable:{
    virtual:true
  },
  groupable: {
    enabled: true
  }
});
</script>
</body>

Grid wrapper

answered on 27 May 2022

4 answers

1.1K+ views

How can I do server paging, filtering and sorting?

I'm trying to build a simple grid with server paging, filtering and sorting, but I'm having trouble. Currently my grid is loading in all items from the server, when it should be loading just five. I think I previously had it loading just five, but it was always getting the first five.

Here's my HTML:

<div id="vueapp" class="vue-app">

<kendo-datasource ref="datasource1"

:transport-read-url="'https://demos.telerik.com/kendo-ui/service/Products'"

:transport-read-data-type="'jsonp'"

:transport-update-url="'https://demos.telerik.com/kendo-ui/service/Products/Update'"

:transport-update-data-type="'jsonp'"

:transport-destroy-url="'https://demos.telerik.com/kendo-ui/service/Products/Destroy'"

:transport-destroy-data-type="'jsonp'"

:transport-create-url="'https://demos.telerik.com/kendo-ui/service/Products/Create'"

:transport-create-data-type="'jsonp'"

:transport-parameter-map="parameterMap"

:server-paging="true"

:page-size='5'>

</kendo-datasource>

<kendo-grid :height="600"

:data-source-ref="'datasource1'"

:pageable='true'

:editable="'inline'"

:page-size='5'

:toolbar="['create']">

<kendo-grid-column field="ProductName"></kendo-grid-column>

<kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>

<kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>

<kendo-grid-column field="Discontinued" :width="120" :editor="customBoolEditor"></kendo-grid-column>

<kendo-grid-column :command="['edit', 'destroy']" title=" " width="170px"></kendo-grid-column>

</kendo-grid>

</div>

And here's my JS (using webpack):

Vue.use(GridInstaller);

Vue.use(DataSourceInstaller);

new Vue({

el: '#vueapp',

data: {

schemaModelFields: {

ProductID: { editable: false, nullable: true },

ProductName: { validation: { required: true } },

UnitPrice: { type: 'number', validation: { required: true, min: 1 } },

Discontinued: { type: 'boolean' },

UnitsInStock: { type: 'number', validation: { min: 0, required: true } }

}

},

methods: {

customBoolEditor: function(container, options) {

kendo.jQuery('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container)

kendo.jQuery('<label class="k-checkbox-label"></label>').appendTo(container)

},

parameterMap: function(options, operation) {

if (operation !== 'read' && options.models) {

return { models: kendo.stringify(options.models) }

}

})

Am I doing something wrong, or is this functionality not supported yet?

answered on 04 Jun 2018

1 answer

93 views

Column template when Native grid is grouped

Hi

I'm struggeling to find a working solution for the following problem, I need to be able to define custom templates for specific columns in the Native Grid when the grid is grouped. Somehing like the solution when the grid is not grouped using the "cell" property of GridColumnProps. I'm currently changing all wrapper components to native ones in my project, in the wrapper grid component we could just add a template property to the column definition and then return a string or function.

I need some help on how I should approach this for the Native grid. I tried the solution as stated in the docs using a named slot and the cell render prop of the grid but this renders a template for every cell and I need to be able to use a custom template for each column that requires one. But I can't seem to solve this issue completely using this approach.

Any help is appreciated,

thanks in advance!

Grid

answered on 16 Jun 2022

1 answer

419 views

Custom Styling Not Working

I am currently trying out Kendo as a proof-of-concept for a component library solution; however, I am having trouble getting any sort of styling to work.

Using an import statement in my App.vue file and/or including the theme stylesheet in my HTML file seems to cause some strange issues.

It seems that the default themes for the grid(not sure where they are coming from) are overriding the themes that come from Kendo. An example of this is below. The <th> element being created by the Vue Grid tag is shown below:

Is there any way I can ensure that styles are not put on the HTML elements by default? I am not adding these styles to the elements anywhere in my code, so I am not sure how to get rid of them or how to have the kendo theme override them.

The theme that I am trying to use was created using the vue-ui theme builder. I know that the theme is being used by the application because the grid has some of the theme styling, but some portions of it are being overridden.

The example that I followed to create my grid is below:

https://www.telerik.com/kendo-vue-ui/components/grid-native/custom-rendering/hierarchy/

Grid

answered on 05 Apr 2019

1 answer

92 views

Customizing Grid Wrapper Filter Operator Behavior

I have some grids that have a date/time column. The default equality operators for the filter match both the date and time. I am trying to customize the equality operator (or add a new operator) that ignores the time and only compares the date. Using a custom operator works the first time I select the operator. When I go back to the filter menu after setting it the first time, the dropdown has no operator selected and I changing the value again doesn't work until after I select equals again.

How can I have the equals operator remain selected or add a new operator?

If this isn't supported, are there any other ways I can accomplish the same thing? I want to display both the date and time, but have equals only filter on the date.

Here is some example code: https://stackblitz.com/edit/custom-filter-only?file=src/main.vue

Grid wrapper

answered on 30 Jun 2021

2 answers

1.4K+ views

Custom Kendo Grid Wrapper Column Template Using kendo-grid columns Attribute

I have the following template that I would like to use to render the contents of a Kendo grid wrapper cell:

<template>
   <span>
      Template Rendered: {{ templateArgs.name }}
  </span>
</template>

<script>

export default {
  name: 'template1',
  data () {
    return {
      templateArgs: {}
    }
  }
}
</script>

I am able to do this using kendo-grid-column elements as follows:

<template>
  <div>
    <kendo-grid :data-source="datasource">
          <kendo-grid-column field="name" title="Name" :template="itemTemplate"></kendo-grid-column>
    </kendo-grid>
  </div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper'
import Template from './Template.vue'

var itemTemplate = Vue.component(Template.name, Template)

export default {
  name: 'HelloWorld',
   components: {
       'kendo-grid': Grid,
       'kendo-grid-column': GridColumn
   },
   methods: {
        itemTemplate: function (e) {
          return {
            template: itemTemplate,
            templateArgs: e
          }
        }
    },
  data () {
    return {
        datasource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
    }
  }
}
</script>

I would like to use the kendo-grid columns attribute instead, as follows:

<template>
  <div>
    <kendo-grid :data-source="datasource" :columns="columns">
    </kendo-grid>
  </div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridColumn } from '@progress/kendo-grid-vue-wrapper'
import Template from './Template.vue'

var itemTemplate = Vue.component(Template.name, Template)

export default {
  name: 'HelloWorld',
   components: {
       'kendo-grid': Grid,
       'kendo-grid-column': GridColumn
   },
   methods: {
        itemTemplate: function (e) {
          return {
            template: itemTemplate,
            templateArgs: e
          }
        }
    },
  data () {
    return {
        columns: [{ field: "name", title: "Name", template: this.itemTemplate }],
        datasource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
    }
  }
}
</script>

Something is wrong with the code in the second case, though. Instead of rendering the cells using the template, I am getting [object Object] as the cell contents. What should I do in order to fix this?

Grid wrapper