grid focus error - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: addrow, Button, click, deleterow, getrowid, grid, jqxgrid

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

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

Author

grid focus error Posts

February 10, 2015 at 9:08 pm grid focus error #66855

Participant

hello

I add (empty) blank row before and after I want to delete empty row but
I see this error after clicking on delete button

  renderToolbar: function (toolBar) {
            var toTheme = function (className) {
                if (theme == "") return className;
                return className + " " + className + "-" + theme;
            }
 
            var container = $("<div style='overflow: hidden; position: relative; height: 100%; width: 100%;'></div>");
            var buttonTemplate = "<div style='float: left; padding: 3px; margin: 2px;'><div style='margin: 4px; width: 16px; height: 16px;'></div></div>";
            var addButton = $(buttonTemplate);             
            var deleteButton = $(buttonTemplate);

            container.append(addButton);    
            container.append(deleteButton);
   
            toolBar.append(container);
            addButton.jqxButton({ cursor: "pointer", enableDefault: false, disabled: true, height: 25, width: 25 });
            addButton.find('div:first').addClass(toTheme('jqx-icon-plus'));
            addButton.jqxTooltip({ position: 'bottom', content: "Add" }); 

            deleteButton.jqxButton({ cursor: "pointer", disabled: true, enableDefault: false, height: 25, width: 25 });
            deleteButton.find('div:first').addClass(toTheme('jqx-icon-delete'));
            deleteButton.jqxTooltip({ position: 'bottom', content: "Delete" }); 

            deleteButton.jqxButton({ disabled: true });
            addButton.jqxButton({ disabled: false });

            var updateButtons = function (action) {
                switch (action) {
                    case "Select":
                        addButton.jqxButton({ disabled: true });
                        deleteButton.jqxButton({ disabled: false });
                        break;
                    case "Unselect":
                        addButton.jqxButton({ disabled: false });
                        deleteButton.jqxButton({ disabled: true });
                         
                        break;
                  

                }
            } 

 

          deleteButton.click(function (event) {
               $("#InvoiceItemGrid").jqxGrid("clear");
             
            });
             
            addButton.click(function (event) {
           
            $("#InvoiceItemGrid").jqxGrid('addRow', 0, {}, 'first');
                
            }); 
        },

February 10, 2015 at 9:13 pm grid focus error #66860

mustafa

Participant

or I tried it

  deleteButton.click(function (event) {
                if (!deleteButton.jqxButton('disabled')) {

                    var selectedrowindex = $("#InvoiceItemGrid").jqxGrid('getselectedrowindex');
                    var rowscount = $("#InvoiceItemGrid").jqxGrid('getdatainformation').rowscount;
                    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                        var id = $("#InvoiceItemGrid").jqxGrid('getrowid', selectedrowindex);
                        var commit = $("#InvoiceItemGrid").jqxGrid('deleterow', id);

                    }
 

                }

            });

February 10, 2015 at 9:24 pm grid focus error #66863

mustafa

Participant

grid in drop down code

var data = GetInvoiceItems();

 columns: [
                         {
                             text: "Invoice Item",
                             width: '40%',
                             datafield: "InvoiceItem",
                             columntype: 'dropdownlist',

                             createeditor: function (row, column, editor) {
  
                                 editor.jqxDropDownList({ source: data, displayMember: "Name", valueMember: "InvoiceItemID", promptText: "Please Select Item:" });
                             }
                        , cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                            if (newvalue == "") return oldvalue;
                        }

February 11, 2015 at 3:34 pm grid focus error #66933

Nadezhda

Participant

Hello mustafa,

In the following example you can find how to add empty row and how to delete it after that. I hope it would be helpful.

<!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
            });
            $("#deleterowbutton").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);
                var commit = $("#jqxgrid").jqxGrid('updaterow', id, {});
                var rowid = $('#jqxgrid').jqxGrid('selectrow', id);               
            });

            $("#deleterowbutton").on('click', function () {
                var rowindex = $('#jqxgrid').jqxGrid('getselectedrowindex');
                var value = $('#jqxgrid').jqxGrid('deleterow', rowindex);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid"></div>
    <div style="margin-top: 10px;">
        <input id="addrowbutton" type="button" value="Add Row" />
        <input id="deleterowbutton" type="button" value="Delete Row" />
    </div>
</body>
</html>

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.