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 !!!")
}
}
18 Answers, 1 is accepted
Generally speaking, the Kendo UI templates are not able to bind the event handlers to the rendered elements. Thus, to achieve the desired outcome, we should use the native Vue templates:
For example, check this test page:
I hope this helps.
Regards,
Preslav
Progress Telerik
Thank you very much @Preslav, I have Implemented above solution now working fine.
I have one more facing issue in a kendo grid group header template for displaying a number of rows counts in the group header.
https://www.telerik.com/forums/how-can-we-add-kendo-ui-grid-group-header-template-in-vue
Hello @Preslav
Now I have fixed the above group header template issue so no need to solve an issue.
Thanks & Regards
Rahul
Hello @Preslav,
Now I have fixed the above group header template issue.
Thanks @ Regards,
Rahul
@Preslav please help me.
https://www.telerik.com/forums/how-can-bind-routing-link-in-kendo-ui-treeview-in-vue-js
I see that my colleague Dimitar answered the other forum. If you have any further questions, I would suggest following the discussion there.
Regards,
Preslav
Progress Telerik
@Preslav I am facing the issue for TreeView component.
Please help me to create the Kendo UI TreeView component using Vue js for look like attach the image file.
The focus of this thread moved from the Grid to the TreeView. Having said that, could you please ask your question in another forum? This will help us and our customers follow the issues and their resolutions better.
Thank you in advance for your understanding.
Regards,
Preslav
Progress Telerik
Hi Preslav
I hope are you good.
I have facing issue for Kendo UI Wrapper Grid component to hide and show columns dynamically in vue.
Please suggest me how to achieved hide and show columns functionality in wrapper grid in vue.
Regards
Rahul
Showing or hiding columns is available in the Grid Vue wrapper component. In order to enable the feature you can enable the columnMenu option for the Grid.
Regards,
Viktor Tachev
Progress Telerik
Hi Rahul,
Check out the article below that illustrates how a Chart can be nested in the Grid widget.
https://docs.telerik.com/kendo-ui/knowledge-base/use-nested-chart
With that said, please submit each new question in a separate ticket. This way the information in a given thread will be consistent and easier to use as reference in the future. Furthermore, it will enable us to keep better track of the support activity and provide a better service.
Regards,
Viktor Tachev
Progress Telerik
Hello @Viktor Tachev
In your above solution is implemented on Jquery but i am using vue js.
So please help me how can impalement this solution in Vue ?
Hello Rahul,
Also, in case you have any further questions, which are not directly related to the initial topic of the current thread ("How can we bind event for custom checkbox on Kendo UI Grid Column using Vue Js ?"), I would recommend you to open a separate ticket/forum thread for each of them. That would allow us to provide you with the est targeted assistance on each case.
Regards,
Veselin Tsvetanov
Progress Telerik
Hi Taylor,
May I ask you to explain a bit in detail what you are referring to? do you face any issues when trying to bind some event in a Grid Column? If that is not the case, I would recommend you to open a separate dedicated thread for your specific case. Please provide further details on what the issue is and a runnable sample replicating the behavior in question.
Regards,
Veselin Tsvetanov
Progress Telerik