I'm using the Kendo for Vue native grid and I'm trying to make an asynchronous API call inside of my cell render function. I'm sure there has to be a way around this, but I just can't seem to find an answer. You can see the example at the Stackblitz link below. The cell using a render function never gets rendered in this example. However, if you remove the setTimeout it works as expected.
https://stackblitz.com/edit/kendoui-nativegrid-cellrender-async
Thanks,
Ferg
I have below item in my 'columns' in 'data' function of my grid component. How can I write it in <kendo-grid-column> tag format?
I also need my isActive to render as a radio button all the time. Please help with these 2 things.
{ cell: "myTemplate", filterable: false, width: "210px" }
This is what I have so far. It display all columns except my v-slot.
<grid :style="{ height: '300px', width: '60%' }"
Hi,
I have simple two questions.
I'm comparing both Kendo Vue Native components and wrapper components to migrate from Kendo jQuery.
Wrapper components
-> If I set :columnMenu="true", I can see a list of menus like sort ascending and it also has 'Columns' menu which shows or hides columns by checking or unchecking check boxes.
However When I implement same components by using native components, the list doesn't show 'Column' menu.
Can someone tell how to show the column menu???
And, if I already have license for jQuery, is it possible to get license for Vue without extra payment??
Hi All,
We wish to start new project using Kendo UI and using Vue.Js. My requirement Listing Below
In my application i had above 10 menus. When i click each menu it will load grid with data. When i login application it will land in default page with grid and corresponding menu will be active. when i click second menu i want to minimize first grid data and load second grid data, when i click third menu again i want to minimize second grid data and load the third grid data. like that remaining menus. But when i click first or second or third minimized grid (not in menu) i want show that grid data . its will show only existing data(not going to data base and retrieve data). How will achieve this requirement using Kendo UI and vue.js? i don't use session state kind of state management methods
Hello,
I want to integrate the Kendo UI Grid to my project (composition api + TypeScript).
In specific I need help to undertand al least one integration feature in the grid, the filtering
I readed this documentation: https://www.telerik.com/kendo-vue-ui/components/grid/filtering/
I make the corresponding settings on my code but the filtering doesn't work.
So, do you have an example or better documenattion to undertand the integration, but using Composition API + TypeScript
Thanks in advance
Hello forum,
can the Listview component be sortable and draggable? I would like to influence the order of the displayed Listview entries with the mouse. I would appreciate any feedback. Best regards
I am facing issue with display number of rows in a particular group header in kendo grid group header template in single file component in Vue.
This is my code.
<kendo-datasource ref=
"localDataSource"
:data=
"filteredUsers"
:group=
'{ field : "Role", aggregates: [ { field: "Role", aggregate: "count" }] }'
>
</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=
"170"
:group-header-template=
'headerTemplate'
></
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
data () {
return {
users:[ {
"UserId":1,
"UserName":"Rahul",
"UserType":"System Users",
"Role":"Super Admin",
"AssignedGroups":"Sales",
"Status":true,
"Email":"rahul@motadata.com",
"Description":"Rahul is a java developer"
},
{
"UserId":2,
"UserName":"Meet",
"UserType":"System Users",
"Role":"Super Admin",
"AssignedGroups":"Finance",
"Status":false,
"Email":"meet@motadata.com",
"Description":"meet is a CA"
},
{
"UserId":3,
"UserName":"Ravi1",
"UserType":"System Users",
"Role":"Admin",
"AssignedGroups":"Sales",
"Status":true,
"Email":"ravi@motadata.com",
"Description":"Ravi is a java developer"
},
{
}]
}
},
Methods:{
headerTemplate () {
return kendo.template("Role #=value# (#= count #)");
}
}
Hi,
Is it possible to initialize the grid (native) via the CDN service? I've only tried the grid wrapper in this way :(