Nov 22, 2016, 10:54 AM
Dependency multiple selection combo box in Grid
I created grid with one combo box column. i need output like ---if I select first row combo box values the remaining grid rows combo box not have first row selected values.. same way all the rows combo boxes has different Values for different rows.
Ex:
Total combo box values are
var listdata = [{ Text: 'SampleA', Value: '11' },
{ Text: 'SampleB', Value: '12' },
{ Text: 'SampleC', Value: '13' },
{ Text: 'SampleD', Value: '14' },
{ Text: 'SampleE', Value: '15' },
{ Text: 'SampleF', Value: '16' },
{ Text: 'SampleG', Value: '17' },
{ Text: 'SampleH', Value: '18' }];
if i selected first row combo with 'SampleB','SampleC'
then remaining all row combo has all above values except 'SampleB','SampleC'
For this i taken combo box event as 'BeforeQuery'. It is working fine but combo box not expanded up to 3 times attempt... after that it is working fine...please suggest first attempt works ...
i tried with other events like render,expand,active....but no use
CSHTML Code:
X.ComponentColumn()
.Editor(true)
.ID("FileSelectionColumn")
.Text("File Mapping")
.Sortable(false)
.DataIndex("SelectedFileIds")
.MinWidth(150)
.Flex(2)
.Component(
X.MultiCombo().Delimiter(",")
.FieldLabel("")
.ValueField("Value")
.ForceSelection(false)
.EmptyText("Select --")
.DisplayField("Text")
.Listeners(li => { li.BeforeQuery.Fn = "OnFilesAccessMerge"; })
.Store(X
.Store()
.AutoLoad(false)
.Model(
X.Model()
.IDProperty("Value")
.Fields(
new ModelField("Value", ModelFieldType.String) { Mapping = "Value" },
new ModelField("Text", ModelFieldType.String) { Mapping = "Text" }
))
)
),
JS Code:
var listdata = [{ Text: 'SampleA', Value: '11' },
{ Text: 'SampleB', Value: '12' },
{ Text: 'SampleC', Value: '13' },
{ Text: 'SampleD', Value: '14' },
{ Text: 'SampleE', Value: '15' },
{ Text: 'SampleF', Value: '16' },
{ Text: 'SampleG', Value: '17' },
{ Text: 'SampleH', Value: '18' }];
var OnFilesAccessMerge = function (item) {
var currentSelectedComboValues = this.value;
if (item.combo.store != undefined) {
item.combo.store.loadData([], false);
if (App.ElectronicDeliverableListStore != undefined) {
var totalSelectedComboValues = [];
if (App.ElectronicDeliverableListStore.data.items != null && App.ElectronicDeliverableListStore.data.items.leng th > 0) {
$.each(App.ElectronicDeliverableListStore.data.ite ms, function (storeDataIndex, storeDataItem) {
if (storeDataItem.data.SelectedFileIds != null && storeDataItem.data.SelectedFileIds != "" && storeDataItem.data.SelectedFileIds.length > 0) {
$.each(storeDataItem.data.SelectedFileIds, function (arrindex, arrdata) {
if (currentSelectedComboValues.indexOf(arrdata) < 0) {
// item.combo.setValue(arrdata);
totalSelectedComboValues.push(arrdata);
}
});
}
});
if (totalSelectedComboValues.length > 0) {
$.each(listdata, function (listItemIndex, listItemData) {
if (totalSelectedComboValues.indexOf(listItemData.Val ue) < 0) {
item.combo.getStore().add(listItemData);
}
});
}
else {
$.each(listdata, function (listItemIndex, listItemData) {
item.combo.getStore().add(listItemData);
});
}
}
}
}
}
Ex:
Total combo box values are
var listdata = [{ Text: 'SampleA', Value: '11' },
{ Text: 'SampleB', Value: '12' },
{ Text: 'SampleC', Value: '13' },
{ Text: 'SampleD', Value: '14' },
{ Text: 'SampleE', Value: '15' },
{ Text: 'SampleF', Value: '16' },
{ Text: 'SampleG', Value: '17' },
{ Text: 'SampleH', Value: '18' }];
if i selected first row combo with 'SampleB','SampleC'
then remaining all row combo has all above values except 'SampleB','SampleC'
For this i taken combo box event as 'BeforeQuery'. It is working fine but combo box not expanded up to 3 times attempt... after that it is working fine...please suggest first attempt works ...
i tried with other events like render,expand,active....but no use
CSHTML Code:
X.ComponentColumn()
.Editor(true)
.ID("FileSelectionColumn")
.Text("File Mapping")
.Sortable(false)
.DataIndex("SelectedFileIds")
.MinWidth(150)
.Flex(2)
.Component(
X.MultiCombo().Delimiter(",")
.FieldLabel("")
.ValueField("Value")
.ForceSelection(false)
.EmptyText("Select --")
.DisplayField("Text")
.Listeners(li => { li.BeforeQuery.Fn = "OnFilesAccessMerge"; })
.Store(X
.Store()
.AutoLoad(false)
.Model(
X.Model()
.IDProperty("Value")
.Fields(
new ModelField("Value", ModelFieldType.String) { Mapping = "Value" },
new ModelField("Text", ModelFieldType.String) { Mapping = "Text" }
))
)
),
JS Code:
var listdata = [{ Text: 'SampleA', Value: '11' },
{ Text: 'SampleB', Value: '12' },
{ Text: 'SampleC', Value: '13' },
{ Text: 'SampleD', Value: '14' },
{ Text: 'SampleE', Value: '15' },
{ Text: 'SampleF', Value: '16' },
{ Text: 'SampleG', Value: '17' },
{ Text: 'SampleH', Value: '18' }];
var OnFilesAccessMerge = function (item) {
var currentSelectedComboValues = this.value;
if (item.combo.store != undefined) {
item.combo.store.loadData([], false);
if (App.ElectronicDeliverableListStore != undefined) {
var totalSelectedComboValues = [];
if (App.ElectronicDeliverableListStore.data.items != null && App.ElectronicDeliverableListStore.data.items.leng th > 0) {
$.each(App.ElectronicDeliverableListStore.data.ite ms, function (storeDataIndex, storeDataItem) {
if (storeDataItem.data.SelectedFileIds != null && storeDataItem.data.SelectedFileIds != "" && storeDataItem.data.SelectedFileIds.length > 0) {
$.each(storeDataItem.data.SelectedFileIds, function (arrindex, arrdata) {
if (currentSelectedComboValues.indexOf(arrdata) < 0) {
// item.combo.setValue(arrdata);
totalSelectedComboValues.push(arrdata);
}
});
}
});
if (totalSelectedComboValues.length > 0) {
$.each(listdata, function (listItemIndex, listItemData) {
if (totalSelectedComboValues.indexOf(listItemData.Val ue) < 0) {
item.combo.getStore().add(listItemData);
}
});
}
else {
$.each(listdata, function (listItemIndex, listItemData) {
item.combo.getStore().add(listItemData);
});
}
}
}
}
}