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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author

  • damc
    Participant

    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.


    Dimitar
    Participant

    Hello damc,

    Please provide us with a code sample so that we may better be of help.

    Best Regards,
    Dimitar

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


    damc
    Participant

    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,
    Damc


    Dimitar
    Participant

    Hello 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,
    Dimitar

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


    damc
    Participant

    Hi Dimitar,

    Sample does not work. It has error – Can’t read property ‘columntype’ of null.

    Best Regards,
    Damc


    damc
    Participant

    Hi,

    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,
    Damc


    Dimitar
    Participant

    Hi 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,
    Dimitar

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


    damc
    Participant

    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>

    Dimitar
    Participant

    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,
    Dimitar

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


    damc
    Participant

    Hi Dimitar,

    Thank you for your help. Problem solved!

    Best Regards,
    Damc

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

You must be logged in to reply to this topic.