Telerik Forums
Kendo UI for Vue Forum
1 answer
273 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
2 answers
3.0K+ views

I've found answers to this for other Kendo products, but I can't figure out the syntax for the Vue wrapper. I have a column in a grid that I want to show "yes" or "no" for based on the datasource value, which is boolean. This answer: https://www.telerik.com/forums/kendo-grid-showing-yes-or-no-instead-of-true-or-false specifies that I should do something like this:

columns: [
    { field: "BooleanVal", template: "#= BooleanVal ? 'yes' : 'no' #" }
]

I'm not using "columns", rather am using `<kendo-grid-column>`. I've tried several things along the lines of

<kendo-grid-column :field="active" :template="#= active ? 'yes' : 'no' #"></kendo-grid-column>

But nothing seems to work. How do I display "yes" or "no" for a boolean value in a kendo-grid-column?

AJ
Top achievements
Rank 1
 answered on 08 Feb 2019
1 answer
70 views

Hi  

I want to rend a menu components(and sometimes other third-parts vue components) at one of columns in my treelist.

It works well at first rend time, but after filter certain value, the result row appears 2 menu, and when clear the filter, 3 menu appeared.  

I finished a demo to explain the problem base on demo in vue template page.demo

I try to change as following, then the filter value cannot change at first filter....

columnTemplate (e) {
if(this.$el.querySelectorAll(`.titleTemplate_${e.id}`).length=== 0){
return {
template: TemplateTitle,
templateArgs: e
}
}else{
return {}
}
}

 

It will be really helpful if a well-worked demo provided.

Thanks!

Dimitar
Telerik team
 answered on 04 Feb 2019
1 answer
305 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
5 answers
839 views

Hi

Is it possible to switch to a card view in the grid component? If not, is it possible to keep the filter options from <kendo-grid> and then have a switch to change between the <kendo-grid-column>'s and another custom view?

Or maybe another suggestion?

 

 

Viktor Tachev
Telerik team
 answered on 01 Feb 2019
1 answer
324 views

Dear All,

I'm trying to use Kendo Grid and DataSource Tranposrt as following:

<kendo-datasource ref="employeesData"
:transport-read-url="'http://api.example.com/api/users'"
:transport-read-type="'GET'"
:transport-read-data-type="'json'"
:transport-read-content-type="'application/json'"
:transport-update-url="'http://api.example.com/api/users'"
:transport-update-type="'PUT'"
:transport-update-content-type="'application/json'"
:transport-update-data-type="'json'"
:transport-destroy-url="'http://api.example.com/api/users'"
:transport-destroy-type="'DELETE'"
:transport-destroy-data-type="'json'"
:transport-create-url="'http://api.example.com/api/users'"
:transport-create-type="'POST'"
:transport-create-data-type="'json'"
:transport-parameter-map="parameterMap"
:schema-model-id="'id'"
:schema-model-fields="schemaModelFields"
:batch='true'
:page-size='15'>
</kendo-datasource>

 

When I try to update row by Edit, I receive the following message:

PUT http://api.example.com/api/users 405 (Method Not Allowed)

{message: "", exception: "Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException",…}

   exception: "Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException"

   file: "/var/www/api.leanapy.com/vendor/laravel/framework/src/Illuminate/Routing/RouteCollection.php"
   line: 255
   message: ""

The same for DELETE

My API works fine when I use Vue (bootstrap-vue) and Vuex.

Appreciate if you can advice the way to solve it.

Thanks

 

Georgi
Telerik team
 answered on 30 Jan 2019
3 answers
351 views

There is a an example of menu, but how can I add router-link to menu item?

 

<kendo-menu-item text="Baseball">
<kendo-menu-item text="Top News"></kendo-menu-item>
<kendo-menu-item text="Radio Records"></kendo-menu-item>
</kendo-menu-item>

 

Thank you in advance

Plamen
Telerik team
 answered on 29 Jan 2019
1 answer
112 views

I'm new in using Kendo UI Vue and right now I'm struggling to find example how I can use Grid Component with DataSource and where all CRUD is happening not directly with API via Transport-read ... etc, but via VUEX Store components where all logic for data handling is set. 

Appreciate if somebody can help.

Thank you very much in advance.

Plamen
Telerik team
 answered on 28 Jan 2019
1 answer
95 views

I'm attempting to set the label values for a kendo-switch component and the messages prop doesn't appear to function as demonstrated here: https://www.telerik.com/kendo-vue-ui/components/inputs/switch/labels/

Yet, the old on-label and off-label props appear to work (https://www.telerik.com/kendo-vue-ui/components/inputs/api/switch/Switch/). I think there is some disconnect with the version of the npm for @progress/kendo-inputs-vue-wrapper and the main @progress/kendo-ui

Currently I am including:

"@progress/kendo-inputs-vue-wrapper": "^2018.3.1025",

"@progress/kendo-ui": "^2018.3.1219",

 

The kendo-inputs-vue-wrapper doesn't appear to have a 2018.3.1219 version. Am I missing something needed to make the latest version work?

Joana
Telerik team
 answered on 25 Jan 2019
2 answers
98 views

Hello Team,

 

Am looking to remove the default column named "All Categories, All Products" etc, is there any property which is need to be set true/false ?

Have a look at the screen shot to know more.

 

Linda
Top achievements
Rank 1
 answered on 24 Jan 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
Styling / Themes
DataSource wrappers (package)
Scheduler wrapper
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
Button
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
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
SpeechToTextButton
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?