jQWidgets Forums
-
Search Results
-
Hello,
We are unable to bind data to the dataAdapter from the controller.
We are using jQWidgets v5.3.2 (2017-Sep).
Js code:var GROUPSsource = { datatype: "json", datafields: [ { name: 'OPTGROUPID', map: 'OPTGROUPID', type: 'string' }, { name: 'OPTGROUP', map: 'OPTGROUP', type: 'string' } ], url: "Quotes/Quoteitemoptions", id: "OPTGROUPID", data: { featureClass: "P", style: "full", maxRows: 12 }, root: "ITEMGROUP" }; dataQUOTEGroups_v1 = new $.jqx.dataAdapter(GROUPSsource, { autoBind: true, async: false, loadComplete: function () { }, formatData: function (data) { } } );
Controller method:
public async Task<ActionResult> Quoteitemoptions() { try { string path = _apilist.Quoteitemoptions ; HttpResponseMessage response = await _WebApiService.GetJsonResponse(path); string res = response.Content.ReadAsStringAsync().Result; return Json(res); } catch (Exception) { throw; } }
Error message:
Error in InitializeQUOTEITEMSGroupData: Cannot use ‘in’ operator to search for ‘length’ in {“GROUPS”:{“ITEMGROUP”:[{“OPTGROUPID”:”1″,”OPTGROUP”:”A”,”OPTTYPE”:”QUOTEITEM”},{“OPTGROUPID”:”2″,”OPTGROUP”:”B”,”OPTTYPE”:”QUOTEITEM”},{“OPTGROUPID”:”3″,”OPTGROUP”:”C”,”OPTTYPE”:”QUOTEITEM”},{“OPTGROUPID”:”4″,”OPTGROUP”:”D”,”OPTTYPE”:”QUOTEITEM”},{“OPTGROUPID”:”5″,”OPTGROUP”:”E”,”OPTTYPE”:”QUOTEITEM”},{“OPTGROUPID”:”6″,”OPTGROUP”:”F”,”OPTTYPE”:”QUOTEITEM”}]}}Please help! Not sure where I’m doing it wrong.
Thank you,Using React, I’m trying to render a JqxDataTable cell with a JqxLinearGauge component without much success. Is what I’m trying to do even possible? I’ve stripped down the original version of the code and included what I think is the relevant snippet, depicting my attempt to render a JqxGauge in a table cell below: (Two different cases of cellsrenderer are shown.) (If you notice that the code shouldn’t run, trust me it does — I may have pared it down too much, but the real code runs. It’s the cellsrenderer code that doesn’t deliver for me.)
Case 1 (using temperate literal with JqxLinearGauge):
import * as React from "react"; // import * as ReactDOM from "react-dom"; import JqxDataTable, { IDataTableProps, jqx, } from "jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable"; import JqxLinearGauge from "jqwidgets-scripts/jqwidgets-react-tsx/jqxlineargauge"; import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css"; import "jqwidgets-scripts/jqwidgets/styles/jqx.office.css"; import "../../styles/index.css"; // import cellRendererRange52 from "../renderers/cellRendererRange52"; interface MyState extends IDataTableProps { stockWatch?: any; isLoggedInToFirebase?: boolean; ownSource?: any[]; ownEditorRenderer?: any; } class BodComp1 extends React.PureComponent< { auth2: any; loggedInWithGoogle: boolean; googleToken: any; emailAddress: any; }, MyState > { stocksRef: any; numUpdates: number; numRows: number; columns: any[]; dataAdapter: null; auth2!: gapi.auth2.GoogleAuth; stock: any | undefined; emailAddress: string | undefined; private myDataTable = React.createRef<JqxDataTable>(); private myLinearGauge = React.createRef<JqxLinearGauge>(); constructor(props: { auth2: any; loggedInWithGoogle: boolean; googleToken: any; emailAddress: any; }) { super(props); this.stocksRef = ""; this.numUpdates = 0; this.numRows = 0; this.columns = []; this.dataAdapter = null; this.state = { stockWatch: [], isLoggedInToFirebase: false, editSettings: { cancelOnEsc: true, editOnDoubleClick: true, editOnF2: true, editSingleCell: true, saveOnBlur: true, saveOnEnter: true, saveOnPageChange: true, saveOnSelectionChange: true, }, }; this.getAppBodyContent = this.getAppBodyContent.bind(this); } componentDidMount() {} onCollectionUpdate = (querySnapshot: any) => { // console.log(<code>In onCollectionUpdate() <${util.inspect(querySnapshot)}></code>); this.numUpdates++; let stockWatch: any[] = []; this.numRows = 0; querySnapshot.forEach( (doc: { data: () => { companyName: any; latestPrice: any; symbol: any; range52: any; }; id: any; }) => { const { companyName, latestPrice, symbol, range52 } = doc.data(); stockWatch.push({ key: doc.id, doc, // DocumentSnapshot companyName, latestPrice, symbol, range52, }); } ); this.setState({ stockWatch, }); this.numRows++; }; getAppBodyContent() { const source = { datafields: [ { name: "companyName", type: "string" }, { name: "symbol", type: "string" }, { name: "latestPrice", type: "float" }, { name: "range52", type: "string" }, ], id: "key", dataType: "json", localData: () => { let data: any[] = []; let i = 0; this.state.stockWatch.forEach((s: any) => { data[i++] = { key: s.key, companyName: s.companyName, symbol: s.symbol, latestPrice: s.latestPrice, range52: s.range52, }; this.numRows++; }); return data; }, }; this.dataAdapter = new jqx.dataAdapter(source); // -- const columnWidths = [ ["companyNameWidth", 200], ["tickerWidth", 64], ["currPriceWidth", 90], ["range52Width", 115], ]; this.columns = [ { text: "Company Name", datafield: "companyName", width: columnWidths[2][1], align: "center", editable: false, }, { text: "Symbol", datafield: "symbol", width: columnWidths[3][1], editable: false, }, { text: "Curr. Price", datafield: "latestPrice", align: "center", width: columnWidths[4][1], cellsalign: "right", cellsformat: "c2", editable: false, }, { text: "52W Range", datafield: "range52", width: columnWidths[14][1], editable: false, align: "center", cellsalign: "center", cellsrenderer: ( row: any, column: any, value: any, rowData: any ): any => { return " <-- this is really a back-tick, but it clobbers the code formatting of this post ${( <JqxLinearGauge> ref={this.myLinearGauge} width={"99px"} height={"25px"} orientation={"horizontal"} min={0} value={66} max={100} ticksPosition={"both"} </JqxLinearGauge> )} "; <-- this is really a back-tick, but it clobbers the code formatting of this post }, //cellsrenderer closing bracket }, ]; return ( <JqxDataTable ref={this.myDataTable} width={1100} theme={"office"} source={this.dataAdapter} columns={this.columns} filterable={true} pageable={true} pagerMode={"advanced"} altRows={true} autoRowHeight={true} height={this.numRows > 10 ? 650 : this.numRows * 59 + 190} sortable={true} columnsReorder={true} columnsResize={true} editable={true} key={this.numUpdates} // this forces a re-render of the table! editSettings={this.state.editSettings} pageSizeOptions={[5, 10, 25, 30, 50]} pageSize={30} /> ); } public render() { return <div>{this.getAppBodyContent()}</div>; } } export default BodComp1;
Running the snippet above renders the following in the cell: [object Object]
Obviously, not what I want.—————————-
Case 2 (cellsrenderer does not return anything, but it tries to render the JqxLinearGauge in the appropriate cell of the table; i.e., the parent element of the linear gauge):cellsrenderer: ( row: any, column: any, value: any, rowData: any ): any => { const theRange52Cell = document.querySelector( body > div:nth-of-type(1) > div > div > div > div:nth-of-type(2) > div > div:nth-of-type(4) > div:nth-of-type(2) > div > table:nth-of-type(2) > tbody > tr:nth-of-type(${row + 1}) > td:nth-of-type(11) ); ReactDOM.render( <JqxLinearGauge> ref={this.myLinearGauge} width={"99px"} height={"25px"} orientation={"horizontal"} min={0} value={66} max={100} ticksPosition={"both"} </JqxLinearGauge>, theRange52Cell ); }, //cellsrenderer closing bracket
Running the snippet above did not render the table because of the following error:
Error: Minified React error #200; which translates into: Target container is not a DOM element.
I believe it’s telling me that the cell doesn’t yet exist yet at the time I’m trying to render the JqxLinearGauge.
(By the way, I pulled the css querySelector Xpath from the chrome inspector when the table rendered properly using the value, so I know that is correct.)Any suggestions? Is this even possible?
Thanks,
TonyHello,
grid not showing data when i am adding attribute pagesizeoptions
<jqxGrid #jobStatusGrid [theme]=”‘whitepine'” (onCellclick)=”Cellclick($event)” [width]=”‘100%'”
[height]=”‘100%'” [source]=”jobStatusDataAdapter” [columns]=”jobStatusColumns” [showheader]=”true”
[pageable]=’true’ [sortable]=’true’ [filterable]=’true’ [pagesizeoptions]=”[’25’, ’50’, ’75’]” [pagesize]=”50″>
</jqxGrid>it is working good when i remove this(below code is working good)
<jqxGrid #jobStatusGrid [theme]=”‘whitepine'” (onCellclick)=”Cellclick($event)” [width]=”‘100%'”
[height]=”‘100%'” [source]=”jobStatusDataAdapter” [columns]=”jobStatusColumns” [showheader]=”true”
[pageable]=’true’ [sortable]=’true’ [filterable]=’true’ [pagesize]=”20″>
</jqxGrid>Any thoughts?
I’m configuring a tree grid and using data generated by a service that can not tolerate the
_=1582749028718
that jQuery ajax calls appends to prevent IE from caching. I added thecache:false
to my source, but it continues to be appended.My code…
// -------------------------------------- var dataDefinition = { dataType: "json", dataFields: SCL.dataColumns, hierarchy: { root: "children" }, timeout: 10000, root: "SCL", url: "http://localhost:8080/pooka/scl/data.json", cache: false, id: "id" }; // -------------------------------------- var dataAdapter = new $.jqx.dataAdapter(dataDefinition, { loadComplete: function(){ } }); // -------------------------------------- $("#scl-grid").jqxTreeGrid({ source: dataAdapter, pageable: true, pagerMode: 'advanced', filterable: true, filterMode: 'simple', sortable: true, altRows: true, columnsResize: true, ready: function(){ $("#scl-grid").jqxTreeGrid('expandRow', '111100001'); $("#scl-grid").jqxTreeGrid('expandRow', '111100007'); }, columns: SCL.tableColumns, columnGroups: SCL.groupColumns }); // --------------------------------------
Where can I set cache to false to stop the appended parameter?
If user change the product by selecting different value in product list drop-down then value in appForm is not reflecting.
Could you please suggest how to connect jqxGrid with dataModel (formControlArray=”dataModel” is not working)?
app.component.ts:
import { Component, OnInit, ViewChild } from ‘@angular/core’;
@Component({
selector: ‘app-home’,
templateUrl: ‘./home.component.html’,
styleUrls: [ ]
})
export class AppComponent implements OnInit {@ViewChild(‘appGrid’) appGrid: jqxGridComponent;
dataModel = [{
firstname: ‘Lan’,
lastname: ‘Saylor’,
productValue: {
code: ‘2’,
value: ‘Cappuccino’
}
}, {
firstname: ‘Peter’,
lastname: ‘Bein’,
productValue: {
code: ‘1’,
value: ‘Black Tea’
}
}]products = [{
code: ‘1’,
value: ‘Black Tea’
}, {
code: ‘2’,
value: ‘Cappuccino’
}]settings: jqwidgets.GridOptions = {
editable: true,
enabletooltips: true,
columnsmenu: false,
source: new jqx.dataAdapter({
datatype: ‘array’,
datafields: [
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ }
{ name: ‘productValue’, map: ‘product>value’ }
],
localdata: this.dataModel
}),
columns: [
{ text: ‘First Name’, datafield: ‘firstname’, width: ‘30%’ },
{ text: ‘Last Name’, datafield: ‘lastname’, width: ‘30%’ },
{ text: ‘Product’, datafield: ‘productValue’, width: ‘40%’,
columntype: ‘dropdownlist’,
createeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({
source: this.products,
displayMember: ‘value’,
valueMember: ‘code’
});
}
}
]
};ngOnInit(): void {
this.appGrid.createComponent(this.settings);
}constructor(private formBuilder: FormBuilder) { }
this.appForm = this.formBuilder.group({
dataModel: new this.formBuilder.group(this.dataModel);
});}
app.component.html:
<form [formGroup]=”appForm”>
<jqxGrid id=”appGrid” formControlArray=”dataModel” #appGrid></jqxGrid>
</form>