jQuery UI Widgets › Forums › Grid › Grid Control scrollbar jump to top
This topic contains 4 replies, has 3 voices, and was last updated by Terry Foster 12 years, 1 month ago.
-
Author
-
Hello,
I have a grid that is being populated using knowkout observable collection. It has two columns first one is just a checkbox and second one is plan string. When scroll to halfway, and then checking or un-checking check box causes scroll bar to jump to the top. It doesn’t remain on the same position where I last unchecked the box.Is there a way to fix this issue? Please see for code.
initializeTabs = function () {
var ProjectModel = function () {
this.items = projects;
};
var model = new ProjectModel();
$(“#gridProjects”).jqxGrid({
height: 200,
width: 500,
altrows: true,
sortable: true,
filterable: true,
editable: true,
columnsresize: true,
source: new $.jqx.dataAdapter({
localdata: model.items,
datatype: “observablearray”,
sortcolumn: ‘priority’,
sortdirection: ‘desc’,
datafields: [
{ name: ‘id’, type: ‘number’ },
{ name: ‘name’, type: ‘string’ },
{ name: ‘priority’, type: ‘number’ },
{ name: ‘included’, type: ‘bool’ }
]
}),
columns: [
{ text: ”, datafield: ‘included’, width: 33, columntype: ‘checkbox’, resizable: false, sortable: false },
{ text: ‘Name’, datafield: ‘name’, width: 200, editable: false },
{ text: ‘Priority’, datafield: ‘priority’, width: 70, editable: false }
]
});
ko.applyBindings(model);
},Hello Amit007,
We were not able to reproduce the reported issue using the latest version of jQWidgets (2.8). Please check out the following example based on the Knockout demo Grid and JSON data and share if you experience any issues with it:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This example shows how to populate jqxGrid with JSON data using jqxDataAdapter and Knockout. </title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../../scripts/json2.js"></script> <script type="text/javascript" src="../../scripts/knockout-2.2.1.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var url = "../sampledata/beverages.txt"; var GridModel = function () { this.items = ko.observableArray(); var me = this; $.ajax({ datatype: 'json', url: "../sampledata/beverages.txt" }).done(function (data) { var jsonData = $.parseJSON(data); me.items(jsonData); }); }; var model = new GridModel(); // prepare the data var source = { datatype: "observablearray", datafields: [ { name: 'name' }, { name: 'type' }, { name: 'calories', type: 'int' }, { name: 'totalfat' }, { name: 'protein' }, ], id: 'id', localdata: model.items }; var dataAdapter = new $.jqx.dataAdapter(source); $("#grid").jqxGrid( { width: 670, source: dataAdapter, theme: getDemoTheme(), altrows: true, sortable: true, filterable: true, editable: true, columnsresize: true, columns: [ { text: 'Name', width: 33, columntype: 'checkbox', datafield: 'name', resizable: false, sortable: false }, { text: 'Beverage Type', datafield: 'type', width: 250 }, { text: 'Calories', datafield: 'calories', width: 180 }, { text: 'Total Fat', datafield: 'totalfat', width: 120 }, { text: 'Protein', datafield: 'protein', minwidth: 120 } ] }); ko.applyBindings(model); }); </script></head><body class='default'> <div id='jqxWidget'> <div id="grid"> </div> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/How can I send you the sample app that shows the issue? The zip file is about 17 MB.
Can you add check box to your app that is check-able? By default all the check boxes need to be check, then scroll to halfway and uncheck one of the box. This will cause scrollbar to move up.
Thanks,
AmitWe have a little more information on this issue. To recap, we have a grid that displays “projects”, each of which has a checkbox to include it in a chart that we show in another part of the application, and a priority. Thus, three columns in our grid: Include (checkbox), Name, and Priority. When we first launch the application, we want the projects sorted by priority (highest priority at the top of the grid) – thus you see we specified ‘sortcolumn’ and ‘sortdirection’ in the data adapter. This all works as expected, until you start checking any of the check boxes. What seems to be happening is that when a check box is checked, the grid automatically resorts the grid by the priority column, thus making it jump back up to the top if you are scrolled down a ways. A similar thing happens if launch the application, then manually sort by the ‘Name’ column (taking the sort away from the ‘Priority’ column) and then check a checkbox – the sort automatically goes back to the ‘Priority’ column. If I remove the ‘sortcolumn’ and ‘sortdirection’ specification from the data adapter, none of this weirdness happens, but we would like to have the grid initially sorted by priority. Is there a different way to accomplish the initial sort, or will you be able to fix this issue?
Thanks,
Terry -
AuthorPosts
You must be logged in to reply to this topic.