jQWidgets Forums

Tagged: datagrid, datagrid control, jqxgrid

This topic contains 14 replies, has 2 voices, and was last updated by sdalby 12 years, 8 months ago.

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

Author

Bad formating when moved to local asp.net site Posts

August 22, 2012 at 3:26 pm Bad formating when moved to local asp.net site #7021

sdalby

Member

Hi I have moved your example:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/popupediting.htm?classic

to my local ASP.NET site. I refer to your version of generatedata.js and I also have a local copy of gettheme()

It all works except for some styling issues: All buttons, headers etc are flat instead of raised and in the popup edit form the font in the fields for editing are very small.

I have noticed that Visual Studio marks the class ‘default’ (used in the body tag) as unknown and I cannot find it anywhere in your files.

Can you give me a clue?

I have used jqxTree without problems

I tried to insert the code in a previous post, but it appeared as if your forum failed in order to process it and unfortunately I cannot provide a live link because the server is local.

TIA

Best regards
Soeren Dalby

August 22, 2012 at 8:03 pm Bad formating when moved to local asp.net site #7029

Peter Stoev

Keymaster

Hi Soeren Dalby,

I suppose that you didn’t apply a theme i.e include the appropriate CSS theme file and set the Grid’s theme property to the theme’s name. Learn how to apply a theme from this help topic: jquery-grid-styling-and-appearance.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 23, 2012 at 1:20 pm Bad formating when moved to local asp.net site #7052

sdalby

Member

Hi Peter

I have managed to set the theme both hardcoded and as a parameter as interpreted by getTheme helper in your demo, but it did not have any effect on the issues above.

Besides, I have copied your code byte for byte so if no theme was the problem in my code it would have been the case for you as well.

I have noticed that your code when running locally (IE9 end FF14) has the same issue with flat buttons and headers but not with the font issue in the popup.

I think my issue is related to this line:

<body class='default'>

because locally I cannot localize any class of that name.

Can you explain me what it does and can it have any relations to something local on your server?

August 23, 2012 at 2:09 pm Bad formating when moved to local asp.net site #7054

Peter Stoev

Keymaster

Hi Soeren Dalby,

I will post it again: jquery-grid-styling-and-appearance.htm. Please, take a look at the help topic. It shows how to apply a theme and is the right way to apply a theme.

<body class='default'>

and getTheme are not related to the way the theme work. They are used only in the demo application and apply themes on demand. If you open any sample’s source code, you will also find out that there’s no theme applied, only the default one from jqx.base.css.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 23, 2012 at 2:32 pm Bad formating when moved to local asp.net site #7056

sdalby

Member

Hi Peter,

I have looked at it and what I found was:

 
theme: 'energyblue'

And I tried to play around with various styles, but the problem persists.

Besides all I want is the same look&feel as your demo examples.

I relate strongly to your demo examples since they by far are the most thorough documentation.

Best regards
Søren

August 23, 2012 at 2:45 pm Bad formating when moved to local asp.net site #7057

Peter Stoev

Keymaster

Hi Soeren Dalby,

Not only the theme property is set, but the jqx.energyblue.css theme file is included, too. There’s a full sample about that with source code in the link I posted in my previous post.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 24, 2012 at 6:44 am Bad formating when moved to local asp.net site #7086

sdalby

Member

Yes I understand and getTheme does the same when designating a theme in the url – it refers to all the theme files in the distribution. But okay, I think I can find another solution and I wont bother you again with this issue.

August 24, 2012 at 6:53 am Bad formating when moved to local asp.net site #7088

Peter Stoev

Keymaster

Hi Soeren Dalby,

Its not the same. getTheme’s purpose is to look for url parameter and load a theme depending on that parameter. It is designed only for the demo application as it includes switching between the available themes. The theme’s name is added to the url and the demo application reads it and loads a theme file depending on the url. In your apps, you should apply a theme using the standard way – add the CSS file(s) that you want to use and set the theme property as in the help topic: jquery-grid-styling-and-appearance.htm. If you want to make theme chooser, you can use the getTheme’s approarch.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 24, 2012 at 7:13 am Bad formating when moved to local asp.net site #7090

sdalby

Member

Okay, but please see if you can reproduce this situation:

If I run your grid from your site using ?classic you get 3D buttons and headers.

If I run the very same code from the demo part of your distribution using ?classic I dont get 3D

August 24, 2012 at 7:21 am Bad formating when moved to local asp.net site #7091

Peter Stoev

Keymaster

Hi Soeren Dalby,

getTheme’s purpose is to look for url parameter and load a theme depending on that parameter. getTheme is not used in the downloaded files. Open any sample and look at its code. You will see that getTheme is not used there.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 31, 2012 at 1:44 pm Bad formating when moved to local asp.net site #7348

sdalby

Member

Hi Peter,

I have followed the example and adds ‘classic’ css:

    <link rel="stylesheet" href="../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />

and uses the theme classic in my component:

$("#jqxComponentList").jqxListBox({ selectedIndex: 3, source: source2, width: 350, height: 350, theme: 'classic' });

I get the right color but I do not get this great looking 3D effect in the selected line.

Am I doing something wrong?

Thanks in advance
Soeren

August 31, 2012 at 1:55 pm Bad formating when moved to local asp.net site #7350

Peter Stoev

Keymaster

Hi Soeren,

Actually, you haven’t followed the example because the files order is not correct. The classic CSS should be loaded after the base CSS.

Here’s the example:

<!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>
    <title>jQuery ListBox CSS Styling Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxlistbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
		        ];
                // Create a jqxListBox
                $("#jqxlistbox").jqxListBox({ source: source, width: '200px', height: '200px', theme: 'summer' });
            });
        </script>
        <div id='jqxlistbox'>
        </div>
    </div>
</body>
</html>

jQWidgets uses a pair of css files – jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget’s layout like margin, padding, border-width, position. The second css file applies the widget’s colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 31, 2012 at 3:10 pm Bad formating when moved to local asp.net site #7352

sdalby

Member

I see what you mean and I have changed it but it doesn’t make a difference.

I have tried to show the principle I use for theme selection by applying it to one of your examples:

<!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>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" /> 
    <meta name="description" content="The jqxListBox represents a widget that contains a list of selectable items."/>
    <title id='Description'>The jqxListBox represents a widget that contains a list of selectableitems. </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.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/jqxlistbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha",
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espresso",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino",
                    "Galao",
                    "Greek frappé coffee",
                    "Iced Coffee",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
                ];
                // Create a jqxListBox
                $("#jqxWidget").jqxListBox({ selectedIndex: 3, source: source, width: 200, height: 250, theme: 'classic' });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

August 31, 2012 at 3:25 pm Bad formating when moved to local asp.net site #7353

Peter Stoev

Keymaster

Hi sdalby.

I uploaded a sample which describes the approach: listbox.htm. Also make sure that you use a modern web browser which supports CSS3 because the gradients in the ‘classic’ theme require CSS 3.

The image of the demo is:

I opened it with Chome, but the result will be the sample with FireFox, Opera and Safari.

The code of the demo is:

<!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>
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha",
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espresso",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino",
                    "Galao",
                    "Greek frappé coffee",
                    "Iced Coffee",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
		        ];
                // Create a jqxListBox
                $("#jqxWidget").jqxListBox({ selectedIndex: 3, source: source, width: 200, height: 250, theme: 'classic' });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 31, 2012 at 3:38 pm Bad formating when moved to local asp.net site #7354

sdalby

Member

Hi Peter

Thanks for your patience. I haven’t thought about changing the browser and it appears as if Internet Explorer 9 is having problems with the gradients, it looks fine in FF.

Thank you so much for your assistance.

Author

Posts

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

You must be logged in to reply to this topic.