We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
<input id="List" type="text" />
<input type="button" value="add" id="btn" />
<script>
$(function () {
var dataManager = ej.DataManager({
url: "/Home/getData",
adaptor: new ej.UrlAdaptor()
});
$("#List").ejDropDownList({
dataSource: dataManager,
fields: { text: "Name", value: "Role" }
});
$("#btn").on("click", function () {
var obj = $("#List").data("ejDropDownList"); //access control's object
data = obj.getListData();
data.push({
Name: "Jack Sparrow",
Role: "Captain"
});
obj.setModel({ dataSource: data }); // set the modified datasource
obj.selectItemByValue("Captain"); //select the value
});
});
</script> |
Hello Prince,
thank you for your reply! While your code works great, I do still run into an issue - the same one actually.
I uploaded a video so you can see what happens. I noticed you used "push" to add the entry to the DropDownList.
The problem is, I actually add the entry in a different place (a modal with a ListBox) so I can't push the data to the DropDownList as it uses the same datasource.
If I use push, wouldn't it create a duplicate entry with a different ID?
as you can see in the console it generates an ID successfully but I have to refresh the page in order to update the DropDownList field.
$("#okButton").on("click", function () {
console.log(selecteditem_id);
var obj = $("#QualifikationID").data("ejDropDownList"); //access control's object
data = obj.getListData();
//data.push({
// Name: "Jack Sparrow",
// Role: "Captain"
//});
obj.setModel({ dataSource: data }); // set the modified datasource
data = obj.getListData();
obj.selectItemByValue(selecteditem_id); //select the value
});
I tried it like this but it doesn't work....
|
$("#okButton").on("click", function () {
var obj = $("#QualifikationID").data("ejDropDownList"); //access control's object
data = obj.getListData(); // get the modified dataSource from listbox
obj.setModel({ dataSource: null }); // Empty the existing dataSource
obj.setModel({ dataSource: data }); // set the modified dataSource
obj.selectItemByValue(selecteditem_id); //select the value
}); |
Hi Prince,
I just tried it with your code - unfortunately the behaviour is the same. I have to refresh the page in order to select the new entry :(
What I tried now is this:
$(document).ready(function () {
if (localStorage.getItem('selecteditem_id') != null) {
$('#QualifikationID').ejDropDownList('selectItemByValue', localStorage.getItem('selecteditem_id'));
localStorage.removeItem('selecteditem_id');
}
else {
localStorage.removeItem('selecteditem_id');
}
});
This actually works if i use this line $('#QualifikationID').ejDropDownList('selectItemByValue', localStorage.getItem('selecteditem_id')); after the page is one loading - using it in the function it gives this error: Uncaught ejDropDownList: methods/properties can be accessed only after plugin creation
It would be ok if it'd work like this but I can't fix the above error....
EDIT: Ok, got it working - the only way to fix this was to use a time out on the document.ready function. Not too happy with that but well
