Forum Replies Created

Viewing 15 posts - 31 through 45 (of 58 total)
  • Author
    Posts
  • in reply to: Text orientation Text orientation #9840

    sdalby
    Member

    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' }
    ]
    }
    ]
    };
    • This reply was modified 11 years, 7 months ago by  sdalby.
    in reply to: Tab covering title as well Tab covering title as well #9772

    sdalby
    Member

    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.

    in reply to: Tab covering title as well Tab covering title as well #9761

    sdalby
    Member

    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


    sdalby
    Member

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


    sdalby
    Member

    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


    sdalby
    Member

    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


    sdalby
    Member

    Perfect, thanks 🙂


    sdalby
    Member

    That worked perfectly, thanks 🙂

    in reply to: Grid focus Grid focus #7503

    sdalby
    Member

    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.

    in reply to: Grid focus Grid focus #7500

    sdalby
    Member

    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

    in reply to: Grid focus Grid focus #7481

    sdalby
    Member

    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

    in reply to: Grid focus Grid focus #7448

    sdalby
    Member

    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>
    in reply to: Grid focus Grid focus #7420

    sdalby
    Member

    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');
    });

    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.


    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>
Viewing 15 posts - 31 through 45 (of 58 total)