Get Value from one column to reuse in another - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 6 replies, has 3 voices, and was last updated by vnistala 7 years, 10 months ago.

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

Author

Get Value from one column to reuse in another Posts

August 15, 2013 at 2:01 pm Get Value from one column to reuse in another #26891

Participant

Hi all,

I have a grid with two columns and want to get the value from COLUMN2 and use it in the COLUMN1 one as link. I know how to make it a link but I don’t know how to get that value. My code is as below:

columns: [
				  { text: 'COLUMN1', datafield: 'COLUMN1', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains', width: 320, minwidth: 320, pinned: true, cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
					  		if (value != "") {
                                return '<a href="index.php?s=' + value + '">' + value + '</a>';
                            }
                            else {
                                return '<a href="index.php?s=' + value + '">' + value + '</a>';
                            }} },
                  { text: 'COLUMN2', datafield: 'COLUMN2', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains', width: 920, minwidth: 920, cellsalign: 'left', align: 'left' }
                ]

Any help will be appreciated.

Thanx!!

August 15, 2013 at 3:43 pm Get Value from one column to reuse in another #26897

Peter Stoev

Keymaster

Hi cmariomej,

The cellsrenderer callback has one more parameter – rowdata which includes the information about the row so you can basically access the cell values by writing, rowdata.COLUMN2 or rowdata.COLUMN1 where rowdata is the last parameter of the cellsrenderer.

Best Regards,
Peter Stoev

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

August 15, 2013 at 8:05 pm Get Value from one column to reuse in another #26907

cmariomej

Participant

Thanx Peter, I’ll give it a try later 😉

August 28, 2013 at 3:22 pm Get Value from one column to reuse in another #27866

cmariomej

Participant

Hi Peter,

I think I’m using the wrong syntax because this is not working. Here is what I’m using:


columns: [
				  { text: 'COLUMN1', datafield: 'COLUMN1', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains', width: 320, minwidth: 320, pinned: true, cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
					  		if (value != "") {
                                return '<a href="index.php?s=' + rowdata.COLUMN2 + '">' + value + '</a>';
                            }
                            else {
                                return '<a href="index.php?s=' + value + '">' + value + '</a>';
                            }} },
                  { text: 'COLUMN2', datafield: 'COLUMN2', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'contains', width: 920, minwidth: 920, cellsalign: 'left', align: 'left' }
                ]

Any suggestions?

Thanx!

August 28, 2013 at 3:46 pm Get Value from one column to reuse in another #27871

Peter Stoev

Keymaster

Hi cmariomej,

Please, make sure that you use the latest version.

Find below a working sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from JSON string.</title>
    <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/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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'CompanyName', type: 'string' },
                    { name: 'ContactName', type: 'string' },
                    { name: 'ContactTitle', type: 'string' },
                    { name: 'Address', type: 'string' },
                    { name: 'City', type: 'string' },
                    { name: 'Country', type: 'string' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                    { text: 'Company Name', datafield: 'CompanyName', cellsrenderer: function(row, column, value, defaultSettings, columnSettings, rowdata )
                    {
                        if (rowdata.ContactName === "Maria Anders") {
                            return "<div style='margin: 4px; color: blue;'>" + value + "</div>";
                        }
                        
                        return defaultSettings;
                    },
                        width: 250 },
                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                    { text: 'City', datafield: 'City', width: 120 },
                    { text: 'Country', datafield: 'Country', width: 120 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

August 28, 2013 at 6:00 pm Get Value from one column to reuse in another #27883

cmariomej

Participant

Hi Peter,

I checked the version and that was the issue, it seems like this feature was recently added.

Thanx!!

February 10, 2017 at 6:50 pm Get Value from one column to reuse in another #91482

vnistala

Participant

Hello Peter,
I have been using this jqwidgets for last week or so, and i absolutely love this tool it gives so many options.
I have a question though. This may be an old thread but may be on the same context. I have a data file in csv format. I’m trying to use the chart
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_dashboard_example.htm

so here the latencyThreshold is hardcoded to value 2. I would like to compare 3’rd column value with 2nd. If value is greater, then make the column red.
2. Also how can we get values from csv file for function displayClusterMetrics() instead of hardcoded numbers in the code

I have modified the code as below but not giving me right results
series:
[
{
dataField: ‘sla’,
dataField: ‘latency’,
displayText: ‘Response Time’,
colorFunction: function (value,sla,itemIndex,serie, group) {
return (value > sla) ? ‘#CC1133’ : ‘#55CC55’;
}
}
], `

Example: CSV data

Hierarchy-Creating New Entity Group,2,4.040,0.054676279971714134,195
Hierarchy-Save Group,2,3.188,0.05464718237726453,195
Logout,2,0.004,0.05467169646274124,195

Any help will be appreciated.
Regards,
Venkat

Author

Posts

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

You must be logged in to reply to this topic.