URL in Grid Row Details? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 5 replies, has 3 voices, and was last updated by Dimitar 10 years, 11 months ago.

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

Author

URL in Grid Row Details? Posts

October 22, 2012 at 6:15 am URL in Grid Row Details? #9820

Participant

I am using JQXGRID to display a simple set of data (just csv in Head section) with Row Details to show an additional set of info when the user clicks teh side arrow.
I want to include a URL in the Row Details display but every format of an I try gives an error.
How can I include a URL in a grid cell or my Row Detail info box??

October 22, 2012 at 6:28 am URL in Grid Row Details? #9822

Dimitar

Participant

Hi jmaynard,

Please check out the demo http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customcolumn.htm?classic to see how to set url as cell content.

Best Regards,
Dimitar

jQWidgets
http://www.jqwidgets.com/

October 22, 2012 at 1:25 pm URL in Grid Row Details? #9848

jmaynard

Participant

I already checked this demo – it puts the full URL (eg http://www.jqwidgets.com/community/topic/combobox-autocomplete-type/) into the cell. My URLs a quite long so this would screw up the layout (as well as looking poor).

I want to put a link like this:
Link Text
and just have ‘Link Text’ appear in the cell but open somepage.html when clicked or touched.
thanks

October 23, 2012 at 5:35 am URL in Grid Row Details? #9894

Dimitar

Participant

Hi jmaynard,

Here is a solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to use the Grid API to customize a column's
        rendering.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/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="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var url = "../demos/sampledata/feed.xml";
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'title' },
                    { name: 'link' },
                    { name: 'pubDate', type: 'date' },
                    { name: 'creator', map: 'dc\\:creator' },
               ],
                root: "channel",
                record: "item",
                url: url
            };
            var linkrenderer = function (row, column, value) {
                if (value.indexOf('#') != -1) {
                    value = value.substring(0, value.indexOf('#'));
                }
                var length = value.length;
                var linkText = value.substring(50, length - 1);
                return "<a href='" + value + "' target='_blank'>" + linkText + "</a>";
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: 'Link', datafield: 'link', width: 250, cellsrenderer: linkrenderer },
                  { text: 'Title', datafield: 'title', width: 200 },
                  { text: 'Publish Date', datafield: 'pubDate', width: 250, cellsformat: "D" },
                  { text: 'Creator', datafield: 'creator', width: 200 }
               ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Alternatively, if you just want “Link Text” to be displayed, not a specific one for each url, the linkrenderer function should look like this:

            var linkrenderer = function (row, column, value) {
                if (value.indexOf('#') != -1) {
                    value = value.substring(0, value.indexOf('#'));
                }
                return "<a href='" + value + "' target='_blank'>Link Text</a>";
            }

Best regards,
Dimitar

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

May 22, 2014 at 6:50 am URL in Grid Row Details? #54786

Marco

Participant

I for myself like it, when a suggested solution is evaluated as the tip that helped solving the problem. As I am stuck on stuck on the same problem, I can say that Dimitar’s solution was very helpful

Thanks Marco

May 22, 2014 at 7:14 am URL in Grid Row Details? #54787

Dimitar

Participant

Hi Marco,

We always strive to provide our users with the most appropriate solutions. Therefore, there is a large chance the solution will work. However, we recommend you to try the example and see if it suits your purposes. You can contact us again if you need further assistance.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.