Telerik Forums
Kendo UI for Vue Forum
100 questions
Sort by
2 answers
291 views

I'm trying to have the Kendo DropDownList wrapper component expand to the viewport height so that there's a maximum amount of items on screen without having a scrollbar on <body>

 

I'm currently trying it with this approach but I'm wondering if there's a better way:

1seoqu (forked) - StackBlitz

 

The main downside of this approach is that it relies on setting the 'height' prop to a number that is larger than the data source would take up when fully rendered.  In this case a height of 999px won't work, while a height of 9999px will work. So when I set the height to 9999px I get the desired result but it feels hacky and I'm wondering if there's a better way.

Filembar
Top achievements
Rank 1
Iron
Iron
 answered on 04 Feb 2022
16 answers
431 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
1 answer
225 views

hi, 
I have used vue wrapper grid, columns binding as a list.  Columns are binded. 

<KendoGrid
     ref="ContactList"
     id="contactListView"
     :selectable="'multiple'"
     :reorderable="true"
     :sortable="false"
     :resizable="true"
     :scrollable-endless="true"
     :filterable="false"
     :columns="columnList.filter(x=>x.selected==true)"
     :editable="commonContactInfo.isGridEditable"
     @change="onContactRowClick"
     @save="saveContact"
     :data-source="ContactsListForSelection"
     @databound="onDatabound"
     :allowCopy="true"
   ></KendoGrid>

 

ColumnList is as follows.

let columns: any[] = [
      {
        width: 50,
        title: 'Select All',     
        selectable: 'multiple',
        selected: true,
        disabled: false
      },
      {
        title: `First Name`,
        field: 'firstname',
        selected: true,
        disabled: true,
        isVisible: true,
        width: 150
      },
      {
        title: `Middle Name`,
        field: 'middlename',
        selected: true,
        disabled: false,
        isVisible: true,
        width: 150
 
      },
      {
        title: `Last Name`,
        field: 'lastname',
        selected: true,
        disabled: false,
        isVisible: true,
        width: 250
      },
      {
        title: `Initials`,
        field: 'initials',
        selected: true,
        disabled: false,
        isVisible: true,
        width: 250
      },
      {
        title: `Address`,
        field: 'address',
        selected: true,
        disabled: false,
        isVisible: true,
        width: 250
      }]

I use a seperate method to change this column list. later. There I add new columns to the grid as well. 

if (this.commonContactInfo.customFieldsForGroups.length > 0) {
      let Customcolumns: any[] = [];
      let field = '';
      let cusFieldId = '';
      this.commonContactInfo.customFieldsForGroups.forEach((cf:CustomFieldsDto) => {
        if (cf.pkFieldId !== undefined) {
          cusFieldId = cf.pkFieldId;
        }
      
        this.commonContactInfo.fetchedContactsList.forEach((cont:ContactDto) => {
          Object.keys(cont.customFields).forEach(k => { 
            if (this.commonHelper.getPlainGuidString(k) === cusFieldId) {
              if (cont.customFields[k].DataType === 'DateValue') {
                console.log(cont.customFields[k].DateValue);
                field = 'customFields[' + k + '].DateValue';
              }
              if (cont.customFields[k].DataType === 'StringValue') {
                console.log(cont.customFields[k].StringValue);
                field = 'customFields[' + k + '].StringValue';
              }
              if (cont.customFields[k].DataType === 'IntValue') {
                console.log(cont.customFields[k].IntValue);
                field = 'customFields[' + k + '].IntValue';
              }     
            }
          });
        });
 
        Customcolumns.push({
          title: cf.fieldName,
          field: field, // 'customFields[' + field + '].DateValue',
          selected: true,
          disabled: true,
          isVisible: true,
          width: 150
        });
      });
     
      let defcolumns = columnsList;
      Customcolumns.forEach((tc:any) => {
        defcolumns.push(tc);
      });
 
      this.ColumnsList= defcolumns;
      this.ColumnsList.forEach((e:any) => {
        e.selected = true;
      });
    }

columns are added like this because the data i have is as follows. datafieldvalue (see attached file)

Issue is after this even the columns are added the data in the customfields are not binding.

Any suggestions?

Dimitar
Telerik team
 answered on 23 Apr 2020
1 answer
524 views

Hello everyone!

I am trying to implement a search field component based on kendo-combobox wrapper.

I want to cover via JEST unit tests the changed value but I can not trigger the change event and assert the component value.

I am sharing with you guys this code example : https://codesandbox.io/s/tender-proskuriakova-89bcm?fontsize=14&hidenavigation=1&theme=dark

Can you help me on this assertion : expect(wrapper.vm.$data.value).toEqual(1);

Martin
Telerik team
 answered on 19 Feb 2020
5 answers
206 views

Hello
We are developing a module whereby what is selected on one grid filters a second grid. As part of this we need to enable multi-select on the master grid. 

I have two separate scripts for getting the data item of the selected grids, but both seem a little slow, ~1 sec to ~3 secs.

The scripts we are testing are:

onChange: function(ev) {
      var that = this;
      var selected = $.map(ev.sender.select(), function(item) {
        var tr = $(item).closest('tr');
        var grid = that.$refs.itemsGrid.kendoWidget();
        var data = grid.dataItem(tr);
        return data.itemNumber;
      });
      this.$root.$emit('item-grid-selected',selected);
    },
change: function(e) {
    var selectedRows = e.sender.select();
    var selectedDataItems = [];
    for (var i = 0; i < selectedRows.length; i++) {
      var dataItem = e.sender.dataItem(selectedRows[i]);
      selectedDataItems.push(dataItem.name);
    }
    console.log(selectedDataItems);// contains all selected data items
    this.$root.$emit('item-grid-selected',selectedDataItems);
  },

 

with the grid code of:

<kendo-grid ref="itemsGrid"
                  :data-source="items"
                  v-on:databound="autoFitColumns"
                  :sortable-mode="'single'"
                  :sortable-allow-unsort="true"
                  :groupable="true"
                  :pageable="false"
                  :page-size="20"
                  :pageable-page-size="10"
                  :pageable-always-visible="false"
                  :filterable-mode="'row'"
                  :selectable="'multiple'"
                  :toolbar="[]"
                  :editable="false"
                  :server-paging="false"
                  :column-menu="true"
                  :scrollable-horizontal="true"
                  v-on:change="change"
                  v-on:save="grid_save"
    </kendo-grid>

Without any event raised on the change event of the grid, the selection following a click of any rows in the grid is seemingly instant. Just for info, there are only three rows in this table, so it is not because there is a lot to go through.

 

Can you make any suggestions for speeding this up?

Regards
John

Ianko
Telerik team
 answered on 15 Nov 2018
1 answer
176 views
I have a kendo-vue-grid like so:

    <kendo-grid v-bind:data-source="loggedInUsers"
                v-bind:sortable-mode="'multiple'"
                v-bind:sortable-allow-unsort="false"
                v-bind:sortable-show-indexes="true"
                v-bind:height="250">
        <kendo-grid-column field="username" title="Agent Name">
        </kendo-grid-column>
        <kendo-grid-column field="count" title="Count">
        </kendo-grid-column>
    </kendo-grid>

`loggedInUsers` which is used as datasource in above contains elements like:
`{ username: 'test', count: 1 }` .

My problem is that this `loggedInUsers` array gets updated every five seconds and when it gets updated, all the sorting that is done on columns gets lost. Is there a way to preserve this sort settings?
Dimitar
Telerik team
 answered on 20 Feb 2019
1 answer
927 views

I'm getting a handful of these errors and it causes issues with automated testing/build pipelines. 

Example:

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($drop-hint-arrow-size, 2) or calc($drop-hint-arrow-size / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

I could fix them easily, but I'd rather leave the NPM packages as we received them. Are there plans to update the SCSS files for Kendo UI Vue to support the latest library expectations?

Dimitar
Telerik team
 answered on 27 May 2022
1 answer
161 views

https://codesandbox.io/s/216z33wvjr

this is the link that show the reason of i am asking this question, seem like Vue kendo not have the function of remove and add the tab, i m using jquery and use it to add and remove the tab. Add the tab is easy but when i need to remove the tab, the fuction that i defined on the "x" seem like cannot fire the "remove" function i had create in the method of vue, seem like it was not found the method.

Veselin Tsvetanov
Telerik team
 answered on 05 Dec 2018
1 answer
7.8K+ views

Using the kendo vue grid wrapper how can I add a css class to a kendo-grid-column ?

Annie
Top achievements
Rank 1
 answered on 13 May 2019
1 answer
564 views

I try to use v-bind:steps="{ hour: 1, minute: 15 }" but turns out it doesn't have any effect.

I would like to make sure if it is not supported or I have misconfigured.

 

Thanks!

Petar
Telerik team
 answered on 03 Jun 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DropDownTree wrapper
DatePicker
Spreadsheet wrapper
Editor wrapper
Input
NumericTextBox
Editor
DataSource wrappers (package)
DateInput
MultiSelect
Scheduler wrapper
Styling / Themes
DateTimePicker
Gantt wrapper
Pager
Checkbox
Upload
Scheduler
Calendar
DropDownList wrapper
Localization
Window
Tooltip
Chart wrappers (package)
Dialog
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Chart
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Slider
Splitter wrapper
TabStrip wrapper
TreeView wrapper
TabStrip
Error
FloatingLabel
Form
TextArea
Stepper
Splitter
PanelBar
TreeView
Notification
Menu
TreeList
Toolbar
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
ComboBox wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
MultiSelect wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
TimePicker
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Card
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Drawer
Loader
ProgressBar
DateRangePicker
Switch
Gauge
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPicker
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
ListView
Signature
ChunkProgressBar
FontIcon
SVGIcon
+? more
Top users last month
Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
kva
Top achievements
Rank 2
Iron
Iron
Iron
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Ruchika
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bernd
Top achievements
Rank 5
Bronze
Bronze
Iron
kva
Top achievements
Rank 2
Iron
Iron
Iron
Jay
Top achievements
Rank 2
Iron
Iron
Veteran
Mark
Top achievements
Rank 3
Iron
Iron
Iron
Ruchika
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?