example of dropdonw in kendo gride in razor

@using Nop.Services.Catalog

@model ProductModel



@{

var defaultGridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().DefaultGridPageSize;

var gridPageSizes = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSizes;



}

@if (Model.Id > 0)



{

<div class="section-header accounthead">







<div id="CreateManufacture" style="display:none;">

@Html.Partial("ManufacturerCreate", Model)

</div>

<div class="options k-button-add">

<a href="#" class="k-button" id="viewManufacturePopup">Add Manufacture<span class="infoIconinBtn"><img src="~/Administration/Content/images/plusicon.png" alt="" /></span></a>

</div>

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

<div class="searchWrap">

<div class="search-input">@Html.TextBoxFor(model => model.SearchProductManufacture, new { placeholder = "Search" })</div>

<div class="search-btn">

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

</div>

</div>

</div>

</div>

<div class="clearer"></div>

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

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

<h5>Are you sure to delete this Manufacture?</h5>

<div class="marginTop">

<button class="delete-confirm k-button">Yes</button>

<button class="delete-cancel k-button">No</button>

</div>

</script>

<script>

$(document).ready(function () {

$('#viewManufacturePopup').click(function(){

var window = $('#CreateManufacture');

if (!window.data('kendoWindow')) {



window.kendoWindow({

modal: true,

title: 'Add Manufacture',

actions: ['Close'],



width:700,

draggable: true,

resizable: false,

visible: false,

//height:700



});

}

window.data('kendoWindow').center().open();

return false;



});

　

function additionalData() {

return {

searchManufacture: $('#SearchProductManufacture').val()



}

}

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

//search

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

grid.dataSource.page(1); //new search. Set page size to 1

//grid.dataSource.read(); we already loaded the grid above using "page" function

return false;



});

$("#@Html.FieldIdFor(model => model.SearchProductManufacture)").keydown(function (event) {

if (event.keyCode == 13) {

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

return false;



}

});

$("#productmanufacturers-grid").kendoGrid({



dataSource: {

type: "json",



transport: {

read: {

url: "@Html.Raw(Url.Action("ProductManufacturerList", "Product", new { productId = Model.Id}))",

type: "POST",

dataType: "json",



data:additionalData

}

,update: {

url:"@Html.Raw(Url.Action("ProductManufacturerUpdate", "Product"))",

type: "POST",

dataType: "json"



},

destroy: {

url: "@Html.Raw(Url.Action("ProductManufacturerDelete", "Product"))",

type: "POST",

dataType: "json",



}

},

schema: {

data: "Data",

total: "Total",

errors: "Errors",



model: {

id: "Id",



fields: {

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

//ManufacturerId: { editable: true, type: "number" },

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

DisplayOrder:{ editable: true, type: "int",



validation: {

required:true,

Percentagevalidation: function (input) {

if (input.is("[name='DisplayOrder']") && input.val() != "") {

input.attr("data-Percentagevalidation-msg", "DisplayOrder should be in proper format");

return /^[1-9][0-9]*$/.test(input.val());



}

return true;



}

}

}

}

}

},

requestEnd: function (e) {

if (e.type == "destroy" || e.type == "update") {

this.read();



window.location.href=window.location.href;

}

},

error: function(e) {

//showError(e.errors);

//display_kendoui_grid_error(e);

// Cancel the changes

this.cancelChanges();



},

pageSize: @(defaultGridPageSize),

serverPaging: true,

serverFiltering: false,

serverSorting: true



},

filterable: {

extra:false,



operators: {

string:{ contains: "Contains"}



}

},

sortable: {

mode: "single",

allowUnsort: false



},

pageable: {

refresh: true,



pageSizes: [@(gridPageSizes)]

},

//edit: function(e) {

// if (e.model.isNew()) {

// //little hack here

// //pre-select the first value of kendoui dropdownlist datasource

// //for some reasons (maybe, bug) it always sends 0

// //if no value has been selected (changed) in the dropdownlist

// if (allManufacturers.length > 0) {

// e.model.ManufacturerId = allManufacturers[0].Id;

// }

// }

//},



editable: {

confirmation: true,

mode: "inline"



},

scrollable: false,



columns: [

{

field: "Id",

template: "#=Id#",

hidden: true



},

//{

// field: "ManufacturerId",

// title: "ManufacturerId",

// //width: 200,

// editor: manufacturerDropDownEditor,

// template: "#:Manufacturer#"

//},



{

field: "Manufacturer",

title: "Manufacturer Name",



editor: manufacturerDropDownEditor,

//width: 100,

filterable: true



},

{

field: "ManufacturePartNumber",

title: "Manufacture Part Number",

// width: 100,

filterable: true



} ,{

field: "DisplayOrder",

title: "Display Order",

// width: 100,

filterable: false



} ,

{

title: "Action",



command: [{

name: "edit",

text: "",

title: "Edit"



}, {

name: "Delete", text:"", imageClass: "k-icon k-delete", click: function (e) {



e.preventDefault();

var dataItem = this.dataItem($(e.target).closest("tr"));

//*******

var kendoWindow = $("<div />").kendoWindow({

title: "Confirm",

resizable: false,

modal: true,



width:500,

height:200

});

kendoWindow.data("kendoWindow")

.content($("#delete-confirmation").html())



.center().open();

kendoWindow

.find(".delete-confirm,.delete-cancel")

.click(function() {

if ($(this).hasClass("delete-confirm")) {

var dataSource = $("#productmanufacturers-grid").data("kendoGrid").dataSource;



dataSource.remove(dataItem);

dataSource.sync();

}

kendoWindow.data("kendoWindow").close();



})

.end()

}

}],

//width: 200



}],

//dataBound: function () {

// var cnt = $('#productmanufacturers-grid').data('kendoGrid').dataSource.total();

// if (cnt == 0) {

// $('#productmanufacturers-grid').find('tbody')

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

// }

//}



　

} );

});

//$('.k-filter').click(function(){

// if ($('#productmanufacturers-grid').find("tr").find("td[name='c']").text()=='No Results Found!') {

// location.href=window.location.href;

// }

//});

//local datasource

var allManufacturers = [

@for (int i = 0; i < Model.AvailableManufacturers.Count; i++)



{

var manufacturerItem = Model.AvailableManufacturers[i];



<text>

{

Id: @(manufacturerItem.Value),

Name: "@(Html.Raw(HttpUtility.JavaScriptStringEncode(manufacturerItem.Text)))"



}

</text>

if (i != Model.AvailableManufacturers.Count - 1)



{

<text>,</text>

}

}

];

function manufacturerDropDownEditor(container, options) {

$('<input required data-text-field="Name" value="" data-value-field="Id" data-bind="value:ManufacturerId"/>')



.appendTo(container)

.kendoDropDownList({

autoBind: false,



dataSource: allManufacturers

});

}

</script>



}

else


{

@T("Admin.Catalog.Products.Manufacturers.SaveBeforeEdit")



}