Hi,
i am generating a grid with Multi select Combo box in it using a column template.
i am able to select the multiselect combo values and able the read the selected items.
i have one more requirement, i have to select/check the values of multiselect combo values dynamically through JQuery.
Please help me how to do that? Below is the code.
This is the code of a grid, where i am creating Multiselect combo box in one of the cell.
var dataSource = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success(result);
},
update: function (e) {
e.success();
},
create: function (e) {
var item = e.result;
item.Id = result.length + 1;
e.success(item);
}
},
schema: {
model: {
id: "SNO",
fields: {
SNO: { type: "int" },
PassengerStatus: { type: "int" },
ElevatorShutdown: { type: "bool" },
TrappedPassenger: { type: "bool" },
UnitControllerStatus: { type: "bool" },
ActiveVoiceVideoCall: { type: "bool" },
controllerStatus: { type: "bool" },
Delay: { type: "int" }
}
}
}
});
//my own
$("#UnitgridPerf").kendoGrid({
dataSource: dataSource,
editable: { createAt: "bottom" },
dataBound: function (e) {
createMultiSelect(e);
},
// pageable: true,
columns: [
{
field: "SNO", width: "50px", editable: function (arg) { return true; }, headerAttributes: {
}
},
{
field: "PassengerStatus", title: "PD", editable: function (arg) { return true; }, width: "40px"
, headerAttributes: {
}
},
{
field: "ElevatorShutdown", title: "OOS", editable: function (arg) { return true; }, width: "50px"
, headerAttributes: {
}
},
{
field: "TrappedPassenger", title: "TP", editable: function (arg) { return true; }, width: "50px"
, headerAttributes: {
}
},
{
field: "UnitControllerStatus", title: "REM", width: "170px", editable: function (arg) { return false; }, template: "<select class='Multiselectval'></select>"
, headerAttributes: {
}
},
{
field: "ActiveVoiceVideoCall", title: "VC", width: "50px", editable: function (arg) { return true; }
, headerAttributes: {
}
},
{
field: "controllerStatus", title: "CTRL", width: "50px", editable: function (arg) { return true; }
, headerAttributes: {
}
},
{
field: "Delay", editable: function (arg) { return true; }, width: "50px"
, headerAttributes: {
}
},
{ command: "destroy", title: "", width: "40px" }
],
});
// code to add Multi Select Combo box to Kendo Grid Cell
var checkInputs = function (elements) {
elements.each(function () {
var element = $(this);
var input = element.children("input");
input.prop("checked", element.hasClass("k-state-selected"));
});
};
// create MultiSelect from select HTML element
function createMultiSelect(e) {
$(".Multiselectval").append(new Option('ALARM_HANDLER_TASK', enumRemComponents.ALARM_HANDLER_TASK));
$(".Multiselectval").append(new Option('PERFORMANCE_TASK', enumRemComponents.PERFORMANCE_TASK));
$(".Multiselectval").append(new Option('REM_DEVICE_AUTH_TASK', enumRemComponents.REM_DEVICE_AUTH_TASK));
$(".Multiselectval").append(new Option('SERIAL_LINK_TASK', enumRemComponents.SERIAL_LINK_TASK));
$(".Multiselectval").append(new Option('STATE_MACHINE_TASK', enumRemComponents.STATE_MACHINE_TASK));
$(".Multiselectval").append(new Option('UNKNOWN_TASK', enumRemComponents.UNKNOWN_TASK));
var grid = e.sender;
required = $(".Multiselectval").kendoMultiSelect({
itemTemplate: "#:data.text# <input type='checkbox'/>",
autoClose: false,
dataBound: function () {
var items = this.ul.find("li");
setTimeout(function () {
checkInputs(items);
});
},
change: function () {
var items = this.ul.find("li");
checkInputs(items);
}
}).data("kendoMultiSelect");
}
The above code is working properly.
Now i want to select the Multiselect combo values based on the data i got from Database., below is the code i am trying for that, but i am unable to make the values selected.
var grid = $('#UnitgridPerf').data("kendoGrid");
grid.dataSource.data(result);
for (var j = 0; j < UnitPattern.length; j++) {
if (PatternName == UnitPattern[j].PatternName) {
for (var i = 0; i < UnitPattern[j].Devicestatus[0].ComponentStatus.length; i++) {
var gridRows = grid.tbody.find('tr');
var row = $(gridRows[i]);
var rid = row.find('.Multiselectval');
alert(rid[1][UnitPattern[j].Devicestatus[0].ComponentStatus[i].Component].value);
rid[1][UnitPattern[j].DeviceStatus[0].ComponentStatus[i].Component].value.checked;
// $('.rid option[value=' + UnitPattern[j].DeviceStatus[0].ComponentStatus[i].Component + ']').attr('selected', true);
}
}
Please help on this.
5 Answers, 1 is accepted
You could use the "value" method of the MultiSelect widget for selecting a single or multiple items by their values:
You could also take a look at the following HowTo example for using MultiSelect as a custom editor in Grid:
Best Regards,
Konstantin Dikov
Progress Telerik
Rank 1
Hope you have not understand my query, can you please look at the code i have sent.
i have used Multi select combo template in a different way, and i am trying to select the multiselect combo values dynamically by reading the values from database.
based on the values from database, i am trying to select the particular value in combo box.
as you have suggested multiselect.value("Item1"); this option is not working for me.
Please look at the code snippet and let me know how can i do that?
Could you please create a dojo example with your scenario that we can work on:
I would also suggest that you avoid placing editors in the template of the columns and use the editor templates instead (as demonstrated in the HowTo article from my previous post).
Regards,
Konstantin Dikov
Progress Telerik
Rank 1
HI,
Please find the dojo for my code.
http://dojo.telerik.com/eFaDUq/2
Up to here i dont have any issue, it is working fine for me, i am saving all the grid data in to database.
When i am loading the data back from database, for ex: i have selected 1 and 2 check boxes in 'REM' column saved in to DB as record X.
when i am loading that record back, i have to show the selected column for record x i.e in this scenario i have to show as 1 and 2 check boxes are selected. i am not able to do that. for that i have used the code below.
function loadRecord()
{
var multiselect = $(".Multiselectval").select("kendoMultiSelect");
var x = multiselect[1];
for(var k=0;k<x.length;k++) // this loop is to select each and every selected option in record X
multiselect.prop(x[UnitPattern[j].Devicestatus[0].ComponentStatus[i].Component], 'selected');
}
i am not understanding how can i do this, i have to show the selected items back while loading the kendo.
Hope u have understand my query now.
And
I would also suggest that you avoid placing editors in the template of the columns and use the editor templates instead (as demonstrated in the How To article from my previous post).
As you suggested, how this Editor templates will solve my issue, while loading the record and show the selected items based on the values in DB, Please suggest that also.
Thank you very much for the provided Dojo to help illustrate your case.
I have inspected it and here is my feedback for you:
1. The column which has the Kendo UI MultiSelect is bound to a field of type int. I believe that it should be either an array of integers or an array of objects.
2. "myobject" is undefined in line 30. Could you please clarify what is myobject and if it is relevant to the scenario?
3. The schema model definition the type should be "number", not "int"
Finally, my colleague suggested that it is not a good practice to have inline editors by design in Kendo UI Grid. I suggest inspecting this Dojo which shows how to bind to a Kendo UI MultiSelect as an editor and see if it will fit your scenario.
http://dojo.telerik.com/@bubblemaster/onECEr
Kind Regards,
Alex Hajigeorgieva
Progress Telerik