How to create paging server on Treegrid

[ridosaputraParticipant]

hello all, please help me.
How to create paging server on Treegrid, or how to update datasource treegrid ?

[HristoParticipant]

Hello ridosaputra,

We have similar theme, please take a look:
http://www.jqwidgets.com/community/topic/jqxtreegrid-with-server-side-custom-pagination/
And especially this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-load-on-demand.htm?arctic

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[ridosaputraParticipant]

Hi Hristo,

Thanks for your answer, but the problem when I use method virtualModeCreateRecords, I could not reload my data from server again.

Best Regards,

Rido Saputra

[HristoParticipant]

Hello ridosaputra,

We can give advice about our widgets. Maybe there is a gap, check out our demo again.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[ridosaputraParticipant]

Hi Hristo,

Thanks for your response. I will show my code:

$(“#jqxTreeGrid”).jqxTreeGrid({
width: ‘100%’,
height: 400,
checkboxes: false,
icons: true,
autoRowHeight: true,
showHeader: true,
columnsHeight: 30,
columnsResize: true,
columnsReorder: true,
filterable: true,
filterMode: ‘advanced’,
sortable: true,
pageable: true,
pagerMode: ‘advanced’,
altRows: true,
showToolbar: true,
showStatusbar: true,
toolbarHeight:35,
editable: true,
pageSizeOptions: [‘5′, ’10’, ’25’, ’50’, ‘100’, ‘200’, ‘500’, ‘1000’, ‘5000’],
pageSize: 25,
virtualModeRecordCreating: function (record) { },
virtualModeCreateRecords: function (expandedRecord, done) {
var source =
{
dataType: “json”,
dataFields: [
{ name: ‘group_pin’, type: ‘string’},
{ name: ‘parent_of’, type: ‘string’},
{ name: ‘name’, type: ‘string’},
{ name: ‘description’, type: ‘string’}
],
type:’GET’,
cache: false,
id: ‘group_pin’,
hierarchy:
{
keyDataField: { name: ‘group_pin’ },
parentDataField: { name: ‘parent_of’ }
},
url: ‘http://localhost/myapp/listdata’,
root: “listData”,
addRow: function (rowID, rowData, position, parentID, commit) {
commit(true);
newRowID = rowID;
},
updateRow: function (rowid, rowdata, commit) {
$.ajax({
type: “POST”,
url: ‘http://localhost/myapp/save’,
dataType: ‘json’,
data: $.param(rowdata),
beforeSend: function() {
$(“#message_display”).html(
“<div class=’process’>Send data..</div>”
).slideDown(100);
},
error: function (xhr, textStatus, errorThrown) {
commit(false);
$(“#message_display”).slideUp(100);
},
success: function(data, textStatus){
$(“#message_display”).slideUp(100);
if(data[‘response’] == true)
{
commit(true);
$(“#jqxTreeGrid”).jqxTreeGrid(‘updateBoundData’);
}
else
{
commit(false);
}
}
});
}
};
var dataAdapter = new $.jqx.dataAdapter(source,{
loadComplete: function (data) {
done(dataAdapter.records);
},
loadError: function (xhr, textStatus, errorThrown) {
done(false);
},
formatData: function (data) {
if (expandedRecord == null)
{
data.parent_code = “”;
}
else
{
data.parent_code = expandedRecord.group_pin;
}
return data;
}
});
dataAdapter.dataBind();
},
columns: [
{
text: ‘Code’,
pinned: true,
dataField: ‘group_pin’,
editable: false,
align: ‘center’,
hidden: true,
sortable: true,
filterable: true,
width: 150
},{
text: ‘Name’,
pinned: true,
dataField: ‘name’,
align: ‘center’,
minWidth: 200,
width: 350
},{
text: ‘Desc’,
dataField: ‘description’,
align: ‘center’,
width: 300
}
],
renderStatusBar : function (toolbar) {
var container = $(“<div style=’margin: 5px;’><div id=’message_display’></div></div>”);
toolbar.append(container);
},
renderToolbar: function (statusbar) {
var container = $(“<div style=’overflow: hidden; position: relative; margin: 5px;’></div>”);
var container_left = $(“<div class=’pull-left’></div>”);
var reloadrowbuttom = $(“<button id=’addnewrowbuttom’ type=’button’ class=’btn btn-xs btn-effect-ripple btn-info btn-growl’ style=’margin-left: 4px;’><i class=’fa fa-plus fa-fw’></i></button>”);

container_left.append(reloadrowbuttom);

container.append(container_left);

statusbar.append(container);
reloadrowbuttom.click(function (event) {
$(“#jqxTreeGrid”).jqxTreeGrid({
virtualModeCreateRecords: function (expandedRecord, done) {
var source =
{
dataType: “json”,
dataFields: [
{ name: ‘group_pin’, type: ‘string’},
{ name: ‘parent_of’, type: ‘string’},
{ name: ‘name’, type: ‘string’},
{ name: ‘description’, type: ‘string’}
],
type:’GET’,
cache: false,
id: ‘group_pin’,
hierarchy:
{
keyDataField: { name: ‘group_pin’ },
parentDataField: { name: ‘root_of’ }
},
url: ‘http://localhost/myapp/listdata’,
root: “listData”,
addRow: function (rowID, rowData, position, parentID, commit) {
commit(true);
newRowID = rowID;
},
updateRow: function (rowid, rowdata, commit) {
$.ajax({
type: “POST”,
url: ‘http://localhost/myapp/save’,
dataType: ‘json’,
data: $.param(rowdata),
beforeSend: function() {
$(“#message_display”).html(
“<div class=’process’>Send Data</div>”
).slideDown(100);
},
error: function (xhr, textStatus, errorThrown) {
commit(false);
$(“#message_display”).slideUp(100);
},
success: function(data, textStatus){
$(“#message_display”).slideUp(100);
$(“#jqxTreeGrid”).jqxTreeGrid(‘updateBoundData’);
}
else
{
commit(false);
}
}
});
}
};
var dataAdapter = new $.jqx.dataAdapter(source,{
loadComplete: function (data) {
done(dataAdapter.records);
},
loadError: function (xhr, textStatus, errorThrown) {
done(false);
},
formatData: function (data) {
if (expandedRecord == null)
{
data.parent_code = “”
}
else
{
data.parent_code = expandedRecord.group_pin;
}
return data;
}
});
dataAdapter.dataBind();
}
});
});
}
});

Plese tell me how to reload my data.

[HristoParticipant]

Hello ridosaputra,

We do not have the opportunity to take time to adjust to each individual code.
Please take a look more accurately the source of this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-load-on-demand.htm?arctic

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts