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 want to save the values of multiple checkboxes to a single array like so:
https://codepen.io/ktsn/pen/wXbPLR
However this approach won't work with the kendo checkboxes since they only return a boolean:
https://stackblitz.com/edit/7bgzdd?file=src/main.vue
What's the best option here if I want to use multiple kendo checkboxes and save their values to a single array?
Hello
I'm using the kendo Vue wrapper to implement a grid. I want to have the first column of my grid to be a checkbox column so i can select rows. As the docs suggested I wrote a selectable="true" kendo grid colomn. But no checkboxes are visible, I checked the DOM and it's because there are only input type checkbox tags with class "k-checkbox" added and not the nessecary labels with class "k-checkbox-label". I'm not sure if I'm missing something or the kendo grid column with binding :selectable isn't working properly.
<
kendo-grid
ref
=
"vehicleGrid"
:data-source-ref
=
"'vehicleDataSource'"
:groupable
=
"true"
:sortable
=
"true"
:resizable
=
"true"
>
<
kendo-grid-column
:selectable
=
"true"
:width
=
"50"
></
kendo-grid-column
>
...Other columns....
</
kendo-grid
>
Thanks for helping me!
Kind regards
Hello All,
How can possible for adding checkbox in MultiSelect option ?
if checked 1 item in MultiSelect then show item text but if more than one item is selected then I want to display the item count.
let me know if its possible.
Regards,
Rahul
Hi i want to ask about search in columns filter grid table multiselect checkbox like in this demo Link
so i want to trigger function and hit API when search data in multiselect checkbox. is there any way to achieve it? i tried following some way from doc but still fail to implement
my code right now :
}" />
},
Hello,
I need to use a column filter with checkboxes on my current grid. I want the checkboxes to have values from all the possible data from the server instead of only the data that I got on the current page.
This means that when the column filter is getting open, I need to make a call to the server in order to get all the data I need.
Can you please provide me a way to do, because I can't find one.
Thanks
Nevermind, I solved it. I saw that there is a property dataItems. This raised another question. How can I make a loading animation for the dropdown while I m waiting to get my data?
Is there a way to disable just the checkbox in the dropdowntree? I need to be able to select and drill down in each node, but also need some checkboxes to be disabled. So a node could be disabled, but I would still like to drill down and select items inside that node that are enabled.
"myDataSource" has a "isEnabled" property that is set to true or false.
How can I disable just the checkbox in the control below
<dropdowntree
:data-source="myDataSource"
tagMode="single"
:autoClose=false
:checkboxes-check-children="true"
:check-all="true"
dataTextField="text"
dataValueField="id"
style="width: 100%;"
height="auto"
>
</dropdowntree>
Hello,
I am trying to follow along the examples in the docs, and I have tried to create a TreeView that has collapsible nodes, and checkboxes.
I am encountering some strange issues, such as:
Since this is pretty basic behavior, I am sure I have misconfigured something or I am entirely missing something.
Can you provide some help ?
You can find a sample here: https://stackblitz.com/edit/vue-qzba9x?file=src/App.vue
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 !!!")
}
}
Using kendo UI for VueJs.
In kendo wrapper grid, I am using pagination and each page contain 10 rows. And also use checkbox to select any row.
If user select some rows on first page and move to another page then selected rows of that page get clear, when navigate to another page.
Expected - user can select some rows of current page and move to any other page and select the some rows on another page.
When user move to any page, selection rows should not get clear. All selected rows persists when user back to current page.