jQuery UI Widgets › Forums › Grid › Customising Link Renderer in data grid
This topic contains 9 replies, has 3 voices, and was last updated by hemant.kalal 11 years, 2 months ago.
-
Author
-
Hi,
I am using Jq data grid widget and trying to navigate to other page using link renderer.
Using link renderer, I am trying to construct url like this:
http://www.myurl.com/edit/myid1
http://www.myurl.com/edit/myid2
http://www.myurl.com/edit/myid3where myid1,myid2,myid3… are primary key coloumn values coming.
I am not getting any clue how can i change the link renderer using my custom column value.I have tried to replace target attribute value with my url but it didnt work. How can I retrieve coloumn key value and bind it to my url target??
Here is my complete code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqx.classic.css” type=”text/css” />
<script type=”text/javascript” src=”jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqxdata.js”></script>
<script type=”text/javascript” src=”jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”gettheme.js”></script>
<style>
.column {
background-color: #D2D2D2;
color: white;
css
}
#jqxgrid a:link {
color: #0094DE;
text-decoration: none;}
</style><script type=”text/javascript” src=”gettheme.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘CompanyName’, type: ‘string’},
{ name: ‘ContactName’, type: ‘string’},
{ name: ‘ContactTitle’, type: ‘string’},
{name: ‘CustomerID’,type:’string’},],
url: ‘data.php’,
cache: false
};var linkrenderer = function (row, column, value) {
if (value.indexOf(‘#’) != -1) {
value = value.substring(0, value.indexOf(‘#’));
}var format = { target: ‘”_blank”‘ };
// I had tried using my link but it didnt work.
//Is there anyway ,I could construct URL with column primary key value here
var html = $.jqx.dataFormat.formatlink(value, format);
return html;}
var dataAdapter = new $.jqx.dataAdapter(source);$(“#jqxgrid”).jqxGrid(
{
width: 600,
source: dataAdapter,
theme: ‘classic’,
pageable: true,
autorowheight: true,
autoheight: true,
altrows: true,columns: [
{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 250},
{ text: ‘ContactName’, datafield: ‘ContactName’, width: 150 },
{ text: ‘Contact Title’, datafield: ‘ContactTitle’, width: 180 },
{ text: ‘CustomerID’, cellclassname: ‘column’, datafield: ‘CustomerID’, width: 180, cellsrenderer: linkrenderer },]
});
$.getJSON( dataAdapter, function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( “<li id='” + key + “‘>” + val + “” );
});$( “<ul/>”, {
“class”: “my-new-list”,
html: items.join( “” )
}).appendTo( “#jqxgrid” );
});
});
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”></div>
</body>
</html>Hello 9digit,
Here is an example, based on the demo Default Functionality:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; var url = "../sampledata/products.xml"; // prepare the data var source = { datatype: "xml", datafields: [ { name: 'ProductName', type: 'string' }, { name: 'QuantityPerUnit', type: 'int' }, { name: 'UnitPrice', type: 'float' }, { name: 'UnitsInStock', type: 'float' }, { name: 'Discontinued', type: 'bool' } ], root: "Products", record: "Product", id: 'ProductID', url: url }; var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) { if (value < 20) { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>'; } else { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>'; } } var dataAdapter = new $.jqx.dataAdapter(source, { downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); var linkrenderer = function (row, column, value) { if (value.indexOf('#') != -1) { value = value.substring(0, value.indexOf('#')); } value = "http://www.myurl.com/edit/" + value; var format = { target: '"_blank"' }; var html = $.jqx.dataFormat.formatlink(value, format); return html; } // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, pageable: true, autoheight: true, sortable: true, altrows: true, enabletooltips: true, selectionmode: 'singlerow', columns: [ { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250, cellsrenderer: linkrenderer }, { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 }, { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 }, { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 }, { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' } ], columngroups: [ { text: 'Product Details', align: 'center', name: 'ProductDetails' } ], ready: function () { var rows = $('#jqxgrid').jqxGrid('getrows'); for (var i = 0; i < rows.length; i++) { var currentCell = $('#jqxgrid').jqxGrid('getcellvalue', i, "ProductName"); if (currentCell == "Mishi Kobe Niku") { $('#jqxgrid').jqxGrid('selectrow', i); break; }; }; } }); }); </script> </head> <body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div> </body> </html>
We hope it is helpful to you.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
THANK YOU SO MUCH.Bless you.I appreciate your help.
Kind Regards,
Bil
a quick question: Why the title is appearing as link?
I mean the returned results are like this:
http://www.myurl.com/edit/myid1
http://www.myurl.com/edit/myid2etc
I mean the “href” values should be url but the value of ProductName should appear as title of a tag.
Hi 9digit,
Here is how to modify the linkrenderer function:
var linkrenderer = function (row, column, value) { if (value.indexOf('#') != -1) { value = value.substring(0, value.indexOf('#')); } var href = "http://www.myurl.com/edit/" + value; return "<a href='" + href + "'>" + value + "</a>"; };
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi,
only One word to say for you : “Brilliant” !
Hi
I have exactly same issue but in href instead of giving a hard code value I want to give the value of another column from data source , how can I do that?
Thanks
Hemant.Hello Hemant,
You can achieve this with the method getcellvalue:
var linkrenderer = function (row, column, value) { if (value.indexOf('#') != -1) { value = value.substring(0, value.indexOf('#')); } var href = $('#jqxgrid').jqxGrid('getcellvalue', row, "QuantityPerUnit"); return "<a href='" + href + "'>" + value + "</a>"; };
In this case, the values of “QuantityPerUnit” should be formatted correctly as URLs.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar…
-
AuthorPosts
You must be logged in to reply to this topic.