Telerik Forums
Kendo UI for Vue Forum
100 questions
Sort by
1 answer
51 views

I'm trying to populate a grid with some async data (not in this repro for simplicity) and do the data processing inside a Vue computed function. 

However I can't seem to get the expanding/collapsing rows functionality to play along nicely.


Here's my attempt (where I save 'e.collapsedGroups' into a ref and recurse over it inside the computed):

Fkcdqd (forked) - StackBlitz

Basically the only issue that I'm still seeing is that when I collapse product name 'Apple' it will close all 'Apple' rows. You can observe this by going to the repro and collapsing 'Apple' product in the units in stock '2', and then scrolling down to the units in stock '7' and seeing there that the 'Apple' is also collapsed.


My guess is is that there must be a simpler way to implement the expand functionality with a computed, but so far haven't found a way.

I would really appreciate any input to help me along 😁

Plamen
Telerik team
 answered on 31 May 2023
16 answers
478 views

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
Telerik team
 answered on 01 Nov 2018
7 answers
105 views

I am using the Grid, but manipulating the URL with search parameters.  The first page works great, showing the total rows, number of pages, etc.  When navigating to other pages, I can see that the grid is successfully generating and hitting the URL.  Within the change() event, I can see the correct rows returned.  However, the grid is not updating with the new content.  Is there something else I need to do?

Here is the grid definition

<kendo-grid ref="gridComponent"
                      :data-source="quotes"
                      :auto-bind="true"
                      :selectable='true'
                      :sortable='true'
                      :resizable='true'
                      :pageable-page-size="pageSize"
                      :pageable-page-sizes='true'
                      :pageable-button-count='5'
                      :reorderable='true'
                      :no-records="noRecords"
                      v-on:databinding="onDataBinding"
                      v-on:databound="onDataBound"
                      v-on:change="rowSelected"
                      :sort="sortFilter">
computed: {
  quotes: function () {
    let vue = this
    //  eslint-disable-next-line
    return new kendo.data.DataSource({
      transport: {
        read: {
          url: this.queryString,
          beforeSend: function (xhr) {
            // xhr.setRequestHeader('Access-Control-Allow-Origin', '*')
            xhr.setRequestHeader('Authorization', Constants.AUTH_KEY)
          },
          type: 'GET',
          dataType: 'json'
        }
      },
      schema: {
        total: function (response) {
          let records = 0
          if (response && response.length > 0) {
            records = response[0].Count
          }
          return records
        }
      },
      pageable: 'true',
      pageSize: 10,
      serverPaging: 'true',
      // testing the change event handler
      change: function (e) {
        // let data = this.data()
      },
      requestStart: function () { vue.loading = true },
      requestEnd: function () { vue.loading = false }
    })
  },
  queryString () {
    var me = this.$store.getters.user
    var agentNumber = me.userName
    var searchURLstring = `${Constants.SEARCH_URL}?AgentNumber=${agentNumber}`
    if (this.currentPolicyNo) {
      searchURLstring += `&QuoteNumber=${this.currentPolicyNo}`
    }
    if (this.currentInsuredName) {
      searchURLstring += `&InsuredName=${this.currentInsuredName}`
    }
    if (this.currentAddr1) {
      searchURLstring += `&Address=${this.currentAddr1}`
    }
    if (this.currentSortField) {
      searchURLstring += `&sortField=${this.currentSortField}`
      searchURLstring += `&sortDirection=${this.currentSortField}`
    }
    searchURLstring += `&SearchScope=${this.searchScope}`
    return searchURLstring
  }
}
Aleksei
Top achievements
Rank 1
 answered on 04 Mar 2020
3 answers
324 views

I recently ran into a situation where an update method I wrote stopped working.  The method uses jQuery to open a grid row, target 4 separate fields and change their values to new ones that have come in from an API call.

When I dug in, I discovered that the attribute my method uses to navigate to each field in the row, data-field="myFieldName", was completely missing.  Thus the jQuery was finding nothing and no updates were happening.

The field is in all my other grids so I looked to see what I had done differently in this grid to make that disappear.  Turns out a couple things: One was I added "editable" and "navigatable" as options to the grid, because I'm allowing in-cell editing.  The other was I set "scrollable" to true (I typically set it to { virtual:true }).

As soon as I did this the "data-field" attribute stops being rendered in the columns.  With "editable" and "navigatable" what I get instead is an attribute "aria-describedby=" with a cell-specific GUID.  The "scrollable" property seems to just eliminate the data-field but has no other weird effects.

I need in-cell editing but I also need to have each field position identified.  Is there a way I can force "data-field" to show up?  Alternatively I could add a new "data-customAttribute" type of attr on there, but how do I accomplish that?  Worst case I can add an identifier into the actual template for the column, which is just some simple HTML. 

I'd prefer to do it with "data-field" since that would allow me to implement one consistent method for editing values whether a grid is marked as editable or not.

Plamen
Telerik team
 answered on 03 Mar 2020
1 answer
178 views

Hey Guys,

Wondering if anyone can assist in finding a solution to using Kendo UI grid data in a more MODERN Data Card solution such as https://www.google.com/flights results listings for instance (See attached) vs a standard Datagrid.  I see that Kendo offers this

 

https://docs.telerik.com/devtools/winforms/controls/cardview/overview

 

However, this is far and away from a modern solution for Data Card UI. Of course, this will require sorting the filtering for cards, not grid. It would be awesome if the cards could interact with data from data grids too...

Any thoughts?

Thx in advance!

Michael

Konstantin Dikov
Telerik team
 answered on 04 Feb 2019
6 answers
575 views

Hi,

I have the native grid set up in my vue application with Vuex and having issue getting the grouping feature to work.

I am not getting a response whenever I drag a column to the column header. The dragged column just not stay in the column header, it disappears afterward.

It seems my grid isn't emitting the onDataStateChange method. Not sure what I have done wrong.

Other gird features are working fine. 

 

<template>
  <v-card shaped>
    <v-card-title>
      <h3>
        Product
      </h3>
    </v-card-title>
    <v-card-text>
      <Grid
        :style="{height: '800px'}"
        :data-items="gridDataResult"
        :filterable="true"
        :filter="filter"
        :groupable="true"
        :group="group"
        :pageable="pageable"
        :reorderable="true"
        :resizable="true"
        :sortable="true"
        :sort="sort"
        :skip="skip"
        :take="take"
        :total="total"
        :expand-field="'expanded'"
        :columns="columns"
        :column-menu="columnMenu"
        @pagechange="pageChangeHandler"
        @filterchange="filterChange"
        @sortchange="sortChangeHandler"
        @dataStateChange="dataStateChange"
        @expandchange="expandChange"
        @columnreorder="columnReorder"
      >
        <!-- <grid-toolbar>
          <button
            title="Add new"
            class="k-button k-primary"
            @click="insert"
          >
            Add new
          </button>
          <button
            v-if="hasItemsInEdit"
            title="Cancel current changes"
            class="k-button"
            @click="cancelChanges"
          >
            Cancel current changes
          </button>
        </grid-toolbar> -->
 
        <grid-no-records>
          <div class="k-loading-mask customPosition">
            <span class="k-loading-text" />
            <div class="k-loading-image" />
            <div class="k-loading-color" />
          </div>
        </grid-no-records>
      </Grid>
    </v-card-text>
  </v-card>
</template>
 
<script>
 
import { process } from '@progress/kendo-data-query';
// import { mapGetters } from 'vuex';
// import { mapGetters, mapActions } from 'vuex';
 
export default {
  name: 'Product',
  components: {},
  data() {
    return {
      columnMenu: false,
      expandedItems: [],
      gridPageable: { pageSizes: true },
      skip: 0,
      take: 10,
      pageSize: 10,
      pageable: {
        buttonCount: 10,
        info: true,
        type: 'numeric',
        pageSizes: true,
        previousNext: true,
      },
      filter: {
        logic: '',
        filters: [
          // { field: 'UnitPrice', operator: 'neq', value: 18 },
          // { field: 'calendarMonth', operator: 'gte', value: new Date('1996-10-10') },
        ],
      },
      group: [],
      sort: [{ field: 'id', dir: 'asc' }],
      // sort: [
      //   { field: 'id', dir: 'asc' },
      // ],
      columns: [
        {
          field: 'id',
          title: 'ID',
          // width: '70px',
        },
        {
          field: 'currency',
          title: 'Currency',
          // width: '100px',
        },
        {
          field: 'salesOrigin',
          title: 'Sales Origin',
          // width: '100px',
          // filter: 'numeric',
          // groupable: true,
        },
        {
          field: 'plant',
          title: 'Plant',
          // width: '100px',
          // filter: 'numeric',
          // groupable: true,
        },
        {
          field: 'sku',
          title: 'SKU',
          // width: '100px',
          // groupable: true,
        },
        {
          field: 'materialGroupDescription',
          title: 'Material Group Description',
          // width: '100px',
        },
        {
          field: 'materialDescription',
          title: 'Material Description',
          // width: '100px',
        },
        {
          field: 'swatchDisplayColourDescription',
          title: 'Colour',
          // width: '100px',
        },
        {
          field: 'calendarMonth',
          filter: 'date',
          title: 'Calendar Month',
          // width: '100px',
          // groupable: true,
        },
        {
          field: 'discontinued',
          title: 'Discontinued',
          // filter: 'boolean',
 
          // groupable: true,
        },
        // {
        //   command: [
        //     {
        //       name: 'edit',
        //       text: ' ',
        //       width: 10,
        //     },
        //     {
        //       name: 'destroy',
        //       text: ' ',
        //       width: 10,
        //     },
        //   ],
        //   title: 'Actions',
        //   // width: '150px',
        // },
      ],
    };
  },
  computed: {
    gridDataResult: {
      get() {
        // const data = process(this.$store.getters.aggregatedBoDataList,
        //   {
        //     sort: this.sort,
        //     take: this.take,
        //     skip: this.skip,
        //     filter: this.filter,
        //     group: this.group,
        //   });
        // console.log(data);
 
        return process(this.$store.getters.aggregatedBoDataList,
          {
            take: this.take,
            skip: this.skip,
            sort: this.sort,
            filter: this.filter,
            group: this.group,
          });
      },
      set(data) {
        return process(data,
          {
            take: this.take,
            skip: this.skip,
            sort: this.sort,
            filter: this.filter,
            group: this.group,
          });
      },
    },
    total() {
      return this.$store.getters.aggregatedBoDataList
        ? this.$store.getters.aggregatedBoDataList.length : 0;
    },
  },
  created() {
    this.$store.dispatch({
      type: 'fetchAggregatedBoData',
      count: 200,
    });
  },
  methods: {
    createAppState(dataState) {
      console.log(`dataState ${dataState}`);
      this.group = dataState.group;
      this.take = dataState.take;
      this.skip = dataState.skip;
      this.girdDataResult(dataState.data);
      // this.getData();
    },
    groupChange(event) {
      console.log(event);
    },
    dataStateChange(event) {
      console.log(`data state ${event}`);
      this.createAppState(event.data);
    },
    expandChange(event) {
      console.log(`expand state ${event.target.$props.expandField}`);
      this.$set(event.dataItem, event.target.$props.expandField, event.value);
    },
    pageChangeHandler(event) {
      this.skip = event.page.skip;
      this.take = event.page.take;
    },
    sortChangeHandler(e) {
      this.sort = e.sort;
    },
    filterChange(ev) {
      this.filter = ev.filter;
    },
    columnReorder(options) {
      this.columns = options.columns;
    },
  },
};
</script>
 
<style>
.customPosition { margin-top:100px}
</style>
Ianko
Telerik team
 answered on 24 Apr 2020
0 answers
47 views

Hello

I add 

v-bind:alternate-rows="true" and also add cell template it not work combinely
ishani
Top achievements
Rank 1
 asked on 16 Aug 2023
1 answer
4.9K+ views

Hi,

I am using Kendo UI Material theme. I would like to switch between light and dark themes without reloading the whole site. May I know what are variables available that I can set in the code?

garri
Top achievements
Rank 2
Iron
Iron
Iron
 updated answer on 10 Aug 2021
7 answers
327 views
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.
Plamen
Telerik team
 answered on 07 Aug 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DatePicker
DropDownTree wrapper
Spreadsheet wrapper
Scheduler
Editor
Editor wrapper
Input
DateInput
MultiSelect
NumericTextBox
Scheduler wrapper
Calendar
DataSource wrappers (package)
Styling / Themes
DateTimePicker
Gantt wrapper
Localization
Pager
Chart
Checkbox
Upload
Chart wrappers (package)
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Slider
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
Menu
TreeList
Toolbar
ListView
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?