[wpdParticipant]

I am able to see the dropdown but it is way far away from dropdown
if i change top in css it is moving for jqx-listbox-container

overflow: hidden;
background-color: transparent;
border: none;
position: absolute;
display: block;
width: 340px;
height: 225px;
left: 30px;
top: 574.641px;

[wpdParticipant]

Thank you this worked!

[wpdParticipant]

Thanks for reply
My problem here is with mapping result with datafiled. my json response is nested response

`{
“customerId”: 4,
“userKey”: “ccb34aed-c6a2-41c4-9251-dcdfd2b2d000”,
“customerName”: “test”,
“customerFName”: null,
“customerLName”: null,
“companyName”: “”,
“customerMarketPlace”: “”,
“customerEmail”: “test.java@gmail.com”,
“customerPhone”: “2039988796”,
“customerAddr”: {
“addressId”: 4,
“customerName”: “”,
“companyName”: “”,
“addressType”: “test”,
“street1”: “567 Green Hill Rd”,
“street2”: “APT 567”,
“street3”: “”,
“city”: “Farmington Hills”,
“county”: “”,
“state”: “MI”,
“postalCode”: “48335”,
“country”: “United States”,
“residential”: false,
“addressVerified”: “”,
“crtDt”: “2020-05-20T14:49:45.003+0000”,
“lastUpdtDt”: “2020-05-20T14:49:45.003+0000″
},
<em>”customerTags”: [
{
“customerTagId”: 18,
“customerId”: 4,
“tagDetails”: {
“tagId”: 10,
“tagName”: “test”,
“tagColor”: “yellow”,
“userKey”: “ccb34aed-c6a2-41c4-9251-dcdfd2b2d000”,
“crtDt”: “2020-08-03T22:21:55.402+0000”,
“lastUpdtDt”: “2020-08-03T22:21:55.402+0000”
},
“crtDt”: “2020-08-03T21:28:51.495+0000”,
“lastUpdtDt”: “2020-08-03T21:28:51.495+0000”
},
{
“customerTagId”: 19,
“customerId”: 4,
“tagDetails”: {
“tagId”: 11,
“tagName”: “test1”,
“tagColor”: “yellow”,
“userKey”: “ccb34aed-c6a2-41c4-9251-dcdfd2b2d000”,
“crtDt”: “2020-08-03T22:21:55.402+0000”,
“lastUpdtDt”: “2020-08-03T22:21:55.402+0000”
},
“crtDt”: “2020-08-03T21:33:59.216+0000”,
“lastUpdtDt”: “2020-08-03T21:33:59.216+0000”
}
],</em>

“crtDt”: “2020-05-20T14:49:45.003+0000”,
“lastUpdtDt”: “2020-05-20T14:49:45.003+0000”
},`

in customerTags i have multiple tagColor fields how to map this to datafiled to render data.

I know about cellrenderer i dont have any issue with that below is my code

{
text: ‘Tags’, width: ‘10%’, cellsrenderer: customerTagRender
}

[wpdParticipant]

I am using Angular 8 and jqwidgets-ng 9

<jqxGrid #jobStatusGrid [theme]=”‘whitepine'” (onCellclick)=”Cellclick($event)” [width]=”‘100%'”
[height]=”‘100%'” [source]=”jobStatusDataAdapter” [columns]=”jobStatusColumns”
[showheader]=”true” [pageable]=’true’ [sortable]=’true’ [filterable]=’true’ [enablebrowserselection]=”true” [pagesizeoptions]=”[’25’, ’50’, ’75’]” [pagesize]=”50″>
</jqxGrid>

const source: any = {
localdata: this.allJobs,
datatype: ‘json’,
datafields: [
{ name: ‘id’, type: ‘number’ },
{ name: ‘jobName’, type: ‘string’ },
{ name: ‘jobType’, type: ‘string’ },
{ name: ‘jobStat’, type: ‘string’ },
{ name: ‘site’, type: ‘string’ },
{ name: ‘cell’, type: ‘string’ },
{ name: ‘jobSubmitter’, type: ‘string’ },
{ name: ‘loadType’, type: ‘string’ },
{ name: ‘loadDate’, type: ‘date’ },
{ name: ‘lastLoadDate’, type: ‘date’ },
{ name: ‘payload’, type: ‘string’ },
{ name: ‘runLog’, type: ‘string’ },
{ name: ‘jobSize’, type: ‘number’ },
{ name: ‘jobDepK’, type: ‘number’ },
{ name: ‘runMsgLogX’, type: ‘string’ },
{ name: ‘statusColor’, type: ‘string’ }
],
};

// console.log(source);
this.jobStatusDataAdapter = new jqx.dataAdapter(source);

// console.log(this.jobStatusDataAdapter);

const statusrenderer = function(row, columnfield, value, defaulthtml, columnproperties, rowdata) {
const theStatus = rowdata.jobStat;
const statusColor = rowdata.statusColor;
if (theStatus === ‘Failed’) {
return ‘<div style=”display: inline-block; margin-top: 7px; color: ‘ + statusColor + ‘;”>’ + theStatus + ‘</div>’ +
‘<div style=”display: inline-block; margin-left: 5px; margin-top: 3px; cursor: pointer;” >’
+ ‘<i class=”material-icons” style=”color:’ + statusColor + ‘;”>error_outline</i></div>’;
} else {
return ‘<div style=”display: inline-block; margin-top: 7px; color: ‘ + statusColor + ‘;”>’ + theStatus + ‘</div>’;
}
};

const linkDownload = function(row, columnfield, value, defaulthtml, columnproperties, rowdata) {
const theStatus = rowdata.jobStat;
if (theStatus === ‘Failed’) {
return ‘<div style=”margin-left: 25px; margin-top: 3px; cursor: pointer;” class=”under-circle-green”>’
+ ‘<i class=”material-icons” style=”color:green;”>arrow_downward</i></div>’;
}
};

this.jobStatusColumns =
[
{
text: ‘Job Id’, datafield: ‘id’, width: ‘5%’,

},
{
text: ‘Job Name’, datafield: ‘jobName’, width: ‘12%’,

},
{
text: ‘Job Status’, datafield: ‘jobStat’, cellsrenderer: statusrenderer, width: ‘7%’,

},
{
text: ‘Site’, datafield: ‘site’, width: ‘7%’,

},
{
text: ‘Cell’, datafield: ‘cell’, width: ‘7%’,

},
{
text: ‘JobSubmitter’, datafield: ‘jobSubmitter’, width: ‘8%’,

},
{
text: ‘Log Files’, datafield: ‘runLog’, width: ‘5%’, cellsrenderer: linkDownload, filterable: false, hidden: true

},
{
text: ‘LoadType’, datafield: ‘loadType’, width: ‘13%’,

},
{
text: ‘Scheduled Date(GMT)’, datafield: ‘loadDate’, width: ‘13%’,

},
{
text: ‘Completed Date(GMT)’, datafield: ‘lastLoadDate’, width: ‘10%’,

},
{
text: ‘PayLoad File’, datafield: ‘payload’, width: ‘13%’,

}
];
setTimeout(() => {
// this.jobStatusGrid.applyfilters();
if (sessionStorage.getItem(this.constant.USER_ROLE) === ‘Admin’ || sessionStorage.getItem(this.constant.USER_ROLE) === ‘Manager’) {
this.jobStatusGrid.showcolumn(‘runLog’);
this.jobStatusGrid.render();
} else {
this.jobStatusGrid.setcolumnproperty(‘jobSubmitter’, ‘width’, ‘13%’);
}

}, 10);

Please see the code

[wpdParticipant]

Any update on this?

[wpdParticipant]

below is the jsfiddle link

http://jsfiddle.net/cdpbf5Lo/1/

the original example given by JQWIDGETS
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdragdrop/index.htm#demos/jqxdragdrop/defaultfunctionality.htm

i did only changed in css below code highlited
.draggable-demo-catalog
{
position: relative;
width: 397px;
border: 1px solid #bbb;
height: 457px;
float: left;
overflow: scroll;
}

when i drag a item it is not able to drag on the cart with image it is just overflowing

[wpdParticipant]

is there any workaround for this?

[wpdParticipant]

Thank you

[wpdParticipant]

i mean sending selected row data.
I just need the data in json format to which i will use data for different porpose

[wpdParticipant]

i am using below code but page is not changing
var rows = $(‘#jqxgrid’).jqxGrid(‘getrows’);
var drtyRows = new Array();
for (var i = 0; i < rows.length; i++) {

if (rows[i].nar1 != 0)
{
drtyRows.push(rows[i]);
}
//console.log(rows[i].art_id + ” ” + rows[i].preporuka + ” ” + rows[i].vsklId1 + ” ” + rows[i].nar1);
}
var jsoo = JSON.stringify(drtyRows);
$.ajax({
type: “post”,
dataType: “json”,
url: “./extractData.jsp?tokenId=”+_tokId,
contentType: “application/json; charset=utf-8”,
data: jsoo
});

[wpdParticipant]

Here is the solution

var data = ‘[{“date”: “1988-05-23T12:05:21Z”}]’;
// prepare the data
var source =
{
datatype: “json”,
datafields: [
// you can set pattern that will match with the received data
{ name: ‘date’, type: ‘date’, format: ‘yyyy-MM-ddTHH:mm:ssZ’ }
],
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid(
{
width: 350,
source: dataAdapter,
columns: [
{
text: ‘date’, datafield: ‘date’, cellsformat: ‘dd.MM.yyyy HH:mm:ss’
}
]
});

outcome:23.05.1988 12:05:21

[wpdParticipant]

Thank you.

But I want to display the date as 23.05.1988 12:05:21 on the grid can you please let me know how i can do this.

[wpdParticipant]

below is the code i am using to export data from my server

$(“#jqxgridParameters”).jqxGrid(‘exportdata’, ‘csv’, ‘jqxGrid’, true, null, true, http://localhost:8080/Engine/scripts/js/dataexport.php);

but which is opening the file(dataexport.php) in browser instead of giving a file.
Currently i am running on tomcat server.

[wpdParticipant]

we got the licensed version of jqwidgets. but i am not able to see the file dataexport.php in scource code provided by you. does it has the same name dataexport.php or any other name.

[wpdParticipant]

Thank you for quick response. can you also help me from where i can get dataexport.php file?

[Author]

Posts