This is a migrated thread and some comments may be shown as answers.

Help with Multi Select Drop Down List Column in Grid

4 Answers 388 Views
Grid
This is a migrated thread and some comments may be shown as answers.
tony
Top achievements
Rank 1
tony asked on 20 Sep 2012, 05:55 PM
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.
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.

4 Answers, 1 is accepted

Sort by
0
Arun
Top achievements
Rank 1
answered on 21 Sep 2012, 06:57 PM
The low tech solution to this problem is to save the selected values in a global variable on the close event of the dropdownlist. problem solved.
0
tony
Top achievements
Rank 1
answered on 23 Sep 2012, 09:50 PM
a new problem emerges. the dropdownlist will not close. after selection of an item in the list, the dropdown used to close. now it does not. i have no idea what i did to lose dropdown closure. i had created a close event where it worked fine. but this broken behavior is preventing the update event from executing.

oddly enough, i want the dropdown to stay open until the dropdown arrow is clicked to close it. but since the desired behavior results in hung functionality, the ideal behavior is not desired at this point.

PS. the culprit was setting global variable (array) to null.
0
Mo
Top achievements
Rank 1
answered on 25 Oct 2012, 05:57 PM
Did you resolve this? Suddenly my drop downs are staying open unexpectedly even when I try to choose a value? I cannot get them to close. I can't figure out what I did to cause this.
0
tony
Top achievements
Rank 1
answered on 25 Oct 2012, 06:45 PM
yes - my problem (as noted in the posting above yours) was that i was assigning null to a global variable which somehow was interfering with the operation of the dropdown. once i corrected that problem, the dropdown started working properly again. in other words, the drop down remained dropped until i clicked outside of the dropdown.
Tags
Grid
Asked by
tony
Top achievements
Rank 1
Answers by
Arun
Top achievements
Rank 1
tony
Top achievements
Rank 1
Mo
Top achievements
Rank 1
Share this question
or