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

Accessing check box template from inside dropdownlist

14 Answers 641 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 22 Aug 2012, 10:14 PM
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.

14 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 27 Aug 2012, 12:53 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Greg
Top achievements
Rank 1
answered on 03 Oct 2012, 09:55 PM
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/
0
Nick
Top achievements
Rank 1
answered on 28 Nov 2012, 08:08 AM
 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?
0
Greg
Top achievements
Rank 1
answered on 28 Nov 2012, 04:37 PM
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
0
Thanos
Top achievements
Rank 1
answered on 10 Dec 2012, 10:47 AM
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
0
Patrick
Top achievements
Rank 1
answered on 28 Dec 2012, 03:24 PM
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

0
Greg
Top achievements
Rank 1
answered on 02 Jan 2013, 07:22 AM
Hey Thanos,

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

Greg
0
Greg
Top achievements
Rank 1
answered on 02 Jan 2013, 07:31 AM
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
0
PureText SMS API
Top achievements
Rank 1
answered on 02 Jan 2013, 07:44 AM
Thanks Greg, this example really helps.
0
Telesto
Top achievements
Rank 1
answered on 02 Jan 2013, 11:34 AM
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
0
Patrick
Top achievements
Rank 1
answered on 04 Jan 2013, 11:22 AM
Hi Greg,
Thank you very much for your help. This example really helps me a lot :)

Best Regards,
Ritesh
0
PureText SMS API
Top achievements
Rank 1
answered on 22 Jan 2013, 03:43 AM
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 }
      ];
0
Igor
Top achievements
Rank 1
answered on 21 Nov 2013, 10:08 PM
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
0
David
Top achievements
Rank 1
answered on 22 Feb 2014, 12:07 AM
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.
Tags
DropDownList
Asked by
Chris
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Greg
Top achievements
Rank 1
Nick
Top achievements
Rank 1
Thanos
Top achievements
Rank 1
Patrick
Top achievements
Rank 1
Greg
Top achievements
Rank 1
PureText SMS API
Top achievements
Rank 1
Telesto
Top achievements
Rank 1
Igor
Top achievements
Rank 1
David
Top achievements
Rank 1
Share this question
or