I have been trying to find a way to use a cascading dropdown within the webdatagrid and filter the results of the 2nd dropdown box depending on the value of the first dropdown box. A major requirement I have is to make this clientside and avoid having a postback.
I have tried to fill both dropdown boxes and then apply filtering by hiding any items in the 2nd dropdown box. But have not came up with a solution on how to approach this yet. Any advice would be greatly appreciated.
Hello Jason,
Thank you for contacting us.
Currently our DropDownProvider cannot request items from the client only by design. Postback must be made in order to request items and to ensure that the item list is synced. Maybe you have noticed that ItemsRequested client event is available (same name as the server ItemsRequested event) although this event is executed right after the ItemsRequested server event and cannot be used as a single unit.
Only client side binding is available for now, online sample can be found here (with WebDropDown): http://samples.infragistics.com/aspnet/Samples/WebDropDown/Data/jQueryClientTemplates/Default.aspx?cn=drop-down&sid=1cd0d5b4-a6c5-45c2-835b-1d8b230dfb18
If you want to see the DropDownProvider equivalent, have a look at this forum thread:
http://www.infragistics.com/community/forums/t/69214.aspx
Below you can find also a sample that I have created for you in order to show you how to implement Cascading drop downs and the sequence of executed events.
Let me know if I may be of further assistance.
Thanks Zdravko, I appreciate that. Would there happen to be a way to load all the dropdown boxes on page_load and then hide certain items on one dropdown box after a selection in another is made?
As I understand you want to create the provider dynamically, from code behind. The below thread will help you to better understand how to do this:
http://www.infragistics.com/community/forums/t/65377.aspx
Also I have modified the sample from my previous replies in order to achieve your requirements, I hope that yoi will benefit from it.
protected void WebDataGrid1_Init(object sender, EventArgs e) { // Create editor providers DropDownProvider ddp1 = new DropDownProvider(); ddp1.ID = "WebDataGrid1_DropDownProvider1"; ddp1.EditorControl.DropDownContainerMaxHeight = Unit.Parse("200px"); ddp1.EditorControl.EnableAnimations = false; ddp1.EditorControl.ID = "provider1"; ddp1.EditorControl.EnableDropDownAsChild = false; ddp1.EditorControl.DropDownContainerWidth = Unit.Parse("150px"); // Create editor provider items DropDownItem ddi1 = new DropDownItem(); ddi1.Key = "ASP"; ddi1.Selected = false; ddi1.Text = "ASP"; ddi1.Value = "1"; DropDownItem ddi2 = new DropDownItem(); ddi2.Key = "PHP"; ddi2.Selected = false; ddi2.Text = "PHP"; ddi2.Value = "2"; DropDownItem ddi3 = new DropDownItem(); ddi3.Key = "JAVA"; ddi3.Selected = false; ddi3.Text = "JAVA"; ddi3.Value = "3"; ddp1.EditorControl.Items.Add(ddi1); ddp1.EditorControl.Items.Add(ddi2); ddp1.EditorControl.Items.Add(ddi3); DropDownProvider ddp2 = new DropDownProvider(); ddp2.ID = "WebDataGrid1_DropDownProvider2"; ddp2.EditorControl.DropDownContainerMaxHeight = Unit.Parse("200px"); ddp2.EditorControl.EnableAnimations = false; ddp2.EditorControl.ID = "provider2"; ddp2.EditorControl.EnableDropDownAsChild = false; ddp2.EditorControl.DropDownContainerWidth = Unit.Parse("180px"); ddp2.EditorControl.ItemsRequested += DDLProvider_ItemsRequested; ddp2.EditorControl.ClientEvents.ItemsRequested = "WebDataGrid1_DropDown_ItemsRequested"; // Add all editor providers to the grid WebDataGrid1.EditorProviders.Add(ddp1); WebDataGrid1.EditorProviders.Add(ddp2); // Create column settings EditingColumnSetting ecs1 = new EditingColumnSetting(); ecs1.ColumnKey = "CategoryBook"; ecs1.EditorID = "WebDataGrid1_DropDownProvider1"; EditingColumnSetting ecs2 = new EditingColumnSetting(); ecs2.ColumnKey = "Title"; ecs2.EditorID = "WebDataGrid1_DropDownProvider2"; // Add column settings to the cell editing behavior WebDataGrid1.Behaviors.EditingCore.Behaviors.CellEditing.ColumnSettings.Add(ecs1); WebDataGrid1.Behaviors.EditingCore.Behaviors.CellEditing.ColumnSettings.Add(ecs2); }
Hi,
Thanks for the quick reply., I really appreciate all the help! I was looking for a way to use data from a database to populate the cascading dropdowns. The below code was giving me some troubles trying to figure out how to populate the dropdowns and filter client side. The major issue I am having is using categories with the dynamic data.
The public enum Category right now is static and I was trying to get it working with data from the db.
category
{
{dynamicValues}
}
I wasn't sure how to setup the category and also how to add the dynamic category to CategoryBook = Category.{dynamicCategory}
public enum Category { ASP, PHP, JAVA } public class Book { public Category CategoryBook { get; set; } public int BookId { get; set; } public string Title { get; set; } } public class Order { public List _books; public List Books { get { return _books; } } public Order() { //init for books _books = new List(); _books.Add(new Book() { BookId = 1, CategoryBook = Category.PHP, Title = "Pro PHP: Patterns, Frameworks, Testing and More" }); _books.Add(new Book() { BookId = 2, CategoryBook = Category.PHP, Title = "Beginning PHP and MySQL: From Novice to Professional, Third Edition" }); _books.Add(new Book() { BookId = 3, CategoryBook = Category.ASP, Title = "Foundations of ASP.NET AJAX" }); _books.Add(new Book() { BookId = 4, CategoryBook = Category.ASP, Title = "Beginning ASP.NET 3.5 in C# 2008: From Novice to Professional, Second Edition" }); _books.Add(new Book() { BookId = 5, CategoryBook = Category.ASP, Title = "Pro ASP.NET MVC Framework" }); _books.Add(new Book() { BookId = 6, CategoryBook = Category.ASP, Title = "Beginning ASP.NET E-Commerce in C#: From Novice to Professional" }); _books.Add(new Book() { BookId = 7, CategoryBook = Category.JAVA, Title = "Beginning Java™ EE 6 Platform with GlassFish™ 3: From Novice to Professional" }); _books.Add(new Book() { BookId = 8, CategoryBook = Category.JAVA, Title = "Practical Liferay: Java–based Portal Applications Development" }); } }
Hello,
I was able to resolve my issue using ajax post/get and webmethods.
Thanks for all the help!
I am happy to hear that.
Thank you for using our controls.
Hi Zdravko,
So far everything has went pretty smoothly, I now have all the data I need from the database and passed back using ajax/JSON however I am having a few issues, adding items to the selected row control. After getting data back from using the first dropdown box I now need to add the items to the 2nd dropdown using jQuery or javascript, but have not been able to accomplish this, I have tried a few things that are mention on the forum but none of those worked for me. Any help on adding items to the control would be helpful, I have tried using some commands with args and sender but don't think I am using the correct ones.
Thanks
Hi Jason,
Could you please share with me what exactly is stopping you to add items into the DropDown. Basically you will need to create a dropdown item and add it to items collection. The code that you need to use is similar to this:
<script> function AddItem() { var dropDown = $find('WebDropDown1'); var item = dropDown.get_items().createItem(); item.set_text("ItemText"); item.set_value(ItemValue); dropDown.get_items().add(item); } script>
I'm sorry it's not a dropdown but a dropdownprovider in the webdatagrid. I tried using variations of the above code, but would get a "Cannot read property 'get_items' of null" on the var item.
The logic will be the same, except that you will need to access the editor first. which is not easy, because the editor is visible only when the cell is in edit mode.
You can handle EditingCode cell editing client event EnteredEditMode and from there to access the DropDownProvider (which is inheriting WebDropDown control) and have the same methods and options. The dropdown you can get from args.getEditor().
var item = args.getEditor().get_items().createItem();
item.set_text("asd");
item.set_value("asd");
args._editor.get_items().add(item)
Hello Zdravko,
I was able to use the EnteredEditMode to add an item to the dropdown list; however, if I have more than one item to add and use a for each to go through the items, it will only add the first item and then provide the error "Uncaught TypeError: Cannot read property '_callbackManager' of null" I was also unable to clear the list when I changed to another row, using the _items = "" or .dispose().
Another way to add items from the client is to directly manipulate the datasource. I have created a sample for you that will show you this approach, by my opinion you will like this one, because you can pass directly a JSON and call dataBind().
About the clear items functionality, we do not provide clearAll function or something like that, you will need to use the build in remove(item) function in order to clear the items collection:
remove:function(item){///<summary locid="M:J#Infragistics.Web.UI.DropDownItemCollection.remove">///Removes the specified DropDownItem from the collection.///</summary>///<param name="dropDownItem" type="Infragistics.Web.UI.DropDownItem">The DropDownItem that should be removed.</param> if(item != null) { var cbo = this._control._callbackManager.createCallbackObject(); cbo.serverContext.type = "remove"; cbo.clientContext.item = item; cbo.serverContext.index = item.get_index();
if (this._pi) { this._pi.set_enabled(false); } this._control._callbackManager.execute(cbo, true);
if (this._pi) { this._pi.set_enabled(true); } }},