jQWidgets Forums

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

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

Author

Grid singlecell selectionmode Posts

May 30, 2013 at 8:31 am Grid singlecell selectionmode #22131

damc

Participant

Hi,

On page I have some input fields and three grids with editable on true and selectionmode on singlecell. There is a problem with cellselection. When user finishes editing values on first grid and start editing values on second or third grid (or another input filed) there is still selected last editing cell on first grid. This is a little disturbing and may cause problems with editing or deleting cells values (and so on… when user finishes editing values on second and third grid there remain selected last edited cells)? How to clear selection when user finishes editing (leaves grid)?

Best regards,
Damc

May 30, 2013 at 8:36 am Grid singlecell selectionmode #22134

Peter Stoev

Keymaster

Hi,

When the editing is finished the Grid is not supposed to Clear the selection by design. However, if you want to clear manually the selection, you can use the “clearselection’ method.

Best Regards,
Peter Stoev

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

May 30, 2013 at 12:00 pm Grid singlecell selectionmode #22170

damc

Participant

Hi Peter,

Which event can be used to call clearselection? I test with endcelledit and is not OK.

Best regards,

Damc

May 31, 2013 at 2:33 pm Grid singlecell selectionmode #22278

damc

Participant

Hi Peter,

I checked events in jqxGrid documentation and it seems that no one is apropriate. I tested with jQuery’s focusout event and is not working.

How to implement clearselection?

Best regards,
Damc

June 4, 2013 at 1:04 pm Grid singlecell selectionmode #22532

damc

Participant

Hi Peter,

With multiple grids (bellow in test case 2) on page with editable on true and selectionmode on singlecell, users have problems with selected item. If user jumps between grids cells with mouse and edits or deletes some values in some cases by editing or deleting value for example on first grid can happen that value on second grid is edited or deleted (because there are selected cell on first and on second). If we could clear selection, I think that would be this problem solved.

You can make a test for example on column sales1 last row and column sale2 first row by changing values (repeatedly with mouse jumps from one to another and change values).

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.8.3/jqxcore.js"></script>
    <script type="text/javascript" src="./2.8.3/jqxdata.js"></script>
    <script type="text/javascript" src="./2.8.3/jqxbuttons.js"></script>
    <script type="text/javascript" src="./2.8.3/jqxscrollbar.js"></script>
    <script type="text/javascript" src="./2.8.3/jqxmenu.js"></script>
    <script type="text/javascript" src="./2.8.3/jqxgrid.js"></script>
    <script type="text/javascript" src="./2.8.3/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="./2.8.3/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="./2.8.3/jqxknockout.js"></script>
    <script type="text/javascript" src="./2.8.3/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 initialData1 = [
                { name1: "Audi", sales2: 35},
                { name1: "BMW", sales2: 34},
                { name1: "Mercedes", sales2: 33},
                { name1: "Opel", sales2: 12},
            ];
			
            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 });
                    }
                };
                this.removeItem = function () {
                    // remove the last item.
                    this.items.pop();
                };
                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 GridModel1 = function (items1) {
   				this.items1 = ko.mapping.fromJS(items1);
			};	
            var model = new GridModel(initialData);
            var source = {
                localdata: model.items,
                datatype: 'observablearray'
            }
			
			var model1 = new GridModel(initialData1);
            var source1 = {
                localdata: model1.items,
                datatype: 'observablearray'
            }
			
            var dataAdapter1 = new $.jqx.dataAdapter(source);
            $("#jqxGrid1").jqxGrid({
                autoheight: true,
                source: dataAdapter1,
                editable: true,
                selectionmode: 'singlecell',
                columns: [
                    { text: 'Name1', dataField: 'name', width: 200 },
                    { text: 'Sales1', dataField: 'sales', width: 200, cellsalign: 'right' },
                    { text: 'Price1', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
                ]
            });
			
			var dataAdapter2 = new $.jqx.dataAdapter(source1);
            $("#jqxGrid2").jqxGrid({
                autoheight: true,
                source: dataAdapter2,
                editable: true,
                selectionmode: 'singlecell',
                columns: [
                    { text: 'Name2', dataField: 'name1', width: 200 },
                    { text: 'Sales2', dataField: 'sales2', width: 200, 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="jqxGrid1: {disabled: disabled}" id="jqxGrid1">
        </div>
		</br>
		<div data-bind="jqxGrid2: {disabled: disabled}" id="jqxGrid2">
        </div>
    </div>
</body>
</html>

Author

Posts

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

You must be logged in to reply to this topic.