jQuery UI Widgets Forums Grid addrow with paging

This topic contains 4 replies, has 2 voices, and was last updated by  simpzoid 9 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • addrow with paging #72145

    simpzoid
    Participant

    Hi there,

    The addrow button (see code after // addrow handler) works on the first page of the data, but when I press the addrow button on other pages, it doesn’t work. More specifically, a row is inserted but the id column is not assigned ‘noid’ and any edits I make disappear when I finish editing the cell.

    In case it matters, I was trying to achieve a data grid where I could cache a number of edits on the client and then synchronise these to a server when I am finished. The back end is on a private network.

    Any help would be greatly appreciated.

    Regards,
    Scott

    <link rel=”stylesheet” href=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/styles/jqx.base.css’) %]” />
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jquery-1.11.3.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxcore.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxdata.js’) %]”></script>

    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxbuttons.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxscrollbar.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxmenu.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxcheckbox.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxlistbox.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxdropdownlist.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.sort.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.pager.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.selection.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.edit.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.columnsresize.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.filter.js’) %]”></script>
    <script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.grouping.js’) %]”></script>

    <script type=”text/javascript”>

    $(document).ready(function () {
    // prepare the data

    var url = ‘http://alphaq:3000/REST/jqxcrud?’;
    var theme = ‘classic’;
    var edited_rows = [];
    // edited_rows[0]=1;

    var generaterow = function () {
    var row = {};

    row[“CompanyName”] = “New Company”;
    row[“ContactName”] = “New Contact”;
    row[“Address”] = “New Address”;
    row[“City”] = “New City”;
    row[“Country”] = “New Cuntry”;
    return row;
    }

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘id’},
    { name: ‘CompanyName’},
    { name: ‘ContactName’},
    { name: ‘ContactTitle’},
    { name: ‘Address’},
    { name: ‘City’},
    { name: ‘Country’}
    ],
    url: url,

    update_rows: function (rowdata, commit) {
    // synchronize with the server – send update command
    // var data = “update=true&” + $.param(rowdata);
    console.log(‘in function source.updaterow \n’);
    $.ajax({
    contentType: ‘application/json’,
    dataType: ‘json’,
    url: url,
    data: JSON.stringify(rowdata),
    type: ‘POST’,
    cache: true,
    success: function (data, status, xhr) {
    // update command is executed.
    $(“#jqxgrid”).jqxGrid(“updatebounddata”); //$(“#jqxgrid”).jqxGrid(“addrow”, ‘new’, {}, “first”);
    // commit(true);
    },
    error: function (jqXHR, textStatus, errorThrown) {
    alert(“Could not update server data”);
    commit(false);
    }
    });
    },
    root: ‘Rows’,
    id: ‘id’,
    cache: false,
    beforeprocessing: function(data)
    {

    source.totalrecords = data[“TotalRows”];
    }
    };

    var dataadapter = new $.jqx.dataAdapter(source);
    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 600,
    source: dataadapter,
    editable: true,
    theme: theme,
    autoheight: true,
    pageable: true,
    virtualmode: true,
    rendergridrows: function()
    {
    return dataadapter.records;
    },
    columns: [
    { text: ‘Company ID’, datafield: ‘id’, width: 250 },
    { text: ‘Company Name’, columntype: ‘textbox’, editable: false, datafield: ‘CompanyName’, width: 250 },
    { text: ‘Contact Name’, datafield: ‘ContactName’, width: 200 },
    { text: ‘Contact Title’, datafield: ‘ContactTitle’, width: 200 },
    { text: ‘Address’, datafield: ‘Address’, width: 180 },
    { text: ‘City’, datafield: ‘City’, width: 100 },
    { text: ‘Country’, datafield: ‘Country’ }
    ]
    });

    // buttons
    $(“#addrowbutton”).jqxButton({ theme: theme });
    $(“#updaterowsbutton”).jqxButton({ theme: theme });

    // addrow handler.
    $(“#addrowbutton”).bind(‘click’, function () {
    $(“#jqxgrid”).jqxGrid(“addrow”, ‘noid’, {}, “first”);
    for (i = 0; i < edited_rows.length; i++) {
    edited_rows[i] = edited_rows[i] + 1;
    }

    });

    //update rows handler
    $(“#updaterowsbutton”).bind(‘click’, function () {
    console.log(‘The following rows have been edited’);
    var return_data = [];
    for (i = 0; i < edited_rows.length; i++) {
    return_data.push($(“#jqxgrid”).jqxGrid(‘getrowdata’, edited_rows[i]));
    }
    source.update_rows(return_data) ;
    //update_rows(return_data);
    });

    //update edited_rows if a value is changed
    $(‘#jqxgrid’).on(‘cellendedit’, function (event) {
    var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
    var in_array = “false”;

    if (edited_rows.length != 0) {
    for (i = 0; i < edited_rows.length; i++) {
    if (edited_rows[i] == selectedrowindex) {
    in_array = “true”;
    console.log(‘row exists’ + selectedrowindex);
    }
    }
    }
    if (in_array == “false”) {
    edited_rows.push(selectedrowindex);
    console.log(‘pushing’ + selectedrowindex);
    }
    });

    });
    </script>

    <body class=’default’>
    <div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
    <div style=”float: left;” id=”jqxgrid”>
    </div>
    <div style=”margin-left: 30px; float: left;”>
    <div>
    <input id=”addrowbutton” type=”button” value=”Add New Row” />
    </div>
    <div style=”margin-top: 10px;”>
    <input id=”deleterowbutton” type=”button” value=”Delete Selected Row” />
    </div>
    <div style=”margin-top: 10px;”>
    <input id=”updaterowsbutton” type=”button” value=”Update Edited Rows” />
    </div>
    </div>
    </div>
    <div id=”log”></div>
    </body>
    `

    addrow with paging #72153

    Dimitar
    Participant

    Hi Scott,

    Each row’s id has to be unique, but you are assigning the same id (‘noid’) to multiple rows. That is why you experience unexpected behaviour.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    addrow with paging #72169

    simpzoid
    Participant

    Dimitar,

    Thanks that helps but when I assign a unique id I still get the same problem on all but the first page.

    // addrow handler.
    $(“#addrowbutton”).bind(‘click’, function () {
    update_row_index = update_row_index + 1;
    var add_id = ‘noid’ + update_row_index;
    $(“#jqxgrid”).jqxGrid(“addrow”, add_id, {}, “first”);
    for (i = 0; i < edited_rows.length; i++) {
    edited_rows[i] = edited_rows[i] + 1;
    }

    });

    update_row_index is a global.

    Regards,
    Scott

    addrow with paging #72191

    Dimitar
    Participant

    Hi Scott,

    The following example: https://www.jseditor.io/doc?key=b3ea19de0e7211e5b1c780ee734cf820 shows that your addrow code works fine.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    addrow with paging #72207

    simpzoid
    Participant

    Dimitar,

    Thanks for all your help.

    Regards,
    Scott

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.