[nitinayir8Participant]

Hi Peter,

Can you please tell the example name from demos, so we can refer.

Thanks,
Nitin

[nitinayir8Participant]

Hi Peter,

The example which you have shown doesn’t make ajax call on demand instead of it loads data initially. Please check the console On demand example.
We need a feature which will make ajax call level wise and load ajax content on demand.

Thanks,
Nitin

[nitinayir8Participant]

Hi Ivailo,

Did you make use of server side filtering and the example which i have suggested?

Thanks,
Nitin

[nitinayir8Participant]

Hi Peter,

Yes, but i want pagination on scroll and not with respect to page number. Is it possible to achieve it?

Thanks,
Nitin

[nitinayir8Participant]

Hi Ivailo,

Sorry, i don’t have server where i can show you the demo but can you please use phpdemos ‘server_side_grid__with_nested_grids’ example and enable filter row with ‘showfilterrow’ set as true, than try to filter a record and open the rowdetails of first row. Now close the rowdetails of filtered row and go to next page. Again come back to the same page and you will find rowdetails in expand state for first row.

This issue encountered in above v3.8.2. Please suggest a fix for it.

[nitinayir8Participant]

Hi Peter,

I tried the option which you have told, Please check below snippet:
$(document).ready(function () {
// prepare the data
var source =
{
dataType: “json”,
dataFields: [
{ name: “id”, type: “string” },
{ name: “name”, type: “string” },
{ name: “duration”, type: “number” },
{ name: “task”, type: “number” }
],
timeout: 10000,
type:’POST’,
hierarchy:
{
keyDataField: { name: ‘id’ },
parentDataField: { name: ‘name’ }
},
id: ‘id’,
root: ‘Rows’,
url: “getTaskDetails.php”
};

// create Tree Grid
$(“#treeGrid”).jqxTreeGrid(
{
width:800,
virtualModeCreateRecords: function (expandedRecord, done) {
var dataAdapter = new $.jqx.dataAdapter(source,
{
formatData: function (data) {
if (expandedRecord == null) {
data.$filter = “(ReportsTo eq null)”
}
else {
data.expandedRecord = expandedRecord;
}
return data;
},
loadComplete: function()
{
done(dataAdapter.records);
},
loadError: function (xhr, status, error) {
done(false);
throw new Error(“http://services.odata.org: ” + error.toString());
}
}
);
dataAdapter.dataBind();
},
virtualModeRecordCreating: function (record) {
// record is creating.
},
columns: [
{ text: ‘FirstName’, columnGroup: ‘name’, dataField: ‘firstname’, width: 150 },
{ text: ‘LastName’, columnGroup: ‘name’, dataField: ‘lastname’, width: 150 },
{ text: ‘Duration’, dataField: ‘duration’, width: 200 },
{ text: ‘Task’, dataField: ‘task’}
]
});
});

PHP script:
<?php
header(‘Content-Type: application/json’);
if(!empty($_POST[‘expandedRecord’])){
if($_POST[‘expandedRecord’][‘level’] == 0){
echo ‘{“id”: “123689”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}’;
}else if($_POST[‘expandedRecord’][‘level’] == 1){
echo ‘{“id”: “123856”, “duration”: “8”, “firstname”:”Andrew”, “lastname”: “Fuller”, “name”: “Andrew Fuller”, “task”: “Kitchen supplies”}’;
}
}else{
echo ‘[{“id”: “123456”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123457”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123458”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123459”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123460”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123461”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123462”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123463”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123464”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123465”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123466”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123467”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123468”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123469”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123470”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123471”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123472”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123473”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123474”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}, {“id”: “123475”, “duration”: “7”, “firstname”:”Guylene”, “lastname”: “Murphy”, “name”: “Guylene Murphy”, “task”: “Housewares”}]’;
}
exit;
?>

Still i get the same issue ‘too much recursion’, when i click on level 1 children.

[nitinayir8Participant]

Hi Peter,

Actually i have checked virtual mode demos and same example i had used to build tree grid children. But wehn i make ajax call in generateTasks function to fetch data from server gets ‘too much recursion’ error.

can you pelase provide ajax call working example, so the level 1 data loads for children.

Thanks,

Nitin

[nitinayir8Participant]

Hi Ivailo,

Can you refer below fiddle and try to select value from products dropdownlist.
Dropdown issue

If i click inside the grid values are shown instantly, otherwise i have to click twice inorder to show selected values from dropdownlist. Please suggest a fix.

Thanks,
Nitin

[nitinayir8Participant]

Hi Ivailo,

I have updated to the latest version (4.1.2) but issue still persist. Can you please check at your end.

Thanks,
Nitin

[nitinayir8Participant]

Hi Peter,

Actually i have posted it into right grid forum. Still will create a separate post for it.

Thanks,
Nitin

[nitinayir8Participant]

Hi Dimitar,

I am facing same issue but not able to resolve by setting enablebrowserselection property to true. Also tried clipboard: true, still it doesn’t work.
Please suggest a solution.

Thanks,
Nitin Ayir

[nitinayir8Participant]

Hi Ivailo,

Can you please tell us, when is the next jqwidgets release date?

Thanks,
Nitin

[nitinayir8Participant]

Hi Peter,
I understand that we cannot add custom classes. Can you help us with a way wherein we can add some style to a particular cell which would stay even on scroll, or any other event?

Regards,
Nitin Ayir

[nitinayir8Participant]

Hi Ivailo,

Thanks for quick reply, but i am not sure about the position of that particular element. Consider an example in which i have to plot a bar graph based on dates and show color code for current date. Is that possible? any workaround will be appreciated.

Thanks,
Nitin Ayir

[nitinayir8Participant]

Hi Peter,

There is some issue when we scroll the grid, whatever columns fits within specified grid width only those column’s html is shown. For your reference, please check below html:
onload “row0jqxgrid” html:
<div id=”row2jqxgrid” style=”position: relative; height:25px;” role=”row”><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 460px; z-index: 773; width:90px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-right-align”>$5.00</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 100px; z-index: 776; width:100px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-left-align”>Devling</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 200px; z-index: 775; width:180px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-left-align”>Cappuccino</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 380px; z-index: 774; width:80px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-right-align”>5</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 0px; z-index: 777; width:100px;” role=”gridcell”><div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>Nancy</div></div></div>

After horizontal scroll:
<div id=”row2jqxgrid” style=”position: relative; height:25px;” role=”row”><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 460px; z-index: 773; width:90px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-right-align”>$5.00</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 100px; z-index: 776; width:100px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-left-align”>Devling</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 200px; z-index: 775; width:180px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-left-align”>Cappuccino</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 380px; z-index: 774; width:80px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-right-align”>5</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 0px; z-index: 777; width:100px;” role=”gridcell”><div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>Nancy</div></div><div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 550px; z-index: 772; width:100px;” role=”gridcell”><div style=”margin-top: 4px;” class=”jqx-grid-cell-right-align”>$25.00</div></div></div>

Somehow this below div is removed:
<div class=”jqx-grid-cell jqx-grid-cell-energyblue jqx-item jqx-item-energyblue” style=”left: 0px; z-index: 777; width:100px;” role=”gridcell”><div style=”overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;”>Nancy</div>

Please let us know what is the concept your using to build row0jqxgrid, row1jqxgrid, row2jqxgrid, etc., this div’s are dynamically created whenever we do some action on grid. We are using right approach by specifying class to cell using cellrender property of columns grid api. If you guys fix this bug, it would be of great help to us.

regards,
Nitin Ayir

[Author]

Posts