Guriddo » Topic: jqgrid/jquery ui, dragging column to scroll table?

jqgrid/jquery ui, dragging column to scroll table?

Guriddo
jqgrid/jquery ui, dragging column to scroll table?

This topic has 7 replies, 3 voices, and was last updated 6 years, 1 month ago by ubezper.

Creator

Topic
November 15, 2016 at 7:26 pm #125665

21thermostat
Participant

I’m using jQuery UI and jqGrid. I want to user drag the column to re-order the columns. But the container of column header is not scroll when the dragging header is over the border. Also the table horizontal bar doesn’t scroll.

http://jsbin.com/nukureyatu/edit?html,output

Thanks.
Creator

Topic

Viewing 7 replies - 1 through 7 (of 7 total)

Author

Replies

November 16, 2016 at 1:08 pm #125667

guriddo.support

Participant

Hello,

This is by design. The problem is that the grid header is explicitly set with overflow:hdden .

One possible solution is to use start and stop function of sortable method in order to set overflow auto oh header div when start dragging and hidden when stop – but in this case we need to have additional code to scroll the body data too. We will try to prepare a example, but I do not promise for the success.

Kind Regards,

Will

Guriddo Support Team

November 18, 2016 at 12:32 am #125671

21thermostat

Participant

It’s perfect if you can offer an example. Thanks.

November 18, 2016 at 1:45 pm #125673

guriddo.support

Participant

Hello,

Which version of Guriddo jqGrid JS is used?

Regards,
Will

Guriddo Support Team

November 18, 2016 at 9:09 pm #125674

21thermostat

Participant

I am using v5.1.0

 * @license Guriddo jqGrid JS - v5.1.0 - 2016-03-15


Thanks.

* @license Guriddo jqGrid JS - v5.1.0 - 2016-03-15

Thanks.

December 1, 2016 at 5:34 pm #125710

21thermostat

Participant

Is there any progress?

Thanks.

This reply was modified 8 years, 4 months ago by 21thermostat.

December 5, 2016 at 10:52 am #125715

guriddo.support

Participant

Hello,

Until now without success. Below is the code, which maybe will give you a idea (it is not working)

&nbsp;
            var grid = $("#jqGrid").jqGrid({
                url: 'data.json',
                datatype: "json",
                colModel: [
					{ label: 'Category Name', name: 'CategoryName', width: 100 },
					{ label: 'Product Name', name: 'ProductName', width: 110 },
					{ label: 'Country', name: 'Country', width: 200 },
					{ label: 'Price', name: 'Price', width: 180, sorttype: 'integer' },
					// sorttype is used only if the data is loaded locally or loadonce is set to true
					{ label: 'Quantity', name: 'Quantity', width: 180, sorttype: 'number' }
                ],
				loadonce: true,
                width: 600,
                height: 200,
                rowNum: 150,
				shrinkToFit : false,
                sortable: { options: {
						//scrollSensitivity : 5,
						forcePlaceholderSize  : true,
						forceHelperSize: true,
						start : function( e, ui) {
							var sc = $(".ui-jqgrid-hdiv ");
							sc.css('overflow-x','auto');
						},
						stop : function( ev, ui) {
							var sc = $(".ui-jqgrid-hdiv ").scrollLeft();
							//console.log(sc);
							grid[0].grid.bDiv.scrollLeft = sc;
							//console.log(grid[0].grid.bDiv.scrollLeft);
							$(".ui-jqgrid-hdiv ").css('overflow-x','hidden');
						}
					} },
                pager: "#jqGridPager"
            });

var grid = $("#jqGrid").jqGrid({

url: 'data.json',

datatype: "json",

colModel: [

{ label: 'Category Name', name: 'CategoryName', width: 100 },

{ label: 'Product Name', name: 'ProductName', width: 110 },

{ label: 'Country', name: 'Country', width: 200 },

{ label: 'Price', name: 'Price', width: 180, sorttype: 'integer' },

// sorttype is used only if the data is loaded locally or loadonce is set to true

{ label: 'Quantity', name: 'Quantity', width: 180, sorttype: 'number' }

loadonce: true,

width: 600,

height: 200,

rowNum: 150,

shrinkToFit : false,

sortable: { options: {

//scrollSensitivity : 5,

forcePlaceholderSize : true,

forceHelperSize: true,

start : function( e, ui) {

var sc = $(".ui-jqgrid-hdiv ");

sc.css('overflow-x','auto');

stop : function( ev, ui) {

var sc = $(".ui-jqgrid-hdiv ").scrollLeft();

//console.log(sc);

grid[0].grid.bDiv.scrollLeft = sc;

//console.log(grid[0].grid.bDiv.scrollLeft);

$(".ui-jqgrid-hdiv ").css('overflow-x','hidden');

}

} },

pager: "#jqGridPager"

});

Kind Regards,
Will

This reply was modified 8 years, 4 months ago by guriddo.support.

Guriddo Support Team

March 18, 2019 at 10:18 pm #127147

ubezper

Participant

Hello

Author

Replies

Viewing 7 replies - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Registered Users: 12,254
Forums: 7
Topics: 10,950
Replies: 23,150
Topic Tags: 324
Empty Topic Tags: 9

43 Users Online

Users: 26 Guests, 17 Bots

Stay connected with us in your favorite flavor!

jqgrid/jquery ui, dragging column to scroll table?

Search Forum

Recent Replies

Forum Statistics

UserOnline