jQuery UI Widgets › Forums › Grid › Select row after add

Tagged: , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Nadezhda 10 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Select row after add Posts
  • November 14, 2014 at 3:47 pm Select row after add #62780

    Hugo
    Participant

    Hi guys,

    how to select row after adding?

    November 17, 2014 at 8:08 am Select row after add #62825

    Nadezhda
    Participant

    Hello Hugo,

    Here is an example which shows how to add row and select it after that.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title></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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script src="../sampledata/generatedata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(5);
            var source = {
                localdata: data,
                datafields: [{
                    name: 'firstname',
                    type: 'string'
                }, {
                    name: 'lastname',
                    type: 'string'
                }, {
                    name: 'productname',
                    type: 'string'
                }, {
                    name: 'date',
                    type: 'date'
                }, {
                    name: 'quantity',
                    type: 'number'
                }, {
                    name: 'price',
                    type: 'number'
                }],
                datatype: "array"
            };

            var adapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid({
                width: 500,
                height: 200,
                theme: 'energyblue',
                source: adapter,
                sortable: true,
                columns: [{
                    text: 'First Name',
                    datafield: 'firstname',
                    columngroup: 'Name',
                    width: 90
                }, {
                    text: 'Last Name',
                    columngroup: 'Name',
                    datafield: 'lastname',
                    width: 90
                }, {
                    text: 'Product',
                    datafield: 'productname',
                    width: 170
                }, {
                    text: 'Order Date',
                    datafield: 'date',
                    width: 160,
                    cellsformat: 'dd-MMMM-yyyy'
                }, {
                    text: 'Quantity',
                    datafield: 'quantity',
                    width: 80,
                    cellsalign: 'right'
                }, {
                    text: 'Unit Price',
                    datafield: 'price',
                    cellsalign: 'right',
                    cellsformat: 'c2'
                }],
            });

            $("#addrowbutton").jqxButton({
                theme: 'energyblue',
                height: 30
            });

            $("#addrowbutton").on('click', function () {
                var datarow = generatedata(1)[0];
                var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                var id = $('#jqxgrid').jqxGrid('getrowid', datarow.uid);
                $('#jqxgrid').jqxGrid('selectrow', id);
            });

        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid"></div>
    <div style="margin-top: 10px;">
        <input id="addrowbutton" type="button" value="Add Row" />
    </div>
</body>
</html>

    Best Regards,
    Nadezhda

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

    November 17, 2014 at 1:26 pm Select row after add #62865

    Hugo
    Participant

    Hi @nadezhda,

    not work.

    success: function( result ){				
     var filter = JSON.parse( result );
     if( filter.statusProcess == 'success' ){
	var data = {
	     label1: filter.name1,
	     label2: filter.name2,
	     label3: filter.name3
	};
	$('#jqxGrid').jqxGrid('addrow', filter.id, data, 'first');
	var id = $('#jqxGrid').jqxGrid('getrowid', filter.id); // <-- returns null
	$('#jqxGrid').jqxGrid('selectrow', id);

	alert('SUCCESS');
     }
     else if( filter.statusProcess == 'warning' ){
	alert('ERROR');
     }
},
    November 17, 2014 at 3:14 pm Select row after add #62877

    Nadezhda
    Participant

    Hi Hugo,

    If you want to add new row at the beginning you can use the following code:

    $("#addrowbutton").on('click', function () {
    var datarow = generatedata(1)[0];
    var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow, "first")
    $('#jqxgrid').jqxGrid('selectrow', 0);
});

    Best Regards,
    Nadezhda

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

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

You must be logged in to reply to this topic.