jQWidgets Forums

Viewing 15 results - 76 through 90 (of 177 total)

← 1 … 5 6 7 … 12 →

Author

Search Results

May 16, 2017 at 6:21 pm #93652

Topic: Problem with export.php

in forum Chart

wisog

Participant

I’m trying to export a chart as image, but having problems on local machine.
I have an active subscription, mounted the export.php o local, if I set the url as http://www.jqwidgets.com/export_server/export.php it all works, but if I set local file, the result file it seams to be corrupted.

The jqwidget export server gives me a file size of 28,417 bytes
and the local one gives 29,354 bytes, using the exact same chart ( set two button, each point to each server )

The enviroment uses PHP 5.4.3 and the md5 value of my export.php file is b10400feb020f4327bfee4449f0de1da
What can be wrong?

May 11, 2017 at 1:28 pm #93496

In reply to: renderstatusbar angular2

Ivo Zhulev

Participant

Hi gab,

Like with React, soon all demos will be available on Angular too.
Below is the Angular variant of the demo StatusBar from our original demos:

app.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';

import { jqxGridComponent } from '../assets/jqwidgets-ts/angular_jqxgrid';
import { jqxDropDownListComponent } from '../assets/jqwidgets-ts/angular_jqxdropdownlist';
import { jqxInputComponent } from '../assets/jqwidgets-ts/angular_jqxinput';
import { jqxWindowComponent } from '../assets/jqwidgets-ts/angular_jqxwindow';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent implements AfterViewInit {
    @ViewChild('myGrid') myGrid: jqxGridComponent;
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent;
    @ViewChild('myInput') myInput: jqxInputComponent;
    @ViewChild('myWindow') myWindow: jqxWindowComponent;

    ngAfterViewInit(): void {
        this.createButtons();
    }

    dropDownSource: string[] = ['First Name', 'Last Name', 'Product', 'Quantity', 'Price'];

    getAdapter = (): any => {
        let source: any =
            {
                localdata: generatedata(15),
                datatype: 'array',
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'available', type: 'bool' }
                ],
                updaterow: (rowid: number, rowdata: any, commit: any): void => {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    commit(true);
                }
            };

        let dataAdapter: any = new $.jqx.dataAdapter(source);

        return dataAdapter;
    }

    dataAdapter = this.getAdapter();

    columns =
    [
        { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
        { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
        { text: 'Product', datafield: 'productname', width: 170 },
        { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125 },
        { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2' },
        { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
    ];

    createButtonsContainers(statusbar: any): void {
        let buttonsContainer = document.createElement('div');
        buttonsContainer.style.cssText = 'overflow: hidden; position: relative; margin: 5px;';

        let addButtonContainer = document.createElement('div');
        let deleteButtonContainer = document.createElement('div');
        let reloadButtonContainer = document.createElement('div');
        let searchButtonContainer = document.createElement('div');

        addButtonContainer.id = 'addButton';
        deleteButtonContainer.id = 'deleteButton';
        reloadButtonContainer.id = 'reloadButton';
        searchButtonContainer.id = 'searchButton';

        addButtonContainer.style.cssText = 'float: left; margin-left: 5px;';
        deleteButtonContainer.style.cssText = 'float: left; margin-left: 5px;';
        reloadButtonContainer.style.cssText = 'float: left; margin-left: 5px;';
        searchButtonContainer.style.cssText = 'float: left; margin-left: 5px;';

        buttonsContainer.appendChild(addButtonContainer);
        buttonsContainer.appendChild(deleteButtonContainer);
        buttonsContainer.appendChild(reloadButtonContainer);
        buttonsContainer.appendChild(searchButtonContainer);

        statusbar[0].appendChild(buttonsContainer);
    }

    createButtons(): void {
        let addButtonOptions = {
            width: 80, height: 25, value: 'Add',
            imgSrc: '../assets/images/add.png',
            imgPosition: 'center', textPosition: 'center',
            textImageRelation: 'imageBeforeText'
        }
        let addButton = jqwidgets.createInstance('#addButton', 'jqxButton', addButtonOptions);

        let deleteButtonOptions = {
            width: 80, height: 25, value: 'Delete',
            imgSrc: '../assets/images/close.png',
            imgPosition: 'center', textPosition: 'center',
            textImageRelation: 'imageBeforeText'
        }
        let deleteButton = jqwidgets.createInstance('#deleteButton', 'jqxButton', deleteButtonOptions);

        let reloadButtonOptions = {
            width: 80, height: 25, value: 'Reload',
            imgSrc: '../assets/images/refresh.png',
            imgPosition: 'center', textPosition: 'center',
            textImageRelation: 'imageBeforeText'
        }
        let reloadButton = jqwidgets.createInstance('#reloadButton', 'jqxButton', reloadButtonOptions);

        let searchButtonOptions = {
            width: 80, height: 25, value: 'Find',
            imgSrc: '../assets/images/search.png',
            imgPosition: 'center', textPosition: 'center',
            textImageRelation: 'imageBeforeText'
        }
        let searchButton = jqwidgets.createInstance('#searchButton', 'jqxButton', searchButtonOptions);

        // add new row.
        addButton.addEventHandler('click', (event) => {
            console.log(this.myGrid)
            let datarow = generatedata(1);
            this.myGrid.addrow(null, datarow[0]);
        });
        // delete selected row.
        deleteButton.addEventHandler('click', (event) => {
            let selectedrowindex = this.myGrid.getselectedrowindex();
            let rowscount = this.myGrid.getdatainformation().rowscount;
            let id = this.myGrid.getrowid(selectedrowindex);
            this.myGrid.deleterow(id);
        });
        // reload grid data.
        reloadButton.addEventHandler('click', (event) => {
            this.myGrid.source(this.getAdapter());
        });
        // search for a record.
        searchButton.addEventHandler('click', (event) => {
            this.myWindow.open();
            this.myWindow.move(60, 60);
        });
    }

    findBtnOnClick(): void {
        this.myGrid.clearfilters();
        let searchColumnIndex = this.myDropDownList.selectedIndex();
        let datafield = '';
        switch (searchColumnIndex) {
            case 0:
                datafield = 'firstname';
                break;
            case 1:
                datafield = 'lastname';
                break;
            case 2:
                datafield = 'productname';
                break;
            case 3:
                datafield = 'quantity';
                break;
            case 4:
                datafield = 'price';
                break;
        }
        let searchText = this.myInput.val();
        let filtergroup = new $.jqx.filter();
        let filter_or_operator = 1;
        let filtervalue = searchText;
        let filtercondition = 'contains';
        let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        filtergroup.addfilter(filter_or_operator, filter);
        this.myGrid.addfilter(datafield, filtergroup);
        // apply the filters.
        this.myGrid.applyfilters();
    }

    clearBtnOnClick(): void {
        this.myGrid.clearfilters();
    }
}

app.component.html

<jqxGrid #myGrid
    [width]="850" [source]="dataAdapter" [showstatusbar]="true"
    [renderstatusbar]="createButtonsContainers" [columns]="columns">
</jqxGrid>

<jqxWindow #myWindow [width]="210" [height]="180" [autoOpen]="false" [resizable]="false">
    <div>Find Record</div>
    <div style="overflow: hidden">
        <div>Find what:</div>
        <div style="margin-top: 5px">

            <jqxInput #myInput [width]="194" [height]="23"></jqxInput>

        </div>
        <div style="margin-top: 7px; clear: both">Look in:</div>
        <div style="margin-top: 5px">

            <jqxDropDownList #myDropDownList
                [width]="200" [height]="23" [selectedIndex]="0" 
                [source]="dropDownSource" [autoDropDownHeight]="true">
            </jqxDropDownList>

        </div>
        <div>

            <jqxButton style="margin-top: 15px; margin-left: 50px; float: left"
                (onClick)="findBtnOnClick()" [width]="70">
                Find
            </jqxButton>

            <jqxButton style="margin-left: 5px; margin-top: 15px; float: left"
                (onClick)="clearBtnOnClick()" [width]="70">
                Clear
            </jqxButton>

        </div>
    </div>
</jqxWindow>

If you have other questions, please feel free to ask

Best Regards,
Ivo

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

February 13, 2017 at 2:44 pm #91526

In reply to: Angular2 Webpack budle js

rjwijnen

Participant

I tried the AOT compilation (a bit different from whats on this website) But i still have: Uncaught ReferenceError: jqxBaseFramework is not defined. (With the import of:
import ‘./app/jqwidgets/jqxcore’;
import ‘./app/jqwidgets/jqxdraw’
import ‘./app/jqwidgets/jqxbargauge’;

Tsconfig-aot.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "skipLibCheck": true,
    "lib": [
      "es2015",
      "dom"
    ]
  },
  "files": [
    "angularApp/app/app.module.ts",
    "angularApp/app/about/about.module.ts",
    "angularApp/app/jqw/jqw.module.ts",
    "angularApp/app/test/test.module.ts",
    "angularApp/main-aot.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit": true
  },
  "compileOnSave": false,
  "buildOnSave": false
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "suppressImplicitAnyIndexErrors": true,
    "removeComments": true,
    "noImplicitAny": true,
    "skipLibCheck": true,
    "lib": [
      "es2015",
      "dom"
    ],
    "types": [
      "node"     
    ]
  },
  "files": [
    "angularApp/app/app.module.ts",
    "angularApp/app/about/about.module.ts",
    "angularApp/app/jqw/jqw.module.ts",
    "angularApp/app/test/test.module.ts",
    "angularApp/main.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true
  },
  "compileOnSave": false,
  "buildOnSave": false
}

webpack.prod.js:

var path = require('path');

var webpack = require('webpack');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var helpers = require('./webpack.helpers');

console.log('@@@@@@@@@ USING PRODUCTION @@@@@@@@@@@@@@@');

module.exports = {

    entry: {
        'vendor': './angularApp/vendor.ts',
        'polyfills': './angularApp/polyfills.ts',
        'app': './angularApp/main-aot.ts' // AoT compilation
    },

    output: {
        path: './wwwroot/',
        filename: 'dist/[name].[hash].bundle.js',
        chunkFilename: 'dist/[id].[hash].chunk.js',
        publicPath: '/'
    },

    resolve: {
        extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
    },

    devServer: {
        historyApiFallback: true,
        stats: 'minimal',
        outputPath: path.join(__dirname, 'wwwroot/')
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader',
                    'angular-router-loader?aot=true&genDir=aot/'
                ]
            },
            {
                test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)$/,
                loader: 'file-loader?name=assets/[name]-[hash:6].[ext]'
            },
            {
                test: /favicon.ico$/,
                loader: 'file-loader?name=/[name].[ext]'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
            }
        ],
        exprContextCritical: false
    },

    plugins: [
        new CleanWebpackPlugin(
            [
                './wwwroot/dist',
                './wwwroot/assets'
            ]
        ),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            output: {
                comments: false
            },
            sourceMap: false
        }),
        new webpack.optimize.CommonsChunkPlugin(
            {
                name: ['vendor', 'polyfills']
            }),

        new HtmlWebpackPlugin({
            filename: 'index.html',
            inject: 'body',
            template: 'angularApp/index.html'
        }),

        new CopyWebpackPlugin([
            { from: './angularApp/images/*.*', to: 'assets/', flatten: true }
        ]),
        
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ]
};

January 25, 2017 at 8:33 pm #91008

Topic: grid No data to display

in forum Angular

holap

Participant

Hi, I’m trying to get the grid load data from server but I always get “No data to display” message, even if the grid actually calls the server url and downloads the json string. I spent some hours with this problem and can’t solve it.

index.html


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>OrionVending</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/site.css">
  <link rel="stylesheet" href="./libs/jqwidgets/styles/jqx.base.css" type="text/css" />
  <link href="./libs/jqwidgets/styles/jqx.web.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="./libs/jqwidgets/jqx-all.js"></script>
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

countries-list.ts


import { Component, OnInit } from '@angular/core';
import { CountryService } from "../services/country.service"
import { Country } from "../models/country.model"
import { jqxGridComponent } from "../../libs/jqwidgets-ts/angular_jqxgrid"

@Component({
  selector: 'countries-list',
  templateUrl: './countries-list.component.html',
  styleUrls: ['./countries-list.component.css']
})
export class CountriesListComponent implements OnInit {

  constructor(private service : CountryService) { }

  ngOnInit() {
  }

  source: any =
  {
      datatype: "jsonp",
      datafields: [
        { name: 'Id', type: 'number' },
        { name: 'Name', type: 'string' },
        { name: 'Code', type: 'string'}
      ],
      url : "http://localhost:51790/api/Countries/"
  };

  dataAdapter: any = new $.jqx.dataAdapter(this.source);
  columns: any[] =
  [
      { text: 'ID', datafield: 'Id', width: 50 },
      { text: 'Name', datafield: 'Name', width: 230},
      { text: 'Code', datafield: 'Code', width: 50},
  ];
}

countries-list.html


<jqxGrid #gridReference 
    [source]='dataAdapter' [sortable]='true'
    [pageable]='true' [columnsresize]='true' [autoheight]='true'
    [columns]='columns' [selectionmode]='"multiplerowsextended"'>
</jqxGrid>

app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CountryService } from "./services/country.service"

import { jqxGridComponent } from '../libs/jqwidgets-ts/angular_jqxgrid';

import { AppComponent } from './app.component';
import { CountriesListComponent } from './countries-list/countries-list.component';

@NgModule({
  declarations: [
    AppComponent,
    jqxGridComponent,
    CountriesListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [
    CountryService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html


<countries-list></countries-list>

response


[
  {
    "Id": 1,
    "Code": "IT",
    "Name": "Italy"
  },
  {
    "Id": 2,
    "Code": "GE",
    "Name": "Germany"
  },
  {
    "Id": 3,
    "Code": "FR",
    "Name": "France"
  }
]

December 19, 2016 at 9:55 am #89937

Topic: Angular2 Webpack budle js

in forum Angular

rjwijnen

Participant

I am new to Angular2 and Webpack. I used this: https://github.com/damienbod/Angular2WebpackVisualStudio as an starting point to set up an JQWidget prototype for our company. I thought it would be possible to bundle all the JS files into one file, but i am having difficulties with the JQWidget JS files. (For example:
Index.html:

<!doctype html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Angular 2 Webpack Template</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

vendor.ts


import 'jquery/src/jquery';
import 'bootstrap/dist/js/bootstrap';

import './css/bootstrap.css';
import './css/bootstrap-theme.css';

import './styles/jqx.base.css';

import './scripts/jqxcore';
import './scripts/jqxdraw';
import './scripts/jqxbargauge';

main-aot.ts:

// Entry point for AoT compilation.
export * from './polyfills';
export * from './vendor';

import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';

enableProdMode();

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Tsconfig-aot.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap":  true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "./wwwroot/aot",
    "rootDir": "./app",
    "typeRoots": [ "./node_modules/@types" ],
    "types": [
      "node"
    ]
  },
  "angularCompilerOptions": {
    "skipMetadataEmit": true
  },
  "exclude": [
    "node_modules",
    "aot"
  ]
}

var path = require('path');

var webpack = require('webpack');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');

console.log("@@@@@@@@@ USING DEVELOPMENT @@@@@@@@@@@@@@@");

module.exports = {

    devtool: 'source-map',
    performance: {
        hints: false
    },
    entry: {
        'app': './app/main.ts' // JiT compilation
    },

    output: {
        path: "./wwwroot/",
        filename: 'dist/[name].bundle.js',
        publicPath: "/"
    },

    resolve: {
        extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
    },

    devServer: {
        historyApiFallback: true,
        stats: 'minimal',
        outputPath: path.join(__dirname, 'wwwroot/')
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader?tsconfig=tsconfig.json',
                    'angular2-template-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
                exclude: /node_modules/,
                loader: "file-loader?name=assets/[name]-[hash:6].[ext]",
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
            }
        ],
        exprContextCritical: false
    },

    plugins: [
        new CleanWebpackPlugin(
            [
                './wwwroot/dist',
                './wwwroot/fonts',
                './wwwroot/assets'
            ]
        ),

        new HtmlWebpackPlugin({
            filename: 'index.html',
            inject: 'body',
            template: 'index.html'
        }),

        new CopyWebpackPlugin([
            { from: './angular2App/images/*.*', to: "assets/", flatten: true }
        ])
        
    ], resolve: {
        modules: [
          'node_modules',
          path.resolve(__dirname, 'app')
        ],
        extensions: ['.ts', '.js']
    },

};

But i am getting errors like:
jqxBaseFramework is not defined

October 5, 2016 at 11:02 pm #87944

Topic: getrowdata sometime returns undefined

in forum Grid

phaefele

Participant

Hi,

I have an issue in my method get_selected_algo_ids() – it looks up the selected rows and then tries to get the row data using getrowdata. The grid is a multiplerowsadvanced grid. The problem is that about 25% of the time, I get undefined when I call getrowdata. This especially happens if I select two non-contiguous rows, and right-click to bring up my context menu when get_selected_algo_ids() / getrowdata is called.

Also of note is that I call updatebounddata every few seconds via a separate timer.

Any ideas on what is wrong.

Many thanks,
Paul

Here is my code:

`<!DOCTYPE html>
<html>
<head>

<title>Backtest Results: Paul Development</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<!– Bootstrap –>
<link href=”//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css” rel=”stylesheet”>
<link rel=”stylesheet” href=”/static/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link href=”/static/jqwidgets/styles/jqx.bootstrap.css” rel=”stylesheet”>
<link rel=”stylesheet” href=”/static/jqwidgets/styles/irwin.css” type=”text/css” />
<link rel=”stylesheet” href=”/static/css/irwin.css” type=”text/css” />

</head>
<body>

ga(‘create’, ‘UA-BLANKEDOUT-1’, ‘auto’);
ga(‘send’, ‘pageview’);
</script>

$(document).ready(function () {

//////////////////////////////////////////////////////////////////////////////////////////////////////
// Grid Context Menu incl dynamic External Analysis
//////////////////////////////////////////////////////////////////////////////////////////////////////

var context_menu_X = -1;
var context_menu_Y = -1;
var context_menu_data = -1;

// Icons from: http://www.flaticon.com/packs/font-awesome
var BASE_MENU_DATA = [ {“id”: “1”, “parentid”: “-1”, “label”: “Create Comparison Notebook”},
{“id”: “2”, “parentid”: “-1”, “label”: “Create Comparison Spreadsheet”},
{“id”: “3”, “parentid”: “-1”, “label”: “Create Backtest Detail Report”},
{“id”: “4”, “parentid”: “-1”, “label”: “Show Return Graph”},
{“id”: “5”, “parentid”: “-1”, “label”: “Show Return Graph Incl Benchmark”},
{“id”: “6”, “parentid”: “-1”, “label”: “Show MTM Graph”},
{“id”: “7”, “parentid”: “-1”, “label”: “Show MTM Graph Less Benchmark”},
{“id”: “8”, “parentid”: “-1”, “label”: “Show Backtest Performance”},
{“id”: “prev_analysis_submenu”, “parentid”: “-1”, “subMenuWidth”: ‘400px’, “label”: “Previous Analysis”},
{“id”: “trade_analysis_submenu”, “parentid”: “-1”, “subMenuWidth”: ‘400px’, “label”: “Trade Analysis”}];

// Returns the select list of algo ids
function get_selected_algo_ids() {
var _row_index_list = $(“#runGrid”).jqxGrid(‘getselectedrowindexes’);
var algo_id_list = [];
for (i=0; i < _row_index_list.length; i++) {
var run = $(“#runGrid”).jqxGrid(‘getrowdata’, _row_index_list[i]);
if (run) {
algo_id_list.push(run.id);
}
}
return algo_id_list
};

//////////////////////////////////////////////////////////////////////////////////////////////////////
// Run set data spreadsheet / grid
//////////////////////////////////////////////////////////////////////////////////////////////////////

var browser_id = getCookie(‘browser_id’);
var data_url = ‘/rundata/none’;
if (browser_id && browser_id.length > 0) {
data_url = “/rundata/”+ browser_id;
}

$(“#runGrid”).jqxGrid({selectionmode: ‘multiplerowsadvanced’});

// disable the default browser’s context menu.
$(“#runGrid”).on(‘contextmenu’, function (e) { return false; });

// Handle context menu clicks
$(“#context_menu_div”).on(‘itemclick’, function (event) {

if ($.trim($(args).text()).indexOf(“Create Comparison”) >= 0) {
$(‘body’).css(‘cursor’, ‘wait’);
algo_id_list = get_selected_algo_ids()
// Construct a string of the ids to compare
$(“#report_algo_id_list”).val(algo_id_list.join(‘,’));
if ($.trim($(args).text()).indexOf(“Notebook”) >= 0) {
$(“#report_output_type”).val(‘notebook’);
} else {
$(“#report_output_type”).val(‘comparison_report’);
}
$(“#algo_report_form”).submit();
}
else if ($.trim($(args).text()).indexOf(“Create Backtest Detail Report”) >= 0) {
$(‘body’).css(‘cursor’, ‘wait’);
algo_id_list = get_selected_algo_ids()
// Construct a string of the ids to compare
$(“#report_algo_id_list”).val(algo_id_list.join(‘,’));
$(“#report_output_type”).val(‘run_report’);
$(“#algo_report_form”).submit();
}
else if ($.trim($(args).text()).indexOf(“Show Backtest Performance”) >= 0) {
algo_id_list = get_selected_algo_ids();
link = ‘/generic_algo_result/backtest_performance_result/’ + algo_id_list.join(‘+’);
window.open(link);
}
else if ($.trim($(args).text()).indexOf(“Graph”) >= 0) {
// Create a link the a comparison chart
algo_id_list = get_selected_algo_ids();
var link = ‘/backtest_chart/return/’;
if ($.trim($(args).text()).indexOf(“Less”) >= 0) {
link = ‘/backtest_chart/diff/’;
}
else if ($.trim($(args).text()).indexOf(“MTM”) >= 0) {
var link = ‘/backtest_chart/mtm/’;
}
if ($.trim($(args).text()).indexOf(“Benchmark”) >= 0) {
link = link + ‘B+’;
}
link = link + algo_id_list.join(‘+’);

var stop_update_on_edit = 0;

$(“#runGrid”).bind(‘cellbeginedit’, function (event) {
stop_update_on_edit = 1;
});

$(“#runGrid”).on(‘cellendedit’, function (event) {
var args = event.args;
var algo_id = args.row[‘id’];
var field = args.datafield;
var new_value = args.value;
if (field == ‘delete_date’) {
new_value = new_value.toISOString().slice(0,10).replace(/-/g,””); // Turn into YYYYMMDD
}

$.post(‘/update_algo_data’, {data: JSON.stringify(algo_id.toString() + ‘,’ + field + ‘,’ + new_value.toString())});

stop_update_on_edit = 0;
})

// Build the context menu based on the right-click
$(“#runGrid”).on(‘rowclick’, function (event) {
if (event.args.rightclick) {
$(“#runGrid”).jqxGrid(‘selectrow’, event.args.rowindex);

// Store where we want the context menu to come up
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
context_menu_X = parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft;
context_menu_Y = parseInt(event.args.originalEvent.clientY) + 5 + scrollTop;

var algo_id_list = get_selected_algo_ids();
if (algo_id_list != ”) {
$.post(‘/dynamic_context_menu’, {data: JSON.stringify(algo_id_list)},
function(data, status) {

var ea_list = [];
if (status == ‘success’) {
ea_list = JSON.parse(data);
}

context_menu_data = BASE_MENU_DATA.slice(); // copy the list
var start_index = context_menu_data.length + 1;
var max_len = -1;
for (var i = 0; i < ea_list.length; i++) {
var icon = ”;
if (ea_list[i][2] == ‘gspread’ || ea_list[i][2] == ‘gdata’) {
icon = ‘spreadsheet_16.png’;
} else if (ea_list[i][2] == ‘notebook’) {
icon = ‘ipython_notebook_16.png’;
} else {
icon = ‘bar_chart_16.png’;
}
var label = “” + ea_list[i][1];
var menu_len = ea_list[i][1].length;
if (menu_len > max_len) {
max_len = menu_len;
}

// Make the sub menu length correct
max_len = Math.min(600, max_len);
context_menu_data[1][“subMenuWidth”] = (max_len * 9 + 20).toString() + “px”;

// Create the menu
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’);
cm = $(‘#context_menu_div’).jqxMenu({ source: records, height: (BASE_MENU_DATA.length + 3) * 24, width: ‘300px’, autoOpenPopup: false, mode: ‘popup’ });

// Open the menu now it is created
cm.jqxMenu(‘open’, context_menu_X, context_menu_Y);

$(“li[id=’menuSeparator’]”).attr(“class”,”jqx-menu-item-separator jqx-rc-all”); // From http://www.jqwidgets.com/community/topic/separator-inside-source-based-jqmenu/#post-62736

// Disable the previous run menu item if there are none.
if (ea_list.length == 0) {
$(“#context_menu_div”).jqxMenu(‘disable’, “prev_analysis_submenu”, true);
}
});
} else {
var error=1; // Have this so we can at least not show the menu if we can’t get the IDs
}
return false;
}
});

//////////////////////////////////////////////////////////////////////////////////////////////////////
// Refresh the grids every 5 seconds
//////////////////////////////////////////////////////////////////////////////////////////////////////

setInterval(function () {
if (stop_update_on_edit == 0) {
$(“#runGrid”).jqxGrid(‘updatebounddata’, ‘cells’);
}
}, 15000);

//////////////////////////////////////////////////////////////////////////////////////////////////////
// Code to show the new Notebook URL as a popup. When we want to show the popup,
// compare_algos_notebook_url is set and so window.open is in Javascript
//////////////////////////////////////////////////////////////////////////////////////////////////////

// If the compare notebook url has been specified (done on algo_report_form POST), open a window for it.
window.open(“http://localhost:5002/notebooks/Compare%20Runs%20-%205163.ipynb”); // Open the compare algo url if supplied

});
</script>

<!– This makes the body take up the whole frame. Not sure why putting this in the style block does not work.
See http://www.jqwidgets.com/fluid-layout-with-fixed-header-and-footer/ –>
<style type=”text/css”>
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>

<table style=”border-collapse: separate; border-spacing:0; background-repeat: no-repeat;” width=”100%” background=”/static/images/vol_surface_wide.png”>
<tr width=”100%” >
<td width=’4%’ align=”left”></td>
<td width=”6%” align=”left” valign=”middle”><h2 style=”color:black”><b>Irwin</b></h2></td>
<td width=”60%” align=”left” valign=”left”><span style=”font-size:1.9em; color:DimGray”>Backtest Results: Paul Development</span><span style=”font-size:0.7em” id=’browser_id_field’></span></td>

<div id=’jqxWidget’ style=”position: absolute; box-sizing:border-box; -moz-box-sizing:border-box; padding-top: 0px; padding-bottom: 60px; width: 100%; height: 100%;”>
<div id=”runGrid”></div>
</div>
<div id=’context_menu_div’>
</div>
<div style=”overflow: hidden;”>
<form method=”POST” id=”algo_report_form” style=”display: none;”>
<label for=”report_algo_id_list”>report_algo_id_list</label> <input id=”report_algo_id_list” name=”report_algo_id_list” type=”text” value=””>
<label for=”report_output_type”>report_output_type</label> <input id=”report_output_type” name=”report_output_type” type=”text” value=””>
<input id=”algo_report_submit” name=”algo_report_submit” type=”submit” value=”algo_report_submit”>
</form>
</div>

</body>
</html>

September 22, 2016 at 2:26 pm #87633

In reply to: Chat image export request from server

Srikanth

Participant

Hi,
I need to download/export JQX Chart to HTML….any possible cases/help???

September 20, 2016 at 12:51 pm #87542

In reply to: Chat image export request from server

Christopher

Participant

Hi Mallikarjun Baddur,

If you are a customer with a Developer or Enterprise license, you will gain access to the file export.php. Then you can use it to export charts using your own server.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

September 20, 2016 at 11:47 am #87529

In reply to: Grid sample for virtual scrolling loading data from JSP

Vrushali

Participant

Hi Hritso,

Thanks for your help. I tried the first example you have provided. However, the grid only scrolls for 3,4 times. Loads upto 17th record. The scrollbar pretty long. And it does allow to scroll below after 17th record. I am not sure what is wrong. Could you please check my code below.

——————————- JSP Page —————————————–

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>MAPP | Data Logger Dashboard </title>
   
    <!-- Bootstrap -->
    <link href="KNEOLib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="KNEOLib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="KNEOLib/nprogress/nprogress.css" rel="stylesheet">
    
    <!-- Custom Theme Style -->
    <link href="build/css/custom.min.css" rel="stylesheet">
    <link href="images/logo.ico" rel="shortcut icon" type="image/x-icon">
    
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/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/jqxbuttons.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxscrollbar.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxdatatable.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxmenu.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/jqxdata.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxtooltip.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxwindow.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxnumberinput.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxinput.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxcalendar.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxdatetimeinput.js"></script>
		<script	type="text/javascript"	src="jqwidgets/globalization/globalize.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxcombobox.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxsplitter.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxexpander.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxtabs.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxcalendar.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.sort.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxgrid.filter.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxgrid.selection.js"></script>
		<script	type="text/javascript"	src="jqwidgets/jqxpanel.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/jqxvalidator.js"></script>
		<script type="text/javascript" src="jqwidgets/jqxdata.export.js"></script>
		<script type="text/javascript" src="jqwidgets/jqxgrid.export.js"></script>				
		<script type="text/javascript" src="jqwidgets/jqxgrid.aggregates.js"></script>
		<script type="text/javascript" src="jqwidgets/jqxgrid.grouping.js"></script>
		<script	type="text/javascript"	src="scripts/demos.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
        
        		var  customFilterWhere;
        		customFilterWhere = "";
        	
		 //----------------RAW Data Grid -----------------------------------//
				
			   var source_Raw_Data = {
                datatype: "json",
                 datafields: [
                 {   name: 'TRACE_DATE', type: 'date' }, 
            	 {   name: 'PLC_NAME',   type: 'string' }, 
             	 {   name: 'CODE',       type: 'string' }, 
            	 {   name: 'MESSAGE',    type: 'string'	}, 
           		 {   name: 'RISE',       type: 'date'   }, 
           		 {   name: 'FALL',       type: 'date'	}, 
           		 {   name: 'DOWNTIME',   type: 'string' }],           		 
	 			id: 'Id_Raw_Data',
                cache: false,			  	
                url: 'MaintJsps/populateRawData.jsp',
                sortcolumn: 'TRACE_DATE',
                sortdirection: 'asc'
                               
            };
            
            var dataAdapter_Raw_Data = new $.jqx.dataAdapter(source_Raw_Data,{
            
            	beforeprocessing: function (data) {
					source_Raw_Data.totalrecords = data[0].TotalRows;
					console.log("Total:"+source_Raw_Data.totalrecords);
                },
                formatData: function (data) {                     	      
                	data.customFilter = customFilterWhere;
                	return data;
                },              
        });
                       

        $("#RawData").jqxGrid({
                width: 1000,
                source: dataAdapter_Raw_Data,
                filterable: true,
                sortable: true,   
                virtualmode: true,
                rendergridrows: function(obj) {             
                return obj.data;
                },
                showstatusbar: true,
                statusbarheight: 25,
                showaggregates: true, 
                columns: [
	                  { text: 'Trace Date', datafield: 'TRACE_DATE', width: 100, cellsformat: 'dd-MM-yyyy'},
	                  { text: 'Machine', datafield: 'PLC_NAME', width: 140 },
	                  { text: 'Event Code', datafield: 'CODE', width: 90, cellsformat: 'F2', cellsalign: 'center' },
	                  { text: 'Event Massage', datafield: 'MESSAGE', width: 350 },
	                  { text: 'Rise Time', datafield: 'RISE', width: 100, cellsformat: 'T'},
	                  { text: 'Fall Time', datafield: 'FALL', width: 100, cellsformat: 'T'},
	                  { text: 'Duration(Sec.)', datafield: 'DOWNTIME', width: 120, cellsformat: 'F2', cellsalign: 'center'}	                  
	                ],	              	             
            });

			// ------------------------- RAW Data Grid End -------------------------

 	        });
    </script>    
    
    
  </head>

 <body class="nav-md">
   <jsp:include page="TemplateNavBar.jspf"/>

    <!-- page content Start -->
  
    <div class="right_col" role="main">
 
	<div id="RawData"></div>
	
	</div>  
    <!-- page Content End -->
    
      <!-- footer content -->
        <footer>
          <div class="pull-right">TESTING</div>
          <div class="clearfix"></div>
        </footer>
        <!-- /footer content -->
  
    <!-- Custom Theme Scripts -->
    <script src="build/js/custom.min.js"></script>
      
 </body>
</html>

——————————- Data Loading JSP ————————————-

<%@ page import="java.sql.*"%>
<%@ page import="com.google.gson.*"%>  
<%@ page import="global.dbconnect.*"%> 
 
<%

	String where = "";

	String customFilter = request.getParameter("customFilter");
	if(customFilter == null) customFilter = "" ;

	String sort = request.getParameter("$orderby");
	if(sort == null) sort= " TRACE_DATE  " ;
	
	String filterscount = request.getParameter("filterscount");
	if(filterscount == null) filterscount= "0" ;

	if (Integer.parseInt(filterscount) > 0) {
		where = request.getParameter("where");
		if(where == null) where = "" ;
	}
	
	if (where.equals("") && !customFilter.equals("")) 
		where = " Where " + customFilter;
	else
		if (!where.equals("") && !customFilter.equals("")) 
			where = where + " AND " + customFilter;		
	
	System.out.println("Custom Filter:"+customFilter);
			
	String recordstartindex = request.getParameter("recordstartindex");
	if(recordstartindex == null) recordstartindex = "0" ;

	String recordendindex = request.getParameter("recordendindex");
	if(recordendindex == null) recordendindex= "16" ;
			
	int rows = Integer.parseInt(recordendindex) - Integer.parseInt(recordstartindex) ;
	String limitStr = "";
	
	if (rows > 0) 
		limitStr = " LIMIT " + recordstartindex + "," + String.valueOf(rows);  
				
	DBConnection dbConnection = new DBConnection();	
 	ResultSet totalPLC_ALARMList;
 		
	totalPLC_ALARMList = dbConnection.exeQuery("SELECT COUNT(*) AS Count FROM plc_alarm  " + where);    
    String totalRecords = "";

	while (totalPLC_ALARMList.next()) {
		totalRecords = totalPLC_ALARMList.getString("Count");
	}
	
	totalPLC_ALARMList.close();
		
	String sql = "select  TRACE_DATE , PLC_NAME , CODE, MESSAGE , RISE , FALL ,DOWNTIME  from PLC_ALARM " 
	+ where
	+ " ORDER BY "
	+ sort 
	+ limitStr;
	
	System.out.println(sql);
	
	ResultSet plcalarmlist = dbConnection.exeQuery(sql);

	boolean totalRecordsAdded = false;

	JsonArray recordsArray = new JsonArray();
	while (plcalarmlist.next()) {		
		JsonObject currentRecord = new JsonObject();
		
		currentRecord.add("TRACE_DATE",new JsonPrimitive(plcalarmlist.getString("TRACE_DATE")));
		currentRecord.add("PLC_NAME",new JsonPrimitive(plcalarmlist.getString("PLC_NAME")));
		currentRecord.add("CODE",new JsonPrimitive(plcalarmlist.getString("CODE")));		
		currentRecord.add("MESSAGE",new JsonPrimitive(plcalarmlist.getString("MESSAGE")));			
		currentRecord.add("RISE",new JsonPrimitive(plcalarmlist.getString("RISE")));		
		currentRecord.add("FALL",new JsonPrimitive(plcalarmlist.getString("FALL")));		
		currentRecord.add("DOWNTIME",new JsonPrimitive(plcalarmlist.getString("DOWNTIME")));																	
		
		if (totalRecordsAdded == false) {
			currentRecord.add("totalRecords", new JsonPrimitive(
					totalRecords));
			totalRecordsAdded = true;			
		}

		recordsArray.add(currentRecord);
	}
	
	out.print(recordsArray);
	out.flush();
	dbConnection.closeConection();	
%>

September 20, 2016 at 5:41 am #87509

Topic: Chat image export request from server

in forum Chart

Mallikarjun Baddur

Participant

Hi,

We are using JQWidgets charts for data trend display and our customers are happy with it. Now the same chart images are need to be embedded in auto generated PDF reports which are generating at server side.

The ‘saveAsPNG’ method is making request to ‘http://www.jqwidgets.com/export_server/export.php’ with encoding content and filename.

Can we trigger request from server to above URL? If so what could be the expected value in ‘content’ request parameter?
If not what can be the best mechanism to achieve that. Please suggest us. This is urgent requirement for us.

Thanks,
Mallikarjun

September 19, 2016 at 10:09 pm #87506

Topic: reload jqgrid on submit button

in forum Grid

ae50042

Participant

Hi guys,

I’m trying to do a very simple window with two datetime picker, a submit button and a grid, basically I have would like to reload the grid with the new datetime values everytime I press the submit button. When I press the button I receive the message:

TypeError: jQuery(...).jqGrid is not a function 
jQuery("#jqxgrid").jqGrid("setGridParam", {datatype: "json"})

Questions are:

1 – Googling I read that depends on the scripts import order, but it’s seems ok, can you tell more about this?
2 – Should I define first the grid and then populate it with fresh data each time the submit button is pressed? If so, could you post code about it?

P.S. I’m not very expert, any suggestion about the code will be appreciated.

This is the main part of the code:

Html:

<!DOCTYPE html>
<html lang="it-it" dir="ltr" xml:lang="it-it" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<base href="http://localhost/JOOMLA/index.php/it/tabella-dati">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="Super User" name="author">
<meta content="Sito per Steiel per la configurazione e gestione dei dispositivi RW14" name="description">
<meta content="Joomla! - Open Source Content Management" name="generator">
<title>Tabella Dati</title>
<link rel="canonical" href="http://localhost/JOOMLA/index.php/it/tabella-dati?id_dispositivo=16&nome_dispositivo=s15_007">
<link type="image/vnd.microsoft.icon" rel="shortcut icon" href="/JOOMLA/templates/protostar/favicon.ico">
<link type="text/css" href="/JOOMLA/media/system/css/jqx.base.css" rel="stylesheet">
<link type="text/css" href="/JOOMLA/media/system/css/jqx.orange.css" rel="stylesheet">
<link type="text/css" href="/JOOMLA/templates/protostar/css/template_blue.css" rel="stylesheet">
<link type="text/css" href="/JOOMLA/media/mod_languages/css/template.css" rel="stylesheet">
<script type="text/javascript" src="/JOOMLA/media/jui/js/jquery.min.js">
<script type="text/javascript" src="/JOOMLA/media/jui/js/jquery-noconflict.js">
<script type="text/javascript" src="/JOOMLA/media/jui/js/jquery-migrate.min.js">
<script type="text/javascript" src="/JOOMLA/media/system/js/caption.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxcore.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxgrid.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxgrid.sort.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxgrid.pager.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxgrid.selection.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxgrid.edit.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxdatetimeinput.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxcalendar.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxtooltip.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxbuttons.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/globalization/globalize.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxdata.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxmenu.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxcheckbox.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxlistbox.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxdropdownlist.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxinput.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxscrollbar.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxwindow.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxtabs.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxchart.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxchart.rangeselector.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxdata.export.js">
<script type="text/javascript" src="/JOOMLA/media/system/jqWidgets/jqxgrid.export.js">
<script type="text/javascript" src="/JOOMLA/media/jui/js/bootstrap.min.js">
<script type="text/javascript" src="/JOOMLA/templates/protostar/js/template.js">
<script type="text/javascript">
<link type="text/css" rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans">
<style type="text/css">
</head>
.... //jqGrid and other stuff definition
</html>

Javascript:

jQuery(document).ready(function() {

	lang = jQuery("#lang").val();

	jQuery.get("../../media/system/labels_inth/lang.php", {
		"lang" : lang,
		"mode" : 2
	}, 
	function(data, success) {
		labels = JSON.parse(data);
		main_function();
	});

});

function main_function() {
    createGrid();
    jQuery("#jqxButton_submit").on('click', function() {
          jQuery("#jqxgrid").jqGrid("setGridParam", {datatype: "json"}).trigger("reloadGrid", [{current: true}]);
    });
};

function createGrid(){
	var dataFields = [
	                  { name: 'utc', map:'can>utc', type:'date'},
	                  { name: 'local', map:'can>local', type:'date'},
	                  { name: 'ch01', map:'can>ch01'},
	                  { name: 'ch02', map:'can>ch02'},
	                  { name: 'ch03', map:'can>ch03'},
	                  { name: 'ch04', map:'can>ch04'},
	                  { name: 'ch05', map:'can>ch05'},
	                  { name: 'ch06', map:'can>ch06'},
	                  { name: 'al01', map:'can>al01'},
	                  { name: 'al02', map:'can>al02'},
	                  { name: 'al03', map:'can>al03'},
	                  { name: 'al04', map:'can>al04'},
	                  { name: 'al05', map:'can>al05'},
	                  { name: 'al06', map:'can>al06'}
	                  ];
	                  
	var data_da = jQuery("#jqxDaData").jqxDateTimeInput("value");
	var data_a = jQuery("#jqxAData").jqxDateTimeInput("value");
	var da_def = data_da.getFullYear() + "-" + (data_da.getMonth() + 1 ) + "-" + data_da.getDate() + " 00:00:00";
	var a_def = data_a.getFullYear() + "-" + (data_a.getMonth() + 1) + "-" + data_a.getDate() + " 23:59:59";
	var id_face = jQuery("#jqxDDLiface").jqxDropDownList("getSelectedItem").originalItem.id;
	var url_get_new = url_get + "?iface=" + id_face + "&id_disp=" + id_dispositivo + "&a=" + a_def + "&da=" + da_def + "&type_date=" + type_date;

	jQuery.get(url_get, {
		"type" : "columns_series",
		"iface" : id_face,
		"id_disp" : id_dispositivo,
		"a" : a_def,
		"da" : da_def
	})
	.done(function(data) {
		var phpColumns = JSON.parse(data).columns;
		var phpSeries = JSON.parse(data).seriesGroup;

		var source = {
			datatype : "json",
			datafields : dataFields,
			id : 'Data',
			url : url_get_new,
			root : 'dati',
			updaterow: function (rowid, rowdata, commit) {
				var year = rowdata.local.getFullYear();
				var month = rowdata.local.getMonth() + 1;
				var day = rowdata.local.getDate();
				var hours = rowdata.local.getHours();
				var minutes=rowdata.local.getMinutes();
				var seconds = rowdata.local.getSeconds();
				var date = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds ;
                                jQuery.ajax({
                                      dataType: 'json',
                                      url: url_get,
                                      data: "type=update&id_disp=" + id_dispositivo + "&local=" + date + "&note=" + rowdata.note,
                                      success: function (data, status, xhr) {alert("SI");commit(true);},
                                      error: function () {alert("NO");commit(false);}
                               });
                        }
                };
					
		if (jQuery('#jqxTabs').jqxTabs('selectedItem') == 0) {		
			var dataAdapter = new jQuery.jqx.dataAdapter(source);
			jQuery("#jqxgrid").jqxGrid({
				width : "98%",
				height : "520",
				autoHeight : false,
				source : dataAdapter,
				scrollmode : 'logical',
				editable: true,
				pageable: false,
	            		selectionmode: 'singlecell',
	            		editmode: 'click',
				columns : phpColumns,
			});
		} 
		jQuery("#jqxgrid").on('bindingcomplete', function(event) {
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "utc", 'hidden', true);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "local", 'width', 140);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "local", 'editable', false);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch01", 'editable', false);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch02", 'editable', false);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch03", 'editable', false);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch04", 'editable', false);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch05", 'editable', false);
			jQuery("#jqxgrid").jqxGrid('setcolumnproperty', "ch06", 'editable', false);
		});
	});
}

September 12, 2016 at 2:42 pm #87279

Topic: CSS border color on the grid-cell-hover

in forum Grid

kingdomp

Participant

Hi,

I use the Theme Builder to generate my CSS for my GRID. I try to have a different color on my cell border when the mouse pass hover a row. Will like to have the top and bottom black. So fare I generate the CSS but is look that the border-color was not working. I put it red in this exemple. In the theme builder page is look working but when I export it, and using it, I don’t see the color. You can see a demo their, my border was suppose to be red on the mouse hover :

https://jsfiddle.net/kingdomp/c02nzk0b/2/
https://jsfiddle.net/kingdomp/c02nzk0b/2/

.jqx-fill-state-hover-GAINGRID, .jqx-widget-GAINGRID .jqx-grid-cell-hover-GAINGRID
{
color: #000000;
text-shadow: none;
border-color: #FF0000;
background-color: transparent;
background-image: -moz-linear-gradient(top, transparent, transparent);
background-image: -ms-linear-gradient(top, transparent, transparent);
background-image: -o-linear-gradient(top, transparent, transparent);
background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), to(transparent));
background-image: -webkit-linear-gradient(top, transparent, transparent);
background-image: linear-gradient(top, transparent, transparent);
background-image: linear-gradient(to bottom, transparent, transparent);
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-background-clip: padding-box;
font-family: calibri 14px;
}

September 10, 2016 at 9:53 pm #87256

Topic: Angular 2 jqxbutton

in forum Angular

Gary

Participant

I have two issues when working with a button.

1. I can disable the button through properties and button class changes and disable=true but button responsive to mouse click.

2. I can not get cursor set to pointer. I believe this is inheritance issue with css classes. I have Bootstrap 3.3.7 loaded first and it sets cursor to pointer for role=button. Then jqx-button class resets cursor to default. If I change default to pointer it works through browser development function.

I’m using chrome browser.

Below is Angular 2 component.

/// <reference path=”../vendor/jqwidgets-ts/jqwidgets.d.ts” />
import {Component, ViewChild, AfterViewChecked, ViewEncapsulation, DoCheck, ViewContainerRef} from ‘@angular/core’;

import {Overlay, overlayConfigFactory} from ‘angular2-modal’;
import {Modal, BSModalContext} from ‘angular2-modal/plugins/bootstrap’;

import {jqxGridComponent} from ‘../vendor/jqwidgets-ts/angular_jqxgrid’;
import {jqxButtonComponent} from ‘../vendor/jqwidgets-ts/angular_jqxbutton’;
import {jqxNotificationComponent} from ‘../vendor/jqwidgets-ts/angular_jqxnotification’;

import {LogService} from “./log.service”;
@Component({
selector: ‘my-grid’,
template: `<span defaultOverlayTarget></span>
{{AccountName}}
<angularGrid (OnRowclick)=”OnRowclick($event)”></angularGrid>
<div>
<angularButton (OnClick)=”onDelete()”></angularButton>
</div>
<angularNotification>
<div> Account has been succesfuly deleted.</div>
</angularNotification>
`,
directives: [jqxGridComponent, jqxButtonComponent, jqxNotificationComponent],
providers: [Modal]
})
export class GridComponent implements AfterViewChecked, DoCheck {
AccountName: string = ”;
RowIndex: number = 0;
TotalRows: number = 0;
MessageNotification: string = ”;
@ViewChild(jqxGridComponent) myGrid: jqxGridComponent;
@ViewChild(jqxButtonComponent) deleteButton: jqxButtonComponent;
@ViewChild(jqxNotificationComponent) msgNotification: jqxNotificationComponent;
settings: jqwidgets.GridOptions;
deleteButtonSettings: jqwidgets.ButtonOptions;
msgNotificationSettings: jqwidgets.NotificationOptions;
flag: Boolean = false;

url = “../vendor/data/accounts.json”;
source =
{
datatype: “json”,
datafields: [
{name: ‘AcctName’, type: ‘string’},
{name: ‘AcctCategory’, type: ‘string’},
{name: ‘AcctType’, type: ‘string’},
{name: ‘AcctNumber’, type: ‘string’},
{name: ‘AcctOpenDate’, type: ‘date’},
{name: ‘AcctDescription’, type: ‘string’},
{name: ‘AcctBalance’, type: ‘int’},
{name: ‘AcctStatus’, type: ‘bool’}
],
url: this.url
};

dataAdapter = new $.jqx.dataAdapter(this.source, {
downloadComplete: function (data, status, xhr) {
},
loadComplete: function (data) {
},
loadError: function (xhr, status, error) {
}
});

constructor(private logService: LogService, public modal: Modal) {
this.settings = {
width: ‘100%’,
source: this.dataAdapter,
pageable: false,
autoheight: true,
sortable: true,
altrows: false,
theme: ‘energyblue’,
selectionmode: ‘none’,
enabletooltips: true,
editable: false,
columns: [
{
text: ‘Name’,
datafield: ‘AcctName’,
width: ‘20%’
},
{
text: ‘Description’,
datafield: ‘AcctDescription’,
align: ‘left’,
cellsalign: ‘left’,
width: ‘20%’
},
{
text: ‘Category’,
datafield: ‘AcctCategory’,
cellsalign: ‘left’,
align: ‘left’,
width: ‘10%’
},
{
text: ‘Type’,
datafield: ‘AcctType’,
align: ‘left’,
cellsalign: ‘left’,
width: ‘10%’
},
{
text: ‘Number’,
datafield: ‘AcctNumber’,
align: ‘left’,
cellsalign: ‘left’,
width: ‘10%’
},
{
text: ‘Open Date’,
datafield: ‘AcctOpenDate’,
align: ‘left’,
cellsalign: ‘left’,
cellsformat: ‘MM/dd/yyyy’,
width: ‘10%’
},
{
text: ‘Balance’,
datafield: ‘AcctBalance’,
align: ‘center’,
cellsalign: ‘right’,
cellsformat: ‘d2’,
width: ‘10%’
},
{
text: ‘Status Active ?’,
datafield: ‘AcctStatus’,
align: ‘center’,
cellsalign: ‘center’,
columntype: ‘checkbox’,
width: ‘10%’
},
],
columngroups: [
{text: ‘Product Details’, align: ‘center’, name: ‘ProductDetails’}
]
};

this.deleteButtonSettings = {
width: 100,
height: 25,
theme: ‘energyblue’,
value: ‘Delete’,
disabled: false,
textImageRelation: “imageBeforeText”,
textPosition: “left”,
imgSrc: “../vendor/jqwidgets/styles/images/close.png”
};

this.msgNotificationSettings = {
width: 350, position: “bottom-right”, opacity: 0.9,
autoOpen: false, animationOpenDelay: 800,
autoClose: true, autoCloseDelay: 3000,
template: “success”
};
}

ngDoCheck() {
this.logService.pushedData.subscribe(
data => {
this.AccountName = data.SelectedAccount;
this.RowIndex = data.SelectedRowIndex;
this.TotalRows = data.TotalRows;
}
);
}

setRow(): void {
this.myGrid.selectrow(this.RowIndex);

}

public ngAfterViewChecked(): void {
if (this.flag === false) {
var self = this;
self.Initialize();
}
this.myGrid.clearselection();
this.myGrid.selectrow(this.RowIndex);
this.flag = true;
}

Initialize(): void {
this.myGrid.createWidget(this.settings);
this.deleteButton.createWidget(this.deleteButtonSettings);
this.msgNotification.createWidget(this.msgNotificationSettings);

}

onDelete(): void {

var selectedrowindex = this.myGrid.getselectedrowindex();
//var rowscount = this.myGrid.getdatainformation.rowscount;
var id = this.myGrid.getrowid(selectedrowindex);

var data = this.myGrid.getrowdata(selectedrowindex);
//alert(data.AcctName + ” ” + data.AcctBalance);

this.modal.confirm()
.size(‘lg’)
.isBlocking(true)
.showClose(true)
.keyboard(27)
.titleHtml(‘<h4>Delete Account?</h4>’)
.body(‘Select the “<strong class=”alert-success”>Yes” button to delete or the “<strong class=”alert-danger”>No” button to cancel.’)
.okBtn(‘Yes’)
.okBtnClass(‘btn btn-success’)
.cancelBtn(‘No’)
.cancelBtnClass(‘btn btn-danger’)
.open()
.catch(err => alert(“ERROR”)) // catch error not related to the result (modal open…)
.then(dialog => dialog.result) // dialog has more properties,lets just return the promise for a result.
.then(result => {

this.myGrid.deleterow(id);
this.MessageNotification = ‘Account has been delete.’;
this.msgNotification.open();
}
) // if were here ok was clicked.
.catch(err => {
}) // if were here it was cancelled (click or non block click)
;
}

OnRowclick(event): void {

console.log(‘Row click’);

var datainformation = this.myGrid.getdatainformation();
var rowscount = datainformation.rowscount;
alert(rowscount);

var args = event.args;
// // row’s bound index.
var rowBoundIndex = args.rowindex;
this.RowIndex = args.rowindex;
this.myGrid.clearselection();
this.myGrid.selectrow(rowBoundIndex);
}

OnRowselect(event): void {

console.log(‘Row Select’);

}
}

July 26, 2016 at 10:29 am #86067