DropDownList MultiSelect…

[atrummParticipant]

Hi! Having trouble with a task – I’ll try my best to explain…

The goal:

A multiselect dropdownlist where I can have the items pre-checked based on another list. This is for assigning “rigs” to “users” via a linker table.

Example:

There are 4 rigs: Rig 1, Rig 2, Rig 3, Rig 4
There are two users: Aaron and Jason

User Aaron is assigned to Rig 1 and Rig 2. User Jason is assigned to Rig 3 and Rig 4. The way this is stored in the DB is with three tables:

user table: userid,username
rig table: rigid,rigname
linkertable: userid,rigid

If Aaron is userid 1, Jason is userid2 and the rigs are rigids 1,2,3,4 respectively, the linker table would have this data:

1 1
1 2
2 3
2 4

When I add a user (say Aaron), there would be a jqxdropdownlist showing the rigs, using checkboxes: true – like this:

X Rig 1
X Rig 2
Rig 3
Rig 4

I need to select multiple rigs, and have that save to the linker table in the format above. But first – I’m working on EDIT user. In EDIT user, the dropdownlist should already have items checked, based on the list in linkertable (select rigid from rigs where userid=userid then check each item against that list)

I’m still stuck on step one: checking or unchecking items dynamically – even if I just hard code the check (and not try to get the list yet)

I tried this (and several other variants) (i’ll leave off the dataAdapter and source stuff – that works fine) – first I just tried to hard code 3 in – if the value is 3, check the item.

        $("#userRigs").jqxDropDownList({
          source: rigsAdapter, 
          displayMember: 'Rig', 
          valueMember: 'RigIDRig', 
          checkboxes: true, 
          theme: theme, 
          width: 120,
          renderer: function (index, label, value) {
            var datarecord = rigsAdapter.records[index];
              if(value == 3){
                $("#userRigs").jqxDropDownList('checkIndex', index); // this part is suspect - aka doesn't work and probably shouldn't
              }
              return datarecord.Rig;
            }
          });

I’m pretty sure I can’t refer to the #userRigs inside the initialization – but I can’t for the life of me figure out what else I would do…

Do y’all understand what I’m trying to ask? LOL

thanks in advance guys!

— Aaron

[Peter StoevKeymaster]

Hi Aaron,

The “renderer” custom function which you have written should return HTML string. It should do nothing else like checking items. The place for “checkIndex” is not there. You should call methods after the widget is created i.e after calling the constructor function of jqxDropDownList.

Best Regards,
Peter Stoev

[atrummParticipant]

hmmm – yes.. I guess I have to loop later.. hmm yes I think I know what to do…I’ll let you know what happens 😉

thanks!

[atrummParticipant]

yes – it’s working FYI 🙂

in the grid, we have an edit button, toward the end of the buttonclick function, I do this:

                            $("#userRigs").jqxDropDownList('uncheckAll');
                            var tot= dataRecord.UserRigs.length;
                            for (var i=0; i < tot; i++) {
                              var item = $("#userRigs").jqxDropDownList('getItemByValue', dataRecord.UserRigs[i]);
                              $("#userRigs").jqxDropDownList('checkItem', item );
                            }

to check the right boxes. BAM! 🙂

thanks!

[atrummParticipant]

ok…BUT… one thing this doesn’t do right…it doesn’t check the right boxes if I make a change.

example: I edit a user which has no “rigs” assigned. I check a couple boxes, click save. it writes to the database, but the right checks don’t show up until I refresh. I’ve discovered also, that if I happen to change something else in the table, it keeps the check boxes right. I’ve also discovered that when I check boxes and don’t change any other info, the “error” function is called in the source json thing – this:

            updaterow: function (rowid, rowdata, commit) {
                // synchronize with the server - send update command
                var data = "update=true&UserName=" + rowdata.UserName + "&UserEmail=" + rowdata.UserEmail;
                data = data + "&UserRole=" + rowdata.UserRole + "&UserFirstName=" + rowdata.UserFirstName;
                data = data + "&UserLastName=" + rowdata.UserLastName + "&UserPhoneNumber=" + rowdata.UserPhoneNumber;
                data = data + "&UserCompany=" + rowdata.UserCompany;
                data = data + "&UserID=" + rowdata.UserID;
                data = data + "&UserRigs=" + rowdata.UserRigs;
                $.ajax({
                    dataType: 'json',
                    url: '<?php echo URL; ?>user/update',
                    data: data,
                    success: function (data, status, xhr) {
                        // update command is executed.
                        commit(true);
                    },
                    error: function () {
                        // cancel changes.
                        commit(false);
                    }
                });
            },

if I DO change something else in the table, the success function is called.

HMMMM….. any thoughts from anybody?

— A

[atrummParticipant]

fixed.

in the model, the error check was wrong. it was:

        
       $count = $this->db->rowCount();
       if ($count == 1) {
            return true;
        } else {
            $_SESSION["feedback_negative"][] = FEEDBACK_USER_EDITING_FAILED;
        }
        // default return
        return false;

which returns true only if the update actually changes something – not if you just change assignments to the linker table. i changed to:

$result = // the bunch of query stuff executing

        if ($result) {
            return true;
        } else {
            $_SESSION["feedback_negative"][] = FEEDBACK_USER_EDITING_FAILED;
        }
        // default return
        return false;

putting this info for other people’s reference even though it’s not that detailed

[Author]

Posts