jQWidgets Forums

Tagged: grid

This topic contains 19 replies, has 2 voices, and was last updated by damc 12 years, 3 months ago.

Viewing 5 posts - 16 through 20 (of 20 total)

← 1 2

Author

addrow problem Posts

February 4, 2013 at 6:26 am addrow problem #14606

Peter Stoev

Keymaster

Hi damc,

Your Grid is bound to local data. To bind a Grid to “observablearray’, take a look at this sample: griddataadapter.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 5, 2013 at 7:32 am addrow problem #14717

damc

Participant

Hi Peter,

I have changed my code and still have same problems:
– adding row if we have an empty jqxGrid – items are not observable. If grid is not empty then works.
– add an empty row – problems with null. How we can add an empty row?

My code:
this.loadData = function () {
source = {
localdata: self.myData.arrayA,
datatype: ‘observablearray’
};
dataAdapter = new jQuery.jqx.dataAdapter(source);
// grid
$(‘#jqxgrid’).jqxGrid({
width: 885,
source: dataAdapter,
pageable: true,
autoheight: true,
editable: true,
selectionmode: ‘singlecell’,
pagesize: 5,
pagesizeoptions: [‘5′, ’10’],
columns: [{
text: ‘Date from’,
datafield: ‘dateFrom’,
width: 110,
columntype: ‘datetimeinput’,
cellsformat: ‘dd.MM.yyyy’,
initeditor: function (row, cellvalue, editor) {
}
}, {
text: ‘Date to’,
datafield: ‘dateTo’,
width: 110,
columntype: ‘datetimeinput’
}, {
text: ‘Duration’,
datafield: ‘duration’,
width: 120
}, {
text: ‘Some text’,
datafield: ‘text’,
width: 140
}, {
text: ‘Code’,
datafield: ‘code’,
width: 90,
cellsalign: ‘right’
}, {
text: ‘Currency’,
datafield: ‘currency’,
width: 170,
cellsalign: ‘right’
}]
});
};

this.addRow_X = function() {
self.myData.arrayA.push ({ dateFrom: null, dateTo: null, duration: null, text: null, code: null, currency: null });
};

February 5, 2013 at 2:24 pm addrow problem #14744

damc

Participant

Hi Peter,

I take a look at your’s sample. I made a few adjustments (empty initialData and I use ko.mapping). At add row I test if the item is observable. You can test the code below and see where I have problems.

My code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to integrate jqxGrid using jqxDataAdapter with Knockout.js.
    </title>
    <link rel="stylesheet" href="./2.6.1/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="./jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="./json2-2012-10-08.min.js"></script> 
    <script type="text/javascript" src="./knockout-2.2.1.js"></script>
	<script type="text/javascript" src="./knockout.mapping-2.3.5.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxcore.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxdata.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxbuttons.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxscrollbar.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxmenu.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxgrid.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxknockout.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var initialData = [];
//            var initialData = [
//                { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
//                { name: "Speedy Coyote", sales: 89, price: 190.00 },
//                { name: "Furious Lizard", sales: 152, price: 25.00 },
//                { name: "Indifferent Monkey", sales: 1, price: 99.95 },
//                { name: "Brooding Dragon", sales: 0, price: 6350 },
//                { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
//                { name: "Optimistic Snail", sales: 420, price: 1.50 }
//            ];
			
            var GridModel = function (items) {
                this.items = ko.mapping.fromJS(items);
                this.disabled = ko.observable(false);
                this.addItem = function () {
                    // add a new item.
                    if (this.items().length < 20) {
						this.items.push({ name: null, sales: null, price: null });
                        //this.items.push({ name: 'New item', sales: 100, price: 200 });
                    }
					alert('Name in first row: ' + this.items()[0].name());
					alert('ko.isObservable(this.items): ' + ko.isObservable(this.items));
					alert('this.items()[0].name(): ' + ko.isObservable(this.items()[0].name));
                };
                this.removeItem = function () {
                    // remove the last item.
                    this.items.pop();
					this.items()[0].name("AAA");
                };
                this.updateItem = function () {
                    // update the first item.
                    var item = {};
                    item.name = 'name';
                    item.sales = 500;
                    item.price = 200;
                    this.items.replace(this.items()[0], item);
                };
            };
            var model = new GridModel(initialData);
            var source = {
                localdata: model.items,
                datatype: 'observablearray'
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxGrid").jqxGrid({
                autoheight: true,
                source: dataAdapter,
                editable: true,
                selectionmode: 'singlecell',
                columns: [
                    { text: 'Name', dataField: 'name', width: 200 },
                    { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
                    { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
                ]
            });
            ko.applyBindings(model);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style="margin-bottom: 10px;">
            <input id="addButton" type="button" data-bind="click: addItem, jqxButton: {}" value="Add Item" />
            <input id="removeButton" type="button" data-bind="click: removeItem, jqxButton: {}" value="Remove Item" />
            <input id="updateButton" type="button" data-bind="click: updateItem, jqxButton: {}" value="Update Item" />
            <div data-bind="jqxCheckBox: {checked: disabled}" style='margin-top: 5px;' id="checkBox">Disabled</div>
        </div>
        <div data-bind="jqxGrid: {disabled: disabled}" id="jqxGrid">
        </div>
        <table style="margin-top: 20px;">
            <tbody data-bind="foreach: items">
                <tr>
                    <td data-bind="text: name"></td>
                    <td data-bind="text: sales"></td>
                    <td data-bind="text: price"></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Thank you.

February 5, 2013 at 3:21 pm addrow problem #14751

Peter Stoev

Keymaster

Hi damc.

What should be observe in the posted code? You add null values here:

  this.items.push({ name: null, sales: null, price: null });

this.items()[0].name

will be null.

If you want “name” to be observable, may be you should write that:

this.items.push({ name: ko.observable(null), sales: null, price: null });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 8, 2013 at 12:14 pm addrow problem #14891

damc

Participant

Hi Peter.

On cell click event (only on first column) we delete selected row. Each time, when we delete the last row, we get the error “TypeError: this.hittestinfo[k] is undefined” (error is visible in firebug).

My code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to integrate jqxGrid using jqxDataAdapter with Knockout.js.
    </title>
    <link rel="stylesheet" href="./2.6.1/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="./jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="./json2-2012-10-08.min.js"></script> 
    <script type="text/javascript" src="./knockout-2.2.1.js"></script>
	<script type="text/javascript" src="./knockout.mapping-2.3.5.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxcore.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxdata.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxbuttons.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxscrollbar.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxmenu.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxgrid.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxknockout.js"></script>
    <script type="text/javascript" src="./2.6.1/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //var initialData = [];
            var initialData = [
                { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
                { name: "Speedy Coyote", sales: 89, price: 190.00 },
                { name: "Furious Lizard", sales: 152, price: 25.00 },
                { name: "Indifferent Monkey", sales: 1, price: 99.95 },
                { name: "Brooding Dragon", sales: 0, price: 6350 },
                { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
                { name: "Optimistic Snail", sales: 420, price: 1.50 }
            ];
			
            var GridModel = function (items) {
   				this.items = ko.mapping.fromJS(items);
                this.disabled = ko.observable(false);
                this.addItem = function () {
                    // add a new item.
                    if (this.items().length < 20) {
						this.items.push({ name: ko.observable(null), sales: ko.observable(null), price: ko.observable(null) });
						//this.items.push({ name: 'New item', sales: 100, price: 200 });
                    }
					alert('Name in first row: ' + this.items()[0].name());
					alert('ko.isObservable(this.items): ' + ko.isObservable(this.items));
					alert('this.items()[0].name(): ' + ko.isObservable(this.items()[0].name));
                };
                this.removeItem = function () {
                    // remove the last item.
                    this.items.pop();
					this.items()[1].name("AAA");
					this.items()[1].sales(999);
                };
                this.updateItem = function () {
                    // update the first item.
                    var item = {};
                    item.name = ko.observable('name');
                    item.sales = ko.observable(500);
                    item.price = ko.observable(200);
                    this.items.replace(this.items()[0], item);
					
					var record = this.items()[0];
					
					//for (var obj in record) {
					//	record[obj] = ko.observable(record[obj]);
					//}
				};
            };
            var model = new GridModel(initialData);
            var source = {
                localdata: model.items,
                datatype: 'observablearray'
            }
			
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxGrid").jqxGrid({
                autoheight: true,
                source: dataAdapter,
                editable: true,
                selectionmode: 'singlecell',
                columns: [
                    { text: 'Name', dataField: 'name', width: 200 },
                    { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
                    { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
                ]
            });
			
			$("#jqxGrid").bind("cellclick", function (event) {
				var rowindex = event.args.rowindex;
				var columnindex = event.args.columnindex;
				
				if (columnindex === 0) {
					var rowscount = jQuery("#jqxGrid").jqxGrid('getdatainformation').rowscount;
					if (rowindex >= 0 && rowindex < rowscount) {
						if(confirm('Are you sure you want to delete selecteced row?')) {
							model.items.remove(model.items()[rowindex]);
						} else {
							return false;
						}
					}
				}
			}); 	
			
            ko.applyBindings(model);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style="margin-bottom: 10px;">
            <input id="addButton" type="button" data-bind="click: addItem, jqxButton: {}" value="Add Item" />
            <input id="removeButton" type="button" data-bind="click: removeItem, jqxButton: {}" value="Remove Item" />
            <input id="updateButton" type="button" data-bind="click: updateItem, jqxButton: {}" value="Update Item" />
            <div data-bind="jqxCheckBox: {checked: disabled}" style='margin-top: 5px;' id="checkBox">Disabled</div>
        </div>
        <div data-bind="jqxGrid: {disabled: disabled}" id="jqxGrid">
        </div>
        <table style="margin-top: 20px;">
            <tbody data-bind="foreach: items">
                <tr>
                    <td data-bind="text: name"></td>
                    <td data-bind="text: sales"></td>
                    <td data-bind="text: price"></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Thank you.

Author

Posts

Viewing 5 posts - 16 through 20 (of 20 total)

← 1 2

You must be logged in to reply to this topic.