a href Columns In Grid in JQuery_H5之家 - 中国HTML5教程资源分享第一站

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></div> </body> </html>

Add the needed references

Here comes the main part.

Grid Settings or Grid Initialization

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

a href Columns In Grid in JQuery

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" /> <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> <h2>Href Columns In Grid - Sibeesh Passion</h2> <div></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?