Search Results for 'Export to Image'

[HristoParticipant]

Hello walker1234,

This is the source code of the onSort event.
Could you provide more details about what is your issue with this?
As I look into your code I saw that you use the updatebounddata method in the onSort event this is not appropriate.
Because sorting functionality invokes this event and there you use method to update the data with the “sort” argument which will go into an infinite loop.

Please, provide us with an example based on it we could continue to work better.
I could share with you an example but I think this is not the desired scenario and then we need to repeat the process.
Please, take a look at this example:

import React, { Component } from "react";
import { render } from "react-dom";
import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css";

import JqxButton from "jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons";
import JqxComboBox from "jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox";
import JqxDropDownList, {
  IDropDownListProps
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist";
import JqxGrid, {
  IGridProps,
  jqx
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid";
import JqxInput from "jqwidgets-scripts/jqwidgets-react-tsx/jqxinput";
import JqxWindow from "jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow";
export interface IState extends IGridProps {
  dropDownSource: IDropDownListProps["source"];
}

interface AppProps {}
interface AppState {
  name: string;
}

const generatedata = (count: number) => {
  let data = new Array();
  let firstNames =
      [
          'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
      ];
  let lastNames =
      [
          'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
      ];
  let productNames =
      [
          'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
      ];
  let priceValues =
      [
          '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
      ];
  for (let i = 0; i < 200; i++) {
      let row = {};
      let productindex = Math.floor(Math.random() * productNames.length);
      let price = parseFloat(priceValues[productindex]);
      let quantity = 1 + Math.round(Math.random() * 10);
      row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
      row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
      row['productname'] = productNames[productindex];
      row['price'] = price;
      row['quantity'] = quantity;
      row['total'] = price * quantity;
      data[i] = row;
  }

  return data;
};

class App extends Component<{}, any> {
  private myGrid = React.createRef<JqxGrid>();
  private myDropDownList = React.createRef<JqxDropDownList>();
  private myInput = React.createRef<JqxInput>();
  private myWindow = React.createRef<JqxWindow>();

  constructor(props: {}) {
    super(props);

    this.firstNameColumnFilter = this.firstNameColumnFilter.bind(this);
    
    const rendertoolbar = (toolbar: any): void => {
      const style: React.CSSProperties = { float: "left", marginLeft: "5px" };
      const buttonsContainer = (
        <div
          style={{ overflow: "hidden", position: "relative", margin: "5px" }}
        >
          <div id={"addButton"} style={style} />
        </div>
      );
      // ReactDOM.render(buttonsContainer, toolbar[0]);
      render(buttonsContainer, toolbar[0]);
    };
    this.state = {
      columns: [
        {
          text: "First Name",
          columntype: "textbox",
          datafield: "firstname",
          filtertype: "list",
          width: 140,
          createfilterwidget: function (column, htmlElement, editor) {
            setTimeout(_ => {
              editor.jqxDropDownList("updateAt", "Choose item", 0 );
            });
          }
        },
        {
          text: "Last Name",
          datafield: "lastname",
          columntype: "textbox",
          width: 120,
          createfilterwidget: function (column, htmlElement, editor) {
            editor[0].setAttribute("placeholder", "Filtering value");
          }
        },
        { 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"
        }
      ],
      dropDownSource: [
        "First Name",
        "Last Name",
        "Product",
        "Quantity",
        "Price"
      ],
      rendertoolbar,
      source: this.getAdapter()
    };
  }
  public componentDidMount() {
    setTimeout(() => {
      this.createButtons();
    });
  }
  public firstNameColumnFilter = (): void => {
    let filtergroup = new jqx.filter();
    let filter_or_operator = 1;
    let filtervalue = 'Nancy';
    let filtercondition = 'contains';
    let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
    filtergroup.addfilter(filter_or_operator, filter);
    this.myGrid.current!.addfilter('firstname', filtergroup);
    this.myGrid.current!.applyfilters();
  };

  public ready = () => {
    // setTimeout(() => {
    //   this.firstNameColumnFilter();
    // });
  }

  public render() {
    return (
      <div>
        <JqxGrid
          ref={this.myGrid}
          width={750}
          source={this.state.source}
          showtoolbar={true}
          filterable={true}
          showfilterrow={true}
          rendertoolbar={this.state.rendertoolbar}
          columns={this.state.columns}
          ready={this.ready}
        />
      </div>
    );
  }
  private getAdapter = (): any => {
    const source: any = {
      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" }
      ],
      datatype: "array",
      localdata: generatedata(15),
      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);
      }
    };
    const dataAdapter: any = new jqx.dataAdapter(source);
    return dataAdapter;
  };
  private createButtons(): void {
    const handleClick = (event?: any) => {
      this.myGrid.current!.clearfilters();
    };

    var testableDiv = document.createElement("div");
    testableDiv.innerText = "This is the Text!";

    render(
      <JqxButton onClick={handleClick}
          width={120} height={25} value={'Remove Filter'} imgSrc={'https://www.jqwidgets.com/angular/images/close.png'}
          imgPosition={'center'} textPosition={'center'} textImageRelation={'imageBeforeText'} />,
      document.getElementById("addButton")
    );
  }
}

render(<App />, document.getElementById("root"));

I would like to purpose your attention in the first two columns.
It demonstrates two approaches how to set the placeholder option there.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

Hi,

I have a question to the new ThemeBuilder. PS: It’s very nice ?

But I have several points which are special:

Point 1:

If I export a new CSS from ThemeBuilder, after the –jqx-accordion-arrow-down-hovered-color-light is a “undefined”.

–jqx-accordion-arrow-up-hovered-color-light: url(‘images/metro-icon-up.png’);
–jqx-accordion-arrow-down-hovered-color-light: url(‘images/metro-icon-down.png’);
undefined
–jqx-button-default-text-color-light: rgba(85, 85, 85, 1);
–jqx-button-default-background-color-light: rgba(255, 255, 255, 1);

Point 2:

The .jqx-tabs-content-light includes a “padding:5px” line. Is there a possibility to set the padding in the ThemeBuilder? I use 0px; I must every time change it manually.

Point 3:

I’ve used the light theme builder theme. Now, all Date-Fields (jqxDateTimeInput) has no calendar icon. The Clock input field has one. Both are set for showing the Button and I can click on it and the calendar will start.

Point 4:

With the new Theme Builder and using altRows in Grid, the background color which is set with the classname will not be shown on lines with alternating color… Without alternating rows or the rows, which are not alternated, the class will be displayed. With the old theme, it works.

I use the version which is explained under following demo: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/showcase.htm

For me it’s a very important feature, because I mark special entries with different background colors.

Thanks,
Roland

[Peter StoevKeymaster]

Hi,

Please, share Stackblitz demo about your scenario.

The code below is with nested grids and dynamically added new rows. The example works with the current version.

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

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

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

export class AppComponent {
    @ViewChild('myGrid') myGrid: jqxGridComponent;

    source: any =
    {
        datafields: [
            { name: 'FirstName' },
            { name: 'LastName' },
            { name: 'Title' },
            { name: 'Address' },
            { name: 'City' }
        ],
        root: 'Employees',
        record: 'Employee',
        id: 'EmployeeID',
        datatype: 'xml',
        url: '../assets/employees.txt'
    };

    employeesAdapter: any = new jqx.dataAdapter(this.source);

	getWidth() : any {
		if (document.body.offsetWidth < 850) {
			return '90%';
		}
		
		return 850;
	}

    ordersSource: any =
    {
        datafields: [
            { name: 'EmployeeID', type: 'string' },
            { name: 'ShipName', type: 'string' },
            { name: 'ShipAddress', type: 'string' },
            { name: 'ShipCity', type: 'string' },
            { name: 'ShipCountry', type: 'string' },
            { name: 'ShippedDate', type: 'date' }
        ],
        root: 'Orders',
        record: 'Order',
        datatype: 'xml',
        url: '../assets/orderdetails.txt'
    };

    ordersDataAdapter = new jqx.dataAdapter(this.ordersSource, { autoBind: true });

    nestedGrids: any[] = new Array();

    // create nested grid.
    initRowDetails = (index: number, parentElement: any, gridElement: any, record: any): void => {
        let id = record.uid.toString();
        let nestedGridContainer = parentElement.children[0];
        this.nestedGrids[index] = nestedGridContainer;
        let filtergroup = new jqx.filter();
        let filter_or_operator = 1;
        let filtervalue = id;
        let filtercondition = 'equal';
        let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
        // fill the orders depending on the id.
        let orders = this.ordersDataAdapter.records;
        let ordersbyid = [];
        for (let i = 0; i < orders.length; i++) {
            let result = filter.evaluate(orders[i]['EmployeeID']);
            if (result)
                ordersbyid.push(orders[i]);
        }
        let ordersSource = {
            datafields: [
                { name: 'EmployeeID', type: 'string' },
                { name: 'ShipName', type: 'string' },
                { name: 'ShipAddress', type: 'string' },
                { name: 'ShipCity', type: 'string' },
                { name: 'ShipCountry', type: 'string' },
                { name: 'ShippedDate', type: 'date' }
            ],
            id: 'OrderID',
            localdata: ordersbyid
        }
        let nestedGridAdapter = new jqx.dataAdapter(ordersSource);
        if (nestedGridContainer != null) {

            let settings = {
                theme: 'material', 
                width: 780,
                height: 200,
                source: nestedGridAdapter, 
                columns: [
                    { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                    { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                    { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                    { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                    { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                ]
            };

            jqwidgets.createInstance(<code>#${nestedGridContainer.id}</code>, 'jqxGrid', settings);
        }
    }

    photoRenderer = (row: number, column: any, value: string): string => {
        let name = this.myGrid.getrowdata(row).FirstName;
        let imgurl = 'https://www.jqwidgets.com/angular/images/' + name.toLowerCase() + '.png';
        let img = '<div style="background: white;"><img style="margin: 2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
        return img;
    }

    renderer = (row: number, column: any, value: string): string => {
        return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
    }

    rowdetailstemplate: any = {
        rowdetails: '<div id="nestedGrid" style="margin: 10px;"></div>', rowdetailsheight: 220, rowdetailshidden: true
    };

    ready = (): void => {
        this.myGrid.addrow(null, {});
        this.myGrid.addrow(null, {});
    };

    columns: any[] =
    [
        { text: 'Photo', width: 50, cellsrenderer: this.photoRenderer },
        { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: this.renderer },
        { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: this.renderer },
        { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: this.renderer },
        { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: this.renderer },
        { text: 'City', datafield: 'City', width: 170, cellsrenderer: this.renderer }
    ];
}

Best Regards,
Peter

jQWidgets Team
https://www.jqwidgets.com

Hi there

We had chart export functionality working fine but suddenly it stopped working.
It is giving below error message when trying to export chart as image

Kindly advise the solution/workaround ASAP

Thanks
Abhishek

[adrianBalonParticipant]

Help, I want to load the value of city variable in jqxinput but it fails in

nestedGrid.addEventHandler(‘rowclick’, function (event) {
console.log(ordersbyid[event.args.rowindex].ShipCity );
this.city=ordersbyid[event.args.rowindex].ShipCity;
this.myInput.val(this.city)
});

ERROR
Error: Cannot read property ‘val’ of undefined

`File.ts
import { Component, ViewChild } from ‘@angular/core’;

import { jqxGridComponent } from ‘jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid.ts’;
import { jqxInputComponent } from ‘jqwidgets-scripts/jqwidgets-ts/angular_jqxinput’;

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

export class AppComponent {
@ViewChild(‘myGrid’) myGrid: jqxGridComponent;
@ViewChild(‘myInput’) myInput: jqxInputComponent;
city: any;
source: any =
{
datafields: [
{ name: ‘FirstName’ },
{ name: ‘LastName’ },
{ name: ‘Title’ },
{ name: ‘Address’ },
{ name: ‘City’ }
],
root: ‘Employees’,
record: ‘Employee’,
id: ‘EmployeeID’,
datatype: ‘xml’,
url: ‘../assets/employees.txt’
};

employeesAdapter: any = new jqx.dataAdapter(this.source);

getWidth(): any {
if (document.body.offsetWidth < 850) {
return ‘90%’;
}

return 850;
}

ordersSource: any =
{
datafields: [
{ name: ‘EmployeeID’, type: ‘string’ },
{ name: ‘ShipName’, type: ‘string’ },
{ name: ‘ShipAddress’, type: ‘string’ },
{ name: ‘ShipCity’, type: ‘string’ },
{ name: ‘ShipCountry’, type: ‘string’ },
{ name: ‘ShippedDate’, type: ‘date’ }
],
root: ‘Orders’,
record: ‘Order’,
datatype: ‘xml’,
url: ‘../assets/orderdetails.txt’
};

ordersDataAdapter = new jqx.dataAdapter(this.ordersSource, { autoBind: true });

nestedGrids: any[] = new Array();

// create nested grid.
initRowDetails = (index: number, parentElement: any, gridElement: any, record: any): void => {
let id = record.uid.toString();
let nestedGridContainer = parentElement.children[0];
this.nestedGrids[index] = nestedGridContainer;
let filtergroup = new jqx.filter();
let filter_or_operator = 1;
let filtervalue = id;
let filtercondition = ‘equal’;
let filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
let orders = this.ordersDataAdapter.records;
let ordersbyid = [];
for (let i = 0; i < orders.length; i++) {
let result = filter.evaluate(orders[i][‘EmployeeID’]);
if (result)
ordersbyid.push(orders[i]);
}
let ordersSource = {
datafields: [
{ name: ‘EmployeeID’, type: ‘string’ },
{ name: ‘ShipName’, type: ‘string’ },
{ name: ‘ShipAddress’, type: ‘string’ },
{ name: ‘ShipCity’, type: ‘string’ },
{ name: ‘ShipCountry’, type: ‘string’ },
{ name: ‘ShippedDate’, type: ‘date’ }
],
id: ‘OrderID’,
localdata: ordersbyid
}
let nestedGridAdapter = new jqx.dataAdapter(ordersSource);
if (nestedGridContainer != null) {

let settings = {
theme: ‘material’,
width: 780,
height: 200,
source: nestedGridAdapter,
columns: [
{ text: ‘Ship Name’, datafield: ‘ShipName’, width: 200 },
{ text: ‘Ship Address’, datafield: ‘ShipAddress’, width: 200 },
{ text: ‘Ship City’, datafield: ‘ShipCity’, width: 150 },
{ text: ‘Ship Country’, datafield: ‘ShipCountry’, width: 150 },
{ text: ‘Shipped Date’, datafield: ‘ShippedDate’, width: 200 }
]
};

const nestedGrid = jqwidgets.createInstance(#${nestedGridContainer.id}, ‘jqxGrid’, settings);

nestedGrid.addEventHandler(‘rowclick’, function (event) {
console.log(ordersbyid[event.args.rowindex].ShipCity );
this.city=ordersbyid[event.args.rowindex].ShipCity;
this.myInput.val(this.city)
});
}
}

photoRenderer = (row: number, column: any, value: string): string => {
let name = this.myGrid.getrowdata(row).FirstName;
let imgurl = ‘https://www.jqwidgets.com/angular/images/’ + name.toLowerCase() + ‘.png’;
let img = ‘<div style=”background: white;”></div>’;
return img;
}

renderer = (row: number, column: any, value: string): string => {
return ‘<span style=”margin-left: 4px; margin-top: 9px; float: left;”>’ + value + ‘</span>’;
}

rowdetailstemplate: any = {
rowdetails: ‘<div id=”nestedGrid” style=”margin: 10px;”></div>’, rowdetailsheight: 220, rowdetailshidden: true
};

ready = (): void => {
this.myGrid.showrowdetails(1);
};

columns: any[] =
[
{ text: ‘Photo’, width: 50, cellsrenderer: this.photoRenderer },
{ text: ‘First Name’, datafield: ‘FirstName’, width: 100, cellsrenderer: this.renderer },
{ text: ‘Last Name’, datafield: ‘LastName’, width: 100, cellsrenderer: this.renderer },
{ text: ‘Title’, datafield: ‘Title’, width: 180, cellsrenderer: this.renderer },
{ text: ‘Address’, datafield: ‘Address’, width: 300, cellsrenderer: this.renderer },
{ text: ‘City’, datafield: ‘City’, width: 170, cellsrenderer: this.renderer }
];

‘ file.html
<jqxInput #myInput
[width]=”200″ [height]=”25″ >
</jqxInput>

[TodorParticipant]

Hello Victor,

Unfortunately it is not possible to export data with images.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[Lucky_1110Participant]

app.component.html
<app-header></app-header>
<div class=”row”>
<div class=”col-xs-4″ style=”display: flex;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);font-weight: 800;margin-right:80px;border:1px outset #e6e8e99a;font-family: Arial, Helvetica, sans-serif;
“>
<jqxListBox #myListBox

[allowDrag]=”true”
[source]=”Lsource”
[width]=”270″
[height]=”‘105%'”
[theme]=”energyblue”
[dragEnd]=”dragEnd”
(onDragEnd)=”DragEnd($event)”
>
</jqxListBox>
</div>
<div class=”col-xs-8″>
<jqxScheduler #myScheduler style=” margin-top: 20px;
/* border:1px outset #647279; */
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(89, 93, 94, 0.2), 0 6px 20px 0 rgba(61, 80, 99, 0.19);
”
[date]=”date”
[width]=”1150″
[height]=”600″
[source]=”dataAdapter”
[showLegend]=”true”
[view]=”‘monthView'”
[appointmentDataFields]=”appointmentDataFields”
[editDialogCreate]=”editDialogCreate”
[resources]=”resources”
[views]=”views”
(onCellClick)=”CellClick($event)”

>
</jqxScheduler>
</div>

</div>

app.component.ts

import { Component, ViewChild, AfterViewInit } from ‘@angular/core’;
import { jqxListBoxComponent } from “jqwidgets-scripts/jqwidgets-ts/angular_jqxlistbox”;
import { DirectiveRegistryValuesIndex } from ‘@angular/core/src/render3/interfaces/styling’;
import { jqxSchedulerComponent } from ‘jqwidgets-scripts/jqwidgets-ts/angular_jqxscheduler’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent implements AfterViewInit{

@ViewChild(‘myScheduler’) myScheduler: jqxSchedulerComponent;
@ViewChild(‘myListBox’) myListBox: jqxListBoxComponent;

ngAfterViewInit(): void
{

}
generateAppointments(): any
{
let appointments = new Array();

let appointment1 = {
id: “id1”,
description: “Interviews for IT/DT”,
location: “”,
subject: “Interview with James”,
calendar: “Engineer 1”,
start: new Date(2019, 4, 23, 9, 0, 0),
end: new Date(2019, 4, 23, 12, 0, 0)
};
let appointment2 = {
id: “id2”, description: “”,
location: “”, subject: “IT Group Mtg.”, calendar: “Engineer 2”,
start: new Date(2019, 4, 24, 8, 0, 0),
end: new Date(2019, 4, 24, 10, 0, 0)
};
let appointment3 = {
id: “id3”, description: “”,
location: “”, subject: “Team Meet”, calendar: “Engineer 3”,
start: new Date(2019, 4, 23, 10, 0, 0),
end: new Date(2019, 4, 23, 15, 0, 0)
};
let appointment4 = {
id: “id4”, description: “”,
location: “”, subject: “COC Meet”, calendar: “Engineer 3”,
start: new Date(2019, 4, 15, 10, 0, 0),
end: new Date(2019, 4, 15, 15, 0, 0)
};
let appointment5 = {
id: “id5”, description: “”,
location: “”, subject: “All Hands Meet”, calendar: “Engineer 2”,
start: new Date(2019, 4, 2, 10, 0, 0),
end: new Date(2019, 4, 2, 12, 0, 0)
};

let appointment6 = {
id: “id6”, description: “”,
location: “”, subject: “Certification”,
calendar: “Certification”,
start: new Date(2019, 4, 7, 10, 0, 0),
end: new Date(2019, 4, 7, 12, 0, 0),
background: “red”,
allDay:”true”
};

appointments.push(appointment1);
appointments.push(appointment2);
appointments.push(appointment3);
appointments.push(appointment4);
appointments.push(appointment5);
appointments.push(appointment6);

return appointments;
}

source: any =
{
dataType: “array”,
dataFields: [
{ name: ‘id’, type: ‘string’ },
{ name: ‘description’, type: ‘string’ },
{ name: ‘location’, type: ‘string’ },
{ name: ‘subject’, type: ‘string’ },
{ name: ‘calendar’, type: ‘string’ },
{ name: ‘start’, type: ‘date’ },
{ name: ‘end’, type: ‘date’ },
{ name: ‘style’, type: ‘string’ },
{ name: ‘color’, type: ‘string’ },
{name: ‘Certification’, type:’Boolean’}

],
id: ‘id’,
localData: this.generateAppointments()
}

dataAdapter: any = new jqx.dataAdapter(this.source);
// date:any=new Date(2019, 4, 7, 12, 0, 0);

printButton: any = null;

appointmentDataFields: any =
{
from: “start”,
to: “end”,
id: “id”,
description: “description”,
location: “location”,
subject: “subject”,
resourceId: “calendar”
};

resources: any =
{
colorScheme: “scheme012”,
dataField: “calendar”,
source: new jqx.dataAdapter(this.source),
// renderAppointment: function(data)
// {
// // data Object properties
// // appointment – Object with the properties from the Scheduler.s source object.
// // width – int
// // height- int
// // textColor – hex
// // background – hex
// // borderColor – hex
// // style – string
// // cssClass – string
// // html – html string
// // view – string
// var img = ““;
// if (data.appointment.subject == “Nancy”) {
// var img = ““;
// }
// else if (data.appointment.subject == “Peter”) {
// var img = ““;
// }
// else if (data.appointment.subject == “Antony”) {
// var img = ““;
// }
// else if (data.appointment.subject == “John”) {
// var img = ““;
// }

// if (data.view == “weekView” || data.view == “dayView” || data.view == “monthView”) {
// data.html = img + “<i>” + data.appointment.subject + “</i>”;
// if (data.appointment.id == “id1”) {
// data.style = “#AA4643”;
// }
// else if (data.appointment.id == “id2” || data.appointment.id == “id6”) {
// data.style = “#309B46”;
// }
// else if (data.appointment.id == “id3”) {
// data.style = “#447F6E”;
// }
// }

// return data;
// }

};

views: any[] =
[
{
type:’dayView’,
showWeekends: false
},
{
type: “weekView”,
showWeekends: false,
timeRuler: {
scaleStartHour:8,
scaleEndHour:22,
hidden: false },
workTime:
{
fromDayOfWeek: 1,
toDayOfWeek: 5,
fromHour: 7,
toHour: 18
}
},
{
type: ‘monthView’,
monthRowAutoHeight: true,
workTime:
{
fromDayofWeek:1,
toDayOfWeek: 5,
hidden:true

}
},
‘agendaView’
];

isFirstLoad: boolean = true;

editDialogCreate = (dialog, fields, editAppointment) => {
if (this.isFirstLoad) {
this.isFirstLoad = false;
this.myScheduler.closeDialog();
dialog.jqxWindow({ isModal: true });
setTimeout(_ => {
dialog.jqxWindow({ height: 400 });
this.myScheduler.openDialog(480,200);
}, 100);
}

// fields.repeatContainer.hide();

fields.statusContainer.hide();
fields.timeZoneContainer.hide();
fields.colorContainer.hide();
fields.allDayLabel.html(“Certification”);

fields.subjectLabel.html(“Title”);
fields.locationLabel.html(“Where”);
// fields.allDay.html(“Certification”);
fields.fromLabel.html(“Start”);
fields.toLabel.html(“End”);
fields.resourceLabel.html(“Engineer/Certificate”);

// fields.subjectLabel.jqxValidator({
// rules: [{ input: fields.subject, message: ‘Title is required!’, action: ‘keyup, blur’, rule: ‘required’ }]
// });

let buttonElement = document.createElement(“BUTTON”);
buttonElement.innerText = ‘Print’;
buttonElement.style.cssFloat = ‘right’;
buttonElement.style.marginLeft = ’10px’;
buttonElement.style.padding=’6px 53px 21px 17px’;
buttonElement.id = ‘PrintButton’;

fields.buttons[0].appendChild(buttonElement);

let printButton: jqwidgets.jqxButton = jqwidgets.createInstance(‘#PrintButton’, ‘jqxButton’, {
theme: ‘material’,
width: 50,
height: 25
});

this.printButton = printButton;

printButton.addEventHandler(‘click’, function () {
let appointment = editAppointment;
if (!appointment && printButton.disabled) {
return;
}

let appointmentContent =
“<table class=’printTable’>” +
“<tr>” +
“<td class=’label’>Title</td>” +
“<td>” + fields.subject.val() + “</td>” +
“</tr>” +
“<tr>” +
“<td class=’label’>Start</td>” +
“<td>” + fields.from.val() + “</td>” +
“</tr>” +
“<tr>” +
“<td class=’label’>End</td>” +
“<td>” + fields.to.val() + “</td>” +
“</tr>” +
“<tr>” +
“<td class=’label’>Where</td>” +
“<td>” + fields.location.val() + “</td>” +
“</tr>” +
“<tr>” +
“<td class=’label’>Engineer</td>” +
“<td>” + fields.resource.val() + “</td>” +
“</tr>”
+ “</table>”;
let newWindow = window.open(”, ”, ‘width=800, height=500’),
document = newWindow.document.open(),
pageContent =
‘<!DOCTYPE html>\n’ +
‘<html>\n’ +
‘<head>\n’ +
‘<meta charset=”utf-8″ />\n’ +
‘<title>jQWidgets Scheduler</title>\n’ +
‘<style>\n’ +
‘.printTable {\n’ +
‘border-color: #aaa;\n’ +
‘}\n’ +
‘.printTable .label {\n’ +
‘font-weight: bold;\n’ +
‘}\n’ +
‘.printTable td{\n’ +
‘padding: 4px 3px;\n’ +
‘border: 1px solid #DDD;\n’ +
‘vertical-align: top;\n’ +
‘}\n’ +
‘</style>’ +
‘</head>\n’ +
‘<body>\n’ + appointmentContent + ‘\n</body>\n</html>’;
try {
document.write(pageContent);
document.close();
}
catch (error) {
}
newWindow.print();
});

//——–data Button——
let buttonElement1 = document.createElement(“BUTTON”);
buttonElement1.innerText = ‘Data’;
buttonElement1.style.cssFloat = ‘right’;
buttonElement1.style.marginLeft = ’10px’;
buttonElement1.style.padding=’6px 53px 21px 17px’;
buttonElement1.id = ‘DataButton’;

fields.buttons[0].appendChild(buttonElement1);

let dataButton: jqwidgets.jqxButton = jqwidgets.createInstance(‘#DataButton’, ‘jqxButton’, {
theme: ‘material’,
width: 50,
height: 25
});

// this.dataButton = dataButton;

dataButton.addEventHandler(‘click’, function () {
let appointment = editAppointment;
if (!appointment && dataButton.disabled) {
return;
}

let my_window = window.open(“”,”Test Data”,”status=0,width=1100,height=800″);
my_window.document.write(‘‘);

});

};

// Creating List
Lsource:String[] = [
‘Frontal-impact Test’,
‘Moderate Overlap tests’,
‘Side-impact tests’,
‘Roll-over tests’,
‘Small Overlap tests’,
‘Frontal Crash Test’,
‘Test on Hybrid’,
‘Preliminary Test’,
‘Stability Test’

];

DragEnd($event:any):void
{

let args = $event.args;
let label = args.label;
let value = args.value;
let originalEvent = args.originalEvent;
let target = originalEvent.target;
// let targetDateString = target.getAttribute(“data-date”);
let targetDate = new Date(args.originalEvent.timeStamp);
// let targetDateEnd = new Date(targetDateString);
// targetDateEnd.setMinutes(targetDate.getMinutes() + 30);

debugger;

var newAppointment = {
id:”id”,
description: “”,
location: “”,
subject: label,
calendar: “Engineer 1”,
start: targetDate ,
end: targetDate
};
debugger;

this.myScheduler.addAppointment(newAppointment);
let Lvalue = this.myListBox.getSelectedItem();
this.myListBox.disableItem(Lvalue);
debugger;
}

}

Hi, I’m trying to export my jqxGrid to an excel file but it does not download. I hope you can help me. Thank you.

This is my code and it does not show me any error in console.

function obtener_Personas() {

    var persona = $("[id*=ddlPersona]").val();
    var Sucursal = "";
    var id_Rol = 1;

    if (intervalo != 0) {
    
        var valores;
   
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "frmPersonas.aspx/Persona",
            contentType: "application/json; charset=utf-8",
            data: '{id_Persona:"' + persona + '",Sucursal:"' + Sucursal + '",id_Rol:"' + id_Rol + '"}',
            async: false,

            success: function(data) {

                if (data != '') {

                    valores = data.d.split("-");
                    var url_imagen = valores[1];
                    $("#imgProceso").attr("src", url_imagen);
                    valores = JSON.parse(valores[0]);                  

                }

                var gridSource =
                {

                    datatype: "json",
                    localdata: valores,
                    async: false

                };

                var gridDataAdapter = new $.jqx.dataAdapter(gridSource);

                $("#gvDatos").jqxGrid({
                    width: 1030,
                    columnsresize: true,
                    autoheight: true,
                    autorowheight: true,
                    autoheight: true,
                    altrows: true,
                    rowsheight: 35,
                    pageable: true,
                    sortable: true,
                    filterable: true,
                    source: gridDataAdapter,                  
                    columns: 
                    [
                                                                            { text: 'ID', datafield: 'id_Persona', width: 200 },
                                                                            { text: 'Sucursal', datafield: 'Sucursal', width: 200 },
                                                                            { text: 'Estado', datafield: 'Estado', width: 200 },
                                                                            { text: 'Municipio', datafield: 'Municipio', width: 200 },
                                                                            { text: 'Ciudad', datafield: 'Ciudad', width: 200 },
                                                                            { text: 'Nombre', datafield: 'Nombre', width: 200 }
                                                                           
                                                                      ]
                });

            },

            error: function(error) {
                alert(error.responseText);
                console.log(error.responseText);
                jsonValue = jQuery.parseJSON(Error.responseText);
                alert(error.respose.Text);
                alert("Error");
            }
        });

    }
    else {
        alert("Por favor seleccione todos los datos");
    }

}

This is my function to download my excel through a variable but it does not download anything and if it shows me the data in console, but I do not download the file (I have added the resources as indicated in your documentation). I do not have developer or company licenses.

var descarga;
function descargar_Excel() {    
    descarga = $("#gvDatos").jqxGrid('exportdata','xls');       
        console.log(descarga);
}

Hi, I’m trying to export my jqxGrid to an excel file but it does not download. I hope you can help me. Thank you.

This is my code and it does not show me any error in console.

function obtener_Personas() {

    var persona = $("[id*=ddlPersona]").val();
    var Sucursal = "";
    var id_Rol = 1;

    if (intervalo != 0) {
    
        var valores;
   
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "frmPersonas.aspx/Persona",
            contentType: "application/json; charset=utf-8",
            data: '{id_Persona:"' + persona + '",Sucursal:"' + Sucursal + '",id_Rol:"' + id_Rol + '"}',
            async: false,

            success: function(data) {

                if (data != '') {

                    valores = data.d.split("-");
                    var url_imagen = valores[1];
                    $("#imgProceso").attr("src", url_imagen);
                    valores = JSON.parse(valores[0]);                  

                }

                var gridSource =
                {

                    datatype: "json",
                    localdata: valores,
                    async: false

                };

                var gridDataAdapter = new $.jqx.dataAdapter(gridSource);

                $("#gvDatos").jqxGrid({
                    width: 1030,
                    columnsresize: true,
                    autoheight: true,
                    autorowheight: true,
                    autoheight: true,
                    altrows: true,
                    rowsheight: 35,
                    pageable: true,
                    sortable: true,
                    filterable: true,
                    source: gridDataAdapter,                  
                    columns: 
                    [
                                                                            { text: 'ID', datafield: 'id_Persona', width: 200 },
                                                                            { text: 'Sucursal', datafield: 'Sucursal', width: 200 },
                                                                            { text: 'Estado', datafield: 'Estado', width: 200 },
                                                                            { text: 'Municipio', datafield: 'Municipio', width: 200 },
                                                                            { text: 'Ciudad', datafield: 'Ciudad', width: 200 },
                                                                            { text: 'Nombre', datafield: 'Nombre', width: 200 }
                                                                           
                                                                      ]
                });

            },

            error: function(error) {
                alert(error.responseText);
                console.log(error.responseText);
                jsonValue = jQuery.parseJSON(Error.responseText);
                alert(error.respose.Text);
                alert("Error");
            }
        });

    }
    else {
        alert("Por favor seleccione todos los datos");
    }

}

This is my function to download my excel through a variable but it does not download anything and if it shows me the data in console, but I do not download the file (I have added the resources as indicated in your documentation). I do not have developer or company licenses.

var descarga;
function descargar_Excel() {    
    descarga = $("#gvDatosCompensaciones").jqxGrid('exportdata','xls');       
        console.log(descarga);
}

I have a grid with an image column and a custom @angular/material dialog defined, but I have problem integrating the two:

import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material';
import { DialogDetailComponent } from '../dialog-detail/dialog-detail.component';
import { jqxGridComponent } from '../../../node_modules/jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';

export class MyComponent {
    dialog: MatDialog;   // local instance of the @angular/material dialog

    constructor(dlg: MatDialog) { this.dialog = dlg; console.log("dialog obj:", this.dialog); // correctly prints the dialog obj };  
 
    columns: any[] =
    [
        { text: 'Name', datafield: 'name', width: '200' },
        ...
        { text: 'Action', datafield: 'id', editable: false, filterable: false,
          createwidget: (row: any, column: any, value: string, htmlElement: HTMLElement): void => {
              ...
              const vButton = jqwidgets.createInstance('#'+ vId, 'jqxButton', vOptions);
              vButton.addEventHandler('click', function (): void {
                  ...
                  const dialogConfig = new MatDialogConfig();
                  
                  dialogConfig.disableClose = true;
                  dialogConfig.autoFocus = true;
                  dialogConfig.data = row.bounddata;

                  // follow the angular material example to create a dialog
                  // <a href="https://material.angular.io/components/dialog/examples">@angular/material MatDialog documentation</a>
                  this.dialog.open(dialogDetailComponent, dialogConfig);
                  // the above statement fails as "this" no longer references the MyComponent

                  console.log(this);  // it prints a html dom element instead 
                  ...
              
          }
        }
     ]

In createwidget(), how can I make a call to the open() method that the local member “dialog” of the MyComponent has?

[MartinParticipant]

Hello LaxGulawani,

What is happening inside the requestDetailsByOrderId method? Fetching the data should not affect the DOM at all.
Also, there is a check: if (nestedGridContainer != null) before calling ReactDOM.render.
Below is a sample of loading the subdata dynamically, similarly to your example.

Please, note that in this case there is async: false set to the ordersDataAdapter, so the execution of the code does not continue
before the data is loaded.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';

class App extends React.PureComponent<{}, IGridProps> {
    private myGrid = React.createRef<JqxGrid>();
    private subGridData: any[] = [];

    constructor(props: {}) {
        super(props);
        this.loadSubDataById = this.loadSubDataById.bind(this);

        const source: any =
        {
            datafields: [
                { name: 'FirstName' },
                { name: 'LastName' },
                { name: 'Title' },
                { name: 'Address' },
                { name: 'City' }
            ],
            datatype: 'xml',
            id: 'EmployeeID',
            record: 'Employee',
            root: 'Employees',
            url: './assets/sampledata/employees.xml'
        };
    

        const photoRenderer = (row: number, column: any, value: string): string => {
            const name = this.myGrid.current!.getrowdata(row).FirstName;
            const imgurl = './assets/images/' + name.toLowerCase() + '.png';
            const img = '<div style="background: white;"><img style="margin: 2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
            return img;
        }

        const renderer = (row: number, column: any, value: string): string => {
            return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
        }

        const nestedGrids: any[] = [];

        const initrowdetails = (index: number, parentElement: any, gridElement: any, record: any): void => {
            const id = record.uid.toString();
            const nestedGridContainer = parentElement.children[0];
            nestedGrids[index] = nestedGridContainer;

            this.loadSubDataById(id);

            const ordersbyid = this.subGridData;
            
            const ordersSource = {
                datafields: [
                    { name: 'EmployeeID', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                id: 'OrderID',
                localdata: ordersbyid
            }
            const nestedGridAdapter = new jqx.dataAdapter(ordersSource);

            if (nestedGridContainer != null) {
                const columns: IGridProps['columns'] = [
                    { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                    { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                    { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                    { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                    { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                ];

                ReactDOM.render(
                    <JqxGrid width={780} height={200} source={nestedGridAdapter} columns={columns} />,
                    document.getElementById(nestedGridContainer.id)
                );
            }
        };

        this.state = {
            columns: [
                { text: 'Photo', width: 50, cellsrenderer: photoRenderer },
                { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer },
                { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer },
                { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer },
                { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer },
                { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer }
            ],
            initrowdetails,
            ready: (): void => {
                this.myGrid.current!.showrowdetails(1);
            },
            rowdetailstemplate: {
                rowdetails: '<div id="nestedGrid" style="margin: 10px;"></div>',
                rowdetailsheight: 220,
                rowdetailshidden: true
            },
            source: new jqx.dataAdapter(source)
        }
    }

    public render() {
        return (
            <JqxGrid ref={this.myGrid}
                // @ts-ignore
                width={getWidth('grid')} height={365} source={this.state.source} columns={this.state.columns}
                rowdetails={true} rowsheight={35} initrowdetails={this.state.initrowdetails}
                ready={this.state.ready} rowdetailstemplate={this.state.rowdetailstemplate} />
        );
    }

    private loadSubDataById(id: any) {      
        const ordersDetailsSource: any = {
            datafields: [
                { name: 'EmployeeID', type: 'string' },
                { name: 'ShipName', type: 'string' },
                { name: 'ShipAddress', type: 'string' },
                { name: 'ShipCity', type: 'string' },
                { name: 'ShipCountry', type: 'string' },
                { name: 'ShippedDate', type: 'date' }
            ],
            datatype: 'xml',
            record: 'Order',
            root: 'Orders',
            url: './assets/sampledata/orderdetails.xml'
        };

        const ordersDataAdapter = new jqx.dataAdapter(ordersDetailsSource, { autoBind: true, async: false });

        const filtergroup = new jqx.filter();
        const filtervalue = id;
        const filtercondition = 'equal';
        const filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);

        const orders = ordersDataAdapter.records;
        for (const order of orders) {
            const result = filter.evaluate(order.EmployeeID);
            if (result) {
                this.subGridData.push(order);
            }
        }
    }
}

export default App;

Best Regards,
Martin

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

[MartinParticipant]

Hello LaxGulawani,

The following example for nested grids of jqxGrid with React with typescript is working fine.
It is using exactly ReactDOM.render:

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';

class App extends React.PureComponent<{}, IGridProps> {

    private myGrid = React.createRef<JqxGrid>();

    constructor(props: {}) {
        super(props);

        const source: any =
        {
            datafields: [
                { name: 'FirstName' },
                { name: 'LastName' },
                { name: 'Title' },
                { name: 'Address' },
                { name: 'City' }
            ],
            datatype: 'xml',
            id: 'EmployeeID',
            record: 'Employee',
            root: 'Employees',
            url: './assets/sampledata/employees.xml'
        };

        const ordersDetailsSource: any = {
            datafields: [
                { name: 'EmployeeID', type: 'string' },
                { name: 'ShipName', type: 'string' },
                { name: 'ShipAddress', type: 'string' },
                { name: 'ShipCity', type: 'string' },
                { name: 'ShipCountry', type: 'string' },
                { name: 'ShippedDate', type: 'date' }
            ],
            datatype: 'xml',
            record: 'Order',
            root: 'Orders',
            url: './assets/sampledata/orderdetails.xml'
        };

        const ordersDataAdapter = new jqx.dataAdapter(ordersDetailsSource, { autoBind: true });

        const photoRenderer = (row: number, column: any, value: string): string => {
            const name = this.myGrid.current!.getrowdata(row).FirstName;
            const imgurl = './assets/images/' + name.toLowerCase() + '.png';
            const img = '<div style="background: white;"><img style="margin: 2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
            return img;
        }

        const renderer = (row: number, column: any, value: string): string => {
            return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
        }

        const nestedGrids: any[] = [];

        const initrowdetails = (index: number, parentElement: any, gridElement: any, record: any): void => {
            const id = record.uid.toString();
            const nestedGridContainer = parentElement.children[0];
            nestedGrids[index] = nestedGridContainer;
            const filtergroup = new jqx.filter();
            const filtervalue = id;
            const filtercondition = 'equal';
            const filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
            // fill the orders depending on the id.
            const orders = ordersDataAdapter.records;
            const ordersbyid = [];
            for (const order of orders) {
                const result = filter.evaluate(order.EmployeeID);
                if (result) {
                    ordersbyid.push(order);
                }
            }
            const ordersSource = {
                datafields: [
                    { name: 'EmployeeID', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                id: 'OrderID',
                localdata: ordersbyid
            }
            const nestedGridAdapter = new jqx.dataAdapter(ordersSource);

            if (nestedGridContainer != null) {
                const columns: IGridProps['columns'] = [
                    { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                    { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                    { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                    { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                    { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                ];

                ReactDOM.render(
                    <JqxGrid width={780} height={200} source={nestedGridAdapter} columns={columns} />,
                    document.getElementById(nestedGridContainer.id)
                );
            }
        };

        this.state = {
            columns: [
                { text: 'Photo', width: 50, cellsrenderer: photoRenderer },
                { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer },
                { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer },
                { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer },
                { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer },
                { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer }
            ],
            initrowdetails,
            ready: (): void => {
               this.myGrid.current!.showrowdetails(1);
            },
            rowdetailstemplate: {
                rowdetails: '<div id="nestedGrid" style="margin: 10px;"></div>',
                rowdetailsheight: 220,
                rowdetailshidden: true
            },
            source: new jqx.dataAdapter(source)
        }
    }

    public render() {
        return (
            <JqxGrid ref={this.myGrid}
                // @ts-ignore
                width={getWidth('grid')} height={365} source={this.state.source} columns={this.state.columns}
                rowdetails={true} rowsheight={35} initrowdetails={this.state.initrowdetails}
                ready={this.state.ready} rowdetailstemplate={this.state.rowdetailstemplate} />
        );
    }
}

export default App;

I hope this would help you!

Best Regards,
Martin

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

I am trying to do the export of grid to excel.
I am using the following code to the export

 excelBtnOnClick() {
    console.log('excelBtnOnClick()');
    this.myGrid.exportdata('xls', 'jqxGrid');
  }

I got the following error. what is is ‘getexportcolumntype’ means in the below error.

ReportEngineComponent.html:70 ERROR TypeError: Cannot read property 'indexOf' of null
    at c.(:8888/reportMgr/anonymous function)._getexportcolumntype (http://localhost:8888/gainangular/app-image-upload-image-upload-module~app-…s-module~app-my-data-my-data-module~app-predef-cust~3c0da948.js:33931:7668)
    at c.<anonymous> (jqxgrid.export.js:8)
    at Function.each (jqxcore.js:8)
    at c.(:8888/reportMgr/anonymous function).exportdata (http://localhost:8888/gainangular/app-image-upload-image-upload-module~app-…s-module~app-my-data-my-data-module~app-predef-cust~3c0da948.js:33931:1551)

I have a React project running over React Boilerplate 3.7.0 and this is my package.json:

{
  "name": "react-boilerplate",
  "version": "3.7.0",
  "description": "A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices",
  "repository": {
    "type": "git",
    "url": "git://github.com/react-boilerplate/react-boilerplate.git"
  },
  "engines": {
    "npm": ">=5",
    "node": ">=8.10.0"
  },
  "author": "Max Stoiber",
  "license": "MIT",
  "scripts": {
    "analyze:clean": "rimraf stats.json",
    "preanalyze": "npm run analyze:clean",
    "analyze": "node ./internals/scripts/analyze.js",
    "extract-intl": "node ./internals/scripts/extract-intl.js",
    "npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
    "preinstall": "npm run npmcheckversion",
    "prebuild": "npm run build:clean",
    "build": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
    "build:clean": "rimraf ./build",
    "start": "cross-env NODE_ENV=development env-cmd .env node server",
    "start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
    "start:production": "npm run test && npm run build && npm run start:prod",
    "start:prod": "cross-env NODE_ENV=production node server",
    "presetup": "npm i chalk shelljs",
    "setup": "node ./internals/scripts/setup.js",
    "clean": "shjs ./internals/scripts/clean.js",
    "clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
    "generate": "plop --plopfile internals/generators/index.js",
    "lint": "npm run lint:js",
    "lint:css": "stylelint './app/**/*.js'",
    "lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
    "lint:eslint:fix": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts --fix",
    "lint:js": "npm run lint:eslint -- . ",
    "lint:staged": "lint-staged",
    "pretest": "npm run test:clean && npm run lint",
    "test:clean": "rimraf ./coverage",
    "test": "cross-env NODE_ENV=test jest --coverage",
    "test:watch": "cross-env NODE_ENV=test jest --watchAll",
    "coveralls": "cat ./coverage/lcov.info | coveralls",
    "prettify": "prettier --write"
  },
  "lint-staged": {
    "*.js": [
      "npm run lint:eslint:fix",
      "git add --force"
    ],
    "*.json": [
      "prettier --write",
      "git add --force"
    ]
  },
  "pre-commit": "lint:staged",
  "resolutions": {
    "babel-core": "7.0.0-bridge.0"
  },
  "dependencies": {
    "@coreui/coreui": "^2.1.4",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
    "@coreui/icons": "^0.3.0",
    "@coreui/react": "^2.1.1",
    "ajv": "^6.6.1",
    "babel-polyfill": "^6.26.0",
    "block-ui": "^2.70.1",
    "bootstrap": "^4.1.3",
    "chalk": "^2.4.1",
    "chart.js": "^2.7.3",
    "classnames": "^2.2.6",
    "compression": "^1.7.3",
    "connected-react-router": "^4.5.0",
    "core-js": "^2.6.0",
    "env-cmd": "^8.0.2",
    "exports-loader": "^0.7.0",
    "flag-icon-css": "^3.2.1",
    "font-awesome": "^4.7.0",
    "fontfaceobserver": "2.0.13",
    "history": "^4.7.2",
    "hoist-non-react-statics": "3.0.1",
    "immutable": "^3.8.2",
    "intl": "^1.2.5",
    "invariant": "^2.2.4",
    "ip": "^1.1.5",
    "is-url-external": "^1.0.3",
    "isnumeric": "^0.3.3",
    "jquery": "^3.3.1",
    "jqwidgets-scripts": "^6.2.0",
    "loadable-components": "^2.2.3",
    "lodash": "^4.17.11",
    "minimist": "1.2.0",
    "moment": "^2.22.2",
    "numeral": "^2.0.6",
    "prop-types": "^15.6.2",
    "react": "^16.6.3",
    "react-chartjs-2": "^2.7.4",
    "react-dom": "^16.6.3",
    "react-helmet": "^5.2.0",
    "react-hot-loader": "^4.6.3",
    "react-intl": "^2.7.2",
    "react-loadable": "^5.5.0",
    "react-redux": "^5.1.1",
    "react-router-dom": "^4.3.1",
    "react-sizeme": "^2.5.2",
    "reactstrap": "^6.5.0",
    "redux": "^4.0.1",
    "redux-immutable": "^4.0.0",
    "redux-saga": "^0.16.2",
    "reselect": "4.0.0",
    "resize-sensor": "0.0.6",
    "sanitize.css": "4.1.0",
    "simple-line-icons": "^2.4.1",
    "styled-components": "^4.1.2",
    "warning": "^4.0.2"
  },
  "devDependencies": {
    "@babel/cli": "7.1.2",
    "@babel/core": "7.1.2",
    "@babel/plugin-proposal-class-properties": "7.1.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
    "@babel/plugin-syntax-dynamic-import": "7.0.0",
    "@babel/plugin-transform-modules-commonjs": "7.1.0",
    "@babel/plugin-transform-react-constant-elements": "7.0.0",
    "@babel/plugin-transform-react-inline-elements": "7.0.0",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "7.1.0",
    "@babel/preset-react": "7.0.0",
    "@babel/register": "7.0.0",
    "add-asset-html-webpack-plugin": "3.1.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.0.1",
    "babel-loader": "8.0.4",
    "babel-plugin-dynamic-import-node": "2.2.0",
    "babel-plugin-lodash": "3.3.4",
    "babel-plugin-react-intl": "3.0.1",
    "babel-plugin-react-transform": "3.0.0",
    "babel-plugin-styled-components": "1.8.0",
    "babel-plugin-transform-react-remove-prop-types": "0.4.19",
    "circular-dependency-plugin": "5.0.2",
    "compare-versions": "3.4.0",
    "compression-webpack-plugin": "2.0.0",
    "copy-webpack-plugin": "^4.6.0",
    "coveralls": "3.0.2",
    "cross-env": "^5.2.0",
    "css-loader": "1.0.0",
    "enzyme": "3.7.0",
    "enzyme-adapter-react-16": "1.6.0",
    "enzyme-to-json": "3.3.4",
    "eslint": "5.7.0",
    "eslint-config-airbnb": "17.1.0",
    "eslint-config-airbnb-base": "13.1.0",
    "eslint-config-prettier": "3.1.0",
    "eslint-import-resolver-webpack": "0.10.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-prettier": "3.0.0",
    "eslint-plugin-react": "7.11.1",
    "eslint-plugin-redux-saga": "0.9.0",
    "express": "^4.16.4",
    "file-loader": "2.0.0",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "3.2.0",
    "http-proxy-middleware": "^0.19.1",
    "image-webpack-loader": "^4.6.0",
    "imports-loader": "0.8.0",
    "jest-cli": "23.6.0",
    "jest-styled-components": "6.2.2",
    "lint-staged": "7.3.0",
    "ngrok": "3.1.0",
    "node-plop": "0.16.0",
    "node-sass": "^4.11.0",
    "null-loader": "0.1.1",
    "offline-plugin": "5.0.5",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "plop": "2.1.0",
    "pre-commit": "1.2.2",
    "prettier": "1.14.3",
    "react-app-polyfill": "0.1.3",
    "react-test-renderer": "16.6.0",
    "rimraf": "2.6.2",
    "sass-loader": "^7.1.0",
    "shelljs": "^0.8.3",
    "style-loader": "0.23.1",
    "stylelint": "9.6.0",
    "stylelint-config-recommended": "2.1.0",
    "stylelint-config-styled-components": "0.1.1",
    "stylelint-processor-styled-components": "1.5.0",
    "svg-url-loader": "2.3.2",
    "terser-webpack-plugin": "1.1.0",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "1.1.2",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "3.4.0",
    "webpack-hot-middleware": "2.24.3 ",
    "webpack-pwa-manifest": "3.7.1",
    "whatwg-fetch": "3.0.0"
  }
}

As you can see I’m using React 16.6 and jqwidgets-scripts 6.2. My project takes advantage on the Boilerplate scaffold, that is to say I’m using the default webpack 4 configuration that comes out of the box with the React Boilerplate, due to in https://www.jqwidgets.com/reactjs-components-documentation/documentation/webpack_react/index.htm?search= you say “All Webpack’s configuration may vary based on your application needs.”.

My webpack.base.babel.js was modified with the fallowing code:

...
module: {
    rules: [
      {
        test: /\.js$|\.jsx$/, // Transform all .js files required somewhere with Babel
        exclude: /node_modules\/(?!(jqwidgets-scripts\/jqwidgets-react)\/).*/,
        use: {
          loader: 'babel-loader',
          options: options.babelQuery,
        },
      },
    ...
   ]
   ...
}

with that regular expression I’m excluding node_models but including jqwidgets-scripts/jqwidgets-react. If I run npm start it works perfectly, but if I run npm run-script build or npm run build it crashes the webpack compiler with this:

> react-boilerplate@3.7.0 prebuild /home/my_user_name/my_project
> npm run build:clean

> react-boilerplate@3.7.0 build:clean /home/my_user_name/my_project
> rimraf ./build

> react-boilerplate@3.7.0 build /home/my_user_name/my_project
> cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout

Hash: 7b0feef0f8bbac0c9421                                                           
Version: webpack 4.27.1
Time: 42059ms
Built at: 2019-01-24 10:15:26
 251 assets
Entrypoint main = runtime~main.43b100be02c6a9dbfc5a.js vendor.4d1e1f30cd3a7c98cfd8.chunk.js main.5ce13ffd96704eeb6b0d.chunk.js

ERROR in ./node_modules/jqwidgets-scripts/jqwidgets-react/react_jqxgrid.js 1216:12
Module parse failed: Unexpected token (1216:12)
You may need an appropriate loader to handle this file type.
|     render() {
|         return (
>             <div id={this.state.id}>{this.props.value}{this.props.children}</div>
|         )
|     };
 @ ./app/modules/My_module_1/index.js 44:0-70 1196:53-60 1256:37-44 1267:37-44 1277:37-44
 @ ./app/modules/My_module_2/Loadable.js
 @ ./app/modules/My_module_3/_nav.js
 @ ./app/modules/My_module_4/index.js
 @ ...
 @ ./app/app.js
 @ multi ./node_modules/react-app-polyfill/ie11.js ./app/app.js

...

Also, I followed https://www.jqwidgets.com/community/topic/webpack-module-parse-failed/ and I made some changes to the configuration like this:

`{
test: /\.js$|\.jsx$/,
exclude: ‘/node_modules’,
include: ‘/jqwidgets-scripts/jqwidgets-react’,
use: {
loader: ‘babel-loader’,
options: options.babelQuery
}
},
…`

Then if I run npm start it says:

webpack built be60767d46a99fe48e6b in 1389ms
 ｢wdm｣: 
ERROR in ./app/app.js 80:4
Module parse failed: Unexpected token (80:4)
You may need an appropriate loader to handle this file type.
| const render = messages => {
|   ReactDOM.render(
>     <AppContainer>
|       <Provider store={store}>
|         <LanguageProvider messages={messages}>
 @ multi ./node_modules/react-app-polyfill/ie11.js webpack-hot-middleware/client?reload=true ./app/app.js main[2]

My webpack.prod.babel.js is this:

// Important modules this config uses
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const OfflinePlugin = require('offline-plugin');
const { HashedModuleIdsPlugin } = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = require('./webpack.base.babel')({
  mode: 'production',

  // In production, we skip all hot-reloading stuff
  entry: [
    require.resolve('react-app-polyfill/ie11'),
    path.join(process.cwd(), 'app/app.js'),
  ],

  // Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].chunk.js',
  },

  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          warnings: false,
          compress: {
            comparisons: false,
          },
          parse: {},
          mangle: true,
          output: {
            comments: false,
            ascii_only: true,
          },
        },
        parallel: true,
        cache: true,
        sourceMap: true,
      }),
    ],
    nodeEnv: 'production',
    sideEffects: true,
    concatenateModules: true,
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: true,
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        },
        main: {
          chunks: 'all',
          minChunks: 2,
          reuseExistingChunk: true,
          enforce: true,
        },
      },
    },
    runtimeChunk: true,
  },

  plugins: [
    // Minify and optimize the index.html
    new HtmlWebpackPlugin({
      template: 'app/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      inject: true,
    }),

    // Put it in the end to capture all the HtmlWebpackPlugin's
    // assets manipulations and do leak its manipulations to HtmlWebpackPlugin
    new OfflinePlugin({
      relativePaths: false,
      publicPath: '/',
      appShell: '/',

      // No need to cache .htaccess. See http://mxs.is/googmp,
      // this is applied before any match in <code>caches</code> section
      excludes: ['.htaccess'],

      caches: {
        main: [':rest:'],

        // All chunks marked as <code>additional</code>, loaded after main section
        // and do not prevent SW to install. Change to <code>optional</code> if
        // do not want them to be preloaded at all (cached only when first loaded)
        additional: ['*.chunk.js'],
      },

      // Removes warning for about <code>additional</code> section usage
      safeToUseOptionalCaches: true,
    }),

    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8,
    }),

    new WebpackPwaManifest({
      name: 'React Boilerplate',
      short_name: 'React BP',
      description: 'My React Boilerplate-based project!',
      background_color: '#fafafa',
      theme_color: '#b1624d',
      inject: true,
      ios: true,
      icons: [
        {
          src: path.resolve('app/images/icon-512x512.png'),
          sizes: [72, 96, 128, 144, 192, 384, 512],
        },
        {
          src: path.resolve('app/images/icon-512x512.png'),
          sizes: [120, 152, 167, 180],
          ios: true,
        },
      ],
    }),

    new HashedModuleIdsPlugin({
      hashFunction: 'sha256',
      hashDigest: 'hex',
      hashDigestLength: 20,
    }),
  ],

  performance: {
    assetFilter: assetFilename =>
      !/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename),
  },
});

There is just one more thing I have to say: I’m using Linux Mint 19, npm 6.4.1, nodejs 10.12.0.

So, how can I configure webpack in order to get this workibg in production mode?

[Paul45Participant]

i m so sorry, i have sent the wrong stackblitz…

I resolved my problem with appendTo:’body’
But now i have an other problem…

When i want to drag and drop a cell of my grid, this grey column is displayed. an i need to refresh to hide it

HTML :

<div id="main" class= "main">
    <div class ="target">
            <jqxGrid #myGridPosition 
                [width]="510" [autoheight]="true" [columns]="gridColumns" [source]="source" [rowsheight] ="137" [rendered]='rendered'
                [selectionmode]="'singlecell'" [keyboardnavigation]="false" >
            </jqxGrid>

    </div>
</div>

TS :

import { Component, OnInit,ViewChild } from '@angular/core';
import { CompositionComponent } from '../composition.component';
import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';

@Component({
  providers:[CompositionComponent],
  selector: 'app-form-attributes',
  templateUrl: './form-attributes.component.html',
  styleUrls: ['./form-attributes.component.scss']
})
export class FormAttributesComponent {
  @ViewChild('myGridPosition') myGridPosition: jqxGridComponent;

source: any =
        {
            totalrecords: 1,
            unboundmode: true,
            datafields:
                [
                    { name: 'pos1' },
                    { name: 'pos2' },
                    { name: 'pos3' }
                ],
        };

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

      gridColumns: any[] = [
        { text: 'Position 1', dataField: 'pos1',align: 'center', width: 170 },
        { text: 'Position 2', dataField: 'pos2',align: 'center', width: 170 },
        { text: 'Position 3', dataField: 'pos3',align: 'center', width: 170 }
    ]

    rendered = (type: any): void => {

      let options = {
          revert: true,
          dropAction: 'none',
          appendTo:'body'
          
      };

      let uglyGridDragDropCells = jqwidgets.createInstance('.jqx-grid-cell', 'jqxDragDrop', options);
      

  }
}

I don’t understand why it’s bug, i have follow your demo…
do you understand ?

Thanks a lot !