jQuery UI Widgets Forums TreeGrid How to create paging server on Treegrid

This topic contains 5 replies, has 2 voices, and was last updated by  Hristo 8 years ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • How to create paging server on Treegrid #81046

    ridosaputra
    Participant

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

    How to create paging server on Treegrid #81055

    Hristo
    Participant
    How to create paging server on Treegrid #81105

    ridosaputra
    Participant

    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

    How to create paging server on Treegrid #81151

    Hristo
    Participant

    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

    How to create paging server on Treegrid #81164

    ridosaputra
    Participant

    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.

    How to create paging server on Treegrid #81219

    Hristo
    Participant

    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

    • This reply was modified 8 years ago by  Hristo.
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.