jQuery Grid Plugin - jqGridForum

Topic RSS

formatter:'showlink' or 'link' to open new window based on retrieved DB ID

04/05/2009
13:32

jmcleod3

Member

Members

Forum Posts: 33

Member Since:
04/05/2009

Offline

First off. Excellent grid.

I have used the ExtJS grid with a ton of sleepless nights, so KUDOs, Tony.

My latest project I have decided to go the jQuery way. The grid is up and pulling data from a MySQL DB. All's good.

My next task is to add a hyperlink to one of the columns('Document Attached') to open a new window based on the row ID from the DB, this will display a previously uploaded file.

Below is my grid:

$(document).ready(function(){
    jQuery("#list").jqGrid({

        url:'_getGridApplicationData.php?nd='+new Date().getTime(),
        datatype: "json",
        colNames:['App. ID','User ID','Created Date','Project Title','Total Amt. Requested','Document Attached'],
        colModel:[
            {name:'applicationId',index:'applicationId', width:50, align:"center"},
            {name:'userId',index:'userId', width:100},
            {name:'createdDate',index:'createdDate', width:90},
            {name:'projectTitle',index:'projectTitle', width:180, align:"right"},
            {name:'totalAmountRequested',index:'totalAmountRequested', width:130, align:"right", formatter:'currency', formatoptions:{thousandsSeparator:","}},
            {name:'fileAttached',index:'fileAttached', align:"center", width:140, formatter: 'showlink', formatoptions:{target:"_new", baseLinkUrl:'viewAppFile.php'}}
        ],
        pager: jQuery('#pager'),
        rowNum:10,
        rowList:[10,20,30],
        imgpath:'images',
        sortname: 'applicationId',
        viewrecords: true,
        sortorder: "asc",
        caption: "Grant Applications"

    }).navGrid('#pager',{edit:false,add:false,del:false});

});

If someone could show me a link to a working example, I could work with it to my needs.

Any help on this is greatly appreciated.

Thanks.

John

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

04/05/2009
22:09

jmcleod3

Member

Members

Forum Posts: 33

Member Since:
04/05/2009

Offline

I have solved my own problem. But I have another issue that may be a newbie problem.

When using 'showlink' in the above example, the href link that is created for the link in the column is followed by 'viewAppFile.php?id='

I wish to change the 'id' to 'applicationId' how do I do this?

Thanks.

JohnM

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

05/05/2009
09:32

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Download the latest version 3.5 alfa 3 from GitHub.

in format options add formatoptions: { idName:'MyIDName'...}

in order to add your custom id name.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

05/05/2009
10:27

jmcleod3

Member

Members

Forum Posts: 33

Member Since:
04/05/2009

Offline

Thanks for the reply.

I had already updated to the latest version to solve a previous issue.

I went into fmatter.js to solve this problem.

I hope you don't mind, I changed it to meet our needs.

Consider the problem closed.

JohnM

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

21/05/2009
01:44

casperd

Member

Members

Forum Posts: 76

Member Since:
11/05/2009

Offline

Hi John,

How did you solve the issue to open it in a new window?

Thanks!

--------------------------------------------------------------------------------

jmcleod3 said:

First off. Excellent grid.

I have used the ExtJS grid with a ton of sleepless nights, so KUDOs, Tony.

My latest project I have decided to go the jQuery way. The grid is up and pulling data from a MySQL DB. All's good.

My next task is to add a hyperlink to one of the columns('Document Attached') to open a new window based on the row ID from the DB, this will display a previously uploaded file.

Below is my grid:

$(document).ready(function(){
    jQuery(”#list”).jqGrid({

        url:'_getGridApplicationData.php?nd='+new Date().getTime(),
        datatype: “json”,
        colNames:['App. ID','User ID','Created Date','Project Title','Total Amt. Requested','Document Attached'],
        colModel:[
            {name:'applicationId',index:'applicationId', width:50, align:"center"},
            {name:'userId',index:'userId', width:100},
            {name:'createdDate',index:'createdDate', width:90},
            {name:'projectTitle',index:'projectTitle', width:180, align:"right"},
            {name:'totalAmountRequested',index:'totalAmountRequested', width:130, align:"right", formatter:'currency', formatoptions:{thousandsSeparator:","}},
            {name:'fileAttached',index:'fileAttached', align:"center", width:140, formatter: 'showlink', formatoptions:{target:"_new", baseLinkUrl:'viewAppFile.php'}}
        ],
        pager: jQuery('#pager'),
        rowNum:10,
        rowList:[10,20,30],
        imgpath:'images',
        sortname: 'applicationId',
        viewrecords: true,
        sortorder: “asc”,
        caption: “Grant Applications”

    }).navGrid('#pager',{edit:false,add:false,del:false});

});

If someone could show me a link to a working example, I could work with it to my needs.

Any help on this is greatly appreciated.

Thanks.

John

25/05/2009
02:21

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

I do not see anything wrong here. What does not work? What is shown when the grid is generated and and you mouse over the link?

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.