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 #)");
}
}
I had this working and have tried to identify what change caused this but since yesterday, when I try to render a vue with kedopanelbar I get the following in Firefox debugger:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. found in ---> <KendoPanelbar> <LeftNav> at src\views\LeftNav.vue <App> at src\App.vue <Root>
The kendopanelbar is still being accessed but the error seems to be more to do with webpack etc.
Can anyone suggest where I can look please?
Brian
Hello Team,
Is it possible to execute a method, when user clicks on any amount cell of pivot. Refer screen shot for more.
Thanks,
Mohan Pal
We have a number of Vue components we've built and are looking for a way render those components in a row's detail cell of a kendo grid.
Is there any guidance on how we might load a component and specify props and slots while accessing the event data?
Thanks,
Will
https://demos.telerik.com/kendo-ui/html5-diagram-sample-app
i wanna to create something that like his page, the panel bar with horizontal item.
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
I'm using TreeList component and I want to rend dropdown list in column filters, I have set filterable to true and filterable-ui to rend function, but still failed, while it works in jquery TreeList. Failed meaning is rending default string type filters, not dropdown list. And I'm sure the attribute is received by component from vue chrome plugin.
Hoping some demoes to show how to work fine.
Code as following
HTML:
<kendo-treelist :data-source="resourceDataSource"
:filterable="true">
<kendo-treelist-column :field="'name'" :width="140"></kendo-treelist-column>
<kendo-treelist-column :field="'resourceType'" :width="100" :filterable="true" :filterable-ui="resourceTypeFilterableUi" :template="typeTemplate"></kendo-treelist-column>
</kendo-treelist>
JS:
resourceDataSource:
new kendo.data.TreeListDataSource({
serverPaging:true,
serverFiltering:true,
transport:{
read:{
url:'/api/RBAC/Resource/GetResouceListByTid',
type:"post",
dataType:'json',
data:{
companyId:vm.companyId
}
}
},
page:1,
pageSize:10,
schema: {
model: {
id: "id",
parentId: "parentId",
fields:{
resourceType:{ type:'string' }
}
},
data:function (res) {
return res.data.data
},
total:function (res) {
return res.data.total
}
}
})
Rend Function:
resourceTypeFilterableUi:function(element){
element.kendoDropDownList({
dataSource: resourceType,
dataTextField: "value",
dataValueField: "id"
})
}
https://codesandbox.io/s/216z33wvjr
this is the link that show the reason of i am asking this question, seem like Vue kendo not have the function of remove and add the tab, i m using jquery and use it to add and remove the tab. Add the tab is easy but when i need to remove the tab, the fuction that i defined on the "x" seem like cannot fire the "remove" function i had create in the method of vue, seem like it was not found the method.
hi,
I want to show my binding data in kendo grid but I cant this with schema,anybody can help me? i do this:and my data transfer from my controller in "/loadlists"
<
kendo-datasource
ref
=
"datasource"
:type
=
"'get'"
:pageSize
=
"20"
:transportRead
=
"'/loadlists'"
></
kendo-datasource
>
<
kendo-grid
:height
=
"550"
:dataSourceRef
=
"'datasource'"
:groupable
=
"true"
:sortable
=
"true"
:pageable-refresh
=
"true"
:pageable-page-sizes
=
"true"
:pageable-button-count
=
"5"
:filterable
=
"true"
:columnMenu
=
"true"
:schema-model-fields
=
"schemaModelFields"
>
<
kendo-grid-column
:field
=
"'VehicleName'"
title
=
" vehicle name"
>
</
kendo-grid-column
>
<
kendo-grid-column
field
=
"user_id"
title
=
"name"
></
kendo-grid-column
>
<
kendo-grid-column
field
=
"load_id"
title
=
"load"
></
kendo-grid-column
>
<
kendo-grid-column
field
=
"load_date"
title
=
"laod date"
></
kendo-grid-
column>
</
kendo-grid
>
and my data in vue:
data() {
return {
isLoading: false,
load: {},
loads: {},
schemaModelFields: {
VehicleName: { from: "vehicle.name" }
}
};
},
At this I try to bind my data transfer from controller to kendo grid and I cant