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

Hi. The documentation (https://www.telerik.com/kendo-vue-ui/components/grid/custom-rendering/custom-headers/) shows how to make custom headers, but there is no example of a custom header with functional sorted colums (like the first grid on this page -> https://www.telerik.com/kendo-vue-ui/components/grid/sorting/ ).

I want to have a custom header template and I also want to click on it to sort the column. I actually managed to do that, but the arrows are missing. Here's a code sample:

<template #headerTemplate="{props}">
   <span @click="headerTemplateClickHandler(props)">{{ props.title }}</span>
</template>

headerTemplateClickHandler(props){
      const existentRuleIndex = this.sort.findIndex(rule => rule.field === props.field);
      if (existentRuleIndex >= 0) {
        this.sort[existentRuleIndex ].dir =
          this.sort[existentRuleIndex ].dir === "desc" ? "asc" : "desc";
      } else{
        this.sort.push({
          dir: 'desc',
          field: props.field
        })
      }
      props.sortchange({
         sort: this.sort
      });
    }

With this code I managed to sort the column, but the arrow indicators do not show up in the header.

Petar
Telerik team
 answered on 21 Apr 2022
3 answers
900 views

I know ListBox probably doesn't support this out of the box but I'm really struggling to find a solution to my problem.

I would like to customize the item template to contain a checkbox and a text input when it is moved to the right ListBox. I am able to put a checkbox and input in there no problem but I can't get the textbox to focus when clicked.I would also like to bind its value to the dataItem but I'm sure I can figure that part out once I'm able to actually type in the box.

Here is a Dojo demonstrating the problem:

https://dojo.telerik.com/eZuKoMoh/2

Ivan Zhekov
Telerik team
 answered on 10 Dec 2018
1 answer
275 views

I'm trying to add a custom class name to the DropDownList popup div like so:

Qtavuz (forked) - StackBlitz

 

But the custom class name isn't applied, while the custom width is. Is there a way to make this work?

Petar
Telerik team
 answered on 16 May 2022
2 answers
835 views

I want to enable/disable a kendo combobox based on the user's selection from a checkbox, which I am storing in a variable.

I already tried setting the variable to the enable property, but this is useful only when the control is being built-in.

Does anybody know If I can do this while creating the control?

<div id="fund" class="col-xs-3"> input class="required" data-bind="title: $parent.selectedFund, kendoComboBox: { placeholder: 'Start typing to search...', value: $parent.test, widget: $parent.searchSource, dataTextField: 'managerName', dataValueField: 'managerId', filter: 'contains', autoBind: false, minLength: 3, enable: overrideGlobalMapping, //this does not work for me even though the variable holds the correct value change: function(){ if(this.value() && this.selectedIndex == -1){ setTimeout(function () {$parent.selectedManagerId(null);}, 100);}}, dataSource: { serverFiltering: true, transport: { read: $parent.retrieveManager }}}" /></div>

Delano
Top achievements
Rank 1
 answered on 08 Feb 2020
1 answer
449 views

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:

 

<th colspan="1" rowspan="1" class="k-header" style="position: sticky; left: 0px; right: 0px; z-index: 1; background: rgb(246, 246, 246);"></th>

 

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/

 

 

Veselin Tsvetanov
Telerik team
 answered on 05 Apr 2019
1 answer
1.2K+ 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
5 answers
714 views
hello, I am working with the grid wrap component, and my problem is that in the filters of my columns I do not need to use all the filter options (for example, it is equal to, it is not equal to, it is after .. ..), I would like to only use some of them .. is it possible to do this?
Veselin Tsvetanov
Telerik team
 answered on 14 Nov 2019
1 answer
9.6K+ 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
5 answers
348 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
479 views
I am working with the wrapping grid and I saw the need to add html elements in the header of my grid, in this case I would like to add a button and a drop-down to select the columns to be displayed, I know that the grid has the option of add edit buttons, add etc. although I need to add a button for a different task. I would like to know if it is possible to do this, I leave an example of what I want to do. THANKS
Ivan Danchev
Telerik team
 answered on 07 Jan 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Editor
DatePicker
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
DateTimePicker
Gantt wrapper
Chart
Chart wrappers (package)
ComboBox
Localization
Pager
Checkbox
Upload
DropDownList wrapper
Popup
Window
Error
Form
Tooltip
TreeView
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
RangeSlider
Menu
TreeList
Toolbar
Button
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
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Michael
Top achievements
Rank 2
Iron
Wilfred
Top achievements
Rank 1
Alexander
Top achievements
Rank 2
Iron
Iron
Matthew
Top achievements
Rank 1
Iron
ibra
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Michael
Top achievements
Rank 2
Iron
Wilfred
Top achievements
Rank 1
Alexander
Top achievements
Rank 2
Iron
Iron
Matthew
Top achievements
Rank 1
Iron
ibra
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?