Post
Ask Question

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

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Href Columns In Grid - Sibeesh Passion</title>  
  6. </head>  
  7.   
  8. <body>  
  9.     <h3>Href Columns In Grid - Sibeesh Passion</h3>  
  10.     <br />  
  11.     <div id="jqxgrid"></div>  
  12. </body>  
  13.   
  14. </html>  
Add the needed references
  1. <script src="jquery-1.9.1.js"></script>  
  2. <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>  
  3. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>  
  4. <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>  
  5. <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>  
  6. <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>  
  7. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>  
  8. <script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>  
  9. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>  
  10. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>  
  11. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>  
  12. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>  
  13. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>  
  14. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>  
  15. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>  
  16. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>  
  17. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>  
  18. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>  
  19. <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />  
Here comes the main part.

Grid Settings or Grid Initialization
  1. <script type="text/javascript">  
  2.     $(document).ready(function()  
  3.          {  
  4.         var columntohref = function(row, column, value)   
  5.         {  
  6.             if (value.indexOf('#') != -1)  
  7.             {  
  8.                 value = value.substring(0, value.indexOf('#'));  
  9.             }  
  10.             var format =   
  11.             {  
  12.                 target: '"_blank"'  
  13.             };  
  14.             var html = $.jqx.dataFormat.formatlink(value, format);  
  15.             return html;  
  16.         }  
  17.         var data =  
  18.             {  
  19.             datatype: "json",  
  20.             datafields: [  
  21.               {  
  22.                 "name": "LinkName",  
  23.                 "type": "string"  
  24.             },   
  25.              {  
  26.                 "name": "Link",  
  27.                 "type": "string"  
  28.             }],  
  29.             url: "CustomData.txt"  
  30.         };  
  31.         $("#jqxgrid").jqxGrid(  
  32.           {  
  33.             source: data,  
  34.             columns: [  
  35.               {  
  36.                 "text": "LinkName",  
  37.                 "dataField": "LinkName",  
  38.                 width: "300"  
  39.             },   
  40.               {  
  41.                 "text": "Link",  
  42.                 "dataField": "Link",  
  43.                 cellsrenderer: columntohref,  
  44.                 width: "300"  
  45.             }]  
  46.         });  
  47.     });  
  48. </script>  
Sample data

Following is the contents of CustomData.txt
  1. [{  
  2.     "LinkName": "Sibeesh Passion",  
  3.     "Link": "http://www.sibeeshpassion.com"  
  4. },  
  5.  {  
  6.     "LinkName": "C-Sharp Corner",  
  7.     "Link": "http://www.c-sharpcorner.com"  
  8. },  
  9.  {  
  10.     "LinkName": "Facebook",  
  11.     "Link": "http://www.fb.com"  
  12. },  
  13.  {  
  14.     "LinkName": "Google",  
  15.     "Link": "http://www.google.com"  
  16. }]  
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
output
Column values to a href

Complete Code
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Href Columns In Grid - Sibeesh Passion</title>  
  6.     <script src="jquery-1.9.1.js"></script>  
  7.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>  
  8.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>  
  9.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>  
  10.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>  
  11.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>  
  12.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>  
  13.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>  
  14.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>  
  15.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>  
  16.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>  
  17.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>  
  18.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>  
  19.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>  
  20.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>  
  21.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>  
  22.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>  
  23.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>  
  24.     <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />  
  25.     <script type="text/javascript">  
  26.         $(document).ready(function()   
  27.            {  
  28.             var columntohref = function(row, column, value)   
  29.             {  
  30.                 if (value.indexOf('#') != -1)  
  31.                 {  
  32.                     value = value.substring(0, value.indexOf('#'));  
  33.                 }  
  34.                 var format =  
  35.                 {  
  36.                     target: '"_blank"'  
  37.                 };  
  38.                 var html = $.jqx.dataFormat.formatlink(value, format);  
  39.                 return html;  
  40.             }  
  41.             var data =   
  42.                 {  
  43.                 datatype: "json",  
  44.                 datafields: [  
  45.                   {  
  46.                     "name": "LinkName",  
  47.                     "type": "string"  
  48.                 },   
  49.                   {  
  50.                     "name": "Link",  
  51.                     "type": "string"  
  52.                 }],  
  53.                 url: "CustomData.txt"  
  54.             };  
  55.             $("#jqxgrid").jqxGrid(  
  56.               {  
  57.                 source: data,  
  58.                 columns: [  
  59.                   {  
  60.                     "text": "LinkName",  
  61.                     "dataField": "LinkName",  
  62.                     width: "300"  
  63.                 },   
  64.                   {  
  65.                     "text": "Link",  
  66.                     "dataField": "Link",  
  67.                     cellsrenderer: columntohref,  
  68.                     width: "300"  
  69.                 }]  
  70.             });  
  71.         });  
  72.     </script>  
  73. </head>  
  74.   
  75. <body class='default'>  
  76.     <h2>Href Columns In Grid - Sibeesh Passion</h2>  
  77.     <div id="jqxgrid"></div>  
  78. </body>  
  79.   
  80. </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.


Similar Articles