I have a grid with dropdown and a checkbox. Whenever I have checked the checkbox (multi-select) I want to get the value of the drop downlist that is selected. How can I do that using kendoui.

Please help me here is my fiddle.

And my code:

<div id="grid"></div>

<input type="button" value="gridSelectedItem" onclick="selectElementContents( document.getElementById('grid') );"
    />

<div>
<input id="dropdownList" runat="server" /></div>
<script type="text/x-kendo-template" id="CheckboxTemplate">
<li unselectable="off" class="k-item nowrap check-item">
    <input type="checkbox" name="#= text #" value="#= value #" class="check-input" #= selected ? "checked" : "" #/>
    <span>#= text #</span>
</li>

I have a grid with dropdown and a checkbox. Whenever I have checked the checkbox (multi-select) I want to get the value of the drop downlist that is selected. How can I do that using kendoui.

Please help me here is my fiddle.

And my code:

<div id="grid"></div>

<input type="button" value="gridSelectedItem" onclick="selectElementContents( document.getElementById('grid') );"
    />

<div>
<input id="dropdownList" runat="server" /></div>
<script type="text/x-kendo-template" id="CheckboxTemplate">
<li unselectable="off" class="k-item nowrap check-item">
    <input type="checkbox" name="#= text #" value="#= value #" class="check-input" #= selected ? "checked" : "" #/>
    <span>#= text #</span>
</li>

• javascript
• html
• kendo-ui

• Sorry, even with the jsfiddle I am having a hard time understanding your goal. Do you mean for the ddl to be in the grid? – Trey Gramann Commented Feb 25, 2013 at 16:37
• so for late reply Trey Gramann you are right that is my goal.can you can please prove some solution for this jsfiddle/MG89G/253/#run – user123 Commented Apr 4, 2013 at 11:11

3 Answers 3

On a side not - The template that you have defined does not need to contain li element - it is generated automatically for you.

To retrieve the model related to the item you can use the dataItem method of the ddl client object and the index of the option(that's why you need to fix your template because the index will be wrong).

Here is the magical snippet:

var ddl = $('#dropdownList').data().kendoDropDownList;
var model = ddl.dataItem($input.closest('.k-item').index());
alert(model.text);

I updated your fiddle to see it in action.

This does it for me:

1. The following code is for my shift kendo drop down:

<div class="form-group">
  <label>Shift</label>
  <div class="input-group">
    @(Html.Kendo().DropDownListFor(t => t.ShiftId)
      .Name("ShiftId")
      .DataTextField("Text")
      .DataValueField("Value")
      .OptionLabel("...Select Shift...")
      .DataSource(source => source.Read(read => read.Action("GetShifts", "AssessmentResult")))
      .HtmlAttributes(new { style = "width:292px", @required = "required" })
    )
  </div>
</div>

2. I have also button with on click event:

<button type="button" id="show">Show</button>  

3. The script is like the following which alerts the selected shift value (NB: I have done some research on Telerik Kedno Forum)

<script type="text/JavaScript">
  $('#show').click(function(event) {
    var ShiftId = $("#ShiftId").data("kendoDropDownList").value();            
    alert(ShiftId);

}