jQuery UI Widgets Forums Grid can't set celledit mode

This topic contains 5 replies, has 2 voices, and was last updated by  Manowar 6 years, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • can't set celledit mode #95491

    Manowar
    Participant

    Hi, in my grid I want to add row and then set first visible cell of that row into edit mode, it works – gets into edit mode, but just for a second and then gets out of it by itself
    The same behaviour I get when navigate from cell “FoodID” to cell “FoodName” with Tab

                        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));
                                    $('#jqxgrid').jqxGrid('focus');
                                    //$("#jqxgrid").jqxGrid('begincelledit', $('#jqxgrid').jqxGrid('getrowboundindexbyid', data.IncDocDetailID), "DetailNumber");
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    alert("Проверка 3   " + errorThrown);
                                    commit(false);
                                }
                            });
                        },
    
                        {
                            text: "Продукт", datafield: "FoodID", displayfield: "fooFoodName", columntype: "combobox", width: 190, 
                            cellclassname: formatRecordStatus,
                            createeditor: function (row, value, editor) {
                                foodSource.url = "";
                                foodSource.localdata = foodAdapter.records;
                                editor.jqxComboBox({ source: new $.jqx.dataAdapter(foodSource), valueMember: "FoodID", displayMember: "Name", width: 150, dropDownWidth: 280 });
                            },
                            initeditor: function (row, cellvalue, editor, celltext, pressedChar) {
                            },
                            validation: function (cell, value) {
                                if (!foodSource.localdata.map(item => item.Name).includes(value.label)) {
                                    return { result: false, message: "Выберите продукт из списка" };
                                }
                                return true;
                            }
                        },
                        {
                            text: "Название", datafield: "FoodName", width: 190,
                            cellclassname: formatRecordStatus
                        },
            // автозаполнение при выборе пункта из списка продуктов
            $("#jqxgrid").on("cellvaluechanged", function (event) {
    
                var rowdata = $('#jqxgrid').jqxGrid('getrowdata', event.args.rowindex);
    
                if (event.args.datafield == "FoodID") {
                    rowdata.FoodName = event.args.value.label;
                }
                rowdata.UserID = @UserID;
                if (rowdata.FoodID != 0 && rowdata.RecordStatusID == 3)
                    rowdata.RecordStatusID = 1;
                $.ajax({
                    cache: false,
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    url: "../../fooIncDocDetail/Update/",
                    data: (JSON.stringify(rowdata)),
                    type: "POST",
                    success: function (response) {
                        if (event.args.datafield == "FoodID") {
                            $('#jqxgrid').jqxGrid('refresh');
                        }
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });

    Please help, thank you

    can't set celledit mode #95515

    Dimitar
    Participant

    Hi Manowar,

    Please share if any errors are thrown in your browser’s console while running the steps to reproduce this issue. Please also try calling begincelledit (in addrow) in a setTimeout and share the result, e.g.:

    success: function(data, status, xhr) {
    	rowdata.IncDocDetailID = data.IncDocDetailID;
    	commit(true);
    	$("#jqxgrid").jqxGrid("updatebounddata", "data");
    	$('#jqxgrid').jqxGrid('selectrow', $('#jqxgrid').jqxGrid('getrowboundindexbyid', data.IncDocDetailID));
    	$('#jqxgrid').jqxGrid('focus');
    	setTimeout(function() {
    		$("#jqxgrid").jqxGrid('begincelledit', $('#jqxgrid').jqxGrid('getrowboundindexbyid', data.IncDocDetailID), "DetailNumber");
    	}, 10);
    },

    Please also note that calling updatebounddata after commit(true); should not be necessary.

    Best Regards,
    Dimitar

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

    can't set celledit mode #95566

    Manowar
    Participant

    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

    can't set celledit mode #95567

    Manowar
    Participant

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

    can't set celledit mode #95571

    Dimitar
    Participant

    Hi Manowar,

    Please share more information on the issue:

    • Are there any errors thrown in your browser’s console?
    • Did you manage to implement addrow without the unnecessary call to updatebounddata in success?
    • Please share if the cell enters edit mode at all. You can subscribe to the cellbeginedit event in order to determine this.

    Best Regards,
    Dimitar

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

    can't set celledit mode #95574

    Manowar
    Participant

    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”

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

You must be logged in to reply to this topic.