everpresentrow cells

[ManowarParticipant]

Hi, thanks for the great product you made, guys. I have some problems with everpresentrow in my Grid. Here is code:

<script type="text/javascript">

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

        $(document).ready(function () {
            var data = {};
            var generaterow = function (id) {
                var row = {};
                row["FoodID"] = 1;
                row["MeasureUnit"] = 1;
                row["Amount"] = 1;
                row["Price"] = 1;
                row["VATRate"] = 1;
                row["RecordDate"] = new Date();
                row["Excise"] = 1;
                row["DocumentID"] = 50003;
                row["UserID"] = 1;
                row["IncDocDetailID"] = id;
                row["RecordStatusID"] = 1;
                row["Date"] = new Date();
                row["FoodName"] = "food";
                row["DetailNumber"] = 1;
                row["fooFoodName"] = "food";
                return row;
            }

            // prepare the data
            var source =
                {
                    datatype: "json",
                    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' }
                
                    ],
                    id: 'IncDocDetailID',
                    url: 'GetIncDocDetails',
                   
                    addrow: function (rowid, rowdata, position, commit) {
                        // synchronize with the server - send insert command
                        
                        rowdata.UserID = 1;
                        rowdata.DocumentID = 50003;
                        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);
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                
                                alert(errorThrown);
                                commit(false);
                            }
                        });
                    },
                    deleterow: function (rowid, commit) {
                        // synchronize with the server - send delete command
                        $.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 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});;

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
                {
                    width: 800,
                    source: dataAdapter,
                    autoheight: true,
                    editable: true,
                    sortable: true,
                    showeverpresentrow: true,
                    everpresentrowactions: 'addBottom reset',
                    localization: {
                        addrowstring: 'Добавить',
                        resetrowstring: "Очистить",
                        everpresentrowplaceholder: " "
                    },
                    everpresentrowposition: "bottom",
                    selectionmode: 'singlerow',
                    columns: [
                        { text: "№ п/п", datafield: "DetailNumber", width: 130 },
                        {
                            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) { },
                            getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
                                var value = htmlElement.val();
                                return value;
                            },
                            resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
                                htmlElement.val(null);
                            }
                        },
                        {
                            text: "Название", datafield: "FoodName", width: 200
                        },
                        {
                            text: "Название из fooFood", datafield: "FoodID", displayfield: 'fooFoodName', columntype: "dropdownlist", width: 200,
                            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*/ });
                                
                                $(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) {
                                $(htmlElement).on('cellendedit', function (event) {
                                    // event arguments.
                                    var args = event.args;
                                    alert(args);
                                });
                            },
                            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');
                            },
                            createeditor: function (row, value, editor) {
                                editor.jqxDropDownList({ source: foodAdapter, valueMember: 'FoodID', displayMember: 'Name'/*, autoBind: true*/});
                            }
                        }
                    ]
                });
            $("#deleterowbutton").jqxButton();
            $("#addrowbutton").jqxButton();

           

            $("#deleterowbutton").bind('click', function () {
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    $("#jqxgrid").jqxGrid('deleterow', id);
                }
            });

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

            $("#jqxgrid").on('cellendedit', function (event) {
                if (event.args.datafield === "FoodID") {
                    $("#jqxgrid").jqxGrid('setcellvalue', event.args.rowindex, 'FoodName', event.args.value.label);
                }
            });
        });
    </script>
}

<div style="width: 1000px; margin: 0 auto" ;>
    <h2>IncDocDetail</h2>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div style="float: left;" id="jqxgrid">
        </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>
</div>

so, questions:
1. How can I achieve that when I select item from the dropdownlist in everpresentrow -> some value according to that appears in another cell of everpresentrow?
2. How can I put some default values in everpresentrow cell?
3. When I add new row with everpresentrow, this new row dropdownlist cell is empty, why is that?

Would be very grateful if you can help me, thanks again

[Peter StoevKeymaster]

Hi Manowar,

1. It is not possible and not configurable in the Grid’s ever present row.
2. You may try implementing initEverPresentRowWidget.
3. Should it have any information?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ManowarParticipant]

Thank you for the answer
Solved two of my questions
So, just checking, there is no way to autofill everpresentrow cell when you select some item in dropdownlist cell in that everpresentrow?

[ManowarParticipant]

One more question – how can I add row to my database when focus on everpresentrow is lost?

[Author]

Posts