jQWidgets Forums

Tagged: dataadapter, jqwidgets

This topic contains 4 replies, has 2 voices, and was last updated by bigbozz 10 years ago.

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

Author

jqxDataAdapter paging Posts

June 9, 2015 at 9:27 am jqxDataAdapter paging #72209

bigbozz

Participant

Hello,

it’s possible have a jqxDataAdapter with paging ?
if so, how ?

June 9, 2015 at 9:37 am jqxDataAdapter paging #72210

Peter Stoev

Keymaster

Hi bigbozz,

jqxDataAdapter is a plugin which loads data and that is its only purpose. Widgets support Paging – See jqxGrid, jqxDataTable, jqxTreeGrid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 9, 2015 at 7:16 pm jqxDataAdapter paging #72233

bigbozz

Participant

Yes, but reading this, I have gathered that could display a “custom widget” :
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdataadapter/index.htm#demos/jqxdataadapter/bindingtojson.htm

I already DataAdapter for jqxGrid, unwanted, jqxDataTable, jqxTreeGrid, but I have a problem I can not solve alone.

I try to have a picture in a list jqxDataTable, but the images following vertically. Off I want it to appear horizontally with a return to the line when you there is more space on the right.

Here is the code


<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="js/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="js/jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
        	var DataTablefile = {
        		datatype:"json",
        		url:"files.txt"
        	};
        	var dataAdapterfile = new $.jqx.dataAdapter(DataTablefile);
        	$("#file").jqxDataTable({
        		width:"1000",
        		height:"500",
        		enableHover: false,
        		selectionMode: "singleRow",
				pageable: true,
        		source: dataAdapterfile,
        		columns:[
        		{
        			text:"Fichiers",
        			datafield:"media",
        			cellsRenderer: function (row, column, value, rowData) {
        				var container = "<div>";
        				container += '<div style="float: left; width: 200px; overflow: hidden; white-space: nowrap; height: 200px;">';
        				container += '<div style="margin: 5px; margin-bottom: 3px;">';
        				container += '<img width="160" height="120" style="display:block;" src="media/' + rowData.label + '"/>';
        				container += "</div>";
        				container += '<div style="text-align:center;">' + rowData.label + '</div>';
        				container += "</div>";
        				container += "</div>";
        				return container;
        			}
        		}
        		]
        	});
        });
    </script>
</head>
<body class='default'>
    <div id="file"></div>
</body>
</html>

JSON Data

{"media":[{"label":"image1.jpg","size":104003},{"label":"image2.jpg","size":41114}]}

June 10, 2015 at 5:03 am jqxDataAdapter paging #72235

Peter Stoev

Keymaster

Hi bigbozz,

If you want horizontal display of your images then your “container” should have “float: left”, too. DIVs by default are in new lines.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 10, 2015 at 7:34 pm jqxDataAdapter paging #72289

bigbozz

Participant

the container is already in “float: left”. I conducted another test of assurrer for me that I do not say bullshit and I make any changes to the previous code :

        			cellsRenderer: function (row, column, value, rowData) {
        				var container = '<div style="float: left; width: 200px; overflow: hidden; white-space: nowrap; height: 200px;">';
        				container += '<div style="margin: 5px; margin-bottom: 3px;">';
        				container += '<img width="160" height="120" style="display:block;" src="media/' + rowData.label + '"/>';
        				container += "</div>";
        				container += '<div style="text-align:center;">' + rowData.label + '</div>';
        				container += "</div>";
        				return container;
        			}

But my problem is still there. when one analyzes the HTML code in the jqxDataTable always built a table and saw that my table has only one column appears necessarily the images one below the other.

With jqxGrid and jqxTreeGrid the problem is the same.

JqWidget is a great project with a lot of possible choices. but the problem I pose no solution, at least I think.
Be with a little JqxPanel with a header, a paging and its renderer would be perfect to show much of anything as that would have….Maybe for next update

Thank you anyway for your quick response.

Author

Posts

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

You must be logged in to reply to this topic.