This is a migrated thread and some comments may be shown as answers.

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

18 Answers 693 Views
This is a migrated thread and some comments may be shown as answers.
Rahul
Top achievements
Rank 1
Rahul asked on 13 Dec 2018, 05:19 AM

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

Sort by
0
Preslav
Telerik team
answered on 14 Dec 2018, 11:33 AM
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:
For example, check this test page:
I hope this helps.


Regards,
Preslav
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rahul
Top achievements
Rank 1
answered on 18 Dec 2018, 10:05 AM

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

0
Rahul
Top achievements
Rank 1
answered on 18 Dec 2018, 10:22 AM

Hello @Preslav

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

Thanks & Regards

Rahul

 

0
Rahul
Top achievements
Rank 1
answered on 18 Dec 2018, 10:24 AM

Hello @Preslav,

Now I have fixed the above group header template issue.

Thanks @ Regards,

Rahul

0
Rahul
Top achievements
Rank 1
answered on 04 Jan 2019, 11:33 AM
0
Accepted
Preslav
Telerik team
answered on 08 Jan 2019, 11:22 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rahul
Top achievements
Rank 1
answered on 08 Jan 2019, 11:25 AM
Thank you and sure @Preslav.
0
Rahul
Top achievements
Rank 1
answered on 15 Feb 2019, 06:41 AM

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

0
Preslav
Telerik team
answered on 18 Feb 2019, 01:53 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rahul
Top achievements
Rank 1
answered on 19 Feb 2019, 05:05 AM
Okay, Thank you @Preslav
0
Rahul
Top achievements
Rank 1
answered on 08 Aug 2019, 06:34 AM

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

 

0
Viktor Tachev
Telerik team
answered on 12 Aug 2019, 06:35 AM
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.




Regards,
Viktor Tachev
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rahul
Top achievements
Rank 1
answered on 10 Sep 2019, 07:04 AM

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.

0
Viktor Tachev
Telerik team
answered on 12 Sep 2019, 06:34 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rahul
Top achievements
Rank 1
answered on 12 Sep 2019, 08:46 AM

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 ?

0
Veselin Tsvetanov
Telerik team
answered on 16 Sep 2019, 08:38 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Taylor
Top achievements
Rank 1
answered on 05 Nov 2019, 11:16 AM
The column menu appears when you click on the menu icon in the column header KrogerFeedback
0
Veselin Tsvetanov
Telerik team
answered on 07 Nov 2019, 07:50 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Rahul
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Rahul
Top achievements
Rank 1
Viktor Tachev
Telerik team
Veselin Tsvetanov
Telerik team
Taylor
Top achievements
Rank 1
Share this question
or