i have a custom editor for a column in a grid which is a multi select dropdownlist. unfortunately i am unable to access the drop down list data during the transport update. how do i structure the controls to provide access during update?
the custom editor code looks much like this.
When i click update on the row, it appears that the last selected value is bound to the input control. since i want to iterate over the entire drop down list during the transport update via a function to get the selected items to pass to the controller, i need to access the dropdownlist - which is most likely out of scope.
i have tried creating the dropdownlist outside of the custom editor function with global scope but when i reference it as
ddl is null - which is not what i expected.
i have tried naming <input> for finding but as expected it comes up undefined.
of course a more elegant approach would be to declare the model item as a collection type but i am sure that is not possible and it would not know which items to select even if collections were possible.
so, how do i structure the controls for access during update? i am sure that this is a general programming / jquery problem, but the latter is a weak spot for me.
PS
through additional testing i found out that i was successfully creating a dropdownlist with proper scope such that DDL is accessible in other parts of the javascript. so having created this, how can i make it the dropdownlist used in the custom editor defined above? the goal is to select the checked check boxes during update/save. the various syntax experiments with appendTo have failed. creating a new dropdownlist within the function limits scope and loses data.
PPS
after further work, i have confirmed that scope is the issue - so i need to append an existing dropdownlist in the custom editor - not create a new one. another approach is to process a change / check event - ie when a selection has been made - to store the state of the selections in a variable. or figure out how to use a list/collection/array as the binding target for the column's data. my first option should be trivial but it is not (for me). of course the first option assumes that i can get the state of each of the associated check boxes.
the custom editor code looks much like this.
function CustomDropDownEditor(container, options) {
$('<
input
" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "json",
transport: {
read: "/controller path/GetSomeData"
}
}
});
}
When i click update on the row, it appears that the last selected value is bound to the input control. since i want to iterate over the entire drop down list during the transport update via a function to get the selected items to pass to the controller, i need to access the dropdownlist - which is most likely out of scope.
i have tried creating the dropdownlist outside of the custom editor function with global scope but when i reference it as
var ddl = $("#AlertSourcesDropDown").data("kendoDropDownList");
ddl is null - which is not what i expected.
i have tried naming <input> for finding but as expected it comes up undefined.
of course a more elegant approach would be to declare the model item as a collection type but i am sure that is not possible and it would not know which items to select even if collections were possible.
so, how do i structure the controls for access during update? i am sure that this is a general programming / jquery problem, but the latter is a weak spot for me.
PS
through additional testing i found out that i was successfully creating a dropdownlist with proper scope such that DDL is accessible in other parts of the javascript. so having created this, how can i make it the dropdownlist used in the custom editor defined above? the goal is to select the checked check boxes during update/save. the various syntax experiments with appendTo have failed. creating a new dropdownlist within the function limits scope and loses data.
var DDL = $('#MyDropDownList').kendoDropDownList({
dataTextField: "Name",
template: $("#CheckboxTemplate").html(),
dataValueField: "Name",
dataSource: { type: "json",
transport: { read: '/path/GetData' }
}
});
PPS
after further work, i have confirmed that scope is the issue - so i need to append an existing dropdownlist in the custom editor - not create a new one. another approach is to process a change / check event - ie when a selection has been made - to store the state of the selections in a variable. or figure out how to use a list/collection/array as the binding target for the column's data. my first option should be trivial but it is not (for me). of course the first option assumes that i can get the state of each of the associated check boxes.