a href Columns In Grid in JQuery

We will make one of the columns values to a href tag. First we will load the grid from the a custom json data and then we will use cellsrenderer function to format the columns values. I hope you will like this.

Please see this article in my blog here.

Background

We all works in grid controls. Sometimes you may need to customize the grid and its column values. Here I am giving you custom demo of the same. In this article we are going to customize the grid column contents to a href tags.

Using the code

To show this demo, I am using jQWidget jQX Grid control. If you are new to jQX Grid, you can find out some introduction here: jQWidget JQX Grid

Now we are going to load the grid first. I hope you have already checked how to load the grid. Please see the below code.

Create an HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<title>Href Columns In Grid - Sibeesh Passion</title>
</head>
<body>
<h3>Href Columns In Grid - Sibeesh Passion</h3>
<br />
<div id="jqxgrid"></div>
</body>
</html>

Add the needed references

<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
<link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

Here comes the main part.

Grid Settings or Grid Initialization

<script type="text/javascript">
$(document).ready(function()
{
var columntohref = function(row, column, value)
{
if (value.indexOf('#') != -1)
{
value = value.substring(0, value.indexOf('#'));
}
var format =
{
target: '"_blank"'
};
var html = $.jqx.dataFormat.formatlink(value, format);
return html;
}
var data =
{
datatype: "json",
datafields: [
{
"name": "LinkName",
"type": "string"
},
{
"name": "Link",
"type": "string"
}],
url: "CustomData.txt"
};
$("#jqxgrid").jqxGrid(
{
source: data,
columns: [
{
"text": "LinkName",
"dataField": "LinkName",
width: "300"
},
{
"text": "Link",
"dataField": "Link",
cellsrenderer: columntohref,
width: "300"
}]
});
});
</script>

Sample data

Following is the contents of CustomData.txt

[{
"LinkName": "Sibeesh Passion",
"Link": "http://www.sibeeshpassion.com"
},
{
"LinkName": "C-Sharp Corner",
"Link": "http://www.c-sharpcorner.com"
},
{
"LinkName": "Facebook",
"Link": "http://www.fb.com"
},
{
"LinkName": "Google",
"Link": "http://www.google.com"
}]

As you can find out in the above code we are using cellsrenderer property to call the functioncolumntohref which does the formatting. We are formatting the data as below,

$.jqx.dataFormat.formatlink(value, format)

Shall we check our output now?

Output

Column values to a href

Complete Code

<!DOCTYPE html>
<html lang="en">
<head>
<title>Href Columns In Grid - Sibeesh Passion</title>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>
<script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>
<link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function()
{
var columntohref = function(row, column, value)
{
if (value.indexOf('#') != -1)
{
value = value.substring(0, value.indexOf('#'));
}
var format =
{
target: '"_blank"'
};
var html = $.jqx.dataFormat.formatlink(value, format);
return html;
}
var data =
{
datatype: "json",
datafields: [
{
"name": "LinkName",
"type": "string"
},
{
"name": "Link",
"type": "string"
}],
url: "CustomData.txt"
};
$("#jqxgrid").jqxGrid(
{
source: data,
columns: [
{
"text": "LinkName",
"dataField": "LinkName",
width: "300"
},
{
"text": "Link",
"dataField": "Link",
cellsrenderer: columntohref,
width: "300"
}]
});
});
</script>
</head>
<body class='default'>
<h2>Href Columns In Grid - Sibeesh Passion</h2>
<div id="jqxgrid"></div>
</body>
</html>

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

12 Comments

Join the conversation! Your thoughts help the community grow.

Sibeesh Venu10y ago
Arul R Thanks a lot
Sibeesh Venu10y ago
Gowtham Rajamanickam Thanks a lot
Sibeesh Venu10y ago
Harshad Pansuriya Thanks a lot
Sibeesh Venu10y ago
Santhakumar Munuswamy Thanks a lot
Sibeesh Venu10y ago
Anu Vivin Thanks a lot
Arul R10y ago
Thanks for nice article
Gowtham Rajamanickam11y ago
nice
Harshad Pansuriya11y ago
Nice one
Santhakumar Munuswamy11y ago
Good one
Anu V11y ago
good post
Sibeesh Venu11y ago
Banketeshvar Narayan Thank you
Banketeshvar Narayan11y ago
Nice