[ManowarParticipant]

Dimitar, that worked in the end, but I left “updatebounddata”

                    addrow: function (rowid, rowdata, position, commit) {
                        $.ajax({
                            cache: false,
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            url: "../../fooIncDocDetail/Add/",
                            data: JSON.stringify(rowdata),
                            type: "POST",
                            success: function (data, status, xhr) {
                                rowdata.IncDocDetailID = data.IncDocDetailID;
                                commit(true);
                                $("#jqxgrid").jqxGrid("updatebounddata", "data");
                                $('#jqxgrid').jqxGrid('selectrow', $('#jqxgrid').jqxGrid('getrowboundindexbyid', data.IncDocDetailID));
                                setTimeout(function() {
                                    $("#jqxgrid").jqxGrid('begincelledit', $('#jqxgrid').jqxGrid('getrowboundindexbyid', data.IncDocDetailID), "FoodID");
                                }, 10);
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                alert("Проверка 3   " + errorThrown);
                                commit(false);
                            }
                        });
                    },

That was neseccary, cause without it this method “$(‘#jqxgrid’).jqxGrid(‘getrowboundindexbyid’, data.IncDocDetailID)” returned -1, cause “uid” of that row was “-1”

[ManowarParticipant]

Please, give me some advice, what else can I do in this situation?

[ManowarParticipant]

it works only on several conditions:
– it is not the first “add” after page was loaded ( if it is – it’s not working )
– there was no row update before ( if was – not working )
I’ve tried to set different timeout delay, but result was the same

[ManowarParticipant]

Thank you, Hristo

[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 });
                        }

[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]

 // получение остатков
            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

[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?

[ManowarParticipant]

jqxTree doesn’t have method “sort” in API reference, where must I set “sortable” attribute?

[ManowarParticipant]

Thanks for the answer, Peter, but I mean 10 requests are present when page is loaded for the first time, when my dataAdapter for the documents is filled

var source =
                    {
                        datatype: "json",
                        datafields: [
			     { name: 'DocDate', type: 'date' },
                             { name: 'RegNumber', type: 'string' },
                             { name: 'UserID', type: 'number' },
                             { name: 'RecordDate', type: 'date' },
                             { name: 'RecordStatusID', type: 'number' },
                             { name: 'RegistrationDate', type: 'date' },
                             { name: 'Number', type: 'string' },
                             { name: 'Description', type: 'string' },
                             { name: 'DocumentTypeName', type: 'string' },
                             { name: 'DocumentID', type: 'number' },
                             { name: 'DocumentTypeID', type: 'number' },
                             { name: 'ObjectID', type: 'number' },
                             { name: 'Summa', type: 'number' },
                             { name: 'ContragentName', type: 'string' }
                        ],
                        id: 'DocumentID',
                        url: 'GetIncDocuments',
                        root: 'Rows',
                        beforeprocessing: function (data) {
                            source.totalrecords = data.TotalRows;
                        },

GetIncDocuments is my method to get documents from database

[ManowarParticipant]

Thanks for the reply, Peter, solved the first one
What about this one:
Besides, I have to link uploaded files to some ID – how can I trasfer that ID to my controller via this widjet?

[ManowarParticipant]

Hello, Hristo
jqxdatetimeinput.js is referenced like this:
<script type=”text/javascript” src=”~/Scripts/jqx-all.js”></script>
and there are no errors

[ManowarParticipant]

Thanks, Christopher, but i was asking about everpresentrow validation to solve problem when everpresentrow gets autofilled

[ManowarParticipant]

 $.ajax({
                            cache: false,
                            dataType: 'json',
                            contentType: "application/json; charset=utf-8",
                            url: '/IncDocDetail/Add/',
                            data: JSON.stringify(rowdata),
                            type: "POST",
                            success: function (data, status, xhr) {
                                // insert command is executed.
                                alert(JSON.stringify(data));
                                rowdata.IncDocDetailID = data.IncDocDetailID;
                                commit(true);
                                $("#addrowjqxgrid input").map(function () { // проблема с автозаполнением everpresent row
                                    this.value = "";
                                });

                                $(initRowCount).val($("#jqxgrid").jqxGrid('getdatainformation').rowscount + 1);
                                $("#jqxgrid").jqxGrid("updatebounddata", "data");
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                
                                alert(errorThrown);
                                commit(false);
                            }
                        });
$("#jqxgrid").jqxGrid(
                {
                    width: 870,
                    source: dataAdapter,
                    autoheight: true,
                    editable: true,
                    sortable: true,
                    showeverpresentrow: true,
                    everpresentrowactions: 'addBottom reset',
                    localization: {
                        addrowstring: 'Добавить',
                        resetrowstring: "Очистить",
                        everpresentrowplaceholder: " "
                    },
                    ready: function () {
                        
                        var generaterow = function (arr, id) {
                            var row = {};
                            for (var i = 0; i < 6; i++) {
                                switch (i) {
                                    case 0: row["DetailNumber"] = arr[0];
                                        break;
                                    case 1: row["FoodID"] = arr[1];
                                        break;
                                    case 2: row["FoodName"] = arr[2];
                                        break;
                                    case 3: row["Price"] = arr[3];
                                        break;
                                    case 4: row["Amount"] = arr[4];
                                        break;
                                    case 5: row["Date"] = arr[5];
                                        break;
                                }
                            }
                            return row;
                        }
                        
                        // не смог ничего придумать с методами focus/blur - если вешать на инпуты, то если отталкиваться от количества инпутов в фокусе/без, 
                        // то ситуация одинаковая, переходим мы с инпута на инпут или с инпута на другое место страницы 

                        var wasInputClicked = false; // чтобы строка не добавлялась, когда документ только загрузился, и мы кликаем вне everpresentrow
                        
                        // проблема в том, что есть два Виджета, которые не являются инпутами и не входят в контейнер для everpresentrow, когда появляются

                        $(document).click(function (event) {
                            // проверяем кликнули ли мы на календарь, я придумал только в таком варианте, вроде у контейнеров виджетов everpresentrow уникальные id с этими строками
                            var isCalendar = !!~( $(event.target).parents().map(function () {
                                return this.id;
                            }).get().join()).indexOf("calendarjqxWidget");

                            // проверяем кликнули ли мы на выпадающий список
                            var isListbox = !!~($(event.target).parents().map(function () {
                                return this.id;
                            }).get().join()).indexOf("listBox");

                            // проверяем кликнули ли мы на другие инпуты
                            var isInput = !!$(event.target).closest("#addrowjqxgrid").length;

                            // если не был кликнут ни один из инпутов, проверяем, не был ли один из них кликнут до этого
                            if (wasInputClicked) { 
                                if (isInput || isListbox || isCalendar) return; // если был, то мы еще редактируем everpresentrow
                                var datarow = {};

                                var arrData = $("#addrowjqxgrid input").map(function () { // если не был, то собираем значения и формируем строку
                                    return this.value;
                                }).get();
                               
                                var datarow = generaterow($(arrData, $("#jqxgrid").jqxGrid('getdatainformation').rowscount + 1));
                                $("#jqxgrid").jqxGrid('addrow', null, datarow);
                                
                                event.stopPropagation();
                            }

                            wasInputClicked = isInput || isListbox || isCalendar;
                        });
                        
                    },
                    showaggregates: true,
                    showstatusbar: true,
                    statusbarheight: 25,
                    altrows: true,
                    everpresentrowposition: "bottom",
                    editmode: 'click',
                    selectionmode: 'singlerow',
                    columns: [
                        {
                            text: "№ п/п", datafield: "DetailNumber", width: 50,
                            initEverPresentRowWidget: function (datafield, htmlElement) {
                                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                                var hE = htmlElement[0].firstChild;
                                $(hE).val(rowscount + 1);
                                initRowCount = hE;
                            }
                        },
                        {
                            text: "Название (справочник)", datafield: "FoodID", displayfield: "fooFoodName", columntype: "dropdownlist", width: 200,
                            createeditor: function (row, value, editor) {
                                editor.jqxDropDownList({ source: foodAdapter, valueMember: 'FoodID', displayMember: 'Name'/*, autoBind: true*/ });
                            },
                            createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
                                var inputTag = $("<div style='border: none;'></div>").appendTo(htmlElement);
                                inputTag.jqxDropDownList({ source: foodAdapter, valueMember: 'FoodID', displayMember: 'Name', placeHolder: "Продукт: "/*, autoBind: true*/ });
                                
                                $(inputTag).on('select', function (event) {
                                    var args = event.args;
                                    var item = $(inputTag).jqxDropDownList('getItem', args.index);
                                    $(autoFilledEverPresentCell).val(item.label);
                                });

                                $(document).on('keydown.fooFoodName', function (event) {
                                    if (event.keyCode == 13) {
                                        if (event.target === inputTag[0]) {
                                            addCallback();
                                        }
                                        else if ($(event.target).ischildof(inputTag)) {
                                            addCallback();
                                        }
                                    }
                                });
                                return inputTag;
                            },
                            initEverPresentRowWidget: function (datafield, htmlElement) {
 
                            },
                            getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
                                var selectedItem = htmlElement.jqxDropDownList('getSelectedItem');
                                if (!selectedItem)
                                    return "";
                                var value = selectedItem.value
                                return value;
                            },
                            resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
                                htmlElement.jqxDropDownList('clearSelection');
                            }
                        },
                        {
                            text: "Название", datafield: "FoodName", width: 200,
                            initEverPresentRowWidget: function (datafield, htmlElement) {
                                autoFilledEverPresentCell = htmlElement[0].firstChild;
                            }
                        },
                        {
                            text: "Цена", datafield: "Price", cellsformat: 'd2', cellsalign: 'right', width: 90, 
                        },
                        {
                            text: "Количество", datafield: "Amount", cellsformat: 'n2', cellsalign: 'right', width: 90
                        },
                        {
                            text: "Дата", datafield: "Date", columntype: 'datetimeinput', width: 100, cellsalign: 'right', cellsformat: 'dd.MM.yy',
                            createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
                                var inputTag = $("<div style='border: none;'></div>").appendTo(htmlElement);
                                inputTag.jqxDateTimeInput({ value: null, popupZIndex: 99999999, placeHolder: "Дата: ", width: '100%', height: 30, culture: "ru-RU", formatString: 'dd.MM.yy' });
                                $(document).on('keydown.date', function (event) {
                                    if (event.keyCode == 13) {
                                        if (event.target === inputTag[0]) {
                                            addCallback();
                                        }
                                        else if ($(event.target).ischildof(inputTag)) {
                                            addCallback();
                                        }
                                    }
                                });
                               
                                return inputTag;
                            },
                            initEverPresentRowWidget: function (datafield, htmlElement) {
                                htmlElement = htmlElement[0].firstChild;
                            },
                            getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
                                var value = htmlElement.val();
                                return value;
                            },
                            resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
                                htmlElement.val(null);
                            }
                        },
                        {
                            text: "Cумма", datafield: "Summ", cellsformat: 'n2', cellsalign: 'right', width: 140, aggregates: [{
                                '<b>Итого</b>':
                                    function (aggregatedValue, currentValue, column, record) {
                                        return aggregatedValue += currentValue;
                                    }
                            }]
                        }
                    ]
                });
            
            $("#deleterowbutton").jqxButton();
            $("#addrowbutton").jqxButton();

This is part of my code, I am new to Javascript/Jquery, so the task above, which is to add feature, so that when you click somewhere outside everpresenrrow inputs after filling them with data, row wil be added automatically, without need to press a button, Ive done like this.

Can you help me with some example about my problem with autofilling?

[ManowarParticipant]

Ive done it like that, is it right?

$.ajax({
                            cache: false,
                            dataType: 'json',
                            contentType: "application/json; charset=utf-8",
                            url: '/IncDocDetail/Add/',
                            data: JSON.stringify(rowdata),
                            type: "POST",
                            success: function (data, status, xhr) {
                                // insert command is executed.
                                alert(JSON.stringify(data));
                                rowdata.IncDocDetailID = data.IncDocDetailID;
                                commit(true);
                                $("#addrowjqxgrid input").map(function () { // проблема с автозаполнением everpresent row
                                    this.value = "";
                                });

                                $(initRowCount).val($("#jqxgrid").jqxGrid('getdatainformation').rowscount + 1);
                                $("#jqxgrid").jqxGrid("updatebounddata", "data");
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                
                                alert(errorThrown);
                                commit(false);
                            }
                        });

[Author]

Posts