jQWidgets Forums

Tagged: jqxTabs, styling, Tabs, Theme

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 12 years ago.

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

Author

Adding grids to tabs Posts
June 7, 2013 at 3:26 pm Adding grids to tabs #22787

xplorr2
Member

I’m trying to wrap my head around how to place specific grids within specific tabs. I’ve been studying the following:

http://www.jqwidgets.com/community/topic/query-regarding-tabs/page/2/

I am very new to this and need a hand figuring it all out.

The object of the game is to put these independent grids with different datasources on their respective tabs.

Eg:

Tabs:

            CustomersTab

                        CustomersGrid

            SuppliersTab

                        SuppliersGrid

    I understand that each tab must have an initTabContent event, and I’ve done my best to implement this but it’s not working. I need to create the tabs, place grids on those tabs.

When the user clicks a tab the grid should display. I’d like it so the grid is populated with new data upon the tab clkick event, this way the user is always looking at current data. I don’t have enough knowledge to know what I’m doing wrong, or how things are suppose to work.

Currently, the tabs are not showing up as tabs, but rather links, there may be an issue with the style. I’ve included the jqx.ui-smoothness.css in the head but it doesn’t work.

Please help me correct the code and get this working.

My code:

<head>

    <link href=”../../Content/themes/jqx.base.css” rel=”stylesheet” type=”text/css” />

    <link href=”../../Content/themes/jqx.ui-smoothness.css” rel=”stylesheet” type=”text/css” />

     <script type=”text/javascript” src=”../../scripts/jquery-1.9.1.min.js”></script>

    <script src=”../../Scripts/jqxcore.js” type=”text/javascript”></script>

    <script src=”../../Scripts/jqxtabs.js” type=”text/javascript”></script>

    <script src=”../../Scripts/jqxgrid.js” type=”text/javascript”></script>

   <script type=”text/javascript”>

    $(document).ready(function () {

       var customer = function(grid_entity)

        {

            datatype: “Json”,

            Datafields:

            [

                { name: ‘customername’ },

                { name: ‘address’ },

                { name: ‘city’ },

                { name: ‘state-prov’ },

                { name: ‘country’ },

                { name: ‘status’ }

            ],

           url: ‘isoManagement/Get_customer’

            };

             var customerDataAdapter = new $jqx.dataAdapter(customer);

              $(“#jqxgrid”).jqxGrid(

                {

                    source: customerDataAdapter,

                    Columns:

                    [

                        { text: ‘customername’, datafield: ‘customername’, width: 80 },

                        { text: ‘address’, datafield: ‘address’, width: 80 },

                        { text: ‘city’, datafield: ‘city’, width: 80 },

                        { text: ‘state/prov’, datafield: ‘state-prov’, width: 80 },

                        { text: ‘country’, datafield: ‘country’, width: 80 },

                        { text: ‘status’, datafield: ‘status’, width: 80 }

                    ]

               });

            });

       var supplier = function(grid_entity)

        { datatype: “Json”,

          Datafields:

          [

            { name: ‘suppliername’ },

            { name: ‘address’ },

            { name: ‘city’ },

            { name: ‘state-prov’ },

            { name: ‘country’ },

            { name: ‘status’ }

          ],

         url: ‘isoManagement/Get_supplier’

          };

        var supplierAdapter = new $jqx.dataAdapter(supplier);

          $(“#jqxgrid”).jqxGrid(

            {

                source: supplierAdapter,

                Columns:

                [

                    { text: ‘suppliername’, datafield: ‘suppliername’, width: 80 },

                    { text: ‘address’, datafield: ‘address’, width: 80 },

                    { text: ‘city’, datafield: ‘city’, width: 80 },

                    { text: ‘state-prov’, datafield: ‘state-prov’, width: 80 },

                    { text: ‘country’, datafield: ‘country’, width: 80 },

                    { text: ‘status’, datafield: ‘status’, width: 80 }

                ]

           });

        });

        var initWidgets = function (grid_entity)

        {

               switch (grid_entity)

               {

                      case 0:

                             customerData();

                             break;

                      case 1:

                             supplierData();

                             break;

                    default:

                             break;

            }

     }

          $(‘#jqxTabs’).jqxTabs(

            {height:650,

                theme:<link href=”../../Content/themes/jqx.ui-smoothness.css”,

                initTabContent:initWidgets });

               var value = “grid” + (grid_entity);

               $(‘#jqxTabs’).jqxTabs(‘addat’, grid_entity, value, ‘Grid: <br /><div id=”jqxgrid + grid_entity +'”></div>’);

               index++;

               grid_entity++;

            });

        });

     </script>

</head>

<body class=’default’>

       <div id=”jqxtabs”>

        <ul>

            <li>customer</li>

            <li>supplier</li>

           </ul>

         <div >

              customerData()

         </div>

         <div >

              SupplierData()

         </div>

</body>

June 10, 2013 at 6:13 am Adding grids to tabs #22853
Dimitar
Participant
Hello xplorr2,

The theme should be set as:
```
theme: "ui-smoothness",
```
and not:
```
theme:<link href=”../../Content/themes/jqx.ui-smoothness.css”,
```
For more information, please check out the jqxTabs documentation entry Styling and Appearance.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
June 12, 2013 at 8:59 pm Adding grids to tabs #23055

xplorr2
Member

The link

$(document).ready(function ()
{
var theme = ‘ui-smoothness’;

I’ve done this for all controls; tab, grid and so on.

Everything still shows up as

classic or the default

June 13, 2013 at 6:18 am Adding grids to tabs #23069
Dimitar
Participant
Hi xplorr2,

Did you set each widget’s property theme, i.e.:
```
$(‘#jqxTabs’).jqxTabs({ height: 650, theme: "ui-smoothness" });
```
or you just created:
```
var theme = ‘ui-smoothness’;
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

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

You must be logged in to reply to this topic.