how to escape a function within a html input element on kendo page

[journeyman]

 

I am using Vue Js with Kendo.

I need to escape a function within a HTML input element. : 

This is the input values
 <input type="checkbox" class="checkbox" :class="{ 'checked': myVar }">
This is what i tried to do but it did not work: 
 <input type="checkbox" class="checkbox" \#:class="{ 'checked': myVar }"#>

 

 

[Vessy]

Hi,

In Vue.js, to escape Vue directives when working within third-party libraries like Kendo UI, you can use the v-bind directive explicitly. However, Kendo UI often uses #: ... # for template expressions, which might conflict with Vue's syntax.

If you are using Kendo templates with Vue components, though, make sure you're not mixing the templating syntaxes. You can try computing the class externally in Vue:

<input type="checkbox" class="checkbox" :class="computedClass">

computed: {
  computedClass() {
    return { checked: this.myVar };
  }
}

I hope this helps.

Regards,
Vessy
Progress Telerik

[journeyman]

hello Vessy. thank you for your answer. 

I think I actually need to escape the v-model rather than the v-bind.

<input type="checkbox"  \# v-model="checked" \# >

<input type="checkbox"  \# v-model="checked" \# >

[Vessy]

Hi,

To properly escape v-model inside Kendo templates, you should use kendo.bind or manually handle events.

Option 1: Use #:v-model Syntax (Escaping Vue in Kendo)

<input type="checkbox" #:v-model="checked">

Option 2: Bind checked and Use @change Instead
Since v-model is just syntactic sugar for :checked + @change, you can manually handle the binding:

<input type="checkbox" :checked="checked" @change="checked = $event.target.checked">

If inside a Kendo template, use:

<input type="checkbox" #:checked="checked" @change="checked = $event.target.checked">

 

 

[journeyman]

Hi Vessy.

Thanks for your help.  i tried both solutions but it created an error message:

kendo.core.js:439 Uncaught Error: Invalid template:'

 

 

 

[Nikolay]

Hi 

Since you're getting the "Invalid template" error in kendo.core.js, it's likely that Kendo is not parsing the template correctly when using Vue directives.

Instead of v-model, manually bind and update the checkbox state using ref:

<input type="checkbox" ref="checkboxRef" @change="updateChecked">

<script>
export default {
  data() {
    return {
      checked: false
    };
  },
  methods: {
    updateChecked(event) {
      this.checked = event.target.checked;
    }
  }
};
</script?

If Using Kendo Template Inside a Grid or ListView You can avoid v-model by manually handling the checkbox state:

<script type="text/x-kendo-template" id="checkbox-template">
    <input type="checkbox" #= checked ? 'checked="checked"' : '' # onclick="updateChecked(event)">
</script>

<script>
function updateChecked(event) {
    let row = $(event.target).closest("tr"); 
    let grid = $("#grid").data("kendoGrid");
    let dataItem = grid.dataItem(row);
    
    dataItem.checked = event.target.checked; // Update the Vue/Kendo data model
}

</script>

Let me know if you this helps.

Regards,

Nikolay

 

 

 

 

[journeyman]

Hello Nikolay.

thank you for your reply. its still not working. 

i tried the ref but nothing happened: 

ref="checkboxRef"

Does Kendo ref work by default or do i need to import the ref.

Also did you mean for the ref to be called checkboxRef or should I used checked.

I tried both checkbox and checkboxRef. Neither worked:

export default {
  data() {
    return {
      
       checkboxRef:true,

      checked: true,


    };
  },

 

 

[Nikolay]

Hi,

In Vue 3, ref is part of the Composition API, and you need to import it when using it inside <script setup> or in the setup() function. However, if you're using the Options API, you don’t need to import ref.

The ref="checkboxRef" in your template only gives you a reference to the DOM element—it doesn't automatically link to Vue’s data().
Kendo UI templates do not natively work with Vue's ref, so we need to manually handle updates.

 Solution 1: Vue + Kendo Grid Checkbox Handling (Without v-model)

<script type="text/x-kendo-template" id="checkbox-template">
    <input type="checkbox" #= checked ? 'checked="checked"' : '' # onclick="updateChecked(event)">
</script>
<script>
export default {
  data() {
    return {
      gridData: [
        { id: 1, name: "Item 1", checked: false },
        { id: 2, name: "Item 2", checked: true }
      ]
    };
  },
  mounted() {
    $("#grid").kendoGrid({
      dataSource: {
        data: this.gridData,
        schema: {
          model: { id: "id" }
        }
      },
      columns: [
        { field: "name", title: "Item" },
        { 
          field: "checked", 
          title: "Select", 
          template: kendo.template($("#checkbox-template").html()) 
        }
      ]
    });
  }
};

// Function to update Vue & Kendo data model
window.updateChecked = function(event) {
    let row = $(event.target).closest("tr"); 
    let grid = $("#grid").data("kendoGrid");
    let dataItem = grid.dataItem(row);
    
    dataItem.set("checked", event.target.checked); // Update Kendo model
};
</script>

Solution 2: Using Vue Ref (ref) Instead of v-model

<template>
  <input type="checkbox" ref="checkboxRef" @change="updateChecked" />
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const checkboxRef = ref(null);

    function updateChecked() {
      console.log("Checkbox State:", checkboxRef.value.checked);
    }

    return { checkboxRef, updateChecked };
  }
};
</script>

Regards,

Nikolay