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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • Customising Link Renderer in data grid #44810

    9digit
    Participant

    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/myid3

    where 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>

    Customising Link Renderer in data grid #45374

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Customising Link Renderer in data grid #45456

    9digit
    Participant

    Hi Dimitar,

    THANK YOU SO MUCH.Bless you.I appreciate your help.

    Kind Regards,

    Bil

    Customising Link Renderer in data grid #45477

    9digit
    Participant

    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/myid2

    etc

    why it is not returning results like this:
    myid1
    myid2

    Customising Link Renderer in data grid #45482

    9digit
    Participant

    I mean the “href” values should be url but the value of ProductName should appear as title of a tag.

    Customising Link Renderer in data grid #45591

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Customising Link Renderer in data grid #45611

    9digit
    Participant

    Hi,

    only One word to say for you : “Brilliant” !

    Customising Link Renderer in data grid #45833

    hemant.kalal
    Participant

    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.

    Customising Link Renderer in data grid #45857

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Customising Link Renderer in data grid #45867

    hemant.kalal
    Participant

    Thanks Dimitar…

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.