JQuery

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs