Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) Dynamically assign dropdown list items (Read 7874 times)
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Dynamically assign dropdown list items
Dec 16th, 2014 at 9:55pm
Print Post  
Hi there,

I was trying to implement 3 dropdown lists on new event window(the small window to create new event), the listitems are from location, tasks, and resources.

There is no issue to load items while page load. But what if assign the listitems dynamically?

I mean, I first select A from location dropdownlist(A, B , C, D, E), then task dropdownlist only populate items as "A1, A2, A3...", if select B from location dropdownlist(A, B , C, D, E), then the task dropdownlist only populate items as "B1, B2, B3..."

Same to resources dropdownlist, it populates its items based on tasks dropdownlist selected item.

Is that possible to do that all on client side? If every dropdownlist selectedIndex changed causes postback, the page will be too slow

Thank you!

  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 509
Joined: Jun 17th, 2010
Re: Dynamically assign dropdown list items
Reply #1 - Dec 17th, 2014 at 6:57am
Print Post  
Hi,

Please have a look at the discussions here: http://mindfusion.eu/Forum/YaBB.pl?num=1399302286/0#6 and here: http://mindfusion.eu/Forum/YaBB.pl?num=1399302286/15#15. I believe you can find the solution to your query there.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Re: Dynamically assign dropdown list items
Reply #2 - Dec 17th, 2014 at 7:06pm
Print Post  
Thank you, I'll try if I could assign them from xml file

Lyubo wrote on Dec 17th, 2014 at 6:57am:
Hi,

Please have a look at the discussions here: http://mindfusion.eu/Forum/YaBB.pl?num=1399302286/0#6 and here: http://mindfusion.eu/Forum/YaBB.pl?num=1399302286/15#15. I believe you can find the solution to your query there.

Regards,
Lyubo

  
Back to top
 
IP Logged
 
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Re: Dynamically assign dropdown list items
Reply #3 - Dec 24th, 2014 at 2:54pm
Print Post  
Deleted
« Last Edit: Dec 30th, 2014 at 8:41pm by Xylon »  
Back to top
 
IP Logged
 
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Re: Dynamically assign dropdown list items
Reply #4 - Dec 29th, 2014 at 3:29pm
Print Post  
Say now I have 3 dopdownlists, in dropdown A I have items A1, A2

Then I have loaded items A11, A12, A13, A21, A22, A23 into dropdown B.  Here A11, A12, A13 are related to item A1 of dropdown A,
then A21, A22, A23 are related to item A2 of dropdown A.

So if I select item A2 from dropdown A, then I want dropdown B only keeping its items A21, A22, and A23.

Yes code like
Code (Javascript)
Select All
form.getControls()["location"].element.remove(1);
 


could remove some items by the index order.

But what if I select item A1 from dropdown A after I have done the operations above?   In the operations above I had removed items of A1 since I had selected A2.  Then is there any way that I could recall A1 items?

Thank you!


Lyubo wrote on Dec 17th, 2014 at 6:57am:
Hi,

Please have a look at the discussions here: http://mindfusion.eu/Forum/YaBB.pl?num=1399302286/0#6 and here: http://mindfusion.eu/Forum/YaBB.pl?num=1399302286/15#15. I believe you can find the solution to your query there.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 509
Joined: Jun 17th, 2010
Re: Dynamically assign dropdown list items
Reply #5 - Jan 5th, 2015 at 9:37am
Print Post  
Hi,

In general, you could delete all items in the second dropdown when the selected index changes in the first one and then populate it with the correct items.

To achieve that you can either generate all your data server-side and cache it on the client - i.e. a two-dimensional array variable to hold the values for A1, A2, A3, etc.; or you can use AJAX to query the server for the needed data for the second dropdown.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Re: Dynamically assign dropdown list items
Reply #6 - Jan 20th, 2015 at 6:19pm
Print Post  
But on client side, how to add a location collection with id and name to the dropdown?

say I have two arrays, one stores the id list, one store name list, then to add the first id and first name to create one location collection to dropdown?

Lyubo wrote on Jan 5th, 2015 at 9:37am:
Hi,

In general, you could delete all items in the second dropdown when the selected index changes in the first one and then populate it with the correct items.

To achieve that you can either generate all your data server-side and cache it on the client - i.e. a two-dimensional array variable to hold the values for A1, A2, A3, etc.; or you can use AJAX to query the server for the needed data for the second dropdown.

Regards,
Lyubo

  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 509
Joined: Jun 17th, 2010
Re: Dynamically assign dropdown list items
Reply #7 - Jan 21st, 2015 at 7:16am
Print Post  
Hi,

Below is a modification of a snippet from a sample project from this post: http://mindfusion.eu/Forum/YaBB.pl?num=1399302286/17#17:

Code (Javascript)
Select All
...

else if (form.getId() == "EditForm") {
    // jQuery object reference to the 'location' drop-down
    var locList = $mindfusion(form.getControls()["location"].element);

    // Clear the locations from the 'location' drop-down
    // and add the 'empty' item
    locList.empty();
    locList.append(String.format('<option value="{0}">{1}</option>', "", ""));

    for (var i = 0, l = arrayWithIds.length; i < l; i++) {
        // Check if the location id matches the current selection
        if (form.item.location == arrayWithIds[i]) {
            locList.append(String.format('<option value="{0}" selected="selected">{1}</option>', arrayWithIds[i], arrayWithNames[i]));
        }
        else {
            locList.append(String.format('<option value="{0}">{1}</option>', arrayWithIds[i], arrayWithNames[i]));
        }
    }
}

... 



This will enumerate the contents of the array containing location ids and populate the locations drop-down with the appropriate id and name.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Re: Dynamically assign dropdown list items
Reply #8 - Jan 21st, 2015 at 8:27pm
Print Post  
Thank you for the awesome answer, then now I could dynamically add more collection and items based on contact.

Code (Javascript)
Select All
var form = args.get_form();

var itemContactId = form.item.contacts[0];

var itemContact = sender.getResourceById(itemContactId);


 



combine the snippet above I could filter it by current contact.

One more question, what should I do to lay new created dropdown above default location dropdown?

As now I create second dropdown it is under the default location dropdown, what if want to put the second one above?

Thank you
Lyubo wrote on Jan 21st, 2015 at 7:16am:
Hi,

Below is a modification of a snippet from a sample project from this post: http://mindfusion.eu/Forum/YaBB.pl?num=1399302286/17#17:

Code (Javascript)
Select All
...

else if (form.getId() == "EditForm") {
    // jQuery object reference to the 'location' drop-down
    var locList = $mindfusion(form.getControls()["location"].element);

    // Clear the locations from the 'location' drop-down
    // and add the 'empty' item
    locList.empty();
    locList.append(String.format('<option value="{0}">{1}</option>', "", ""));

    for (var i = 0, l = arrayWithIds.length; i < l; i++) {
        // Check if the location id matches the current selection
        if (form.item.location == arrayWithIds[i]) {
            locList.append(String.format('<option value="{0}" selected="selected">{1}</option>', arrayWithIds[i], arrayWithNames[i]));
        }
        else {
            locList.append(String.format('<option value="{0}">{1}</option>', arrayWithIds[i], arrayWithNames[i]));
        }
    }
}

... 



This will enumerate the contents of the array containing location ids and populate the locations drop-down with the appropriate id and name.

Regards,
Lyubo
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 509
Joined: Jun 17th, 2010
Re: Dynamically assign dropdown list items
Reply #9 - Jan 22nd, 2015 at 11:24am
Print Post  
Hi,

From the form's drawContent override (an earlier example is shown here: http://mindfusion.eu/Forum/YaBB.pl?num=1392669565), you can get a reference to the location drop-down's parent DIV. You can then use jQuery's prepend method to add your own element at the beginning of the DIV children collection, something like:

Code (Javascript)
Select All
...

var locList = this.getControls()['location'].element;
$mindfusion(locList.parentNode).prepend(myCustomDropDown);

... 



Regards,
Lyubo
  
Back to top
 
IP Logged
 
Xylon
Junior Member
**
Offline


I Love MindFusion!

Posts: 96
Joined: Feb 17th, 2014
Re: Dynamically assign dropdown list items
Reply #10 - Jan 22nd, 2015 at 4:25pm
Print Post  
Thanks tons!

Lyubo wrote on Jan 22nd, 2015 at 11:24am:
Hi,

From the form's drawContent override (an earlier example is shown here: http://mindfusion.eu/Forum/YaBB.pl?num=1392669565), you can get a reference to the location drop-down's parent DIV. You can then use jQuery's prepend method to add your own element at the beginning of the DIV children collection, something like:

Code (Javascript)
Select All
...

var locList = this.getControls()['location'].element;
$mindfusion(locList.parentNode).prepend(myCustomDropDown);

... 



Regards,
Lyubo

  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint