Displaying links in jqxGrid

[SureshMember]

Hi,

I am new to Jqwidgets and trying to learn how they work. I am building a sample application to display the data in JqxGrid from a JSON response. In this grid, i need to show data in few columns as hyperlinks. My question is, do i have to send the hyperlink markup as a part of JSON response or is there a way in JqxGrid to specify that a particular column is a hyperlink or to customize the JSON response at JSP or HTML page level using JQWidgets.

Thanks in advance for your help.

[Peter StoevKeymaster]

Hi Suresh,

You may take a look at this example with Hyperlink Column: customcolumn.htm.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[SureshMember]

Thanks Peter for the quick reply. The example you provided is helpful.

[SureshMember]

Hi Peter,

Need your help again on the same topic. In your example you are using “formatlink” function and displaying the whole link (for ex: http://www.jqwidgets.com/community/topic/combobox-autocomplete-type/) in jqxGrid.

I have gone thru function definition in jqxData.js and it is using the same value for link href and value.

formatlink:function(b,d){var c=””;if(d&&d.target){c=”target=”+d.target}if(c!=””){return”‘+b+”“}return’‘+b+”“}

In my example, i am trying to display the text as hyperlink. For example, i have a column called username (ex: suresh, john, david etc). In the grid, it should display the text as “suresh” but the if the user clicks on the link it should take the user to “http://www.abc.com/xyz?user=suresh”.

Sample JSON i am using:

[
{
“username”: “suresh”,
“firstname”: “suresh”,
“lastname”: “babu”
},
{
“username”: “john”,
“firstname”: “john”,
“lastname”: “jevin”
},
{
“username”: “david”,
“firstname”: “david”,
“lastname”: “martin”
}
]

Is there a jqx dataformat function that i can use to accomplish this?

[Peter StoevKeymaster]

Hi Suresh,

It is not necessary to use the formatlink function. You can return HTML string with an Anchor tag in the cellsrenderer callback.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[SureshMember]

Thanks Peter. I found an example for cellsrenderer in one of the forums and used it in my code. Its working fine.

[xetereParticipant]

This is exactly what I am trying to do and have no success. Suresh or Peter, would you be able to tell me which forum post had that cellrenderer example? I can’t find it with search.

Thanks much!

[Peter StoevKeymaster]

Hi xetere,

An implementation of the cellsrenderer is available in the “Default Functionality” and “Custom Column” Grid samples and also in the Grid’s help topics.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[SureshMember]

Hi xetere,

You can also find one of the examples here:

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-cellsrendering.htm

Open the above link and search for “cellsrenderer”.

In my sample application, i implemented it this way:

$(“#jqxgrid”).jqxGrid(
{
width: ‘99%’,
source: dataAdapter,
altrows: true,
sortable: true,
autoheight: true,
showsortcolumnbackground: false,
pageable: true,
enableellipsis: true,
columns: [
{ text: ‘Column1’, datafield: ‘column1’, width: ‘40%’, cellsrenderer: function(row, cell, value) {
return ‘‘+value+”}},
{ text: ‘Column2’, datafield: ‘column2’, width: ‘60%’},
]
});

[SureshMember]

For some reason, some of the text in my previous message was supressed. Here is the cellsrenderer call:

cellsrenderer: function(row, cell, value) {
            return '<a href="${pageContext.request.contextPath}/test/testApp/testAction?id='+value+'"/>'+value+'</a>'
}

[ryan paulParticipant]

how can i use a selector if two columns have been rendered as link?

example in column1 i want to show pupop1
while in column2 i want to show popup2

regards,

[NathreParticipant]

Here for emails

var emailrenderer = function (row, column, value) {
    if (value.indexOf('#') != -1) {
       value = value.substring(0, value.indexOf('#'));
    };
    if(value != ""){
       var preHtml = $.jqx.dataFormat.formatlink("mailto:"+value);
       var html=preHtml.replace(/">mailto:/g,'">'+value);
       return html;
    }
}

[Author]

Posts