Telerik Forums
Kendo UI for Vue Forum
1 answer
367 views

Hello.

I'm using Kendo-editor

I have a question about dragging and dropping images in editor 

In some demo sites provided by Kendo, images can be inserted by dragging and dropping without having to precisely position the cursor

in the contetns of the editor. Just put it inside the editor area, the image goes in. 

Even when there are no posts in the editor area

 

like this : https://www.telerik.com/kendo-vue-ui

 

However, when used in my project And in some other examples that Kendo provides

when there are no posts in the editor area if i don't drag the cursor to the correct cursor in the content, 

it's like dropping an image in the browser. 

 

like : https://www.telerik.com/kendo-vue-ui/components/editor/

 

I think this is inconvenient for the user.

I'm wondering what's the difference between the editor on the demo site that doesn't happen and the editor I'm using.

Attach the photo at the time of error occurrence.

 

The version I use 2019.3.917

 

thank you. Have a nice day

 

 

 

Ivan Danchev
Telerik team
 answered on 28 Nov 2019
3 answers
117 views

Hi there,

 

I'm trying to use the stock chart. So far ok, save one issue. I have three value axis and want to move one of them to the right. Trying to,using axis-crossing-value, gives me following strange behavior.

 

When leaving all three axis to the left with

 <kendo-stockchart :category-axis-axis-crossing-value="[0,0,0]">

the three axis appear on the lft and the chart lokks ok (see pic 1)

When trying to move one ofthe axis to the right with

 <kendo-stockchart :category-axis-axis-crossing-value="[0,0,10000]">

the whole chart is sqeezed (see pic 2). It seems, thatthe chart is sqeezed in between the axis instead of moving the axis.

 

Any suggestion for a workaround would be great.

 

Thanks again

Veselin Tsvetanov
Telerik team
 answered on 27 Nov 2019
1 answer
92 views

It doesn't work on my Android tablet, there is something that can be done

https://www.youtube.com/watch?v=cVWtUNRksKM

Veselin Tsvetanov
Telerik team
 answered on 26 Nov 2019
2 answers
94 views

Hi there,

zooming and panning is a cool feature. But since not every mouse has a wheel, I wanted to add a button (or any trigger) to unzoom the chart once it is zoomed in, without the need of the mouse wheel.

On my chart:

<kendo-chart ref="chart"></kendo-chart>

  I tried to use the ref

  this.$refs.chart

to find out, which function calls I could use to unzoom (or reset zoom), but could not find or guess which one to call. There are many properties and functions, but nothing that seems to be related to the desired function. The API does not give me a hint or I missed the point.

How can I programmatically reset a zoomed chart?

Thank you for any hint

Oliver
Top achievements
Rank 1
 answered on 22 Nov 2019
1 answer
97 views
Hi Team,

I have a requirement of displaying custom tool-tip for Kendo UI Vue grid rows.

So for each row I have to display a specific data related to current row.

I am not finding any helpful content related to Kendo UI Vue grid.

Request your help to share some code samples to display custom tool-tip for Kendo UI Vue grid rows.

Thanks,
Srinivasan Jayaraman
Ivan Danchev
Telerik team
 answered on 22 Nov 2019
5 answers
773 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
358 views

hi I 'm the user who tried to use kendo-ui for vue 

when I use kendo-grid , I have some problem

the kendo-grid-colum what make checkbox is problem.

when I checked I want to get a row data

how can i make it? 

here is my code

 

<kendo-grid id="list" ref="list" :data-source="localDataSource" :selectable="'cell'"
                                    :sortable="true" :filterable="true" v-on:change="onChange"
                                    v-on:databound="onDataBound">
                                    <kendo-grid-column :title="'No'" :width="40" :template="getTemplate">
                                    </kendo-grid-column>
                                    <kendo-grid-column :field="'title'" :title="'글 제목'" :width="200">
                                    </kendo-grid-column>
                                    <kendo-grid-column :field="'createTime'" :title="'작성 날짜'" :width="120">
                                    </kendo-grid-column>
                                    <kendo-grid-column :field="'createUser'" :title="'작성자'" :width="120">
                                    </kendo-grid-column>
                                    <kendo-grid-column :selectable="true" :title="'체크'" :width="15">
                                    </kendo-grid-column>
   </kendo-grid>

 

OR

 

<kendo-grid id="list" ref="list" :data-source="localDataSource" :columns="columns"
                                    :selectable="'multiple cell'" :sortable="true" :filterable="true"
                                    v-on:change="onChange" v-on:databound="onDataBound">
 </kendo-grid>

//////////

columns: [
                    { title: "No.", width: "40", template: "#= ++record #" },
                    { field: "title", title: "글 제목", width: "200" },
                    { field: "createTime", title: "작성 날짜", width: "120" },
                    { field: "createUser", title: "작성자", width: "120" },
                    {
                        template: '<input type = "checkbox" > ', width: "50px"
                    }
    ]

Veselin Tsvetanov
Telerik team
 answered on 14 Nov 2019
3 answers
86 views

HI,

 

I'm using the recent version of vue grid (native) and found an unexpected behavior when setting css classes to cells. I'm using slot templates.

Let's assume the following data item definiton for a grid. The definition uses a template "h-common", with a headerClassName "cssHeader" for the header cells and a template "common" with className "cssClassData" for the data cells.

{ field: 'aFieldname', title: 'aTitle', headerCell: 'h-common', headerClassName: 'cssClassHeader', cell: "common", className: 'cssClassData' }

 

  • When debbuging in the browser I see the "th" tag with an applied class attribute "cssClassHeader". So this works fine as expected.
  • When inspecting the correspondend "td" tag, the attribute class "cssClassData" is missing. But it is only missing, when I use the slot templates. If I use the standard cells (without slot templates) then the attribute is applied. So data cells seem to work differently than header cells.

I would expect the data cells to behave like the header cells, when setting the class attribute, regardsless of the mode I use (standard, slot templates, render function).

Or did I miss something?

 

Ivan Danchev
Telerik team
 answered on 07 Nov 2019
18 answers
1.1K+ views

I am facing an issue in event for my custom checkbox in column template in Kendo UI grid using  js.
I am not able to call my method checkboxToggle() which I have called it from here <input type="checkbox" class="user-status" # if(Status){ # checked # } #
v-on:click="checkboxToggle()"/> and for more details you can view my code below.

This is my code.

<kendo-datasource ref="localDataSource" :data="filteredUsers" :group='groupingFiled'></kendo-datasource>
 
            <kendo-grid :height="500"  :data-source-ref="'localDataSource'"  :resizable="true"
                :filterable="false":sortable-allow-unsort="true":sortable-show-indexes="true"
                :scrollable-virtual="true" :pageable-numeric="false"
                :pageable-previous-next="false" :pageable-messages-display="'Showing {2} users'"
                :editable="'popup'":toolbar="[{name: 'excel', text: 'Excel'}]"
                :excel-file-name="'Motadata_UserListing.xlsx'" :excel-filterable="true" >
 
            <kendo-grid-column :selectable="true" :width="35"></kendo-grid-column>
                <kendo-grid-column :field="'UserId'" :hidden="true"></kendo-grid-column>
                <kendo-grid-column :field="'UserName'"  :width="150"></kendo-grid-column>
                <kendo-grid-column :field="'UserType'":width="180"></kendo-grid-column>
                <kendo-grid-column :field="'Role'" :width="120"></kendo-grid-column>
                <kendo-grid-column :field="'AssignedGroups'"  ></kendo-grid-column>
                <kendo-grid-column :field="'Email'":width="210" ></kendo-grid-column>
                <kendo-grid-column :field="'Description'":width="200" ></kendo-grid-column>
 
           <kendo-grid-column :field="'Status'"  :width="170" :template="this.toggleTemplate()"></kendo-grid-column>
 
 </kendo-grid>

Vue Js code

Methods:{ 
    toggleTemplate(){
 
                 let template =
            `<label class="switch" >
            <input type="checkbox" class="user-status"  # if(Status){ # checked # }   #  v-on:click="checkboxToggle()"/>
<span class="slider round"></span></label>`;
 
        let compiledTemplate = kendo.template(template);
        return compiledTemplate.bind(this);
 
    },
     checkboxToggle(){
            //TODO Grid checkbox template event binding not working
            alert("Checkbox Toggle !!!")
    }
}



Veselin Tsvetanov
Telerik team
 answered on 07 Nov 2019
1 answer
111 views

Now I tried to use a kendo-editor.

I drag image file into the textarea and also I want to resize this image.

I want to know how to the image resize

Nikolay
Telerik team
 answered on 06 Nov 2019
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
DatePicker
Editor
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
MultiSelect
Calendar
NumericTextBox
DateInput
DateTimePicker
Editor wrapper
DataSource wrappers (package)
Scheduler wrapper
Styling / Themes
Chart wrappers (package)
Gantt wrapper
Localization
Chart
Checkbox
ComboBox
Window
Pager
Error
Upload
DropDownList wrapper
Popup
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
RadioButton
FloatingLabel
TextArea
Drawer
Stepper
DateRangePicker
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
RadioGroup
Hint
Loader
ProgressBar
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?