jQWidgets Forums

Hi Hristo,

class Event extends Component
{
constructor()
{
super();
this.state = {
checkButtonValue:””,
newEventModal:false,
mapTableModal:false,
rows:[],
};
}

componentWillMount()
{
console.log(‘Inside componentWillMount’);
let seesion_data = sessionStorage.getItem(‘checkLogin’);
console.log(seesion_data);
if(seesion_data.toString() !== “1”)
{
sessionStorage.removeItem(“checkLogin”);
history.push({
pathname: “/”
});
history.go();
}

else{
console.log(“”);
this.createRows();
}
}

createRows=()=>{
this.setState({loader:true});
console.log(“inside create rows”);
let url=CONSTANTS.event;
console.log(url);
fetch(url,{
method:’GET’
})
.then((response)=>response.json())
.then((responseJson)=>{
console.log(responseJson);
let row=[];
for(let i=0; i<responseJson.data.length; i++){
let time_period=””;
if(responseJson.data[i][“time_per_unit”] === 1){
time_period=’Days’;
}
else if(responseJson.data[i][“time_per_unit”] === 2){
time_period=’Month’;
}
else if(responseJson.data[i][“time_per_unit”] === 3){
time_period=’Year’;
}

row.push({
id:responseJson.data[i][“event_id”].toString(),
event_name:responseJson.data[i][“event_type”].toString(),
category:responseJson.data[i][“event_cat”].toString(),
time_period:time_period.toString(),
table_mapped:”+”.toString(),
count_high:responseJson.data[i][“high_evnt_cnt”].toString(),
count_medium:responseJson.data[i][“med_evnt_cnt”].toString(),
count_low:responseJson.data[i][“low_evnt_cnt”].toString(),
has_num_val:”1″.toString(),
})
}
console.log(row);
this.setState({rows:row});
this.setState({loader:false});
})

.catch((error)=>{
console.log(“error while getting rows”,error);
});

}

componentDidMount(){
console.log(“inside componentDidMount”);
this.refs.myGrid_a.on(‘cellclick’,(event)=>{
if(event.args.datafield === “table_mapped”){
console.log(“inside table_mapped”);
this.setState({mapTableModal:true});
}
});

let editrow = -1;
this.refs.myGrid_a.on(‘contextmenu’, () => {
return false;
});

this.refs.myGrid_a.on(‘cellclick’, (event) => {
console.log(“inside oncellclick”);
console.log(event.args);
if(event.args.datafield === “Image”){
if (!event.args.rightclick) {
this.refs.myGrid_a.selectrow(event.args.rowindex);
let scrollTop = $(window).scrollTop();
let scrollLeft = $(window).scrollLeft();
console.log(scrollTop);
this.refs.myMenu.open(parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
return false;
}
}

});

this.refs.myMenu.on(‘itemclick’, (event) => {
let args = event.args;
let rowindex = this.refs.myGrid_a.getselectedrowindex();
if ($.trim($(args).text()) == ‘View\/Edit’) {
editrow = rowindex;
console.log(editrow);
// this.refs.myWindow.position({ x: 60, y: 60 });
this.addMapTable();
// get the clicked row’s data and initialize the input fields.
// let dataRecord = this.refs.myGrid_a.getrowdata(editrow);
// this.refs.firstName.val(dataRecord.firstname);
// this.refs.lastName.val(dataRecord.lastname);
// this.refs.product.val(dataRecord.productname);
// this.refs.quantity.decimal(dataRecord.quantity);
// this.refs.price.decimal(dataRecord.price);
// // show the popup window.
// this.refs.myWindow.open();
}
else {
let rowid = this.refs.myGrid_a.getrowid(rowindex);
console.log(rowid);
this.refs.myGrid_a.deleterow(rowid);
}
});

}

tabValue=(value)=>{
console.log(“inside tabValue”);
console.log(value);
this.setState({checkButtonValue:value});
}

searchData=(newValue)=>{
console.log(newValue);
}
onErrorFunction = (e, fieldName) => {
if (fieldName === “variationField”) {
this.setState({variationFlag: e});
}
if (fieldName === “outputField”) {
this.setState({outputFlag: e});
}
}
addTable=()=>{
console.log(“inside addTable”);
this.setState({
newEventModal:true,
})
// let datarow = 1;
// this.refs.myGrid1.addrow(null, datarow);
}

_renderAddModal = (hideAddModal,dataAdapter,columns) =>{

if(this.state.newEventModal === true)
{
let existing_rule_value = “New”;
insideModal = true;
return(
<EventModal show={this.state.newEventModal} onHide={hideAddModal} existing_rule_value={existing_rule_value} />
);
}
else if(this.state.mapTableModal === true){
let existing_rule_value = “Map”;
insideModal = true;
return(
<MapModal show={this.state.mapTableModal} onHide={hideAddModal} existing_rule_value={existing_rule_value} />
);
}
else{
if(insideModal === true){
insideModal = false;
location.reload();
}
return(
<div>
<div className=”container-source”>
<div className=”first-tab-container-table”>
<div className=”first-tab-serach”>
<NormalInput
placeholder=”Search”
onChange={(val) => this.searchData(val)}
onError={this.onErrorFunction}
fieldName=”searchField”
/>

</div>
<ReactTooltip class=’extraClass’ delayHide={1000} effect=’solid’/>
<div className=”page-icon add-button-new” data-tip=”Add ” onClick={() => this.addTable()} value={this.state.addNewTable} ></div>
</div>
<div className=”event-main-table-container” >
<JqxGrid ref=’myGrid_a’
width={‘100%’} pageable={true} source={dataAdapter}
sortable={true} altrows={true} enabletooltips={true}
autoheight={true} editable={false} columns={columns} selectionmode={‘singlecell’}

/>
<div style={{ marginTop: 30 }}>
<div id=’cellbegineditevent’ />
<div style={{ marginTop: 10 }} id=’cellendeditevent’ />
</div>
<JqxMenu ref=’myMenu’
width={200} height={58} mode={‘popup’} autoOpenPopup={false}
>

• View/Edit
• Delete

</JqxMenu>
</div>
</div>
</div>

);
}
}
render(){
let hideAddModal = () => this.setState({ newEventModal: false,mapTableModal:false ,existing_rule_value:””});
let cellsrenderer = (row, columnfield, value, defaulthtml, columnproperties, rowdata) => {
if (value < 20) {
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #ff0000;”>’ + value + ‘</span>’;
}
else {
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #008000;”>’ + value + ‘</span>’;
}
}
// let TableSyncedClick = function($event, row, column, value) {
// console.log(“click”);
// }
//
// let cellsrendererTableSynced = (row, column, value, defaultHtml) => {
// let str = ‘<div value={row} onClick= {()=> this.TableSyncedClick(row)}>’ + value + </div>
// return str;
//
//
//
// }
let imageMenuRenderer = (row, datafield, value,rowdata)=>{
console.log(rowdata);

return ‘<div style=”cursor: pointer;”></div>\
\
‘;
}

let changePointer=(row, columnfield, value, defaulthtml, columnproperties, rowdata) => {
return ‘<div style=”cursor: pointer;”>’+value+'</div>’;
}

let data = [{“id”:’1′, “event_name”: ‘e1’, “category”: ‘P’, “time_period”:’tp1′, “table_mapped”:’1′, “count_high”:’ch1′, “count_medium”: ‘cm1’, “count_low”: ‘cl1’, “has_num_val”: ‘num1′},
{“id”:’2’, “event_name”: ‘e2’, “category”: ‘X’, “time_period”:’tp2′, “table_mapped”:’5′, “count_high”:’ch2′, “count_medium”: ‘cm2’, “count_low”: ‘cl2’, “has_num_val”: ‘num2′},
{“id”:’3’, “event_name”: ‘e3’, “category”: ‘B’, “time_period”:’tp3′, “table_mapped”:’6′, “count_high”:’ch3′, “count_medium”: ‘cm3’, “count_low”: ‘cl3’, “has_num_val”: ‘num3′},
{“id”:’4’, “event_name”: ‘e4’, “category”: ‘M’, “time_period”:’tp4′, “table_mapped”:’2′, “count_high”:’ch4′, “count_medium”: ‘cm4’, “count_low”: ‘cl4’, “has_num_val”: ‘num4′},
{“id”:’5’, “event_name”: ‘e5’, “category”: ‘A’, “time_period”:’tp5′, “table_mapped”:’3′, “count_high”:’ch5′, “count_medium”: ‘cm5’, “count_low”: ‘cl5’, “has_num_val”: ‘num5’}];
console.log(data);
let columns =
[
{ text: ‘Action’, datafield:’Image’, width:’10%’,cellsrenderer:imageMenuRenderer},
{ text : ‘#’, datafield: ‘id’, width: ‘10%’},
{ text: ‘Event Name’, datafield: ‘event_name’, width: ‘10%’ },
{ text: ‘Category’, datafield: ‘category’,width: ‘10%’ },
{ text: ‘Time Period’, datafield: ‘time_period’, width: ‘10%’ },
{ text: ‘# Tables Mapped’, datafield: ‘table_mapped’, width: ‘20%’, cellsrenderer:changePointer},
{ text: ‘Event Count: High’, datafield: ‘count_high’, width: ‘10%’ },
{ text: ‘Event Count: Medium’, datafield: ‘count_medium’ ,width: ‘10%’},
{ text: ‘Event Count: Low’, datafield: ‘count_low’,width: ‘10%’ },
{ text: ‘Hash Numeric Value’, datafield: ‘has_num_val’, width: ‘10%’ }
// { text: ‘Time Unit’, datafield: ‘time_unit’,width: 100 }
];
let data1 = this.state.rows;
console.log(data1);

let source =
{
localdata:this.state.rows,
//localdata: data,
datatype: ‘json’,
datafields: [
{ name: ‘Image’},
{ name: ‘id’},
{ name: ‘event_name’ },
{ name: ‘category’ },
{ name: ‘time_period’ },
{ name: ‘table_mapped’ },
{ name: ‘count_high’ },
{ name: ‘count_medium’ },
{ name: ‘count_low’},
{ name: ‘has_num_val’ },
],

};
let dataAdapter = new window.$.jqx.dataAdapter(source);
console.log(dataAdapter);
return(
<div>
<Header active={6}/>
<div className=”main-window”>
<div className=”stage”></div>
<div className=”content”>
<div className=”top-bar”>
<ReactTabButton
optionsName={[“Event”]}
value={“Event”}
onChange={this.tabValue}
/>
</div>
{this._renderAddModal(hideAddModal,dataAdapter,columns)}
</div>
</div>
</div>
);
}
}

export default Event;

This is my code.
but In my jqxgrid table its shows me no data display.
And as i am not getting any error.

So If i set localData=data which i define inside render() function then inside table data is coming but when I called api in componentWillMount() function to fetch data from database and set localdata=this.state.rows, then inside table its shows me no data display.
and when i do console.log(dataAdapter); then inside localdata its shows me whole data with datafiled.

In componentwillmount() I call the api when user go first time in my page. so this componentwillmount() call before render() function and and i want fetch rows data from database and I set these row data to dataadpater.

Hi Hristo Hristov,
I call my api in constructor and still i get the same result. In table its still shows me no data display.
I am not getting any error in console.
here is my changed code Please see it.

`class Event extends Component
{
constructor()
{
super();
this.state = {
checkButtonValue:””,
newEventModal:false,
mapTableModal:false,
rows:[],
};
//this.createRows();
let url=CONSTANTS.event;
console.log(url);
fetch(url,{
method:’GET’
})
.then((response)=>response.json())
.then((responseJson)=>{
console.log(responseJson);
let row=[];
for(let i=0; i<responseJson.data.length; i++){
let time_period=””;
if(responseJson.data[i][“time_per_unit”] === 1){
time_period=’Days’;
}
else if(responseJson.data[i][“time_per_unit”] === 2){
time_period=’Month’;
}
else if(responseJson.data[i][“time_per_unit”] === 3){
time_period=’Year’;
}

row.push({
id:responseJson.data[i][“event_id”].toString(),
event_name:responseJson.data[i][“event_type”].toString(),
category:responseJson.data[i][“event_cat”].toString(),
time_period:time_period.toString(),
table_mapped:”+”.toString(),
count_high:responseJson.data[i][“high_evnt_cnt”].toString(),
count_medium:responseJson.data[i][“med_evnt_cnt”].toString(),
count_low:responseJson.data[i][“low_evnt_cnt”].toString(),
has_num_val:”1″.toString(),
})
}
console.log(row);
this.setState({rows:row});
this.setState({loader:false});
})

.catch((error)=>{
console.log(“error while getting rows”,error);
});

}

componentWillMount()
{
console.log(‘Inside componentWillMount’);
let seesion_data = sessionStorage.getItem(‘checkLogin’);
console.log(seesion_data);
if(seesion_data.toString() !== “1”)
{
sessionStorage.removeItem(“checkLogin”);
history.push({
pathname: “/”
});
history.go();
}

else{
console.log(“”);

}
}

createRows=()=>{
this.setState({loader:true});
console.log(“inside create rows”);
let url=CONSTANTS.event;
console.log(url);
fetch(url,{
method:’GET’
})
.then((response)=>response.json())
.then((responseJson)=>{
console.log(responseJson);
let row=[];
for(let i=0; i<responseJson.data.length; i++){
let time_period=””;
if(responseJson.data[i][“time_per_unit”] === 1){
time_period=’Days’;
}
else if(responseJson.data[i][“time_per_unit”] === 2){
time_period=’Month’;
}
else if(responseJson.data[i][“time_per_unit”] === 3){
time_period=’Year’;
}

row.push({
id:responseJson.data[i][“event_id”].toString(),
event_name:responseJson.data[i][“event_type”].toString(),
category:responseJson.data[i][“event_cat”].toString(),
time_period:time_period.toString(),
table_mapped:”+”.toString(),
count_high:responseJson.data[i][“high_evnt_cnt”].toString(),
count_medium:responseJson.data[i][“med_evnt_cnt”].toString(),
count_low:responseJson.data[i][“low_evnt_cnt”].toString(),
has_num_val:”1″.toString(),
})
}
console.log(row);
this.setState({rows:row});
this.setState({loader:false});
})

.catch((error)=>{
console.log(“error while getting rows”,error);
});

}

componentDidMount(){
console.log(“inside componentDidMount”);
this.refs.myGrid_a.on(‘cellclick’,(event)=>{
if(event.args.datafield === “table_mapped”){
console.log(“inside table_mapped”);
this.setState({mapTableModal:true});
}
});

let editrow = -1;
this.refs.myGrid_a.on(‘contextmenu’, () => {
return false;
});

this.refs.myGrid_a.on(‘cellclick’, (event) => {
console.log(“inside oncellclick”);
console.log(event.args);
if(event.args.datafield === “Image”){
if (!event.args.rightclick) {
this.refs.myGrid_a.selectrow(event.args.rowindex);
let scrollTop = $(window).scrollTop();
let scrollLeft = $(window).scrollLeft();
console.log(scrollTop);
this.refs.myMenu.open(parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
return false;
}
}

});

this.refs.myMenu.on(‘itemclick’, (event) => {
let args = event.args;
let rowindex = this.refs.myGrid_a.getselectedrowindex();
if ($.trim($(args).text()) == ‘View\/Edit’) {
editrow = rowindex;
console.log(editrow);
// this.refs.myWindow.position({ x: 60, y: 60 });
this.addMapTable();
// get the clicked row’s data and initialize the input fields.
// let dataRecord = this.refs.myGrid_a.getrowdata(editrow);
// this.refs.firstName.val(dataRecord.firstname);
// this.refs.lastName.val(dataRecord.lastname);
// this.refs.product.val(dataRecord.productname);
// this.refs.quantity.decimal(dataRecord.quantity);
// this.refs.price.decimal(dataRecord.price);
// // show the popup window.
// this.refs.myWindow.open();
}
else {
let rowid = this.refs.myGrid_a.getrowid(rowindex);
console.log(rowid);
this.refs.myGrid_a.deleterow(rowid);
}
});

}

tabValue=(value)=>{
console.log(“inside tabValue”);
console.log(value);
this.setState({checkButtonValue:value});
}

searchData=(newValue)=>{
console.log(newValue);
}
onErrorFunction = (e, fieldName) => {
if (fieldName === “variationField”) {
this.setState({variationFlag: e});
}
if (fieldName === “outputField”) {
this.setState({outputFlag: e});
}
}
addTable=()=>{
console.log(“inside addTable”);
this.setState({
newEventModal:true,
})
// let datarow = 1;
// this.refs.myGrid1.addrow(null, datarow);
}

_renderAddModal = (hideAddModal,dataAdapter,columns) =>{

if(this.state.newEventModal === true)
{
let existing_rule_value = “New”;
insideModal = true;
return(
<EventModal show={this.state.newEventModal} onHide={hideAddModal} existing_rule_value={existing_rule_value} />
);
}
else if(this.state.mapTableModal === true){
let existing_rule_value = “Map”;
insideModal = true;
return(
<MapModal show={this.state.mapTableModal} onHide={hideAddModal} existing_rule_value={existing_rule_value} />
);
}
else{
if(insideModal === true){
insideModal = false;
location.reload();
}
return(
<div>
<div className=”container-source”>
<div className=”first-tab-container-table”>
<div className=”first-tab-serach”>
<NormalInput
placeholder=”Search”
onChange={(val) => this.searchData(val)}
onError={this.onErrorFunction}
fieldName=”searchField”
/>

</div>
<ReactTooltip class=’extraClass’ delayHide={1000} effect=’solid’/>
<div className=”page-icon add-button-new” data-tip=”Add ” onClick={() => this.addTable()} value={this.state.addNewTable} ></div>
</div>
<div className=”event-main-table-container” >
<JqxGrid ref=’myGrid_a’
width={‘100%’} pageable={true} source={dataAdapter}
sortable={true} altrows={true} enabletooltips={true}
autoheight={true} editable={false} columns={columns} selectionmode={‘singlecell’}

/>
<div style={{ marginTop: 30 }}>
<div id=’cellbegineditevent’ />
<div style={{ marginTop: 10 }} id=’cellendeditevent’ />
</div>
<JqxMenu ref=’myMenu’
width={200} height={58} mode={‘popup’} autoOpenPopup={false}
>

• View/Edit
• Delete

</JqxMenu>
</div>
</div>
</div>

);
}
}
render(){
let hideAddModal = () => this.setState({ newEventModal: false,mapTableModal:false ,existing_rule_value:””});
let cellsrenderer = (row, columnfield, value, defaulthtml, columnproperties, rowdata) => {
if (value < 20) {
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #ff0000;”>’ + value + ‘</span>’;
}
else {
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: #008000;”>’ + value + ‘</span>’;
}
}
// let TableSyncedClick = function($event, row, column, value) {
// console.log(“click”);
// }
//
// let cellsrendererTableSynced = (row, column, value, defaultHtml) => {
// let str = ‘<div value={row} onClick= {()=> this.TableSyncedClick(row)}>’ + value + </div>
// return str;
//
//
//
// }
let imageMenuRenderer = (row, datafield, value,rowdata)=>{
console.log(rowdata);

return ‘<div style=”cursor: pointer;”></div>\
\
‘;
}

let changePointer=(row, columnfield, value, defaulthtml, columnproperties, rowdata) => {
return ‘<div style=”cursor: pointer;”>’+value+'</div>’;
}

let data = [{“id”:’1′, “event_name”: ‘e1’, “category”: ‘P’, “time_period”:’tp1′, “table_mapped”:’1′, “count_high”:’ch1′, “count_medium”: ‘cm1’, “count_low”: ‘cl1’, “has_num_val”: ‘num1′},
{“id”:’2’, “event_name”: ‘e2’, “category”: ‘X’, “time_period”:’tp2′, “table_mapped”:’5′, “count_high”:’ch2′, “count_medium”: ‘cm2’, “count_low”: ‘cl2’, “has_num_val”: ‘num2′},
{“id”:’3’, “event_name”: ‘e3’, “category”: ‘B’, “time_period”:’tp3′, “table_mapped”:’6′, “count_high”:’ch3′, “count_medium”: ‘cm3’, “count_low”: ‘cl3’, “has_num_val”: ‘num3′},
{“id”:’4’, “event_name”: ‘e4’, “category”: ‘M’, “time_period”:’tp4′, “table_mapped”:’2′, “count_high”:’ch4′, “count_medium”: ‘cm4’, “count_low”: ‘cl4’, “has_num_val”: ‘num4′},
{“id”:’5’, “event_name”: ‘e5’, “category”: ‘A’, “time_period”:’tp5′, “table_mapped”:’3′, “count_high”:’ch5′, “count_medium”: ‘cm5’, “count_low”: ‘cl5’, “has_num_val”: ‘num5’}];
console.log(data);
let columns =
[
{ text: ‘Action’, datafield:’Image’, width:’10%’,cellsrenderer:imageMenuRenderer},
{ text : ‘#’, datafield: ‘id’, width: ‘10%’},
{ text: ‘Event Name’, datafield: ‘event_name’, width: ‘10%’ },
{ text: ‘Category’, datafield: ‘category’,width: ‘10%’ },
{ text: ‘Time Period’, datafield: ‘time_period’, width: ‘10%’ },
{ text: ‘# Tables Mapped’, datafield: ‘table_mapped’, width: ‘20%’, cellsrenderer:changePointer},
{ text: ‘Event Count: High’, datafield: ‘count_high’, width: ‘10%’ },
{ text: ‘Event Count: Medium’, datafield: ‘count_medium’ ,width: ‘10%’},
{ text: ‘Event Count: Low’, datafield: ‘count_low’,width: ‘10%’ },
{ text: ‘Hash Numeric Value’, datafield: ‘has_num_val’, width: ‘10%’ }
// { text: ‘Time Unit’, datafield: ‘time_unit’,width: 100 }
];
let data1 = this.state.rows;
console.log(data1);

let source =
{
localdata:this.state.rows,
//localdata: data,
datatype: ‘json’,
datafields: [
{ name: ‘Image’},
{ name: ‘id’},
{ name: ‘event_name’ },
{ name: ‘category’ },
{ name: ‘time_period’ },
{ name: ‘table_mapped’ },
{ name: ‘count_high’ },
{ name: ‘count_medium’ },
{ name: ‘count_low’},
{ name: ‘has_num_val’ },
],

};
let dataAdapter = new window.$.jqx.dataAdapter(source);
console.log(dataAdapter);
return(
<div>
<Header active={6}/>
<div className=”main-window”>
<div className=”stage”></div>
<div className=”content”>
<div className=”top-bar”>
<ReactTabButton
optionsName={[“Event”]}
value={“Event”}
onChange={this.tabValue}
/>
</div>
{this._renderAddModal(hideAddModal,dataAdapter,columns)}
</div>
</div>
</div>
);
}
}

export default Event;