Forum

July 10th, 2011
You must be logged in to post Login Register

Search Forums:


 






small bug in generating new id in postIt() of editGridRow()

UserPost

12:22
07/03/2011


OlegK

Germany

Member

posts 1210

Post edited 18:52 – 07/03/2011 by OlegK


Hello Tony,

in some seldom situation the postIt() of editGridRow() generate new row id with the following line of code

if(!ret[2]) { ret[2] = (parseInt($t.p.records,10)+1)+""; }

which is not quite correct.

1) $t.p.records is already a Number and one don't need to make parseInt($t.p.records,10)

2) if one add the row after deliting some previously added lines with the small id number, one can receive id duplication in case of the usage the code ret[2] = $t.p.records+"";

So I suggest to fix in so way

if(!ret[2]) {
    // generate new id
    var new_id = $t.p.records + 1;
    // If one remove some rows before insterting the row it can be that
    // id = $t.p.records + 1 is already in use. So we have to find
    // another unused id
    while ($("#"+new_id).length !== 0) { // verify that the id already exist
        new_id++;
    }
    ret[2] = String(new_id);
}

By the way the current version of the form editing not supports local editing. I made the example which shows how one can do use local editing with respecrt of form editing. Based on the example I will try to write the corresponding suggestiond to change grid.formedit.js to allow local editing. I will post the corresponding new code of the postIt() in the next time in "Feature Requests".

Best regards
Oleg

11:22
12/03/2011


tony

Sofia, Bulgaria

Moderator

posts 7383

Oleg,

Yes this is true and is a problem.

This one is good solution, but I think a better way is to use a random function to generate the id – something like in the new filter module.

I will use this approach.


Tony

For professional UI suites for PHP, ASP.NET and ASP.NET MVC visit us at our commercial products site – trirand.net – by the very same guys that created jqGrid.

11:49
12/03/2011


OlegK

Germany

Member

posts 1210

Post edited 11:59 – 12/03/2011 by OlegK
Post edited 12:00 – 12/03/2011 by OlegK


Hello Tony,

the usage of randId I like also more, but to be consequent one can also use the same function in grid.base.js, for example here. One can have small compatibility problem if somebody play on the interger sequential id numbers if he don't define any id (or define in the wrong way) in the input data.

One thing I would do: one should verify that the id genrated with respect of Math.random are not yet used. All standard random function are not so random, only random function from the cryptographical modules can produce good rendom numbers. See this answer for example. A simple verification like $("#"+new_id).length !== 0 will be enough.

I recommed you additionally use Math.floor(Math.random()*idMax+1) instead of Math.floor(Math.random()*idMax) which you currently use. It will no more produce id=0 which can be not the best in different JavaScript compares. The idMax value can be jqGrid parameter initialized to 10000.

What do you think about including supports for local editing in the form editing module? Do you want to implement it youself or I can write an suggestion (till now I didn't find time to do this, but next week I could do this).

Best regards
Oleg

12:24
12/03/2011


tony

Sofia, Bulgaria

Moderator

posts 7383

Well,

Yes there is a possibility to have duplicates, but I think I found the uniquie approach

randId : function ()

{

return String(new Date().getTime());

}

Confused

I will look right now deeper into your code for the local form editing.

Regards

For professional UI suites for PHP, ASP.NET and ASP.NET MVC visit us at our commercial products site – trirand.net – by the very same guys that created jqGrid.

10:24
13/03/2011


tony

Sofia, Bulgaria

Moderator

posts 7383

Hello Oleg,

Sorry, but I can not find the link you provided for the local form editing.

Could you please post it again?

Thank you.

Tony

For professional UI suites for PHP, ASP.NET and ASP.NET MVC visit us at our commercial products site – trirand.net – by the very same guys that created jqGrid.

11:58
13/03/2011


OlegK

Germany

Member

posts 1210

Post edited 12:00 – 13/03/2011 by OlegK
Post edited 12:00 – 13/03/2011 by OlegK
Post edited 12:02 – 13/03/2011 by OlegK
Post edited 12:10 – 13/03/2011 by OlegK
Post edited 12:21 – 13/03/2011 by OlegK


No problem Tony!

It is http://www.ok-soft-gmbh.com/jq…..diting.htm. It is in the last paragraph of my first post in the tread.

Best regards
Oleg

P.S. I tried meny time to post the whole code also here. It is terrible!

var lastSel, mydata = [
        {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",
         closed:true, ship_via:"TN",total:"210.00"},
        {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",
         closed:false,ship_via:"FE",total:"320.00"},
        {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",
         closed:false,ship_via:"FE",total:"430.00"},
        {id:"4",invdate:"2007-10-04",name:"test4",note:"note4",amount:"200.00",tax:"10.00",
         closed:true,ship_via:"TN",total:"210.00"},
        {id:"5",invdate:"2007-10-31",name:"test5",note:"note5",amount:"300.00",tax:"20.00",
         closed:false,ship_via:"FE",total:"320.00"},
        {id:"6",invdate:"2007-09-06",name:"test6",note:"note6",amount:"400.00",tax:"30.00",
         closed:false,ship_via:"FE",total:"430.00"},
        {id:"7",invdate:"2007-10-04",name:"test7",note:"note7",amount:"200.00",tax:"10.00",
         closed:true ,ship_via:"TN",total:"210.00"},
        {id:"8",invdate:"2007-10-03",name:"test8",note:"note8",amount:"300.00",tax:"20.00",
         closed:false,ship_via:"FE",total:"320.00"},
        {id:"9",invdate:"2007-09-01",name:"test9",note:"note9",amount:"400.00",tax:"30.00",
         closed:false,ship_via:"TN",total:"430.00"},
        {id:"10",invdate:"2007-09-08",name:"test10",note:"note10",amount:"500.00",
         tax:"30.00",closed:true ,ship_via:"TN",total:"530.00"},
        {id:"11",invdate:"2007-09-08",name:"test11",note:"note11",amount:"500.00",
         tax:"30.00",closed:false,ship_via:"FE",total:"530.00"},
        {id:"12",invdate:"2007-09-10",name:"test12",note:"note12",amount:"500.00",
         tax:"30.00",closed:false,ship_via:"FE",total:"530.00"}
    ],
    grid = $("#list"),
    onclickSubmitLocal = function(options,postdata) {
        var grid_p = grid[0].p,
            idname = grid_p.prmNames.id,
            grid_id = grid[0].id,
            id_in_postdata = grid_id+"_id",
            rowid = postdata[id_in_postdata],
            addMode = rowid === "_empty",
            oldValueOfSortColumn;

        // postdata has row id property with another name. we fix it:
        if (addMode) {
            // generate new id
            var new_id = grid_p.records + 1;
            while ($("#"+new_id).length !== 0) {
                new_id++;
            }
            postdata[idname] = String(new_id);
        } else if (typeof(postdata[idname]) === "undefined") {
            // set id property only if the property not exist
            postdata[idname] = rowid;
        }
        delete postdata[id_in_postdata];

        // prepare postdata for tree grid
        if(grid_p.treeGrid === true) {
            if(addMode) {
                var tr_par_id = grid_p.treeGridModel === 'adjacency' ? grid_p.treeReader.parent_id_field : 'parent_id';
                postdata[tr_par_id] = grid_p.selrow;
            }

            $.each(grid_p.treeReader, function (i){
                if(postdata.hasOwnProperty(this)) {
                    delete postdata[this];
                }
            });
        }

        // decode data if there encoded with autoencode
        if(grid_p.autoencode) {
            $.each(postdata,function(n,v){
                postdata[n] = $.jgrid.htmlDecode(v); // TODO: some columns could be skipped
            });
        }

        // save old value from the sorted column
        oldValueOfSortColumn = grid_p.sortname === "" ? undefined: grid.jqGrid('getCell',rowid,grid_p.sortname);

        // save the data in the grid
        if (grid_p.treeGrid === true) {
            if (addMode) {
                grid.jqGrid("addChildNode",rowid,grid_p.selrow,postdata);
            } else {
                grid.jqGrid("setTreeRow",rowid,postdata);
            }
        } else {
            if (addMode) {
                grid.jqGrid("addRowData",rowid,postdata,options.addedrow);
            } else {
                grid.jqGrid("setRowData",rowid,postdata);
            }
        }

        if ((addMode && options.closeAfterAdd) || (!addMode && options.closeAfterEdit)) {
            // close the edit/add dialog
            $.jgrid.hideModal("#editmod"+grid_id,
                                {gb:"#gbox_"+grid_id,jqm:options.jqModal,onClose:options.onClose});
        }

        if (postdata[grid_p.sortname] !== oldValueOfSortColumn) {
            // if the data are changed in the column by which are currently sorted
            // we need resort the grid
            setTimeout(function() {
                grid.trigger("reloadGrid", [{current:true}]);
            },100);
        }

        // !!! the most important step: skip ajax request to the server
        this.processing = true;
        return {};
    },
    editSettings = {
        recreateForm:true,
        jqModal:false,
        reloadAfterSubmit:false,
        closeOnEscape:true,
        closeAfterEdit:true,
        onclickSubmit:onclickSubmitLocal
    },
    addSettings = {
        recreateForm:true,
        jqModal:false,
        reloadAfterSubmit:false,
        closeOnEscape:true,
        closeAfterAdd:true,
        onclickSubmit:onclickSubmitLocal
    },
    delSettings = {
        // because I use "local" data I don't want to send the changes to the server
        // so I use "processing:true" setting and delete the row manually in onclickSubmit
        onclickSubmit: function(options, rowid) {
            var grid_id = grid[0].id,
                grid_p = grid[0].p,
                newPage = grid[0].p.page;

            // delete the row
            grid.delRowData(rowid);
            $.jgrid.hideModal("#delmod"+grid_id,
                                {gb:"#gbox_"+grid_id,jqm:options.jqModal,onClose:options.onClose});

            if (grid_p.lastpage > 1) {// on the multipage grid reload the grid
                if (grid_p.reccount === 0 && newPage === grid_p.lastpage) {
                    // if after deliting there are no rows on the current page
                    // which is the last page of the grid
                    newPage–; // go to the previous page
                }
                // reload grid to make the row from the next page visable.
                grid.trigger("reloadGrid", [{page:newPage}]);
            }

            return true;
        },
        processing:true
    },
    initDateEdit = function(elem) {
        setTimeout(function() {
            $(elem).datepicker({
                dateFormat: 'dd-M-yy',
                autoSize: true,
                showOn: 'button', // it dosn't work in searching dialog
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                showWeek: true
            });
            //$(elem).focus();
        },100);
    },
    initDateSearch = function(elem) {
        setTimeout(function() {
            $(elem).datepicker({
                dateFormat: 'dd-M-yy',
                autoSize: true,
                //showOn: 'button', // it dosn't work in searching dialog
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                showWeek: true
            });
            //$(elem).focus();
        },100);
    };

grid.jqGrid({
    datatype:'local',
    data: mydata,
    colNames:['Inv No','Date','Client','Amount','Tax','Total','Closed','Shipped via','Notes'],
    colModel:[
        {name:'id',index:'id',width:70,align:'center',sorttype: 'int',searchoptions:{sopt:['eq','ne']}},
        {name:'invdate',index:'invdate',width:80, align:'center', sorttype:'date',
            formatter:'date', datefmt: 'd-M-Y',
            formatoptions: {newformat:'d-M-Y'}, editable:true, 
            editoptions: {dataInit:initDateEdit},
            searchoptions: {dataInit:initDateSearch}},
        {name:'name',index:'name',editable: true, width:70, editrules:{required:true}},
        {name:'amount',index:'amount',width:100,formatter:'number',editable:true,align:'right'},
        {name:'tax',index:'tax',width:70, formatter:'number', editable: true, align:'right'},
        {name:'total',index:'total',width:120, formatter:'number', editable: true, align:'right'},
        {name:'closed',index:'closed',width:110,align:'center',editable: true,
            formatter: 'checkbox',
            edittype:'checkbox',editoptions:{value:'Yes:No',defaultValue:'Yes'},
            stype: 'select',
            searchoptions: { sopt:['eq','ne'], value:':All;true:Yes;false:No' }},
        {name:'ship_via',index:'ship_via',width:120,align:'center',editable: true, formatter:'select',
            edittype:'select',editoptions:value:'FE:FedEx;TN:TNT;IN:Intim',defaultValue:'Intime'},
            stype:'select', searchoptions:{value:':All;FE:FedEx;TN:TNT;IN:Intim'}},
        {name:'note',index:'note',width:100,sortable:false,editable:true,edittype:'textarea'}
    ],
    rowNum:10,
    rowList:[5,10,20],
    pager: '#pager',
    gridview:true,
    rownumbers:true,
    autoencode:true,
    ignoreCase:true,
    sortname: 'invdate',
    viewrecords: true,
    sortorder: 'desc',
    caption:'How to implement local form editing',
    height: '100%',
    editurl: 'clientArray',
    ondblClickRow: function(rowid, ri, ci) {
        var p = grid[0].p;
        if (p.selrow !== rowid) {
            // prevent the row from be unselected on double-click
            // the implementation is for "multiselect:false" which we use,
            // but one can easy modify the code for "multiselect:true"
            grid.jqGrid('setSelection', rowid);
        }
        grid.jqGrid('editGridRow', rowid, editSettings);
    },
    onSelectRow: function(id) {
        if (id && id !== lastSel) {
            // cancel editing of the previous selected row if it was in editing state.
            // jqGrid hold intern savedRow array inside of jqGrid object,
            // so it is safe to call restoreRow method with any id parameter
            // if jqGrid not in editing state
            if (typeof lastSel !== "undefined") {
                grid.jqGrid('restoreRow',lastSel);
            }
            lastSel = id;
        }
    }
}).jqGrid('navGrid','#pager',{},editSettings,addSettings,delSettings,
            {multipleSearch:true,overlay:false,
            onClose:function(form){
                // if we close the search dialog during the datapicker are opened
                // the datepicker will stay opened. To fix this we have to hide
                // the div used by datepicker
                $("div#ui-datepicker-div.ui-datepicker").hide();
            }});

12:20
13/03/2011


tony

Sofia, Bulgaria

Moderator

posts 7383

Oleg,

Sorry, I think it was in separate post

Tony

For professional UI suites for PHP, ASP.NET and ASP.NET MVC visit us at our commercial products site – trirand.net – by the very same guys that created jqGrid.

12:42
13/03/2011


OlegK

Germany

Member

posts 1210

You are welcome!

The only problem is to post code in the forum. Currently I have to make replacement of all blanks to &nbsp; and append every line with <br /> to make code looks OK in the forum. I have to do the changes in another text editor and post the code in the HTML view. Probably you know some tricks.

Oleg


About the jQuery Grid Plugin – jqGrid forum

Most Users Ever Online:

215


Currently Online:

28 Guests

Forum Stats:

Groups: 1

Forums: 7

Topics: 10276

Posts: 30365

Membership:

There are 11039 Members

There have been 448 Guests

There is 1 Admin

There are 2 Moderators

Top Posters:

OlegK – 1210

markw65 – 179

kobruleht – 144

phicarre – 132

YamilBracho – 124

Renso – 118

Administrators: admin (60 Posts)

Moderators: tony (7383 Posts), Rumen[Trirand] (81 Posts)




Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information