jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Theme doesn't fully switch

Tagged: , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Nadezhda 10 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Theme doesn't fully switch Posts
  • April 7, 2015 at 11:39 pm Theme doesn't fully switch #69654

    dtrue
    Participant

    Hello,

    I’m trying to implement a dropdown like the one in the demos to change the theme. It almost completely works, but it leaves a few things unchanged. This is the code to handle the dropdown. 

    var index = args.index;
			var item = args.item;
			// get item's label and value.
			var label = item.label;
			var value = item.value.toLowerCase().replace(" ", "");
			var selector = $(selectors[currentTab]);
			selector.jqxGrid({theme: value});
			console.log('the value is ' + value)
			$.cookie("selectedthemegrid" + currentTab, value, {expires: 365});

If I change the theme to orange then to metro then to web, this is what the header looks like:

<code><div style=&quot;overflow: hidden; display: block; height: 56px; width: 1482px; visibility: inherit;&quot; class=&quot;jqx-widget-header jqx-widget-header-web jqx-grid-header jqx-grid-header-web jqx-widget-header-metro dark jqx-grid-header-metro jqx-widget-header-orange jqx-grid-header-orange&quot;></code>'

What's going on here?  Why doesn't it get rid of the metro and orange tags?  It is messing up the styles, so any instruction on what I'm doing wrong would be great.  Thanks!
    April 8, 2015 at 9:24 am Theme doesn't fully switch #69661

    Nadezhda
    Participant

    Hello dtrue,

    Here is an example which shows how to change theme of jqxGrid with jqxDropDownList. I hope it would be helpful.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <link href="../../../jqwidgets/styles/jqx.orange.css" rel="stylesheet" />
    <link href="../../../jqwidgets/styles/jqx.metro.css" rel="stylesheet" />
    <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.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(200);

            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    commit(true);
                },
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                editable: true,
                selectionmode: 'singlecell',
                editmode: 'click',
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
                  { text: 'Last Name', datafield: 'lastname', width: 90 },
                  { text: 'Product', datafield: 'productname' },
                  { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right' },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 }
                ]
            });

            var editModes = ['metro', 'orange'];
            $("#editmodes").jqxDropDownList({ autoDropDownHeight: true, dropDownWidth: 150, width: 150, height: 25, selectedIndex: -1, source: editModes });
            $('#editmodes').on('select', function (event) {
                var args = event.args;
                if (args) {
                    // index represents the item's index.                
                    var index = args.index;
                    if (index == 0) {
                        $("#jqxgrid").jqxGrid({ theme: 'metro' });
                    }
                    else {
                        $("#jqxgrid").jqxGrid({ theme: 'orange' });
                    }
                }
            });

        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <div style="margin-top: 5px;" id="editmodes">
    </div>
</body>
</html>

    Best Regards,
    Nadezhda

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

    April 8, 2015 at 4:35 pm Theme doesn't fully switch #69684

    dtrue
    Participant

    Hi Nadezha,

    Thanks for the response. I don’t see what the difference is between your code and mine. All you do is write: $(“#jqxgrid”).jqxGrid({ theme: ‘orange’ });, which is basically what I have: selector.jqxGrid({theme: value});.

    It works 90%, but seems to forget to remove some classes. Do you have any idea why?

    April 9, 2015 at 7:36 am Theme doesn't fully switch #69702

    Nadezhda
    Participant

    Hi dtrue,

    If you provide us with a full sample or JSFiddle example which demonstrates your scenario, then we will be able to test with your code. Otherwise, you can use your browser’s developer tool and check for unusable or duplicate classes.

    Best Regards,
    Nadezhda

    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.