Undefined value cell edit

[andreopmariaParticipant]

Hi,

    var type = "POST";
    var datatype = "json";
    var url = _ibox_RootUrl + 'Admin/Handlers/Countries.ashx?tbl=Career_Countries';
        var datafields = [
        { name: 'id'},
        { name: 'can_country_id', type: 'number', attributes: 'required,unique'},
        { name: 'name_gr', type: 'string'},
        { name: 'name_en', type: 'string'},
        { name: 'name_bg', type: 'string'},
        { name: 'name_tr', type: 'string'},
        { name: 'name_ro', type: 'string'},
        { name: 'hasjobs', type: 'bool'}
    ];
                 
    $(document).ready(function () {
        var theme = 'bootstrap';
        var grid = $("#jqxgrid");

        var getAdapter = function () {
            var source =
            {
                type: "POST",
                datatype: "json",
                datafields: datafields,
                id: 'id',  
                url: url,
                root: 'Rows',
                sortcolumn: 'can_country_id',
                sortdirection: 'asc',
                beforeprocessing: function(data)
                {
                    source.totalrecords = data.TotalRows; 
                },
                pager: function (pagenum, pagesize, oldpagenum) {
                    grid.jqxGrid('updatebounddata', 'pager');
                },
                sort: function(event)
			    {
				    grid.jqxGrid('updatebounddata', 'sort');
                },
                addrow: function (rowid, rowdata, position, commit) { 
                    datafields = datafieldsFormat(rowdata, datafields);
                    $.ajax({
                        type: type,
                        datatype: datatype,
                        url: url + '&action=add',
                        data: JSON.stringify(datafieldsFormat(rowdata, datafields)),
                        success: function (data) {
                            if (!data) {
                                commit(true); 
                            } else {
                                console.log(data);
                                commit(false);
                            }
                        }
                    });
                },
                updaterow: function (rowid, rowdata, commit) {
                    $.ajax({
                        type: type,
                        datatype: datatype,
                        url: url + '&action=update',
                        data: JSON.stringify(datafieldsFormat(rowdata, datafields)),
                        success: function (data) {
                            if (!data) {
                                commit(true); 

                                //grid.jqxGrid('updatebounddata');
                            } else {
                                $('#errors').html(data);
                                commit(false);
                            }
                        }
                    });
                },
                deleterow: function (rowid, commit) {
                    $.ajax({
                        type: type,
                        datatype: datatype,
                        url: url + '&action=delete',
                        data: JSON.stringify(rowid),
                        success: function (data) {
                            if (!data) {
                                commit(true); 
                                grid.jqxGrid('clearselection');
                                grid.jqxGrid('updatebounddata');
                            } else {
                                console.log(data);
                                commit(false);
                            }
                        }
                    });
                },
            };
             var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) {},
                loadError: function (xhr, status, error) { }      
            });

            return dataAdapter;
        }

        // validation function
        var validateFunc = function (datafield, value) {
            switch (datafield) {
                case "can_country_id":
                    if (Math.floor(value) != value && !$.isNumeric(value)) {
                        return { message: "Entered value should be a positive number", result: false };
                    }
                    if (value == "")
                        return { message: "Required field", result: false };
                    return true;
                    break;
            }
            return true;
        };

        grid.jqxGrid(
        {
            width: '100%',
            autoheight: true,
            altrows: true,
            virtualmode: true,
            theme: theme,
            source: getAdapter(),   
            editable: true,
            editmode: 'click',
            selectionmode: 'checkbox',
            sortable: true,
            filterable: true,
            pageable: true,
            pagermode: 'simple',
            pagesize: 10,
            showeverpresentrow: true,
            everpresentrowposition: "top",
            everpresentrowactions: "add",
            everpresentrowactionsmode: "columns",
            rendergridrows: function (obj) {
                console.log(obj)
		        return obj.data;
            },
            columns: [
                {
                    text: 'Country ID', datafield: 'can_country_id', columntype: 'textbox', filtertype: 'input', width: '6%',
                    validateEverPresentRowWidgetValue: validateFunc,
                    validation: function (cell, value) {
                        if (Math.floor(value) != value && !$.isNumeric(value)) {
                            return { result: false, message: "Entered value should be a positive number" };
                        }
                        if (value == "") {
                            return { result: false, message: "Required field" };
                        }
                        return true;
                    },
                },
                { text: 'Name (GR)', datafield: 'name_gr', columntype: 'textbox', filtertype: 'input', width: '17%' },
                { text: 'Name (EN)', datafield: 'name_en', columntype: 'textbox', filtertype: 'input', width: '17%' },
                { text: 'Name (BG)', datafield: 'name_bg', columntype: 'textbox', filtertype: 'input', width: '17%' },
                { text: 'Name (TR)', datafield: 'name_tr', columntype: 'textbox', filtertype: 'input', width: '17%' },
                { text: 'Name (RO)', datafield: 'name_ro', columntype: 'textbox', filtertype: 'input', width: '17%' },
                {
                    text: 'Has jobs', datafield: 'hasjobs', columntype: 'checkbox', width: '4%',
                    createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
                        var checkbox = $('<div style="position: absolute; top: 50%; left: 50%; margin-top: -9px; margin-left: -12px; overflow: visible; cursor: auto;" id="jqxcheckbox"</div>').appendTo(htmlElement);
                        checkbox.jqxCheckBox();
               
                        return checkbox;
                    },
                    getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
                        var value = htmlElement.val();
                        return value;
                    },
                },
                { text: '', datafield: 'addButtonColumn', width: '3%', sortable: false },
            ]
        });

        $("#deleterowbutton").jqxButton();
        $("#deleterowbutton").click(function (event) {
            var rowIndexes = grid.jqxGrid('getselectedrowindexes');
            var rowIds = [];
            for (var i = 0; i < rowIndexes.length; i++) {
                var currentId = grid.jqxGrid('getrowid', rowIndexes[i]);
                rowIds.push({ name: "id", val: currentId });
            };
            grid.jqxGrid('deleterow', rowIds);
        });
    });

    function datafieldsFormat(rowdata, datafields) {
        $.each(rowdata, function (name, value) {
            $.each(datafields, function (key, val) {
                if (val.name == name) {
                    datafields[key]['val'] = value;
                    datafields[key]['type'] = val.type;  
                    datafields[key]['attributes'] = val.attributes;    
                }
            });
        });

        return datafields;
    } 

On page 1 everything works fine, but when i go to page 2 and try to edit column “can_country_id” which is the sortcolumn: “Cannot read property ‘value’ of undefined jqxgrid.sort.js”

[HristoParticipant]

Hello andreopmaria,

There is no such argument for the “updatebounddata” method as a “pager“.
More details you could find in the API Documentation page:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm?search=grid
For this purpose I would like to suggest you look at this tutorial:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/phpintegration/php-server-side-grid-paging.htm?search=
If you specify the used technology I could provide you closer to your case tutorial.

I saw in your example you try to use the “datafields“ with “attributes” option which we do not support.
You could find this and more information on this page:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm?search=data

I think you maybe recognize as danger zone that you try to edit the sorted column.
After the editing, you will have a new order of the records.
Please, check on the server-side is everything is ok.
When you use the “virtualmode” option, the displayed data depends only on what your code returns within the “rendergridrows” callback.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[andreopmariaParticipant]

Thank you Hristo for your advice,
I added this sortmode:’many’, and it works fine now

[andreopmariaParticipant]

Also, I want to get rowid value from the updaterow callback but it is null

[HristoParticipant]

Hello andreopmaria,

Could you clarify it?
I tested this example and it seems to work fine.
It is not a complete example but it seems the updaterow callback provides the id of the updated row.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts