jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 21 total)

1 2 →

Author

Posts

June 7, 2021 at 3:58 pm in reply to: Grid export to excel with filename dialog Grid export to excel with filename dialog #120338

paulcobben

Participant

It works. Thanks.

June 4, 2021 at 1:18 pm in reply to: Grid export to excel with filename dialog Grid export to excel with filename dialog #120326

paulcobben

Participant

Hi I’ve tried your solution in my own code and added it for only the Export to Excel function.
When I load the page in my browser, the placeholder text is not shown and there is a open dialog button that does nothing.
When I type text in the input box, and click “Export to Excel” it saves with the filename that was given.
But the Open Dialog does not work. I think we are close to a solution. Thanks in Advance.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Licentie Overzicht</title>
    <meta name="description" content="Licentie Overzicht" />             
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/sparkleflowdash.css" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <script type="text/javascript" src="scripts/jquery-1.11.1.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/jqxdata.export.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.export.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/jqxgrid.filter.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxgrid.sort.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/jqxexport.js"></script> 
    <!-- JSZip -->
    <script type="text/javascript" src="scripts/jszip.min.js"></script>
    <!-- pdfmake -->
    <script type="text/javascript" src="scripts/pdfmake.min.js"></script>
    <script type="text/javascript" src="scripts/vfs_fonts.js"></script>
    <script type="text/javascript" src="scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var cellclass = function (row, columnfield, value) {
                if (value < 0) {
                    return 'red';
                }
                if (value == 0) {
                    return 'yellow';
                }
                if (value > 0) {
                    return 'green';
                }
            }
 
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'applicatie',   type: 'string' },
                    { name: 'licentie',     type: 'float'},
                    { name: 'usersad',      type: 'float'},
                    { name: 'verschil1',    type: 'float'},
                    { name: 'installaties', type: 'float'},
                    { name: 'verschil2',    type: 'float'},
                    { name: 'gebruik',      type: 'float'},
                    { name: 'verschil3',     type: 'float'}
                    
                ],
                sortcolumn: 'verschil1',
                sortdirection: 'asc',
                url: "sparkleflow-data/licentieall.csv",
                columnDelimiter: ";"
                
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 380+100+100+100+100+100+100+100+16,
                height: 750,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                sortable: true,
                selectionmode: 'multiplecellsextended',
                theme: 'sparkleflowdash',
                columnsresize: true,
                columns: [
                  { text: 'Applicatie',   datafield: 'applicatie',   width: 380 },
                  { text: 'Licentie',     datafield: 'licentie',     width: 100 },
                  { text: 'Users in AD',  datafield: 'usersad',      width: 100 },
                  { text: 'Verschil',     datafield: 'verschil1', cellclassname: cellclass, width:  100 },
                  { text: 'Installaties', datafield: 'installaties', width: 100 },
                  { text: 'Verschil',     datafield: 'verschil2', cellclassname: cellclass, width:  100 },
                  { text: 'Gebruik',      datafield: 'gebruik',      width:  100 },
                  { text: 'Verschil',     datafield: 'verschil3', cellclassname: cellclass, width:  100 }
                ]
            });
            $("#excelExport").jqxButton();
            $("#pdfExport").jqxButton();

            // $("#excelExport").click(function () {
            //     $("#jqxgrid").jqxGrid('exportview', 'xlsx', 'jqxGrid');           
            // });

            $("#excelExport").click(function () {
                var value = $("#input").val();
                $("#jqxgrid").jqxGrid('exportdata', 'xlsx', value);           
            });

            $('#openDial').click(function () {
                $('#jqxwindow').jqxWindow('open');
            });
            
            $("#jqxwindow ").jqxWindow({ height:250, width: 250, okButton: $('#excelExport')});
            $('#jqxwindow').jqxWindow('close');
            $("#input").jqxInput({placeHolder: "Kies bestandsnaam", width: '250px', height: '25px'});

            $("#pdfExport").click(function () {
                $("#jqxgrid").jqxGrid('exportview', 'pdf', 'jqxGrid');
            });

        });

    </script>

</head>
<body class="default">
       <style>     
        .green {
            color: black;
            background-color: #c6efce;
        }
        .yellow {
            color: black;
            background-color: #ffeb9c;
        }
        .red {
            color: black;
            background-color: #ffc7ce;
        }

        .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
            color: black;
            background-color: #c6efce;
        }
        .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
            color: black;
            background-color: #ffeb9c;
        }
        .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
            color: black;
            background-color: #ffc7ce;
        }
    </style>
<p style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; color: rgb(143, 143, 143)">Licentie Overzicht</p>
        <div id="jqxgrid"></div>
        <div id= "jqxwindow" style="margin-top: 20px;">
            <div style="float: left;">
                <input type="text" id="input" />
                <input type="button" value="Export naar Excel" id="excelExport" />
            </div>
            <input type="button" value="Open Dialog" id="openDial" />
            <div style="margin-left: 10px; float: left;">
                <input type="button" value="Export naar PDF" id="pdfExport" />
            </div>
        </div>
</body>
</html>

June 4, 2021 at 12:02 pm in reply to: 1 CSV file for multiple grids with column selection 1 CSV file for multiple grids with column selection #120322

paulcobben

Participant

Okay I try to explain it more easily.
I have multiple html files with only 1 grid per html file.
I have only 1 CSV file with 150 columns and 3000 lines.

Now within jqwidgets defining a grid, I first have to declare ALL the columns from the CSV in the source section. So all 150 columns. Which I do not need in specific grids. I only want a part of that (only 1) CSV. I typed ‘…………’ because I did not want to type all the 150 datafields for this example.
Example of code below:

<script type="text/javascript">
        $(document).ready(function () {
            var url = '../../sampledata/nasdaq_vs_sp500.txt';

            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Column1', type: 'string' },
                    { name: 'Column2', type: 'string' },
                    { name: 'Column3', type: 'string' },
                    ............
                    { name: 'Column84', type: 'string' },
                    { name: 'Column85', type: 'string' },
                    ............
                    { name: 'Column150, type 'string' }
                ],
                url: url
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#grid").jqxGrid(
            {
                width: getWidth('Grid'),
                source: dataAdapter,
                columnsresize: true,
                columns: [
                  { text: 'Department', datafield: 'Column2',  width: 250},
                  { text: 'Manager',    datafield: 'Column84', width: 200},
                  { text: 'Building',   datafield: 'Column85', width: 100}
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="grid"></div>
</body>

What would be nice, if you still could use the (only 1) CSV file with 150 columns, but in the source part only declare the datafields (columns in CSV file) that are needed for this specific grid.
I know that my suggested columnnumber does not exist in your api reference, but I think it is a great new feature.
Example below

<script type="text/javascript">
        $(document).ready(function () {
            var url = '../../sampledata/nasdaq_vs_sp500.txt';

            var source =
            {
                datatype: "csv",
                datafields: [
                    { columnnumber: '2' , name: 'Column1', type: 'string' },
                    { columnnumber: '84', name: 'Column84', type: 'string' },
                    { columnnumber: '85', name: 'Column85', type: 'string' }
                ],
                url: url
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#grid").jqxGrid(
            {
                width: getWidth('Grid'),
                source: dataAdapter,
                columnsresize: true,
                columns: [
                  { text: 'Department', datafield: 'Column2',  width: 250},
                  { text: 'Manager',    datafield: 'Column84', width: 200},
                  { text: 'Building',   datafield: 'Column85', width: 100}
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="grid"></div>
</body>

June 3, 2021 at 1:17 pm in reply to: Grid export to excel with filename dialog Grid export to excel with filename dialog #120304

paulcobben

Participant

Hi Yavor,

I’ve tried your script, but can not get a working page.
jqwidgetssample

<html>
<head>
    <meta charset="UTF-8">
    <title>Dashboard Project Forecast</title>
    <meta name="description" content="Dashboard Project Forecast" />             
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.metro.css" type="text/css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <script type="text/javascript" src="scripts/jquery-1.11.1.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/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/jqxgrid.sort.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="scripts/demos.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        // prepare the data
        var data = generatedata(100);
        var source =
        {
            localdata: data,
            datatype: "array",
            datafields:
            [
                { name: 'firstname', type: 'string' },
                { name: 'lastname', type: 'string' },
                { name: 'productname', type: 'string' },
                { name: 'available', type: 'bool' },
                { name: 'date', type: 'date' },
                { name: 'quantity', type: 'number' },
                { name: 'price', type: 'number' }
            ]                     
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        // initialize jqxGrid
        $("#grid").jqxGrid(
        {
            width: getWidth('Grid'),
            source: dataAdapter,                
            altrows: true,
            sortable: true,
            selectionmode: 'multiplecellsextended',
            columns: [
              { text: 'First Name', datafield: 'firstname', width: 130 },
              { text: 'Last Name', datafield: 'lastname', width: 130 },
              { text: 'Product', datafield: 'productname', width: 200 },
              { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' },
              { text: 'Ship Date', datafield: 'date', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'd' },
              { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' },
              { text: 'Price', datafield: 'price', cellsalign: 'right', align: 'right', cellsformat: 'c2' }
            ]
        });
        $("#openDial").jqxButton()
        $("#excelExport").jqxButton();

        $("#excelExport").click(function () {
            var value = $("#input").val();
           $("#grid").jqxGrid('exportdata', 'xlsx', value);           
        });

        $('#openDial').click(function () {
            $('#jqxwindow').jqxWindow('open');
        });
      
        $("#jqxwindow ").jqxWindow({ height:250, width: 250, okButton: $('#excelExport')});
        $('#jqxwindow').jqxWindow('close');
        $("#input").jqxInput({ width: '250px', height: '25px', placeHolder: 'Choose file name'});
    });
</script>
</head>
<body class='default'>
<div id='jqxwindow'>
    <div>Header</div>
   <div>  
     
    <input type="text" id="input"/>
    <input type="button" value="Export to Excel" id='excelExport' />       
    </div>
</div>
<input type="button" value="Open Dialog" id='openDial' />
</div>
    <div id="grid"></div>
</body>
</html>

June 3, 2021 at 1:01 pm in reply to: 1 CSV file for multiple grids with column selection 1 CSV file for multiple grids with column selection #120303

paulcobben

Participant

Hi Yavor Dashed,

I am sorry.
This does not solve my issue.
When I have 1 CSV with 150 columns and 3000 lines, I still have to declare the 150 datafields.
I only want to select 4, e.g. columns; 40, 41, 82 and 85. So I only want to declare those datafields as given in my topic start.
Then your solution is not exactly what I mean.
Is this even possible? Or is it a nice new feature in a future release?

Kind Regards,
Paul Cobben

June 2, 2021 at 11:09 am in reply to: 1 CSV file for multiple grids with column selection 1 CSV file for multiple grids with column selection #120283

paulcobben

Participant

Still no solution till know, Searched the forum and internet. Anyone?

May 28, 2021 at 8:21 am in reply to: 1 CSV file for multiple grids with column selection 1 CSV file for multiple grids with column selection #120231

paulcobben

Participant

Hi Hristo,

I think i was not quite clear with my topic start.
We have our own application (program) that exports a large csv.
Then I want only that (1) csv for all my dashboards, where per dashboard I can select only the columns that are needed.
So it is not about the export from a grid, but importing a csv into a grid.

Kind Regards,
Paul Cobben

November 23, 2020 at 12:48 pm in reply to: Call to a member function bind_param() on bool Call to a member function bind_param() on bool #113669

paulcobben

Participant

I don’t know if you understand my issue. It is not related to the master details setup. This works correctly.
I only try to update a cell in the 1st table. When I change a cell on the 1st table it gives the correct info to the getdata1.php, but this throws the error.

November 22, 2020 at 8:27 pm in reply to: Call to a member function bind_param() on bool Call to a member function bind_param() on bool #113662

paulcobben

Participant

Hi when I add the suggestion in your post, my master-detail functionality breaks. What do you mean exactly written in your last post?

November 17, 2020 at 2:56 pm in reply to: Call to a member function bind_param() on bool Call to a member function bind_param() on bool #113638

paulcobben

Participant

I am using XAMMP locally for hosting the pages, widgets and database. Root is the account and has all the rights to the database.
I am able to connect and query the database. Only the update is not working. Please tell me in my code where the problem is.

November 17, 2020 at 11:44 am in reply to: Call to a member function bind_param() on bool Call to a member function bind_param() on bool #113635

paulcobben

Participant

Hi Hristo,

This is not my problem in my opinion. I can query the database, there’s only a problem with updating.

Best Regards,
Paul Cobben

November 9, 2020 at 10:43 pm in reply to: Call to a member function bind_param() on bool Call to a member function bind_param() on bool #113552

paulcobben

Participant

Userresult.html was posted above.

Here is the getdata1.php

<?php
#Include the connect.php file

include ('connect.php');
// Connect to the database
$mysqli = new mysqli($hostname, $username, $password, $database);
// $mysqli->set_charset("utf8");
/* check connection */
if (mysqli_connect_errno())
	{
	printf("Connect failed: %s\n", mysqli_connect_error());
	exit();
	}
// get data and store in a json array
$query = "SELECT ID, samaccount, gebruikersnaam, percgereeduser, gemigreerd, notities FROM sfuser";
if (isset($_GET['update']))
{
	
	// UPDATE COMMAND
	$query = "UPDATE 'sfuser' SET 'samaccount'=?, 'gebruikersnaam'=?, 'percgereeduser'=?, 'gemigreerd'=?, 'notities'=?, WHERE 'ID'=?";
	$result = $mysqli->prepare($query);
	$result->bind_param('ssiisi', $_GET['samaccount'], $_GET['gebruikersnaam'], $_GET['percgereeduser'], $_GET['gemigreerd'], $_GET['notities'], $_GET['ID']);
	$res = $result->execute() or trigger_error($result->error, E_USER_ERROR);
	printf ("Updated Record has id %d.\n", $_GET['ID']);
	echo $res;
}
else 
{
	// SELECT COMMAND
	$result = $mysqli->prepare($query);
	$result->execute();
 	/* bind result variables */
 	$result->bind_result($ID, $samaccount, $gebruikersnaam, $percgereeduser, $gemigreerd, $notities);
 	/* fetch values */
 	while ($result->fetch())
 		{
 		$sfuser[] = array(
			'ID' => $ID, 
			'samaccount' => $samaccount,
 			'gebruikersnaam' => $gebruikersnaam,
 			'percgereeduser' => $percgereeduser,
 			'gemigreerd' => $gemigreerd,
 			'notities' => $notities
 		);
 		}
 	echo json_encode($sfuser);
 	}
$result->close();
$mysqli->close();
/* close connection */
?>

September 2, 2020 at 6:37 pm in reply to: Nested tables with data from database Nested tables with data from database #112935

paulcobben

Participant

Hello Hristo,

There’s no error message in the console.
When I select a row in the 1st table, It only shows one line of details in the 2nd table, but must show more rows.

When I load the above code in Visual Studio Code, I get the following message in the debug console:
Uncaught TypeError: Cannot read property ‘samaccount’ of undefined userresult.html:97
No debug adapter, can not send ‘variables’

Userresult.html is the above code and line 97 is: var samaccount = event.args.row.samaccount;

Contents of getdata1.php

<?php
#Include the connect.php file
include ('connect.php');
// Connect to the database
$mysqli = new mysqli($hostname, $username, $password, $database);
/* check connection */
if (mysqli_connect_errno())
	{
	printf("Connect failed: %s\n", mysqli_connect_error());
	exit();
	}
// get data and store in a json array
$query = "SELECT samaccount, gebruikersnaam, percgereeduser, gemigreerd, notities FROM sfuser";
 	{
 	// SELECT COMMAND
 	$result = $mysqli->prepare($query);
 	$result->execute();
 	/* bind result variables */
 	$result->bind_result($samaccount, $gebruikersnaam, $percgereeduser, $gemigreerd, $notities);
 	/* fetch values */
 	while ($result->fetch())
 		{
 		$sfuser[] = array(
 			'samaccount' => $samaccount,
 			'gebruikersnaam' => $gebruikersnaam,
 			'percgereeduser' => $percgereeduser,
 			'gemigreerd' => $gemigreerd,
 			'notities' => $notities
 		);
 		}
 	echo json_encode($sfuser);
 	}
$result->close();
$mysqli->close();
/* close connection */
?>

Contents of getdata2.php

<?php
#Include the connect.php file
include ('connect.php');
// Connect to the database
$mysqli = new mysqli($hostname, $username, $password, $database);
/* check connection */
if (mysqli_connect_errno())
	{
	printf("Connect failed: %s\n", mysqli_connect_error());
	exit();
	}
// get data and store in a json array
$query = "SELECT samaccount, gebruikersnaam, applicatienaam, percgereedpackage, omschrijving, afdeling, actief, typewerkplek FROM sfpackage";
 	{
 	// SELECT COMMAND
 	$result = $mysqli->prepare($query);
 	$result->execute();
 	/* bind result variables */
 	$result->bind_result($samaccount, $gebruikersnaam, $applicatienaam, $percgereedpackage, $omschrijving, $afdeling, $actief, $typewerkplek);
 	/* fetch values */
 	while ($result->fetch())
 		{
 		$sfpackage[] = array(
			'samaccount' => $samaccount,
			'gebruikersnaam' => $gebruikersnaam,
 			'applicatienaam' => $applicatienaam,
			'percgereedpackage' => $percgereedpackage,
			'omschrijving' => $omschrijving,
			'afdeling' => $afdeling,
			'actief' => $actief,
			'typewerkplek' => $typewerkplek
 		);
 		}
 	echo json_encode($sfpackage);
 	}
$result->close();
$mysqli->close();
/* close connection */
?>

June 2, 2020 at 2:37 pm in reply to: Please CRUD example with CSV file on server Please CRUD example with CSV file on server #112126

paulcobben

Participant

We already are able to write data to another location than the browser (mostly downloads folder), but it also keeps saving it to the downloads folder.
We only want to write the file to the chosen location in the save-file.php.
We only changed the save-file.php as below.

***REMOVED LICENSED CODE***

July 5, 2019 at 12:14 pm in reply to: I meed 1page with csv files as a variable I meed 1page with csv files as a variable #105989

paulcobben

Participant

Thanks Todor,

After a lot of searching I have solved it in another way:

	    function findGetParameter(parameterName) {
			var result = null,
				tmp = [];
			location.search
				.substr(1)
				.split("&")
				.forEach(function (item) {
				  tmp = item.split("=");
				  if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
				});
//			document.getElementById("insert").innerHTML = tmp;
			return result;
			}
        $(document).ready(function () {
            // prepare the data
 			var source1 =
            {
                datatype: "csv",
                datafields: [
                    { name: 'ImageID',       type: 'string' },
					{ name: 'Variant',       type: 'string' },
					{ name: 'Groep',         type: 'string' },
					{ name: 'SubVersion',    type: 'string' }
					
                ],
                url: "Data/p" + findGetParameter( "package" ) + ".CSV",

Author

Posts

Viewing 15 posts - 1 through 15 (of 21 total)

1 2 →