kendo ui：如何删除绑定到一些comboBox的dataSource的dataItem，在combobox内部dataBound事件 [英] kendo ui: how to remove a dataItem of a dataSource bound to some comboBox, inside combobox dataBound event
问题描述
我有一个网格，在一些列的内部，我已经创建了一个组合框编辑UI，使用columns.editor函数。
我的目标是每次用户从组合框中选择一些值，同时填充新创建的网格记录，这个值将从下一个记录的组合框的列表选项中删除
。
我试过的一件事情如下所示：
function equipmentDropDownEditor container，options）{
var equipmentComboBox = $（'< input id =equipmentDropDownEditorrequired data-text-field =namedata-value-field =namedata-bind =value： + options.field +'/>'）
.appendTo（container）
.kendoComboBox（{
autoBind：false，
dataSource：equipmentTypesDS，
dataBound ：function（e）{
var equipmentData = e.sender.dataSource.data（）;
if（currentlyInsertedEquipmentTypes.length> 0）{
for（var i = 0; i
$ .each（equipmentData，function（index，selectedEquipmentData）{
if selectedEquipmentData.name == currentInsertedEquipmentTypes [i]）{
var dataItem = e.sender.dataSource.at（index）;
console.log（dataItem：+ dataItem.name +正在删除）;
e.sender.dataSource.remove（dataItem）;
}
}）;
}
}
}
}）;
}
我创建了一个全局数组变量名为currentlyInsertedEquipmentTypes保存所有用户已经选择的值
（例如，如果用户在网格中创建了2条记录，并且在组合框中选择了laptop选项，在组合框中选择了工作站选项
在组合框dataBound事件内部，我检查用户是否已经选择了值（currentlyInsertedEquipmentTypes。）。 length> 0）
如果他有，我找到相应的对象在绑定的dataSource内，我删除它，以便它不会在下一个记录的组合框列表中可用。
即使数据项删除，整个事件也会崩溃。
我缺少一些数据项删除后应该做的事情？我应该以某种方式将数据源重新绑定到组合框？
任何帮助将非常感激。
----组合框数据源代码
var equipmentTypesDS = new kendo.data.DataSource（{
transport：{
read：{
url：api / equipment_types，
type：GET，
data：{
//equipment_category ：1
}，
dataType：json
}
}，
schema：{
data：data，
total ：total
}
}）;
--- kendo网格代码：
$（＃popup_equipment）。kendoGrid（{
dataSource：{
schema：{
model：{
id：equipment_type_id，
fields：{
equipment_type_id：{editable：false}，
name：{}，// validation：{required：true}，defaultValue：LAPTOP，
items：{type：number，defaultValue：1，validation：{required：true， 1}}
}
}
}
}，
toolbar：[create]，
列：[
{ name，title：εξοπλισμός，width：300px，editor：equipmentDropDownEditor，template：＃= name＃}，
{field：items，title：πλήθος 80px}，
{command：[destroy]，title：& nbsp;，width：100px}
]，
// editable：inline // true，
editable：{confirmation：false}，
scrollable：false，
selectable：false
}）;
$（＃popup_equipment）。kendoGrid（{
dataSource：{
schema：{
model：{
id：equipment_type_id，
字段：{
equipment_type_id：{editable：false}，
name：{}，// validation：{required：true}，defaultValue：LAPTOP，
items：{ type：number，defaultValue：1，validation：{required：true，min：1}}
}
}
}
} create]，
列：[
{field：name，title：εξοπλισμός，width：60％，editor：equipmentDropDownEditor，template：＃= name＃
{field：items，title：πλήθος，width：20％}，
{command：[destroy]，title：& nbsp; 20％}
]，
可编辑：{confirmation：false}，
可滚动：false，
可选：false，
save：function（e）{
console.log（GRID SAVE EVENT！ ，e）;
var equipment_name = e.values.name;
equipmentTypesDS.get（equipment_name）.used = true;
console.log（equipmentTypesDS，equipmentTypesDS）;
console.log（END OF GRID SAVE EVENT！）;
}
}）;
function equipmentDropDownEditor （container，options）{
var equipmentComboBox = $（'< input id =equipmentDropDownEditorrequired data-text-field =namedata-value-field =namedata-bind = '+ options.field +'/>'）
.appendTo（container）
.kendoComboBox（{
autoBind：false，
dataSource：equipmentTypesDS，
}）;
}
var equipmentTypesDS = new kendo.data.DataSource（{
transport：{
read：{
url：api / equipment_types，
type：GET，
data：{
//equipment_category：1
}，
dataType ：json
}
}，
schema：{
data：data，
total：total，
model：{
id：name
}
}，
filter：{field：used，operator：neq，value：true}
}
我建议一个不同的方法。
示例：我使用城市列表（您的插入设备）定义一个DataSource，如下所示：
var cityDS = new kendo.data.DataSource（{
data：[
{City：Seattle，used：false} ，
{City：Tacoma，used：false}，
{City：Kirkland，used：false}，
{City：Redmond，used：false} b $ b {City：London，used：false}，
{City：Philadelphia，used：false}，
{City：New York，used：false}，
{City：Boston，used：false}
]，
schema：{
model：{
id：City
} $ b b}，
filter：{field：used，operator：eq，value：false}
}
正如你看到的，我添加了一个名为的字段简单地说如果 City 已经使用或不是。我把它设置为这个DataSource的 id 。此外，我设置一个过滤器说，我只想要使用 id等于（
编辑器功能几乎是yours： p>
function cityDropDownEditor（container，options）{
var equipmentComboBox = $（'< input required data-text-field = Citydata-value-field =Citydata-bind =value：'+ options.field +'/>'）
.appendTo（container）
.kendoComboBox b $ b autoBind：false，
dataSource：cityDS
}）;
}
但没有 dataBound 或任何其他事件处理程序。
最后，在 Grid 中保存记录时，过滤器从列表中选择该城市。像：
var grid = $（＃grid）。kendoGrid（{
dataSource：ds，
editable：popup，
pageable：true，
toolbar：[create]，
列：
[
{ ，width：90，title：First Name}，
{field：LastName，width：200，title：Last Name}，
{field：City，width：200 ，editor：cityDropDownEditor}
]，
save：function（e）{
console.log（e，e）;
var city = e.model.City;
cityDS.get（city）.used = true;
}
}）。data（kendoGrid）;
这可能会工作，如果你启动网格没有元素，否则你必须方便地初始化使用字段。它可能需要一些额外的代码处理案例，因为改变城市，但从你的描述，似乎不是这样的情况。
您可以在这里看到这里运行： http://jsfiddle.net/OnaBai/ZH4aD/
I have a grid, inside of some column of which I have created a combobox editing UI, using columns.editor function. My goal is every time a user selects some value from the combobox -while populating a newly created grid record-, this value to be removed from the list options of a next record's combobox.
One of the things i've tried is shown below:
function equipmentDropDownEditor(container, options) {
var equipmentComboBox = $('<input id="equipmentDropDownEditor" required data-text-field="name" data-value-field="name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: equipmentTypesDS,
dataBound: function(e) {
var equipmentData = e.sender.dataSource.data();
if(currentlyInsertedEquipmentTypes.length > 0){
for(var i=0;i<currentlyInsertedEquipmentTypes.length;i++){
$.each( equipmentData, function( index, selectedEquipmentData ) {
if (selectedEquipmentData.name == currentlyInsertedEquipmentTypes[i]){
var dataItem = e.sender.dataSource.at(index);
console.log("dataItem: " + dataItem.name + " is being removed");
e.sender.dataSource.remove(dataItem);
}
});
}
}
}
});
}
I've created a global array variable named "currentlyInsertedEquipmentTypes" inside of which I hold all the user's already selected values (for example if the user has created 2 records inside the grid and has selected "laptop" option in the combobox of the first and "workstation" option in the combobox of the second --> currentlyInsertedEquipmentTypes = ["laptop", "workstation"] ).
Inside the combobox dataBound event I check whether the user has already selected values (currentlyInsertedEquipmentTypes.length>0) and if he has, I locate the corresponding object inside the bound dataSource and I remove it, so that it wont be available in the next record's combobox list. This is where the whole thing crashes even though the data item removal takes place.
Am i missing something that i should do after the data item removal? Should i rebind the datasource to the combobox in some way? Any help would be much appreciated.
[EDIT]
---- The combobox datasource code
var equipmentTypesDS= new kendo.data.DataSource({
transport: {
read: {
url: "api/equipment_types",
type: "GET",
data: {
//"equipment_category": 1
},
dataType: "json"
}
},
schema: {
data: "data",
total: "total"
}
});
--- the kendo grid code:
$("#popup_equipment").kendoGrid({
dataSource: {
schema:{
model:{
id: "equipment_type_id",
fields:{
equipment_type_id: { editable: false },
name: { }, //validation: {required: true}, defaultValue: "LAPTOP",
items:{ type: "number", defaultValue:1, validation: { required: true, min: 1} }
}
}
}
},
toolbar: ["create"],
columns: [
{ field: "name", title: "εξοπλισμός", width: "300px", editor: equipmentDropDownEditor, template: "#=name#" },
{ field: "items", title:"πλήθος", width: "80px"},
{ command: ["destroy"], title: " ", width: "100px" }
],
//editable: "inline",//true,
editable:{confirmation: false},
scrollable: false,
selectable: false
});
[EDIT 2]
$("#popup_equipment").kendoGrid({
dataSource: {
schema:{
model:{
id: "equipment_type_id",
fields:{
equipment_type_id: { editable: false },
name: { }, //validation: {required: true}, defaultValue: "LAPTOP",
items:{ type: "number", defaultValue:1, validation: { required: true, min: 1} }
}
}
}
},
toolbar: ["create"],
columns: [
{ field: "name", title: "εξοπλισμός", width: "60%", editor: equipmentDropDownEditor, template: "#=name#" },
{ field: "items", title:"πλήθος", width: "20%"},
{ command: ["destroy"], title: " ", width: "20%" }
],
editable:{confirmation: false},
scrollable: false,
selectable: false,
save: function(e){
console.log("GRID SAVE EVENT! ", e);
var equipment_name = e.values.name;
equipmentTypesDS.get(equipment_name).used = true;
console.log("equipmentTypesDS", equipmentTypesDS);
console.log("END OF GRID SAVE EVENT!");
}
});
function equipmentDropDownEditor(container, options) {
var equipmentComboBox = $('<input id="equipmentDropDownEditor" required data-text-field="name" data-value-field="name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: equipmentTypesDS,
});
}
var equipmentTypesDS= new kendo.data.DataSource({
transport: {
read: {
url: "api/equipment_types",
type: "GET",
data: {
//"equipment_category": 1
},
dataType: "json"
}
},
schema: {
data: "data",
total: "total",
model:{
id: "name"
}
},
filter: { field: "used", operator: "neq", value: true }
});
I would suggest a different approach. Instead of removing the element filter it out.
Example: I define a DataSource with a list of Cities (your Inserted Equipment) as follow:
var cityDS = new kendo.data.DataSource ({
data : [
{ City : "Seattle", used : false },
{ City : "Tacoma", used : false },
{ City : "Kirkland", used : false },
{ City : "Redmond", used : false },
{ City : "London", used : false },
{ City : "Philadelphia", used : false },
{ City : "New York", used : false },
{ City : "Boston", used : false }
],
schema : {
model : {
id : "City"
}
},
filter: { field: "used", operator: "eq", value: false }
});
As you can see I added a field called used that simply says if that City is already used or not. And I set it as id of this DataSource. In addition, I set a filter saying that I only want those where used id equal (eq) to false.
The editor function is pretty much yours:
function cityDropDownEditor(container, options) {
var equipmentComboBox = $('<input required data-text-field="City" data-value-field="City" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataSource: cityDS
});
}
but with no dataBound or any other event handler.
Finally in the Grid when I save a record, I filter that city from the list. Something like:
var grid = $("#grid").kendoGrid({
dataSource: ds,
editable : "popup",
pageable : true,
toolbar: [ "create" ],
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 200, title: "Last Name" },
{ field: "City", width: 200, editor : cityDropDownEditor }
],
save : function(e) {
console.log("e", e);
var city = e.model.City;
cityDS.get(city).used = true;
}
}).data("kendoGrid");
This might work if you start the Grid with no elements otherwise you would have to conveniently initialize the used field. It might require some additional code dealing with cases as changing the City but from your description, doesn't seem to be the case.
You can see this running here : http://jsfiddle.net/OnaBai/ZH4aD/
这篇关于kendo ui：如何删除绑定到一些comboBox的dataSource的dataItem，在combobox内部dataBound事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
