jQWidgets Forums

jQuery UI Widgets › Forums › Grid › add new row

Tagged: , , ,

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    add new row Posts
  • February 26, 2016 at 9:19 am add new row #81860

    famp
    Participant

    it is possible that once introduced the new row returns the input focus to enter name.
    `<!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>This example illustrates the Grid’s Ever Present Row feature.</title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcalendar.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxradiobutton.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdatetimeinput.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/globalization/globalize.js”></script>
    <script type=”text/javascript” src=”../../scripts/demos.js”></script>
    <script type=”text/javascript” src=”generatedata.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    var data = generatedata(10);
    var source =
    {
    localdata: data,
    datafields:
    [
    { name: ‘name’, type: ‘string’ },
    { name: ‘productname’, type: ‘string’ },
    { name: ‘available’, type: ‘bool’ },
    { name: ‘date’, type: ‘date’},
    { name: ‘quantity’, type: ‘number’ }
    ],
    datatype: “array”
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $(“#jqxgrid”).jqxGrid(
    {
    width: 850,
    filterable: true,
    source: dataAdapter,
    showeverpresentrow: true,
    everpresentrowposition: “top”,
    editable: true,
    selectionmode: ‘multiplecellsadvanced’,
    columns: [
    {
    text: ‘Name’, columntype: ‘textbox’, filtertype: ‘input’, datafield: ‘name’, width: 215
    },
    {
    text: ‘Product’, filtertype: ‘checkedlist’, datafield: ‘productname’, width: 220
    },
    { text: ‘Ship Date’, datafield: ‘date’, filtertype: ‘range’, width: 210, cellsalign: ‘right’, cellsformat: ‘d’ },
    { text: ‘Qty.’, datafield: ‘quantity’, filtertype: ‘number’, cellsalign: ‘right’ }
    ]
    });
    $(“#top”).jqxRadioButton({ checked: true });
    $(“#bottom”).jqxRadioButton();
    $(“#top”).on(‘checked’, function () {
    $(“#jqxgrid”).jqxGrid(‘everpresentrowactions’, ‘add reset’);
    });
    $(“#bottom”).on(‘checked’, function () {
    $(“#jqxgrid”).jqxGrid(‘everpresentrowactions’, ‘addBottom reset’);
    });
    });
    </script>
    </head>
    <body>
    <div id=”jqxgrid”>
    </div><br />
    <div id=”top”>Add New Row to Top</div>
    <div id=”bottom”>Add New Row to Bottom</div>
    </body>
    </html>

    February 28, 2016 at 1:06 pm add new row #81883

    Peter Stoev
    Keymaster

    Hi famp,

    No. The idea of the ever present row is to enter the data and then add the row when you’re ready. After you’ve added the row, you can edit it through the built-in cell editing functionality.

    Best Regards,
    Peter Stoev

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

    March 1, 2016 at 7:35 pm add new row #81992

    famp
    Participant

    mistake by asking , what I realize is that once you enter a new line , receives focus insertion line , to introduce a new one.
    Sorry for my English

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.