Accessing check box template from inside dropdownlist

[Chris]

I have a check box template made that looks something like this

<script type="text/x-kendo-template" id="CheckboxTemplate">

   <input type="checkbox" name="#= text #" value="#= value #" ${selected ?"checked" : "" }/>

   <span> #= text # </span>

</script>

I then have a dropdownlist which uses that template which looks like this, the kendoCustomDropDownList is something I made so that the drop down would not close when checking things in the dropdownlist.

var data = [

      { text: "test1", value: "1", selected: false },

      { text: "test2", value: "2", selected: false },

      { text: "test3", value: "3", selected: true },

      { text: "test4", value: "4", selected: false }

      ];

                 

       $("#dropDownList").kendoCustomDropDownList({

           dataTextField: "text",

           dataValueField: "value",

           template: $("#scriptTemplate").html(),

           dataSource: data,

           placeholder: "Select..."

       });

 

       var ddl = $("#dropDownList").data("kendoCustomDropDownList");

What I now need to do is make it so that when more than one checkbox is checked the text that displays in the dropdown should be multiple... . I'm having trouble accessing the selected field in the data object. I'm not sure how to approach this any help would be appreciated.

[Petur Subev]

Hello Chris,

I am afraid that the DropDownList does not support such multi-line text to be displayed in the text area. I am sorry for the inconvenience.

Kind regards,
Petur Subev
the Telerik team

[Greg]

This can be done by preventing the dropdown from displaying the selected item with preventDefault(), then setting the text as each checkbox is selected/deselected.

http://jsfiddle.net/gregmarkv/jNnD5/

[Nick]

 Greg, its a great example, however I need someone's help to extend it further
1. clicking on the label closes the box, it shouldn't
2. the placeholder isnt working in the example
3. Need check all, uncheck all options.

Can anyone build on greg's example?

[Greg]

Hey Nick,

I went ahead and updated the example to correct the behavior when clicking on the label and include check all.

http://jsfiddle.net/jNnD5/

Greg

[Thanos]

Hey Greg,

Thanks for the answer and the last fiddle,it helped me a lot to understand the whole concept and use it.
I was trying to convert your example to a ComboBox insted of a DropDownList but I'm missing some stuff as it seems...could you check it a bit and help me please?

I want it to be excactly like your example but instead I want to use a kendoComboBox so that I can have the suggest etc. and the value of the updates on the checked items will be passed on a text area as you will see on my failed attempt.

Here it is: http://jsfiddle.net/Rq7FH/3/

Of what I can see,there seems to be a problem with the `e.preventDefault(); ` on the select event handler,but most of all the `list.find(..)` doesn't seem to work at all...Is it possible to implement this with a ComboBox?

Thanks in Advance

[Patrick]

Hi Greg and Nick,
it is a very good example. it help me a lot. I am having an issue to get the value of all the selected checkbox in dropdown.
my scenario is that i am having a button on form on clicking on that button i want the value of all the selected checkbox.
can you please help me to resolve the issue.

Thanks in Advance

Regards,
Ritesh

[Greg]

Hey Thanos,

When creating the ComboBox, you forgot to change the .data("kendoDropDownList") to .data("kendoComboBox").

Greg

[Greg]

Hey Patrick/Ritesh,

I updated the example at http://jsfiddle.net/jNnD5/ to add a button that retrieves the current value. All you need to do is get the text of the dropDownList:

$("#dropDownList").data("kendoDropDownList").text()

Greg

[PureText SMS API]

Thanks Greg, this example really helps.

[Telesto]

Hey Greg/Thanos,
I checked the Fiddle for the ComboBox and changed Thanos' example according to Greg's instructions into this:
http://jsfiddle.net/Rq7FH/69/

It seems to work fine in the beginning,changing the textbox value according to the checked values in the combobox droplist..However if I try to type something in the combobox so that i can use the search function it provides,everything gets messed up,I can't check properly,the preventDefault doesn't seem to work and the value of the textbox doesn't change at all...

I am trying to make this work so that I can check from the droplist or check after I type something in the combobox and with either way in the value of the textbox the checked items are added and it is not reset or loses the other checked items except for the last checked etc...
Any hints?

Thanks

[Patrick]

Hi Greg,
Thank you very much for your help. This example really helps me a lot :)

Best Regards,
Ritesh

[PureText SMS API]

How can we get back selected values in the same kind of array that we passed in the dropdown
Something like below : 

var selectedData = [

      { text: "test1", value: "1", selected: true },

      { text: "test3", value: "3", selected: true }

      ];

[Igor]

Can somebody show me how to modify it so when the user checks Select All checkbox he is getting back "Select All" string instead of listing all checked values?

Basically I want to send either list of checkboxes selected - when Select All is not checked or "Select All" string when Select All checkbox is checked. Thanks

[David]

Greg;
Almost 2 years old and this is one of the best post I have seen.
I am trying to use the kendo().ListView to do the same thing, I don't what the section to close at all.
My main two questions are:
     1. How to structure the javascript to when using the ListView Widget?
2. How do I preselect the list based on a string of previously selected Items on load, then return the newly selected items back to the server in the same string when returning from an update.