jQuery UI Widgets Forums Grid grid focus error

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • grid focus error #66855

    mustafa
    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');
                    
                }); 
            }, 


    • This topic was modified 9 years ago by  mustafa.
    • This topic was modified 9 years ago by  mustafa.
    • This topic was modified 9 years ago by  mustafa.
    • This topic was modified 9 years ago by  mustafa.
    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);
    
                        }
     
    
                    }
    
                });
    • This reply was modified 9 years ago by  mustafa.
    • This reply was modified 9 years ago by  mustafa.
    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;
                            }
    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/

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

You must be logged in to reply to this topic.