grid cells update

[ManowarParticipant]

Hi

$("#jqxgrid").jqxGrid(
                {
                    width: 840,
                    source: dataAdapter,
                    autoheight: true,
                    editable: true,
                    sortable: true,
                    localization: getLocalization(),
                    showaggregates: true,
                    showstatusbar: true,
                    statusbarheight: 25,
                    altrows: true,
                    editmode: "selectedcell",//"selectedrow","click","selectedcell"
                    selectionmode: "singlerow",//"singlecell", "singlerow"
                    virtualmode: true,
                    rendergridrows: function (obj) {
                        return obj.data;
                    },
                    columns: [
                        {
                            text: "", datafield: "RecordStatusID", editable: false, width: 20, sortable: false, //селектор строки
                            cellsrenderer: function () { return "<div style='height: 100%; background-color: #EEEEEE'><span></span></div>"; }
                        },
                        { text: "№ п/п", datafield: "DetailNumber", width: 80, cellsalign: "right" },
                        {
                            text: "Продукт", datafield: "IncDocDetailID", displayfield: "FoodName", width: 200, columntype: "template", cellsrenderer: docRowCellsRenderer,
                            createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                                editor.append("<div style='border-color: transparent;' id='jqxgrid-editor'></div>");

                                editor.jqxDropDownButton({ width: 198, height: 25 });

                                // initialize jqxGrid
                                $("#jqxgrid-editor").jqxGrid(
                                    {
                                        width: 470,
                                        source: remainDA,
                                        autoheight: true,
                                        editable: false,
                                        filterable: true,
                                        selectionmode: "singlerow",
                                        columns: [
                                            { text: "Название", datafield: "FoodName", width: 210 },
                                            { text: "Цена", datafield: "PriceRub", width: 100, cellsformat: "d2", cellsalign: "right" },
                                            { text: "Дата", datafield: "DocDate", columntype: "datetimeinput", width: 90, cellsformat: "dd.MM.yy", cellsalign: "right" },
                                            {//колонка используется только для фильтрации - не показываются строки, потраченные в документе
                                                text: "В документе", datafield: "Amount", width: 0, cellsalign: "right", hidden:true,
                                                filter: function () {
                                                    var filtergroup = new $.jqx.filter();
                                                    var filter_or_operator = 1;
                                                    var filtervalue = 0.001;
                                                    var filtercondition = "LESS_THAN";
                                                    var filter = filtergroup.createfilter("numericfilter", filtervalue, filtercondition);
                                                    filtergroup.addfilter(filter_or_operator, filter);
                                                    return filtergroup;
                                                }()
                                            },
                                            { text: "Остаток", datafield: "AmountLeft", width: 70, cellsalign: "right" }
                                        ]
                                    });
                                $("#jqxgrid-editor").on("rowclick", function (event) {

                                });
                                $("#jqxgrid-editor").on("rowselect", function (event) {
                                    var rowindex = event.args.rowindex;
                                    var id = $('#jqxgrid').jqxGrid('getrowid', rowindex);
                                    var rowdata = $("#jqxgrid-editor").jqxGrid("getrowdata", rowindex);

                                    expDocDetailRow.IncDocDetailID = rowdata.IncDocDetailID;
                                    expDocDetailRow.Price = rowdata.PriceRub;
                                    expDocDetailRow.Amount = rowdata.AmountLeft;
                                    console.dir(expDocDetailRow);
                                    editor.jqxDropDownButton("close");
                                    $('#jqxgrid').jqxGrid('updaterow', id, expDocDetailRow);
                                });

                            },
                            // выбор строки в выпадающем гриде с продуктом из основного ??
                            initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
                                expDocDetailRow = cloneObject($("#jqxgrid").jqxGrid("getrowdata", row));

                                editor.jqxDropDownButton("setContent", expDocDetailRow["FoodName"]);
                                //var rdata = $("#jqxgrid").jqxGrid("getrowdata", row);
                                //var rows = $("#jqxgrid-editor").jqxGrid("getrows");
                                //var rowscount = rows.length;
                                //var rowdata;
                                //for (var rowid = 0; rowid < rowscount; rowid++) {
                                //    rowdata = $("#jqxgrid-editor").jqxGrid("getrowdata", rowid);
                                //    if (cellvalue === rowdata["IncDocDetailID"]) {
                                //        $("#jqxgrid-editor").jqxGrid("selectrow", rowid);
                                //        break;
                                //    }
                                //}
                            }
                            //geteditorvalue: function (row, cellvalue, editor) {
                            //    var selectedrowindex = $("#jqxgrid-editor").jqxGrid("selectedrowindex");
                            //    var data = $("#jqxgrid-editor").jqxGrid("getrowdata", selectedrowindex);
                            //    if(typeof data != "undefined") {
                            //        var idIncDocDetail = data["IncDocDetailID"];

                            //        $("#jqxgrid").jqxGrid("setcellvalue", row, "FoodName", data["FoodName"]);
                            //        $("#jqxgrid").jqxGrid("setcellvalue", row, "Amount", data["AmountLeft"]);
                            //        $("#jqxgrid").jqxGrid("setcellvalue", row, "Price", data["PriceRub"]);
                            //    }

                            //    return idIncDocDetail;
                            //},
                        },

I have grid, and in one column of that grid I have editors, which open another grid
the goal is: when I click some row in that grid from editor, several cells in row of general grid must be updated with values from selected row of grid from editor. And with minimum requests to the database.
How can I achieve this? Thank you

[StanislavParticipant]

Hello Manowar,

We have a similar demo on our web site, the difference is that in it, we use a popup window, you might find it helpful.
The demo is: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/popupediting.htm

You can bind to the endcelledit / endrowedit event and update the main grid with it.

Best Regards,
Stanislav

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

[ManowarParticipant]

            
                        updaterow: function (rowid, rowdata, commit) {
                            rowdata = expDocDetailRow;
                            rowdata.UserID = @UserID;
                            if (rowdata.IncDocDetailID != 0 && rowdata.RecordStatusID == 3 && rowdata.Amount != 0
                                && rowdata.Price != 0 && rowdata.FoodName != "(не заполнено)")
                                rowdata.RecordStatusID = 1;
                            $.ajax({
                                cache: false,
                                dataType: "json",
                                url: "../../fooExpDocDetail/Update/",
                                contentType: "application/json; charset=utf-8",
                                data: JSON.stringify(rowdata),
                                type: "POST",
                                success: function (data, status, xhr) {
                                    // update command is executed.
                                    commit(true);
                                    $("#jqxgrid").jqxGrid("updatebounddata", "cells");
                                },
                                error: function (response) {
                                    alert(response.responseText);
                                    commit(false);
                                }
                            });
                        }
            

            $("#jqxgrid").on('cellendedit', function (event) {
                var rowData = args.row;

                var id = $('#jqxgrid').jqxGrid('getrowid', event.args.rowindex);

                $('#jqxgrid').jqxGrid('updaterow', id, expDocDetailRow);
            });

Thanks
I have this “update” method, but I want data in grid to be refreshed at the same moment as I choose smth in second grid
I achieve it with method “updatebounddata”, and it works, but in profiler I see, that two similar pairs of “Update” and “Select” are executed
How can I avoid that?

[StanislavParticipant]

Hello Manowar,

This might occur because when you start updating something in your second grid, you fire an event the targets those cells in the first, and after that, you update them, which is two separate events. If this is how things are at the moment you can probably, change the select event and make it fire right before you update the data, although this will remove one of the functionalities that you wanted.

Best Regards,
Stanislav

[ManowarParticipant]

 // получение остатков
            var remainDS =
            {
                datatype: "json",
                datafields: [
                     { name: "IncDocDetailID", type: "number" },
                     { name: "FoodName", type: "string" },
                     { name: "Amount", type: "number" },
                     { name: "AmountLeft", type: "number" },
                     { name: "DocDate", type: "date" },
                     { name: "PriceRub", type: "number" }
                ],
                documentID: docID,
                url: "../../fooExpDocDetail/GetRemain",
                data: param,
                async: false
            };

            var remainDA = new $.jqx.dataAdapter(remainDS);

            var expDocDetailRow;
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
                {
                    width: 840,
                    source: dataAdapter,
                    autoheight: true,
                    editable: true,
                    sortable: true,
                    localization: getLocalization(),
                    showaggregates: true,
                    showstatusbar: true,
                    statusbarheight: 25,
                    altrows: true,
                    editmode: "selectedcell",//"selectedrow","click","selectedcell"
                    selectionmode: "singlerow",//"singlecell", "singlerow"
                    virtualmode: true,
                    rendergridrows: function (obj) {
                        return obj.data;
                    },
                    columns: [
                        {
                            text: "", datafield: "RecordStatusID", editable: false, width: 20, sortable: false, //селектор строки
                            cellsrenderer: function () { return "<div style='height: 100%; background-color: #EEEEEE'><span></span></div>"; }
                        },
                        { text: "№ п/п", datafield: "DetailNumber", width: 80, cellsalign: "right" },
                        {
                            text: "Продукт", datafield: "IncDocDetailID", displayfield: "FoodName", width: 200, columntype: "template", cellsrenderer: docRowCellsRenderer,
                            createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                                editor.append("<div style='border-color: transparent;' id='jqxgrid-editor'></div>");
                                editor.jqxDropDownButton({ width: 198, height: 25 });

                                // initialize jqxGrid
                                $("#jqxgrid-editor").jqxGrid(
                                    {
                                        width: 470,
                                        source: remainDA,
                                        autoheight: true,
                                        editable: false,
                                        filterable: true,
                                        selectionmode: "singlerow",
                                        columns: [
                                            { text: "Название", datafield: "FoodName", width: 210 },
                                            { text: "Цена", datafield: "PriceRub", width: 100, cellsformat: "d2", cellsalign: "right" },
                                            { text: "Дата", datafield: "DocDate", columntype: "datetimeinput", width: 90, cellsformat: "dd.MM.yy", cellsalign: "right" },
                                            {//колонка используется только для фильтрации - не показываются строки, потраченные в документе
                                                text: "В документе", datafield: "Amount", width: 0, cellsalign: "right", hidden:true,
                                                filter: function () {
                                                    var filtergroup = new $.jqx.filter();
                                                    var filter_or_operator = 1;
                                                    var filtervalue = 0.001;
                                                    var filtercondition = "LESS_THAN";
                                                    var filter = filtergroup.createfilter("numericfilter", filtervalue, filtercondition);
                                                    filtergroup.addfilter(filter_or_operator, filter);
                                                    return filtergroup;
                                                }()
                                            },
                                            { text: "Остаток", datafield: "AmountLeft", width: 70, cellsalign: "right" }
                                        ]
                                    });

Hello, when i click some cell, createwidjet function initialize grid in that cell dropdown
but problem is, that it sends request for data every time, when i click that cell, how can I get data for that dropdown grid only once and prevent further requests for the server? Thank you

[StanislavParticipant]

Hello Manowar,

As far as I understand, you have a dropDown grid which closes. When a dropdown is opened, it calls for the data from the server and uploads it, even if you have opened it before.

Best Regards,
Stanislav

[ManowarParticipant]

            // source для выпадающего списка продуктов
            var foodSource = {
                datatype: "json",
                datafields: [
					 { name: "FoodID", type: "number" },
                     { name: "Name", type: "string" }
                ],
                id: "FoodID",
                url: "../../Food/GetFoods",
                async: false
            };

            var foodAdapter = new $.jqx.dataAdapter(foodSource, { autoBind: true });

I know that, this is another case above – I have this list of products, which shows in some cell in jqxGrid rows and every time it sends requests for this list to the database
Can you advise me some solution, so there will be only one request to the database, and data will be retrieved only once?

[ManowarParticipant]

                        {
                            text: "Продукт", datafield: "FoodID", displayfield: "FoodName",
                            columntype: "combobox", width: 150, cellsrenderer: docRowCellsRenderer,
                            createeditor: function (row, value, editor) {
                                editor.jqxComboBox({ source: foodAdapter, valueMember: "FoodID", displayMember: "Name", width: 150, dropDownWidth: 280 });
                        }

[Author]

Posts