Add row with everpresentrow when lose focus

[ManowarParticipant]

@model IEnumerable<FoodTutorial.Models.fooDocument>
@{
    ViewBag.Title = "DocumentList";
}
@section scripts {
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jqx-all.js"></script>
    <script src="~/Scripts/globalize.js"></script>
    <script src="~/Scripts/globalize.culture.ru-RU.js"></script>
    <script type="text/javascript">

        function cloneObject(obj) {
            var key, clone = {};
            for (key in obj) if (obj.hasOwnProperty(key)) clone[key] = obj[key];
            return clone;
        }

        function rowOrderColumnAutofill(number, htmlElement) {
            var rowscount = $("#detail").jqxGrid('getdatainformation').rowscount;
            htmlElement = htmlElement[0].firstChild;
            $(htmlElement).val(rowscount + number);
        }

        $(document).ready(function () {

            var generaterow = function (id) {
                var row = {};
                row["DocDate"] = new Date();
                row["RegNumber"] = "1";
                row["UserID"] = 1;
                row["RecordDate"] = new Date();
                row["RecordStatusID"] = "1";
                row["RegistrationDate"] = new Date();
                row["Number"] = 1;
                row["Description"] = "Введите описание";
                row["DocumentTypeName"] = "Товарная накладная";
                row["DocumentID"] = id;
                return row;
            }

            // данные для master grid
            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' },
                        ],
                        id: 'DocumentID',
                        url: 'GetDocuments',

                        addrow: function (rowid, rowdata, position, commit) {
                            // synchronize with the server - send insert command

                            rowdata.UserID = 1;
                            rowdata.RecordStatusID = '1';
                            alert(rowdata);
                            if (rowdata.DocumentTypeName == "Товарная накладная")
                            {
                                rowdata.DocumentTypeID = 1;
                            }
                            else if (rowdata.DocumentTypeName == "Товарный чек")
                            {
                                rowdata.DocumentTypeID = 2;
                            }
                            else
                            {
                                rowdata.DocumentTypeID = 3;
                            }

                            $.ajax({
                                cache: false,
                                dataType: 'json',
                                url: '/DocumentList/Add',
                                data: rowdata,
                                type: "POST",
                                success: function (data, status, xhr) {
                                    // insert command is executed.
                                    commit(true);
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    alert(errorThrown);
                                    commit(false);
                                }
                            });
                        },
                        deleterow: function (rowid, commit) {
                            // synchronize with the server - send delete command
                            
                            var result = confirm("Вы действительно хотите удалить выбранную запись?");
                                if (result == true) {
                                    $.ajax({
                                        dataType: 'json',
                                        cache: false,
                                        url: '/DocumentList/Delete/' + rowid,
                                        type: "POST",
                                        success: function (data, status, xhr) {
                                            // delete command is executed.
                                            commit(true);
                                        },
                                        error: function (jqXHR, textStatus, errorThrown) {
                                            alert(jqXHR.statusText);
                                            commit(false);
                                        }
                                    });
                                }
                        },
                        updaterow: function (rowid, rowdata, commit) {
                            // synchronize with the server - send update command
                            switch (rowdata.DocumentTypeName) {
                                case "Товарная накладная":
                                    rowdata.DocumentTypeID = 1;
                                    break;
                                case "Товарный чек":
                                    rowdata.DocumentTypeID = 2;
                                    break;
                                case "Документ списания":
                                    rowdata.DocumentTypeID = 3;
                                    break;
                            }
                            var newdata = cloneObject(rowdata);
                            newdata.RegistrationDate = rowdata.RegistrationDate.toLocaleDateString("ru-RU");
                            newdata.DocDate = rowdata.DocDate.toLocaleDateString("ru-RU");
                            newdata.RecordDate = rowdata.RecordDate.toLocaleDateString("ru-RU");

                             $.ajax({
                                 cache: false,
                                 dataType: 'json',
                                 url: '/DocumentList/Update',
                                 data: newdata,
                                 type: "POST",
                                 success: function (data, status, xhr) {
                                     // update command is executed.
                                     commit(true);
                                 },
                                 error: function (jqXHR, textStatus, errorThrown) {
                                     alert(errorThrown);
                                     commit(false);
                                 }
                             });
                         }
                };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var dropdownListSource = ["Товарная накладная", "Товарный чек", "Документ списания"];

            // initialize jqxGrid
            $("#master").jqxGrid(
                    {
                        width: 1000,
                        // http://www.jqwidgets.com/community/topic/bug-format-strings-in-jqxdatetimeinput/ фича в DateTimeInput
                        source: dataAdapter,
                        autoheight: true,
                        editable: true,
                        ready: function () {
                            $('#master').jqxGrid('selectrow', 0);
                        },
                        editmode: 'selectedrow',
                        // The keyboard navigation is enabled by default. However, if you want to disable it, you need to set the 'keyboardnavigation' property to false.
                        selectionmode: 'singlerow',
                        showeverpresentrow: false,
                        everpresentrowactionsmode: 'columns',
                        everpresentrowactions: 'addBottom reset',
                        localization: {
                            addrowstring: 'Добавить',
                            resetrowstring: "Очистить",
                            everpresentrowplaceholder: " "
                        },
                        everpresentrowposition: "bottom",
                        columns: [
                            { text: "Дата", datafield: "DocDate", columntype: "datetimeinput", cellsformat: "dd.MM.yy", width: 100,
                                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();
                                            }
                                        }
                                    });
                                    //htmlElement = htmlElement[0].firstChild;
                                    //$(inputTag).select(function () {
                                    //    $(htmlElement).jqxDateTimeInput('focus');
                                    //});
                                    //$(inputTag).select();
                                    return inputTag;
                                },
                                initEverPresentRowWidget: function (datafield, htmlElement) {
                                },
                                getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
                                    var value = htmlElement.val();
                                    return value;
                                },
                                resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
                                    htmlElement.val(null);
                                }
                            },
                            { text: "Рег. номер", datafield: "RegNumber", width: 80 },
                            { text: "Дата рег.", datafield: "RegistrationDate", columntype: "datetimeinput", width: 100, 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) { },
                                getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
                                    var value = htmlElement.val();
                                    return value;
                                },
                                resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
                                    htmlElement.val(null);
                                }
                            },
                            { text: "Номер", datafield: "Number", width: 70 },
                            { text: "Описание", datafield: "Description",  width: 280 },
                            {
                              text: "Тип", datafield: "DocumentTypeName", columntype: "dropdownlist", width: 170,
                                initeditor: function (row, cellvalue, editor) {
                                    editor.jqxDropDownList({ source: dropdownListSource });
                                },
                                createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
                                    var inputTag = $("<div style='border: none;'></div>").appendTo(htmlElement);
                                    inputTag.jqxDropDownList({ popupZIndex: 99999999, placeHolder: "Введите тип: ", source: dropdownListSource, displayMember: 'Тип', width: '100%', height: 30 });
                                    $(document).on('keydown.productname', function (event) {
                                        if (event.keyCode == 13) {
                                            if (event.target === inputTag[0]) {
                                                addCallback();
                                            }
                                            else if ($(event.target).ischildof(inputTag)) {
                                                addCallback();
                                            }
                                        }
                                    });
                                    return inputTag;
                                },
                                getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
                                    var selectedItem = htmlElement.jqxDropDownList('getSelectedItem');
                                    if (!selectedItem)
                                        return "";
                                    var value = selectedItem.label;
                                    return value;
                                },
                                resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
                                    htmlElement.jqxDropDownList('clearSelection');
                                }
                            },
                            { text: '', datafield: 'addButtonColumn', width: 100 },
                            { text: '', datafield: 'resetButtonColumn', width: 100 }
                        ]
                    });

            $("#deleterowbutton").jqxButton();
            $("#addrowbutton").jqxButton();

            function getRowId(grid) {
                var selectedrowindex = $(grid).jqxGrid('getselectedrowindex');
                var rowscount = $(grid).jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    return $(grid).jqxGrid('getrowid', selectedrowindex);
                }
            }

            $("#deleterowbutton").bind('click', function () {
                var rows = $('#detail').jqxGrid('getrows');
                if (typeof rows[0] == "undefined") {
                    $("#master").jqxGrid('deleterow', getRowId("#master"));
                } else {
                    alert("В этом документе есть строки");
                }
            });

            $('html').keydown(function (eventObject) {
                if (event.keyCode == 8) {
                    $("#master").jqxGrid('deleterow', getRowId("#master"));
                }
                else if (event.keyCode == 27) {
                    $('#master').jqxGrid('showeverpresentrow', false);
                }
            });

            $("#addrowbutton").bind('click', function () {
                $('#master').jqxGrid('showeverpresentrow', true);
            });

            // подшрузка данных для выпадающего справочника продуктов

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

            $("#master").bind('rowselect', function (event) {
                var row = event.args.rowindex;
                var currentDocumentId = $("#master").jqxGrid('getrowdata', row)['DocumentID'];

                // данные для detail grid
                var dataFields = [
                             { name: 'IncDocDetailID', type: 'number' },
                             { name: 'FoodID', type: 'number' },
                             { name: 'MeasureUnit', type: 'number' },
                             { name: 'Amount', type: 'number' },
                             { name: 'Price', type: 'number' },
                             { name: 'VATRate', type: 'number' },
                             { name: 'Excise', type: 'number' },
                             { name: 'DocumentID', type: 'number' },
                             { name: 'UserID', type: 'number' },
                             { name: 'RecordDate', type: 'date' },
                             { name: 'RecordStatusID', type: 'number' },
                             { name: 'Date', type: 'date' },
                             { name: 'FoodName', type: 'string' },
                             { name: 'DetailNumber', type: 'number' },
                             { name: 'fooFoodName', type: 'string' },
                             { name: 'FoodList', type: 'string' },

                ];

                var source =
                    {
                        datatype: "json",
                        async: false,
                        datafields: dataFields,
                        id: 'IncDocDetailID',
                        url: '/DocumentList/GetCurrentIncDoc/' + currentDocumentId,
                        addrow: function (rowid, rowdata, position, commit) {
                            // synchronize with the server - send insert command

                            rowdata.UserID = 1;
                            rowdata.DocumentID = currentDocumentId;
                            rowdata.RecordStatusID = 1;
                            rowdata.MeasureUnit = 1;
                            rowdata.Excise = 0;
                            rowdata.VATRate = 10;
                            rowdata.RecordDate = new Date();
                            rowdata.Date = new Date();
                            alert(JSON.stringify(rowdata));
                            var newdata = cloneObject(rowdata);
                            newdata.RecordDate = rowdata.RecordDate.toLocaleDateString("ru-RU");
                            newdata.Date = rowdata.Date.toLocaleDateString("ru-RU");

                            $.ajax({
                                cache: false,
                                dataType: 'json',
                                url: '../IncDocDetail/Add/',
                                data: newdata,
                                type: "POST",
                                success: function (data, status, xhr) {
                                    // insert command is executed.
                                    alert(JSON.stringify(data));
                                    rowdata.IncDocDetailID = data.IncDocDetailID;
                                    commit(true);
                                    $("#detail").jqxGrid('updatebounddata');
                                },
                                error: function (jqXHR, textStatus, errorThrown) {

                                    alert(errorThrown);
                                    commit(false);
                                }
                            });
                        },
                        deleterow: function (rowid, commit) {
                            // synchronize with the server - send delete command
                            var result = confirm("Вы действительно хотите удалить выбранную запись?");
                            if (result == true) {
                                $.ajax({
                                    dataType: 'json',
                                    cache: false,
                                    url: '../IncDocDetail/Delete/' + rowid,
                                    type: "POST",
                                    success: function (data, status, xhr) {
                                        // delete command is executed.
                                        commit(true);
                                    },
                                    error: function (jqXHR, textStatus, errorThrown) {
                                        alert(jqXHR.statusText);
                                        commit(false);
                                    }
                                });
                            }
                        },
                        updaterow: function (rowid, rowdata, commit) {
                            // synchronize with the server - send update command
                            //шаманство с датами - не знаю пока что, как победить

                            var newdata = cloneObject(rowdata);
                            newdata.RecordDate = rowdata.RecordDate.toLocaleDateString("ru-RU");
                            newdata.Date = rowdata.Date.toLocaleDateString("ru-RU");

                            $.ajax({
                                cache: false,
                                dataType: 'json',
                                url: '../IncDocDetail/Update/',
                                data: newdata,
                                type: "POST",
                                success: function (response) {
                                    commit(true);
                                },
                                error: function (response) {
                                    alert(response.responseText);
                                    commit(false);
                                }
                            });
                        }
                    };

                var dataAdapter = new $.jqx.dataAdapter(source);
                var initCount = undefined;
                var autoFilledEverPresentCell;
                // initialize jqxGrid
                $("#detail").jqxGrid(
                    {
                        width: 920,
                        source: dataAdapter,
                        autoheight: true,
                        editable: true,
                        sortable: true,
                        showeverpresentrow: false,
                        everpresentrowactionsmode: 'columns',
                        localization: {
                            addrowstring: 'Добавить',
                            resetrowstring: "Очистить",
                            everpresentrowplaceholder: " "
                        },
                        everpresentrowposition: "bottom",
                        editmode: 'dblclick',
                        selectionmode: 'singlerow',
                        columns: [
                            {
                                text: "№ п/п", datafield: "DetailNumber", width: 130,
                                initEverPresentRowWidget: function (datafield, htmlElement) {
                                    var rowscount = $("#detail").jqxGrid('getdatainformation').rowscount;
                                    htmlElement = htmlElement[0].firstChild;
                                    
                                    if (initCount == undefined) {
                                        $(htmlElement).val(rowscount + 1);
                                        initCount = 1;
                                        alert(1);
                                    } else {
                                        initCount = undefined;
                                        alert(2);
                                        $(htmlElement).val(rowscount + 2);
                                    }

                                },
                                resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
                                    alert("reset");
                                }
                            },
                            {
                                text: "Количество", datafield: "Amount", width: 90
                            },
                            {
                                text: "Дата", datafield: "Date", columntype: 'datetimeinput', width: 100, 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: "Название", datafield: "FoodName", width: 200,
                                initEverPresentRowWidget: function (datafield, htmlElement) {
                                    autoFilledEverPresentCell = htmlElement[0].firstChild;
                                },
                            },
                            {
                                text: "Название из fooFood", 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: 'addButtonColumn', width: 100 },
                            { text: '', datafield: 'resetButtonColumn', width: 100 }
                        ]
                    });

                $("#detail").jqxGrid('sortby', 'FoodID', 'asc');

                $("#detaildeleterowbutton").jqxButton();
                $("#detailaddrowbutton").jqxButton();

                $("#detaildeleterowbutton").bind('click', function () {
                        $("#detail").jqxGrid('deleterow', getRowId("#detail"));
                });
                
            });

            
            $("#detailaddrowbutton").bind('click', function () {
                $('#detail').jqxGrid('showeverpresentrow', true);
            });

            $("#addrowjqxgrid").focusout(function () {
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                var datarow = generaterow(rowscount + 1);
                $("#jqxgrid").jqxGrid('addrow', null, datarow);
            });
        });

    </script>
}
<div style="width: 1200px; margin: 0 auto" ;>
    <h2>Document</h2>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div style="float: left; margin-bottom: 50px;" id="master" ;>
        </div>
        <div style="margin-left: 30px; margin-top: 20px; float: left;">
            <div>
                <input id="addrowbutton" type="button" value="Add New Row" />
            </div>
            <div style="margin-top: 10px;">
                <input id="deleterowbutton" type="button" value="Delete Selected Row" />
            </div>
        </div>
        <div style="float: left;" id="detail">
        </div>
        <div style="margin-left: 30px; margin-top: 20px; float: left;">
            <div>
                <input id="detailaddrowbutton" type="button" value="Add New Row" />
            </div>
            <div style="margin-top: 10px;">
                <input id="detaildeleterowbutton" type="button" value="Delete Selected Row" />
            </div>
        </div>
    </div>
</div>

Hi, how and where can I get values of everpresentrow to use them in this event handler to add new row when focus on everpresentrow is lost? or their is another way? Thanks

$(“#addrowjqxgrid”).focusout(function () {
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
var datarow = generaterow(rowscount + 1);
$(“#jqxgrid”).jqxGrid(‘addrow’, null, datarow);
});

[HristoParticipant]

Hello Manowar,

The shared code is too bigger and we do not have the opportunity to take time to adjust to each individual code.
the “getEverPresentRowWidgetValue” callback member give you the value of this particular cell.

You could try bind to “focusout” – $("#jqxgridX").find('.jqx-grid-cell-filter-row').on("focusout", function () { // Do something }.

I would like to ask you what exactly you want to achieve?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[ManowarParticipant]

Hi, I would like to avoid using build in buttons in each cell of everpresentrow (“add”, “delete”) and achieve that when user finishes to add data in everpresentrow and click somewhere outside its cell, the row will add to database
Thank you for the reply

[ManowarParticipant]

I actually need “blur” event so the event wont fire when some cell in everpresentrow lose focus and another gets it, but when element-container of everpresent row loses focus

[HristoParticipant]

Hello Manowar,

Thank you for the interest to our Widget.
Unfortunately, the situation is such that we cannot provide other options for now.
You could try to create some workaround.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts