How can we bind event for custom checkbox on Kendo UI Grid Column using Vue Js ?

[Rahul]

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 !!!")
    }
}

[Preslav]

Hello Rahul,

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:

• https://www.telerik.com/kendo-vue-ui/components/framework/vue-templates/#toc-using-single-file-components

For example, check this test page:

• https://codesandbox.io/s/840nl43698

I hope this helps.


Regards,
Preslav
Progress Telerik

[Rahul]

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

[Rahul]

Hello @Preslav

Now I have fixed the above group header template issue so no need to solve an issue.

Thanks & Regards

Rahul

 

[Rahul]

Hello @Preslav,

Now I have fixed the above group header template issue.

Thanks @ Regards,

Rahul

[Rahul]

@Preslav please help me.

https://www.telerik.com/forums/how-can-bind-routing-link-in-kendo-ui-treeview-in-vue-js

[Preslav]

Hello Rahul,

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

[Rahul]

Thank you and sure @Preslav.

[Rahul]

@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.

[Preslav]

Hi Rahul,

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

[Rahul]

Okay, Thank you @Preslav

[Rahul]

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

 

[Viktor Tachev]

Hi 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.

• https://www.telerik.com/kendo-vue-ui/components/grid/columns/menu/

Regards,
Viktor Tachev
Progress Telerik

[Rahul]

Hello @Viktor Tachev,

I am using kendo wrapper grid in vue.

I want to  implements the percentage chart inside grid column.

How can achieve this this of functionality ?

I have attached the image please look it.

[Viktor Tachev]

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

[Rahul]

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 ?

[Veselin Tsvetanov]

Hello Rahul,

Here you will find a StackBlitz sample implementing a Kendo Vue Grid with a Kendo Chart displayed in one of its columns.

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

[Taylor]

The column menu appears when you click on the menu icon in the column header KrogerFeedback. 

[Veselin Tsvetanov]

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