jQuery UI Widgets Forums Grid Undefined value cell edit

This topic contains 4 replies, has 2 voices, and was last updated by  Hristo 1 month, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Undefined value cell edit #106556

    andreopmaria
    Participant

    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”

    Undefined value cell edit #106582

    Hristo
    Participant

    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

    Undefined value cell edit #106622

    andreopmaria
    Participant

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

    Undefined value cell edit #107508

    andreopmaria
    Participant

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

    Undefined value cell edit #107557

    Hristo
    Participant

    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

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

You must be logged in to reply to this topic.