Example of multiselect dropdown in kendo gride

<div class="section-header accounthead">

<div class="title">



Re-Packaging Summary
</div>

<div class="form-horizontal">

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">

<div class="form-group">

@Html.LabelFor(model => model.CDATE, htmlAttributes: new { @class = "control-label col-md-2" })

<div class="col-md-10">



@Html.TextBoxFor(model => model.CDATE)

@Html.HiddenFor(m => m.SDATE)
@Html.ValidationMessageFor(model => model.CDATE, "", new { @class = "text-danger" })

</div>

</div>

</div>

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">

<div class="form-group">

@Html.LabelFor(model => model.WAREHOUSE, htmlAttributes: new { @class = "control-label col-md-2" })

<div class="col-md-10">

@Html.DropDownListFor(model => model.SWAREHOUSE, new SelectList(Model.WAREHOUSE, "Value", "Text"), new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.SWAREHOUSE, "", new { @class = "text-danger" })

</div>

</div>

</div>

</div>

<div id="" class="searchWrap">

<div class="search-input"><input type="text" id="txtSearch" name="txtSearch" /></div>

<div class="search-btn">

<input type="button" id="btnSearch" class="k-button" value="" />

</div>

</div>

</div>

<div class="tableWrap">

<table class="admincontent table-responsive" style="width:100%;">

<tr>

<td>

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

</td>

</tr>

</table>

</div>

<script type="text/javascript">

$(function () {

$('#CDATE').kendoDatePicker();

$('#SWAREHOUSE').change(function () {



additionalData();
var grid = $('#RePackagingSummary-grid').data('kendoGrid');



grid.dataSource.read();

} );
$("#RePackagingSummary-grid").kendoGrid({



dataSource: {
type: "json",



transport: {

read: {
url: "@Html.Raw(Url.Action("KendoData", "Repackaging"))",

type: "POST",

dataType: "json",



data: additionalData

}

},

schema: {
data: "Data",

total: "Total",

errors: "Errors",



model: {
id: "Id",



fields: {
Name: { editable: false, type: "string" },

LineItemsNo: { editable: false, type: "Int" },

AssignedTo: { editable: true, type: "string" },

Status: { editable: false, type: "string" },



}

}

},
error: function(e) {



display_kendoui_grid_error(e);
this.cancelChanges();



},

pageSize: @(defaultGridPageSize),
serverPaging: true,

serverFiltering: false,

serverSorting: false,



},

filterable: {
extra:false,



operators: {
string:{ contains: "Contains"}



}

},

sortable: {
mode: "single",

allowUnsort: false



},

editable: {
confirmation: true,

mode: "inline"



},

pageable: {
refresh: true,



pageSizes: [@(gridPageSizes)]

},
scrollable: false,

selectable: true,



columns:

[

{
field: "Id",

template: "#=Id#",

hidden: true



},

{
field: "Name",

title: "Warehouse",

template: '<a href="/admin/Repackaging/Details/#=Id#">#=Name#</a>'



},

{
field: "LineItemsNo",

title: "Line Items Number",



　

},

{
field: "AssignedTo",

title: "Assigned To",



editor: categoryDropDownEditor

},

{
field: "Status",

title: "Status",



　

},

{
title: "Action",

width:"10%",



command: [{
name: "edit",

text: "",

imageClass: "k-icon k-edit", click: Edit



}]},
], dataBound: function ()



{

　
if ($('#RePackagingSummary-grid').find("tr").length==1) {

$('#RePackagingSummary-grid').find('tbody')

.append('<tr class="kendo-data-row"><td colspan="5" style="text-align:center"><b>No Results Found!</b></td></tr>');



}
//var grid = this;

//grid.tbody.find('>tr').each(function(){

// var dataItem = grid.dataItem(this);

// if(dataItem.Status=="Order Placed")

// (this).cells[7].style.color = "#bb0000";

// else if(dataItem.Status=="Awaiting Approval")

// (this).cells[7].style.color = "#0000FF ";

// else

// (this).cells[7].style.color = "#068700";

//})



}

　

});
function additionalData() {

return {

StartDate:$('#SDATE').val(),

EndDate:$('#CDATE').val(),

Search: $('#txtSearch').val(),

WarehouseId:$('#SWAREHOUSE :selected').val()



};

}
$('#btnSearch').click(function () {

var grid = $('#RePackagingSummary-grid').data('kendoGrid');



grid.dataSource.page(1);
return false;



});
$('#txtSearch').keydown(function (event) {

if (event.keyCode == 13) {

$("#btnSearch").click();

return false;



}

});
$('#txtSearch').val('Search');

$('#txtSearch').focus(function(){

$(this).val('');



});
$('#txtSearch').blur(function(){

if($(this).val().length==0)

$('#txtSearch').val('Search');



});
function Edit(e)



{

}
function categoryDropDownEditor(container, options)



{

$.ajax({
cache: false,

type: "POST",

url: '../Repackaging/FillDropDown',

success: function (data)



{
                   




$('<select required data-text-field="Text" value="" data-value-field="Id" data-bind="value:Value"/>')



.appendTo(container)

.kendoMultiSelect({
dataTextField: "Text",

dataValueField: "Value",

}).data("kendoMultiSelect").setDataSource(data);



}

});

}

});
</script>