Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
Dynamic Select list based on value of another cell
15/10/2009
09:41
Avatar
jmcleod3
Member
Members
Forum Posts: 33
Member Since:
04/05/2009
sp_UserOfflineSmall Offline

Hello all,

I'm fairly new to jqgrid. I've used it in the past for a simple grid. Now the past comes back to haunt me.

The users want a column to contain a select dropdown.  This part I can handle. 

The problem is that the select options will change based on the value of another cell in the next column.

For example,

In one column, the select option will be "Approve" & "Disapprove".

In the next column, the value of the cell is "Proposal in Review". This value will occasionally change to "Letter of Intent in Review or the cell will be blank". 

I wish to dynamically change the select to "Approve Proposal", "Disapprove Proposal", "Approve LOI", "Disapprove LOI" or no select option.

Currently my grid is this...

I set the options before the grid, then call the variable when I need it.

var colApproveDisapprove = {value:":Click Here ;1:Approve;0:Disapprove"};

In the grid...

            var lastsel;
var colApproveDisapprove = {value:":Click Here ;1:Approve;0:Disapprove"};

$(document).ready(function(){
    jQuery("#list").jqGrid({
        scrollrows : true,
        url:'_getGridApplicationData.php?nd='+new Date().getTime(),
        datatype: "json",
        colNames:['App. ID','User ID','Created Date','Project Title','Total Amt.','Files','Actions', 'Status'],
        colModel:[
            {name:'applicationId',index:'applicationId', width:75, align:"center"},
            {name:'userId',index:'userId', width:75},
            {name:'createdDate',index:'createdDate', editable:false, editoptions:{readonly:true}, width:100},
            {
                name:'projectTitle',
                index:'projectTitle',
                width:180,
                align:"left",
                formatter: 'showlink',
                formatoptions:
                {
                    target:"_new",
                    baseLinkUrl:'applicationInformationForm.php',
                    addParam:'&action=view',
                    idName:'applicationId'
                }
            },
            {
                name:'totalAmountRequested',
                index:'totalAmountRequested',
                width:90,
                align:"right",
                editable:false,
                editoptions:{readonly:true},
                formatter:'currency',
                formatoptions:
                {
                    thousandsSeparator:","
                }
            },
            {    //Files
                name:'loiAttached',
                index:'loiAttached',
                align:"center",
                width:100
            },
            {    // Actions
                name:'action',
                index:'action',
                align:"center",
                width:150,
                editable:true,
                edittype:"select",
                editoptions:colApproveDisapprove
            },
            {
                name:'applicationStatus',
                index:'applicationStatus',
                align:"center",
                width:140,
                editable:false,
                editoptions:{readonly:true}
            }
        ],
        cellurl:"_editAdminGrid.php",
        cellSubmit:'remote',
        pager: jQuery('#pager'),
        rowNum:10,
        rowList:[10,20,30],
        imgpath:'images',
        sortname: 'applicationId',
        viewrecords: true,
        sortorder: "asc",
        height:300,
        cellEdit:true,
        caption: "Grant Applications",
        footerrow:true,
        userDataOnFooter:true,
        beforeEditCell:function( applicationId, applicationStatus, val, iRow, iCol ){
            if (val == ''){
                return "";
            }else{
                return val;
            }
        }    
    }).navGrid('#pager',
    { view:false, edit:false, add:false, del:false, search:false},
    {height:200, reloadAfterSubmit:true }, //edit options
    {height:200, jqModal:false, closeOnEscape:true} //view options
    )    
});

The value of the "ApplicationStatus" is determined prior to JSON encoding in "_getGridApplicationData.php", then sent to the grid.

I'm thinking about using the "beforeEditCell" event like...

beforeSaveCell : function(rowid,celname,value,iRow,iCol) {
if( applicationStatus == 'LOI in review' )
{ return “new value”; } // here's where I get lost. How do I set the options of the select?
}

Thank you for any help.

JohnM

It's not who I am underneath, but what I do that defines me.

15/10/2009
12:49
Avatar
jmcleod3
Member
Members
Forum Posts: 33
Member Since:
04/05/2009
sp_UserOfflineSmall Offline

I've changed my thinking.

Instead of changing select options based on the value of another cell in the next column, I'm changing the select options based on the value of the current cell.

I'm still having problems trying to set the select options prior to displaying the grid.

It's not who I am underneath, but what I do that defines me.

15/10/2009
13:49
Avatar
Pete
Member
Members
Forum Posts: 100
Member Since:
01/09/2008
sp_UserOfflineSmall Offline

John,

This may be considered more of a hack but  I use this to update the values of another cell as the value in the current cell changes:

     onSelectRow: function(id){
.......
            var idID = '#'+id+'_sector';
            $(idID).bind("change", function(){
                      updateSLHTML( $(idID).val(),id );
                            });
......
    },

The updateSLHTML method looks like this:

// Changes the LocId inner HTML when location/sector changes
function updateSLHTML(Ltype,Lid){

var idID = '#'+Lid+'_locId';

if(Ltype == 'L')
    $(idID).html(colLocationsHTML);
else
    $(idID).html(colSectorsHTML);

}

In this case I store preformatted HTML for the cell and just update the cell inner HTML with the new values.  This *can* be done dynamically as well, you just have to convert your select data into HTML.

The basic concept is:  Bind a change event to the cell from within the onSelectRow method and then update the inner HTML of the target cell with new content. 

This seems to work fine, so far Wink

Pete

15/10/2009
14:17
Avatar
jmcleod3
Member
Members
Forum Posts: 33
Member Since:
04/05/2009
sp_UserOfflineSmall Offline

Thank you for replying.Laugh

I've heard that 'onSelectRow' is disabled when the cell is editable.Yell

I'll look more into this though.

Thanks again.

John

It's not who I am underneath, but what I do that defines me.

16/10/2009
08:45
Avatar
Pete
Member
Members
Forum Posts: 100
Member Since:
01/09/2008
sp_UserOfflineSmall Offline

I am using inline editing in my grids, so this works when you are using inline edit.  Don't know about the other editing models because I haven't used them.

Pete

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
191 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information