JqGrid - dragging a row to sort spins cell width

Question

My problem: . When I drag a row to jqGrid and complete the user reload function, the grid cells, previously all the different widths set when defining the grid, change to all of them will be the same width. This happens in Webkit browsers, but not in Firefox.

Code: I drag and drop for sorting allowed on the grid:

$mygrid.jqGrid(
    'sortableRows', {
        update: function(e, ui) {
            sort_grid(e, ui);
        }
    }
);

As you can see, I have a sorting function, which is called the complete the drag, sort_grid. There he is:

function sort_grid(e, ui) {
    var current_grid = $(ui.item[0]).closest('table').attr('id');
    var $current_row, moved_id, next_id, next_priority;
    var $moved_row = $('#' + current_grid + ' tr');
    var cnt = 0;

    this_id = ui.item[0].id;
    $moved_row.each(function () {
        if ($(this).attr('id') == this_id) {
            $current_row = $moved_row.eq(cnt);
            moved_id = $current_row.attr("id");
            next_id = $current_row.next().attr("id");
            next_priority = $current_row.next().children("td:first").attr("title");
        }
        cnt++;
    });

    if ( typeof moved_id !== 'undefined' ) {
        if ( next_priority == 'undefined' ) {
            next_priority = '999';
        }

        $.ajax({
            url:my_url,
            type:"POST",
            data:"moved_id=" + moved_id + "&next_id=" + next_id + "&next_priority=" + next_priority,
            success: function(data) {

                $('.grid').setGridParam({loadonce:false, datatype:'json'}); // force grid refresh from server
                $('#' + current_grid).trigger("reloadGrid");
                $('.grid').setGridParam({loadonce:true}); // reset to use local values

            }
        })
    }
}

As soon as I click on this resettable trigger $('#' + current_grid).trigger("reloadGrid");and reboot, the grid now has the wrong width in the grid cells (they go from different widths to the same widths).

, , jqGrid:

colModel:[
    {name:'one', index:'one', sortable:true, width:45},
    {name:'two', index:'two', sortable:true, width:180},
]

reset ( , , ). , , , - ?

$('.grid').setGridParam({
    colModel:[
        {name:'one', index:'one', sortable:true, width:45},
        {name:'two', index:'two', sortable:true, width:180},
    ]
});

---

, colModels , . Weirder, javascript, . .

---

jqGrid " Man" (Oleg) ... lol.

Answer 1

Chrome. http://jsfiddle.net/gZSra/. , .

jqGrid , , . emptyRows jqGrid.

emptyRows = function (scroll, locdata) {
    var firstrow;
    if (this.p.deepempty) {
        $(this.rows).slice(1).remove();
    } else {
        firstrow = this.rows.length > 0 ? this.rows[0] : null;
        $(this.firstChild).empty().append(firstrow);  // bug "activation" line 
    }
    if (scroll && this.p.scroll) {
        $(this.grid.bDiv.firstChild).css({height: "auto"});
        $(this.grid.bDiv.firstChild.firstChild).css({height: 0, display: "none"});
        if (this.grid.bDiv.scrollTop !== 0) {
            this.grid.bDiv.scrollTop = 0;
        }
    }
    if(locdata === true && this.p.treeGrid) {
        this.p.data = []; this.p._index = {};
    }
},

* jqGrid-4.4.4 1070 jqGrid.src.js

firstrow. - jsFiddle -

<td role="gridcell" style="height:0px;width:60px;"></td>

, , Chrome Webkit.

FIX

else

$(this.firstChild).find('tr:not(:first)').remove();

, , .

jsFiddle: http://jsfiddle.net/HJ3Q3/

Chrome, FF, IE 8 9.

, jqGrid.

Answer 2

.trigger('reloadGrid'); 

sortablerows.

( )

,

jQuery().ready(ConfigureGrid);  

function ConfigureGrid(){
    jQuery("#grdCategory").jqGrid({
        url: '/controller/action',
        datatype: "xml",
        colNames: ['Order', 'Name', 'Page Title', 'Is Active', 'Action'
        ],
        colModel: [
         { name: 'col1', index: 'col1', width: 50, sortable: true, sorttype: 'int' }
        , { name: 'col2', index: 'col2', width: 150, sortable: true }
],
        rowNum: 10,
        rowList: [10, 20, 30],
    }); 

    $("#list1").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false, search: true });
    $("#list1").jqGrid('sortableRows', { update: function (event, ui) { updateOrder() } });
}

 function loadGrid() {
            $('#grdCategory').jqGrid('GridUnload');
            ConfigureGrid();
        }

loadGrid() ajax

Answer 3

jQgrid

   width: 'auto',

,

 jQuery('.grid').trigger('reloadGrid');

Answer 4

PokatilovArt : jqGrid - .

Chrome.

jqGrid:

    deepempty : true

jqGrid wiki, .

​​ true, . jQuery . , , , . ​​ true, / .