Telerik Forums
Kendo UI for Vue Forum
40 questions
Sort by
5 answers
477 views
When i select any value in drop down i need selected value as a icon. Hear i am attaching a sample wire frame. 
Martin
Telerik team
 answered on 24 Oct 2019
1 answer
144 views

Hi,

 

i would like to have undo and redo buttons in vue text Editor , I couldn't see it here in where I'm typing question now.

The undo (Undo icon) and redo (Redo icon) icons--> like these or buttons anything would work.

could you please suggest what could be done to add undo and redo buttons.

 

appreciate your help,

 

Thank you

Petar
Telerik team
 answered on 28 Jun 2021
2 answers
129 views

I need to open the Master-detail template not only on the "+" or "arrow" icon but on another button on the screen.

In other words, How can we invoke the "expandChange" method from other element instead of <Grid @expandchange="expandChange" > to expand/collapse the detail template?

 

Template: I want to expand the detail template with the click of the Edit button.

<Grid
      :data-items="sampleData"
      :columns="columns"
      :detail="cellTemplate"
      :expand-field="'expanded'"
      @expandchange="expandChange"
    >
      <template v-slot:actionColumn>
        <td>
          <div class="d-flex align-items-center tbl-actions">
            <button
              type="button"
              title="Edit"
              @click="expandChange"
              class="btn btn-icon d-flex align-items-center"
            >
              <span class="icon icon-edit"></span>
            </button>
            <button
              type="button"
              title="Add to Cart"
              class="btn btn-icon d-flex align-items-center"
            >
              <span class="icon icon-cart"></span>
            </button>
          </div>
        </td>
      </template>

      <template v-slot:expandTemplate> Detail template goes here.... <template>

 

Method: 

 expandChange: function (event: any) {
      event.dataItem[event.target.$props.expandField] = event.value;

      if (event.value) {
        event.event.target.parentNode.parentNode.classList.add("expanded-row");
      } else {
        event.event.target.parentNode.parentNode.classList.remove(
          "expanded-row"
        );
      }
    },

 

Jagdish
Top achievements
Rank 1
Iron
 updated answer on 24 Jun 2021
1 answer
78 views

The API docs show icon-class as the method for custom icons on the button wrapper - https://www.telerik.com/kendo-vue-ui/components/buttons/api/button/Button/#icon-class

I cannot get this to work - is this possible?

 

Petar
Telerik team
 answered on 21 Oct 2020
2 answers
52 views

I want to add a tab on the tabstrip in the Spreadsheet component. I have done so by adding this line of code to the toolbar attribute 

<spreadsheet ref="spreadsheet"
:toolbar="toolbar"

Where toolbar is a value in data that looks like 

toolbar = {
'custom': [
// for all available options, see the toolbar items configuration
// https://docs.telerik.com/kendo-ui/api/javascript/ui/toolbar/configuration/items
{
type: "button",
text: "Save",
showText: "both",
icon: "k-icon k-i-save",
click: function() {
      // Some code
}
},

However, this new tab shows up with the name 'undefined', next to the other tabs. Is there some way to give it a proper name? 

Braulio
Top achievements
Rank 1
 answered on 23 Apr 2020
1 answer
48 views
Is it possible to make rows sticky similar to the locked option we have for columns?
Petar
Telerik team
 answered on 13 May 2022
8 answers
84 views

There is a tabstip problem in ios 13.3. (iPad)

The tabstrip scroll icon is not clicked.

Click doesn't work so it's impossible to check the contents of the next tab.

Please confirm.

https://www.telerik.com/kendo-vue-ui/components/layout/tabstrip/scrollable-tabs/

Ivan Danchev
Telerik team
 answered on 22 Jan 2020
2 answers
2.9K+ views

I have a column like this:

 

<kendo-grid-column :command="[{name: 'open', click: open}]"></kendo-grid-column>

 

It works fine, but I want it to show a bootstrap glyphicon and no text instead of the text "open" that is showing now.

Is there any way to template the column so that I can get the click event and also use any content I want inside the column?

Thanks in advance.

 

Plamen
Telerik team
 answered on 05 Oct 2020
1 answer
57 views

We have a Kendo vue UI Grid column with Vue bootstrap Datepicker as a custom column.

When we click the calender icon it is partially showing inside the cell. I want it to be show as an popup outside the cell.

Below is the code snippet from the custom cell component

<template>

 <td class="cell-editable">
    <b-input-group>
      <b-form-input
        :value="aufValue | date"
        type="text"
        placeholder="tt.mm.jjjj"
        :disabled="!canEdit"
      ></b-form-input>
      <b-input-group-append>
        <b-form-datepicker
          size="sm"
          button-only
          :value-as-date="true"
          v-model="aufValue"
          locale="de-AT"
          :disabled="!canEdit"
        ></b-form-datepicker>
      </b-input-group-append>
    </b-input-group>
  </td>

<template>

right now it show like the attached screenshot:

Please suggest a solution for achieving the same.

Thank You

Veselin Tsvetanov
Telerik team
 answered on 10 Jun 2020
4 answers
68 views

Hello! I want to bind image to tree view item like this

 

<kendo-hierarchicaldatasource ref="remoteDataSourceComponent"

:transport-read-url="'api/gettreenodes'"
:transport-read-data-type="'json'"
:schema-model-id="'id'"
:schema-model-has-children="'hasChildren'">
</kendo-hierarchicaldatasource>
<kendo-treeview data-source-ref="remoteDataSourceComponent"
:data-text-field="'name'"
:checkboxes="false"
:data-image-url-field="getIcoPath('type')"
:drag-and-drop="false">
</kendo-treeview>

 

methods: {

getIcoPath: function(typeId) {
return  require('./resources/'+typeId+'.png');
}

I want to set treeItem image according to treeItem type in function getIcoPath.

Is it possible?

 

Ilya
Top achievements
Rank 1
 answered on 27 Jul 2018
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DropDownTree wrapper
Spreadsheet wrapper
DatePicker
Editor wrapper
Input
DataSource wrappers (package)
DateInput
MultiSelect
NumericTextBox
Scheduler wrapper
Styling / Themes
DateTimePicker
Gantt wrapper
Pager
Checkbox
Editor
DropDownList wrapper
Localization
Window
Tooltip
Upload
Calendar
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
Splitter wrapper
TabStrip wrapper
TreeView wrapper
Error
FloatingLabel
Form
TextArea
Scheduler
Splitter
PanelBar
TreeView
Notification
Menu
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
Slider wrapper
Switch wrapper
TimePicker
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
TabStrip
Card
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Drawer
Loader
ProgressBar
Stepper
DateRangePicker
Switch
Gauge
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPicker
ColorPalette
FlatColorPicker
TreeList
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
ListView
Signature
ChunkProgressBar
FontIcon
SVGIcon
+? more
Top users last month
Chris
Top achievements
Rank 1
Iron
Iron
Adrian
Top achievements
Rank 2
Iron
Iron
Iron
Troy
Top achievements
Rank 3
Iron
Iron
Iron
Matúš
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Chris
Top achievements
Rank 1
Iron
Iron
Adrian
Top achievements
Rank 2
Iron
Iron
Iron
Troy
Top achievements
Rank 3
Iron
Iron
Iron
Matúš
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?