Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Jamie Foster
725
Paging Header/Footer - Each Control on New Line (not side-by-side)
posted

Hey guys,

I've built a really simple page that contains a grid with Paging enabled.  However, the paging controls in the header and footer (E.g. Move First, Move Previous, Page #, etc) do NOT want to line up side-by-side.  Instead, they each appear one over the other, as in the attached screenshot.

Here is the code I'm using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title></title>

<link href="themes/metro/infragistics.theme.css" rel="stylesheet" type="text/css" />    

<link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />    

<script src="scripts/modernizr.js" type="text/javascript"></script>    

<!-- jQuery Core -->    

<script src="scripts/jquery.js" type="text/javascript"></script>    

<!-- jQuery UI -->    

<script src="scripts/jquery-ui.js" type="text/javascript"></script>    

<!-- jQuery Templates: http://api.jquery.com/category/plugins/templates/ -->    

<script src="scripts/jquery.tmpl.js" type="text/javascript"></script>   

<!-- Infragistics Combined Scripts -->    

<script src="scripts/infragistics.js" type="text/javascript"></script>

<script type="text/javascript">

var fieldsJson = [

                  { name: "PARTY_ID", xpath: "PARTY_ID", type: "number" },

                  { name: "DISPLAY_NAME", xpath: "DISPLAY_NAME", type: "string" },

                  { name: "COMPANY_NAME", xpath: "COMPANY_NAME", type: "string" },

                  { name: "FIRST_NAME", xpath: "FIRST_NAME", type: "string" },

                  { name: "LAST_NAME", xpath: "LAST_NAME", type: "string" } ]

var columnsJson = [

                  { headerText: "PARTY_ID", key: "PARTY_ID", dataType: "number", width: "500px" },

                  { headerText: "Display Name", key: "DISPLAY_NAME", dataType: "string" },

                  { headerText: "Company", key: "COMPANY_NAME", dataType: "string" },

                  { headerText: "First Name", key: "FIRST_NAME", dataType: "string" },

                  { headerText: "Last Name", key: "LAST_NAME", dataType: "string" } ]

var xmlString = '<?xml version="1.0"?><DocumentElement><GROWER><PARTY_ID>1004036</PARTY_ID> <DISPLAY_NAME>Bob Gonzalez</DISPLAY_NAME> <COMPANY_NAME>Gonzalez</COMPANY_NAME> <FIRST_NAME>Bob</FIRST_NAME> <LAST_NAME>Gonzalez</LAST_NAME> </GROWER> <GROWER> <PARTY_ID>1004038</PARTY_ID> <DISPLAY_NAME>Joe Gonzalez</DISPLAY_NAME> <COMPANY_NAME>Joe Gonzalez</COMPANY_NAME> <FIRST_NAME>Joe</FIRST_NAME> <LAST_NAME>Gonzalez</LAST_NAME> </GROWER> <GROWER> <PARTY_ID>1004040</PARTY_ID> <DISPLAY_NAME>Moe Gonzalez</DISPLAY_NAME> <COMPANY_NAME>Moe Gonzalez Inc</COMPANY_NAME> <FIRST_NAME>Moe</FIRST_NAME> <LAST_NAME>Gonzalez</LAST_NAME> </GROWER> </DocumentElement>';

var xmlpath = "//DocumentElement/GROWER";

var pkColumnKey = "PARTY_ID";

var dataSchema = new $.ig.DataSchema("xml", { fields: fieldsJson,

            searchField: xmlpath

        });

        $(document).ready( function () {

            ds = new $.ig.DataSource({ type: "xml", dataSource: xmlString, schema: dataSchema }).dataBind();

            $("#placeHolder").empty();

            $("#placeHolder").igGrid({

                autoGenerateColumns: false,

                columns: columnsJson,

                dataSource: ds,

                dataSourceType: 'xml',

                primaryKey: pkColumnKey,

                width: "1400px",

                features: [

{

    name: 'Paging',

    type: "local"

 }

]

            });

        });

</script> 

</head>

<body>

 <form id="form1" runat="server">

 <div id="placeHolder" style="width:100%"></div>

</form>

</body>

</html>

 

I am getting this under IE9 (regardless of whether compatibility mode is on or off), and chrome (v23.0.1271.65 m).  Haven't tried any other browsers.

I am using the following versions:

IgniteUI 2012 Vol 2. 

jQuery.js v1.8.2

jQuery-ui.js v1.9.1

 

Any ideas? Let me know if there is any other info I can provide.

 

Thanks!

 

Jamie Foster