example of dropdown in kendo gride using jquery

<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=="Not Started")

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

else if(dataItem.Status=="In Progress")

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

else

(this).cells[4].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)

.kendoDropDownList({

dataTextField: "Text",

dataValueField: "Value",

autoBind: false,



dataSource: data

});

                  



}

});

}

});

</script>