[sdalbyMember]

Hi Dimitar and thanks for your reply. I cannot find any documentation on this property, but I have tried to play with it.

The way I do it does not appear to have any effect though.

How do I set bar description text to be horizontal in a horizontal bar like this one:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_bar_series.htm

Where China, India, Usa etch should be written with horizontal text?

My current settings are:

        var settings = {
            showLegend: true,
            enableAnimations: false,
            padding: { left: 20, top: 5, right: 20, bottom: 5 },
            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
            source: chartList,
            categoryAxis:
                        {
                            dataField: 'name',
                            showGridLines: true,
                            flip: false,
	                        textRotationAngle: 0
                        },
            colorScheme: 'scheme01',
            seriesGroups:
                        [
                            {
                                type: 'column',
                                orientation: 'horizontal',
                                columnsGapPercent: 30,
                                toolTipFormatSettings: { thousandsSeparator: ',' },
                                textRotationAngle: 180,
                                valueAxis:
                                {
                                    flip: true,
                                    unitInterval: 120,
                                    minValue: 0,
                                    maxValue: 1500,
                                    displayValueAxis: true,
                                    description: '',
                                    formatFunction: function (value) {
                                        return parseInt(value);
                                    }
                                },
			                
                                series: [
                                        { dataField: 'timeConsumption', displayText: 'timeConsumption' }
                                    ]
                            }
                        ]
        };

[sdalbyMember]

Hi Peter

When I run your example it runs perfectly, but when I embed it into my page it doesn’t.

But okay, my page is quite complex and I have some other special stuff going on regarding graphs that are shown in that window so maybe there is some sort of conflict between the components that I cannot figure out.

I will try to remove the border around the tab and the graph and so the result will become more graphically appealing.

The most important thing is that it works well in more normal conditions.

Thank you so much for your assistance.

[sdalbyMember]

Hi,

Yes and thats the example that I formed this code upon, but in my case it covers the title. I dont know how 100% size can affect the window title when the parent of the tab is a child of the window.

I have also tried to set the size in pixels but THE CORE IF THE PROBLEM IS THAT IT CENTERS IN GraphicsWindow AND NOT IN windowContent

Thanks in advance

[sdalbyMember]

Sorry overlooked, the min value, please disregard the question about 0 base on axis

[sdalbyMember]

Also, I have this problem that the value doesnt start with zero. It seem to take offset in the lowest value – this is not desirable for me

Thanks in advance
/Søren

[sdalbyMember]

That worked like a charm, thank you so much.

Can you tell me how to present the axix text horizontally rather than vertically?

This is crucial for me.

Thanks in advance
/Søren

[sdalbyMember]

Perfect, thanks 🙂

[sdalbyMember]

That worked perfectly, thanks 🙂

[sdalbyMember]

I get following message when I click on the link above:

Apologies, but the page you requested could not be found. Perhaps searching will help.

[sdalbyMember]

It is simply where jqwidgets is placed in my project. I too use jqx240 and jquery 1.8.

Please post it, I would love to see it work, and I know that at least one more of your customers are very interested in this as well.

Allow me to suggest that you write a blog on jqx Widgets and programmatically setting (keyboard) focus.

Thank you so much for your help so far

/Søren

[sdalbyMember]

Actually this only gets me a blak window (no grid) in both FF and IE

I have pasted your code and just changed the reference to jqwidgets directory

[sdalbyMember]

Great, I have added it below. This does not allow me to use the keyboard in the grid when the window opens either in IE9 or FF15.

I am really glad for your focus on this. I think it makes all the difference if user can navigate by keyboard alone. If user has to click with the mouse in order to activate the grid, it is not that important if this is a jqxGrid or ASP.NET GridView in my opinion.

I have managed to get the TAB key to move between controls and Enter to close the window (you guys provides an excellent Esc handling), so we are so close 🙂

Thanks in advance
/Søren Dalby

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript" src="../scripts/jquery-1.8.0.min.js"></script>
    <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="../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/jqxpanel.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxtree.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.pager.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
</head>
<body>
    <button id="jqxTest">Click me</button>
    <div id='jqxListRevisionsWindow'>
        <div>
            Revisions
        </div>
        <div style="margin: 20px">
            <div id='jqxListRevisionsGrid' style="float: left"></div>
            <div style="margin-left: 605px">
                <input type="button" value="Restore..." id="lrRestoreButton" style="width: 75px; margin-bottom: 5px" />
                <input type="button" value="Close" id="lrCloseButton" style="width: 75px" />
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $("#jqxTest").click(function () {
            $("#jqxListRevisionsWindow").jqxWindow('open');
        });
        $(document).ready(function () {
            // define popup window for selecting component types
            $("#jqxListRevisionsWindow").jqxWindow({ height: 480, width: 730, theme: 'classic', isModal: true, autoOpen: false });
            var data = [
                { User: 'SDA', DateTime: 'Today', Description: 'My Description' },
                { User: 'PST', DateTime: 'Tomorrow', Description: 'His Description' }
            ];
            var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'User' },
                        { name: 'Description' },
                        { name: 'DateTime' }
                    ],
                    localdata: data
                };
            var adapter = new $.jqx.dataAdapter(source);
            $("#jqxListRevisionsGrid").jqxGrid(
                {
                    width: 580,
                    height: 400,
                    source: adapter,
                    theme: 'classic',
                    columnsresize: true,
                    columns: [
                        { text: 'User', datafield: 'User', width: 100 },
                        { text: 'Saved ', datafield: 'DateTime', width: 135 },
                        { text: 'Description', datafield: 'Description', width: 325 }
                    ],
                    ready: function () {
                        $("#jqxListRevisionsGrid").jqxGrid('selectrow', 0);
                        $("#jqxListRevisionsGrid").jqxGrid('wrapper').focus();
                    },
                });
        });
    </script>
</body>
</html>

[sdalbyMember]

I can make mine select the first row but I cannot activate the keyboard (I have also tried with multiplecellsextended)

$("#jqxListRevisionsWindow").jqxWindow({ height: 480, width: 730, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#lrCancelButton") });
    // make Enter activate Ok.click
    $("#jqxListRevisionsWindow").children().keyup(function (event) {
        if (event.keyCode == 13) {
            $("#lrOkButton").click();
        }
    });
    $("#jqxListRevisionsGrid").jqxGrid(
    {
        width: 580,
        height: 400,
        source: createRevisionListDataAdapter(),
        theme: theme,
        columnsresize: true,
        ready: function () {
            $("#jqxListRevisionsGrid").jqxGrid('selectrow', 0);
            $("#jqxListRevisionsGrid").jqxGrid('wrapper').focus();
        },
        columns: [
            { text: 'User', datafield: 'User', width: 100 },
            { text: 'Saved ', datafield: 'DateTime', width: 135 },
            { text: 'Description', datafield: 'Description', width: 325 }
        ]
    });
    $("#lrOkButton").click(function () {
        $("#jqxListRevisionsWindow").jqxWindow('close');
    });

[sdalbyMember]

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.

[sdalbyMember]

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>

[Author]

Posts