jQWidgets Forums
jQuery UI Widgets › Forums › Grid › how to submit cell value on click in the columns header
This topic contains 9 replies, has 2 voices, and was last updated by damc 12 years, 3 months ago.
-
Author
-
Hi,
I have problem submitting cell value.
I have an image for add row in the columns header. If I click on image to add row, then last editing cell value disappears (is not submited).How to submit value in cell, if user clicks column header?
Thank you for your help.
Hello damc,
Please provide us with a code sample so that we may better be of help.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/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.8.0/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="./jquery-1.9.1.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.4.1.js"></script> <script type="text/javascript" src="./2.8.0/jqxcore.js"></script> <script type="text/javascript" src="./2.8.0/jqxdata.js"></script> <script type="text/javascript" src="./2.8.0/jqxbuttons.js"></script> <script type="text/javascript" src="./2.8.0/jqxscrollbar.js"></script> <script type="text/javascript" src="./2.8.0/jqxmenu.js"></script> <script type="text/javascript" src="./2.8.0/jqxgrid.js"></script> <script type="text/javascript" src="./2.8.0/jqxgrid.selection.js"></script> <script type="text/javascript" src="./2.8.0/jqxgrid.edit.js"></script> <script type="text/javascript" src="./2.8.0/jqxknockout.js"></script> <script type="text/javascript" src="./2.8.0/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. }; }; var model = new GridModel(initialData); var source = { localdata: model.items, datatype: 'observablearray' } var dataAdapter = new $.jqx.dataAdapter(source); var renderedAddRowN1 = function (element) { jQuery(element).on('click', function (event) { model.items.push({ name: ko.observable(null), sales: ko.observable(null), price: ko.observable(null) }); }); return true; } $("#jqxGrid").jqxGrid({ autoheight: true, source: dataAdapter, editable: true, selectionmode: 'singlecell', columns: [ { text: 'Name', dataField: 'name', width: 200, renderer: function () { return '<div style="margin:4px;float:left"><img id="addN3" src="./addButton.gif" alt="Add row" title="Add row"/></div>' }, rendered: renderedAddRowN1 }, { 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 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>
Best Regards,
DamcHello Damc,
Here is the solution:
<!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="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="../../scripts/json2.js"></script> <script type="text/javascript" src="../../scripts/knockout-2.2.1.js"></script> <script type="text/javascript" src="../../scripts/knockout-mapping-2.0.0.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/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { 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. }; }; var model = new GridModel(initialData); var source = { localdata: model.items, datatype: 'observablearray' } var dataAdapter = new $.jqx.dataAdapter(source); var eRow; var eColumn; var renderedAddRowN1 = function (element) { jQuery(element).on('click', function (event) { $("#jqxGrid").jqxGrid('endcelledit', eRow, eColumn, false); model.items.push({ name: ko.observable(null), sales: ko.observable(null), price: ko.observable(null) }); }); return true; } var celledit = function (row, datafield, columntype) { eRow = row; eColumn = datafield; }; $("#jqxGrid").jqxGrid({ autoheight: true, source: dataAdapter, editable: true, selectionmode: 'singlecell', columns: [ { text: 'Name', dataField: 'name', width: 200, renderer: function () { return '<div style="margin:4px;float:left"><img id="addN3" src="./addButton.gif" alt="Add row" title="Add row"/></div>' }, rendered: renderedAddRowN1, cellbeginedit: celledit }, { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right', cellbeginedit: celledit }, { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right', cellbeginedit: celledit } ] }); ko.applyBindings(model); }); </script></head><body class='default'> <div id='jqxWidget'> <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>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Sample does not work. It has error – Can’t read property ‘columntype’ of null.
Best Regards,
DamcHi,
I fixed the error with columntype. But there is another error ‘editor is not defined’ when we call endcelledit (Hides the edit cell’s editor and saves or cancels the changes) and cell is not in edit mode. How to check this?
Thank you,
DamcHi Damc,
The sample we provided you works fine on our side. Please share your jQWidgets, jQuery and browser versions and if you modified it in any manner.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi,
First thank you for your help.
Problem is the same on IE, Chrome or FF. If you first open cell for editing and edit some value and then with mause go to another cell (not in edit mode, only select), and then submit add row button then there is an error.
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.8.0/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="./jquery-1.9.1.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.4.1.js"></script> <script type="text/javascript" src="./2.8.0/jqxcore.js"></script> <script type="text/javascript" src="./2.8.0/jqxdata.js"></script> <script type="text/javascript" src="./2.8.0/jqxbuttons.js"></script> <script type="text/javascript" src="./2.8.0/jqxscrollbar.js"></script> <script type="text/javascript" src="./2.8.0/jqxmenu.js"></script> <script type="text/javascript" src="./2.8.0/jqxgrid.js"></script> <script type="text/javascript" src="./2.8.0/jqxgrid.selection.js"></script> <script type="text/javascript" src="./2.8.0/jqxgrid.edit.js"></script> <script type="text/javascript" src="./2.8.0/jqxknockout.js"></script> <script type="text/javascript" src="./2.8.0/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. }; }; var model = new GridModel(initialData); var source = { localdata: model.items, datatype: 'observablearray' } var dataAdapter = new $.jqx.dataAdapter(source); var ecolumn; var erow; var renderedAddRowN1 = function (element) { jQuery(element).on('click', function (event) { if (erow && ecolumn) { $("#jqxGrid").jqxGrid('endcelledit', erow, ecolumn, false); } model.items.push({ name: ko.observable(null), sales: ko.observable(null), price: ko.observable(null) }); }); return true; } var celledit = function (row, datafield) { erow = row; ecolumn = datafield; }; $("#jqxGrid").jqxGrid({ autoheight: true, source: dataAdapter, editable: true, selectionmode: 'singlecell', columns: [ { text: 'Name', dataField: 'name', width: 200, renderer: function () { return '<div style="margin:4px;float:left"><img id="addN3" src="./addButton.gif" alt="Add row" title="Add row"/></div>'; }, rendered: renderedAddRowN1, cellbeginedit: celledit }, { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right', cellbeginedit: celledit }, { text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right', cellbeginedit: celledit } ] }); ko.applyBindings(model); }); </script></head><body class='default'> <div id='jqxWidget'> <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>
Hi Damc,
To fix the issue, you should add a check which shows if a cell is in edit mode. This can be done in the cellendedit callback function, where a flag may be set to indicate that a cell is no longer being edited. Then you may do the following:
if (erow && ecolumn && flag == true) { $("#jqxGrid").jqxGrid('endcelledit', erow, ecolumn, false); }
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Thank you for your help. Problem solved!
Best Regards,
Damc -
AuthorPosts
You must be logged in to reply to this topic.