update an new row

[RusselRajithaParticipant]

my target is making an grid to show data from db and apply crud operations. and for user friendly , i used suggestion and validation. all main requrements are works fine. but problem is when i tried to edit an column at fist time suggestion dropdown are appear and then it hides and appear again.here is my code.

$(document).ready(function () {

    var date = $("#filter-date").val();
    $("#filter-date").on('change', function () {
        date = $(this).val();
        //source.url+='&date='+date;
        $('#jqx-grid').jqxGrid('updatebounddata', 'cells');
    });
    var source =
    {
        datatype: "json",
        datafields: [
            {name: "id", type: "integer"},
            // {name: "user", map: "user>fname"},
            {name: "supervisor", map: "supervisor>fname"},

        ],
        url: "/example",
        
        updaterow: function (rowid, data, commit) {
            
            ACdata['supervisor'].forEach(function (e) {
                if (data.supervisor == e.fname) {
                    data.supervisor_id = e.id;
                }
            });

            
            data.date = date;
            // iff requred fields not empty
            if (data.supervisor) {
                //ajax call to update
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    url: "update",
                    data: data,
                    success: function (data, status, xhr) {

                        if (!data) {
                            alert("try again");
                        } else {
                            $('#jqx-grid').jqxGrid('updatebounddata', 'cells');
                        }
                        commit(true);
                    },
                    error: function () {
                        commit(false);
                    }
                });
            }

        },
        addrow: function (rowid, rowdata, position, commit) {

            commit(true);
        },
        deleterow: function (rowid, commit) {
            commit(true);
        },
        type: "GET",
        root: "Rows",
        beforeprocessing: function (data) {
            source.totalrecords = 10;
        },
        loadComplete: function (data) {
            console.log(data);
        }
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    var ACdata = [];
    var getDataAdapter = function (datafield, displayMember) {

        var AcDataAdapter = new $.jqx.dataAdapter({
            datatype: "json",
            datafields: [
                {name: "id", type: "integer"},
                {name: displayMember, type: "string"}
            ],
            type: "GET",
            root: "Columns",
            async: false,
            url: "/example" + datafield,
        }, {
            loadComplete: function (data) {
                ACdata[datafield] = data;
            }
        });
        AcDataAdapter.dataBind();

        return AcDataAdapter;
    };

    getDataAdapter('supervisor', 'fname');
    getDataAdapter('project', 'name');
    getDataAdapter('task', 'name');
    // construct the editor.
    var createeditor = function (column, map, editor, width, height) {

        var inputElement = $("<input/>").prependTo(editor);
        inputElement.jqxInput({
            source: getDataAdapter(column, map),
            displayMember: map,
            width: width,
            height: height,
        });
    };

    // set the editor's current value. The callback is called each time the editor is displayed.
    var initeditor = function (cellvalue, editor, pressedkey) {

        var inputField = editor.find('input');
        if (pressedkey) {
            inputField.val(pressedkey);
            inputField.jqxInput('selectLast');
        }
        else {
            inputField.val(cellvalue);
            inputField.jqxInput('selectAll');
        }
    };
    
    var grid = $("#jqx-grid").jqxGrid(
        {
            width: "100%",
            autorowheight: true,
            autoheight: true,
            source: dataAdapter,
            selectionmode: 'multiplerows',
            theme: 'energyblue',
            editable: true,
            sortable: true,
            columnsresize: true,
            filterable: true,

            columns: [
                {text: "#", columntype: "textbox", datafield: "id", editable: false, width: '25'},
                {
                    text: 'Supervisor',
                    columntype: 'template',
                    datafield: 'supervisor',
                    width: 100,
                    createeditor: function (row, cellvalue, editor, cellText, width, height) {
                        createeditor('supervisor', 'fname', editor, width, height)
                    },
                    initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
                        initeditor(cellvalue, editor, pressedkey);
                    },
                    geteditorvalue: function (row, cellvalue, editor) {
                        // return the editor's value.
                        return editor.find('input').val();
                    },
                    validation: function (cell, value) {

                        for (var i = 0; i < ACdata['supervisor'].length; i++) {
                            if (ACdata['supervisor'][i].fname == value) {
                                return true;
                            }
                        }
                        return {result: false, message: "Please select an supervisor from given set"};
                    }
                },
                

            ]

        });
    $("#addrowbutton").on('click', function () {
        //var rowscount = $("#jqx-grid").jqxGrid('getdatainformation').rowscount;
        var commit = $("#jqx-grid").jqxGrid('addrow', null, {});
    });
    $("#deleterowbutton").on('click', function () {
        var getselectedrowindexes = $('#jqx-grid').jqxGrid('getselectedrowindexes');

        if (getselectedrowindexes.length > 0) {
            if (confirm("Are you Sure About delete rows " + getselectedrowindexes.toString() + " ?") == true) {
                var data = new Array();
                $.each(getselectedrowindexes, function (index, selectedIndex) {
                    var selectedRowData = $('#jqx-grid').jqxGrid('getrowdata', selectedIndex);

                    data[selectedIndex] = selectedRowData;
                });
                console.log(data);
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    url: "delete",
                    data: {rows: data},
                    success: function (data, status, xhr) {

                        if (data.length > 0) {
                            var rows = new Array();
                            $.each(data, function (index, saved) {
                                if (saved == 1) {
                                    rows.push($("#jqx-grid").jqxGrid('getrowid', index));
                                }
                            });
                            commit = $("#jqx-grid").jqxGrid('deleterow', rows);
                        }
                    },
                    error: function () {
                        commit(false);
                    }
                });
            }
        }
    });
});

[StanislavParticipant]

Hello RusselRajitha,

Take a look at this example: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/bindingtoobservablearray.htm?light.

If this doesn’t suit your needs, can you please give us a little bit more information and a https://jsfiddle.net/ maybe(to accuratly reproduse your case).

Best Regards,
Stanislav

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

[RusselRajithaParticipant]

Thank you for your response. but i think you haven’t realized the issue. using this sample jqx-grid you can see example i used. And click here to open my js file. here i am using auto complete functionality. and those suggetions are comming from database. so there is no problem when updating an record already enterd. but if add new row there is an problem that suggestion list will disappear and edit mode will close. and then we need to click column and move on edit. this problem happen only when editing first time any column, after click add new row buton.

[Author]

Posts