I am trying to create a kendo grid with one of the column as a multiselect dropdown widget, so users can select multiple values for a column named industry in a single record. I am not able to do so.
Please help.
This is how i have prepared my grid :
$("#ListofMF").kendoGrid({
dataSource: {
data: extractedData,
schema: {
model: {
fields: {
Id: {type: "integer"},
FullName: { type: "string" },
Temp1: { type: "boolean" },
Temp2: { type: "boolean" },
Industry: { type: "string" },
//Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
//scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: true,
pageSize: 6
},
columns: [
{
title: " ",
width: 30,
field: "Id",
hidden: true
},
{
title: " ",
width: 40,
filterable: false,
headerAttributes: { style: "font-weight: bold;" },
template: '<input type="checkbox" class="isMFSelected"/>'
},
{
field: "FullName",
title: "Data",
//width: "140px",
headerAttributes: { style: "font-weight: bold;" }
},
{
field: "Temp1",
title: "Temp 1",
width: "130px",
filterable: false,
headerAttributes: { style: "font-weight: bold;" },
template: '<input type="checkbox" class="Temp1" #=Temp1? "checked=checked" : "" #/>'
},
{
field: "Temp2",
title: "Temp 2",
width: "130px",
filterable: false,
headerAttributes: { style: "font-weight: bold;" },
template: '<input type="checkbox" class="Temp1" #=Temp1 ? "checked=checked" : "" #/>'
},
{
field: "Industry",
title: "Industry",
editor: function (container, options) {
// Get the industry template and apply it to the column editor
console.log(container.html);
var industryTemplate = $("#industryTemplate").html();
container.html(industryTemplate);
}
}
]
});
<script id="industryTemplate" type="text/x-kendo-template">
@(Html.Kendo().MultiSelect()
.Name("Industry")
.DataValueField("Value")
.DataTextField("Text")
.BindTo((IEnumerable<SelectListItem>)ViewData["IndustryList"])
)
</script>