jQWidgets Forums

Forum Replies Created

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

1 2 →

Author

Posts

March 9, 2016 at 6:58 pm in reply to: jqxTooltip and jqxDraw jqxTooltip and jqxDraw #82288

Peter Sloth

Participant

Hi Dimitar

thanks, it works perfectly:-)

Best regards
Peter

December 10, 2015 at 2:30 pm in reply to: Label and legend colors in pdf and image export Label and legend colors in pdf and image export #79189

Peter Sloth

Participant

Hi Peter Stoev

I just found out that it is browser-related. It works with Chrome but it doesn’t with IE11.

Best regards
Peter

December 7, 2015 at 10:48 am in reply to: Label and legend colors in pdf and image export Label and legend colors in pdf and image export #78988

Peter Sloth

Participant

Hi Peter Stoev

that is strange, when I run your jsfiddle example and export the chart, the generated image has black labels just as I said above!
Are you sure they are white on your screen?

thanks
Peter

March 26, 2015 at 8:49 am in reply to: Date format in rowselect event Date format in rowselect event #69164

Peter Sloth

Participant

Hi Peter Stoev

thanks, but I don’t believe that I can use that approach. My code looks something like what’s shown below.
As you can see event.args.row is passed to the mustache function along with the some id for the script element to render in the mustache file.

Now, if I set the format I want on the datafield then the event.args.row.date is in the correct format, but then the ‘date’ column in the grid does not sort correctly (it sorts alphabetically and not by date).
Isn’t there a way I can make both things work at the same time?

thanks

//Peter

        if (gridObject.detailsfile) {
            $.Mustache.load(gridObject.detailsfile)
                .done(function () {
                });
        }

        $("#grid").on('rowselect', function (event) {
            $("#PreviewPanel").mustache(gridObject.detailssection, event.args.row, { method: 'html' });
        });

January 5, 2015 at 1:01 pm in reply to: getRecordsHierarchy and ajaxloading getRecordsHierarchy and ajaxloading #64966

Peter Sloth

Participant

Hi Peter Stoev

Okay, thanks.
However, I have found another (and better) approach. The fact is that the tree widget should display node items for a given module. Each module would have about 50 items and there are 20 modules in total. So instead of having the tree widget showing all modules at the same time, I now have a dropdownlist with all the modules. When selecting a module, the tree should show all node items for this module.

My problem is: how do I refresh the dataadapter+tree widget when a new module is selected from the dropdownlist?

Thanks

Best regards
Peter


<!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 id='Description'>In this demo the jqxTree is built from JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>

            <script type="text/javascript">
                $(document).ready(function () {
                    var theme = "";

                    // Dropdown
                    var dropdowndata = '[ {"ModuleName": "Module 1", "ModuleUrl": "url1.txt"}, {"ModuleName": "Module 2", "ModuleUrl": "url2.txt"}]';
                    var dropdownsource =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'ModuleName' },
                            { name: 'ModuleUrl' }
                        ],
                        localdata: dropdowndata
                    };
                    var dropdowndataAdapter = new $.jqx.dataAdapter(dropdownsource);
                    
                    $("#dropdown").jqxDropDownList({
                        selectedIndex: 0, source: dropdowndataAdapter, displayMember: "ModuleName", valueMember: "ModuleUrl", width: 200, height: 25, theme: theme
                    });

                    $('#dropdown').on('select', function (event) {
                        var args = event.args;
                        var item = $('#dropdown').jqxDropDownList('getItem', args.index);
                        if (item != null) {
                            source.url = item.value;
                            // Here I would like the tree widget to redraw using the source.url as data source
                        }
                    });

                    // Tree
                    var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'id' },
                            { name: 'parentid' },
                            { name: 'text' },
                            { name: 'value' },
                            { name: 'permission' },
                            { name: 'icon' }
                        ],
                        id: 'id',
                        //localdata: data
                        url: "url1.txt"
                    };

                    // create data adapter.
                    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
                    // perform Data Binding.
                    dataAdapter.dataBind();
                    // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                    // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                    // specifies the mapping between the 'text' and 'label' fields.  
                    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label', icon: 'icon' }]);
                    $('#jqxWidget').jqxTree({ source: records, width: '300px', theme: theme });

                });
        </script>
</head>
<body>
    <div id='content'>

            <div style='margin-top: 20px' id='dropdown'></div>
            <br/>
            <div id='jqxWidget'>
            </div>
    </div>
</body>
</html>

url1.txt:
[
{
“id”: “2”,
“parentid”: “1”,
“text”: “Hot Chocolate”,
“value”: “$2.3”,
“permission”: “1”,
“icon”: “../../images/mailIcon.png”
}, {
“id”: “3”,
“parentid”: “1”,
“text”: “Peppermint Hot Chocolate”,
“value”: “$2.3”
}, {
“id”: “4”,
“parentid”: “1”,
“text”: “Salted Caramel Hot Chocolate”,
“value”: “$2.3”
}, {
“id”: “5”,
“parentid”: “1”,
“text”: “White Hot Chocolate”,
“value”: “$2.3”
}, {
“text”: “Chocolate Beverage – MODULE 1”,
“id”: “1”,
“parentid”: “-1”,
“value”: “$2.3”
}, {
“id”: “6”,
“text”: “Espresso Beverage”,
“parentid”: “-1”,
“value”: “$2.3”
}, {
“id”: “7”,
“parentid”: “6”,
“text”: “Caffe Americano”,
“value”: “$2.3”
}, {
“id”: “8”,
“text”: “Caffe Latte”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “9”,
“text”: “Caffe Mocha”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “10”,
“text”: “Cappuccino”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “11”,
“text”: “Pumpkin Spice Latte”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “12”,
“text”: “Frappuccino”,
“parentid”: “-1”
}, {
“id”: “13”,
“text”: “Caffe Vanilla Frappuccino”,
“parentid”: “12”,
“value”: “$2.3”
}, {
“id”: “15”,
“text”: “450 calories”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “16”,
“text”: “16g fat”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “17”,
“text”: “13g protein”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “14”,
“text”: “Caffe Vanilla Frappuccino Light”,
“parentid”: “12”,
“value”: “$2.3”
}]

url2.txt:

[
{
“id”: “2”,
“parentid”: “1”,
“text”: “Hot Chocolate222”,
“value”: “$2.3”,
“permission”: “1”,
“icon”: “../../images/mailIcon.png”
}, {
“id”: “3”,
“parentid”: “1”,
“text”: “Peppermint Hot Chocolate”,
“value”: “$2.3”
}, {
“id”: “4”,
“parentid”: “1”,
“text”: “Salted Caramel Hot Chocolate”,
“value”: “$2.3”
}, {
“id”: “5”,
“parentid”: “1”,
“text”: “White Hot Chocolate”,
“value”: “$2.3”
}, {
“text”: “Chocolate Beverage – MODULE 2”,
“id”: “1”,
“parentid”: “-1”,
“value”: “$2.3”
}, {
“id”: “6”,
“text”: “Espresso Beverage”,
“parentid”: “-1”,
“value”: “$2.3”
}, {
“id”: “7”,
“parentid”: “6”,
“text”: “Caffe Americano”,
“value”: “$2.3”
}, {
“id”: “8”,
“text”: “Caffe Latte”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “9”,
“text”: “Caffe Mocha”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “10”,
“text”: “Cappuccino”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “11”,
“text”: “Pumpkin Spice Latte”,
“parentid”: “6”,
“value”: “$2.3”
}, {
“id”: “12”,
“text”: “Frappuccino”,
“parentid”: “-1”
}, {
“id”: “13”,
“text”: “Caffe Vanilla Frappuccino”,
“parentid”: “12”,
“value”: “$2.3”
}, {
“id”: “15”,
“text”: “450 calories”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “16”,
“text”: “16g fat”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “17”,
“text”: “13g protein”,
“parentid”: “13”,
“value”: “$2.3”
}, {
“id”: “14”,
“text”: “Caffe Vanilla Frappuccino Light”,
“parentid”: “12”,
“value”: “$2.3”
}]

January 2, 2015 at 11:21 am in reply to: non-sequential Ids non-sequential Ids #64902

Peter Sloth

Participant

By looping through the records of the dataadapter I can of course get the record I am looking for 🙂

  for (var i = 0; i < dataAdapter.records.length; i++) {
                        var record = dataAdapter.records[i];
                        if (item.id == record.id) {
                            var type = record.type;
                            $("#log").html("<strong>Type:</strong> " + type + ", <strong>Name:</strong> " + label + ", <strong>path:</strong> " + value);
                            break;
                        }
                    }

November 4, 2014 at 8:47 pm in reply to: Vertical scrollbar Vertical scrollbar #62136

Peter Sloth

Participant

I have fixed the problem. For everyone whose interested, the code is below.

Thanks

//Peter

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Data Rows with customized rendering in jqxDataTable</title>
    <meta name="description" content="This sample demonstrates how we can customize the rendering of the Data Rows in the jQWidgets DataTable widget.">
    <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>
    <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/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
            // prepare the data
            var data = [
                {
                    laptops:
                    [
                        { 'img': '../../images/l-13.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3720QM', price: 2999, display: 15.4, hdd: '512GB SSD', model: 'Apple MacBook Pro' },
                        { img: '../../images/l-14.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3667U', price: 1299, display: 13.3, hdd: '256GB SSD', model: 'Apple MacBook Air' },
                        { img: '../../images/l-15.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3632QM', price: 2199, display: 15.4, hdd: '256GB SSD', model: 'Asus ZenBook UX51VZ' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-16.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3317U', price: 1899, display: 13.3, hdd: '128GB SSD', model: 'ASUS TAICHI31-CX009H' },
                        { img: '../../images/l-17.jpg', ram: '4GB DD3', cpu: 'Intel Core i7-3517U', price: 1799, display: 13.3, hdd: '628GB', model: 'Asus TX300CA-C4024H' },
                        { img: '../../images/l-18.gif', ram: '16GB DD3', cpu: 'Intel Core i7-3820QM', price: 2499, display: 15.6, hdd: '1TB', model: 'Lenovo ThinkPad T530' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-19.jpg', ram: '8GB DD3', cpu: 'Intel Core i5-3210M', price: 1499, display: 15.6, hdd: '750GB', model: 'Samsung Series 7 Chronos' },
                        { img: '../../images/l-20.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3720QM', price: 1499, display: 17.3, hdd: '256GB SSD', model: 'HP EliteBook 8770w' },
                        { img: '../../images/l-21.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3517U', price: 1499, display: 14.0, hdd: '512GB', model: 'Dell XPS 14' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-22.jpg', ram: '32GB DD3', cpu: 'Intel Core i7-4800MQ', price: 3499, display: 17.3, hdd: '750GB', model: 'Dell Alienware 17' },
                        { img: '../../images/l-23.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-3537U', price: 1699, display: 15.6, hdd: '1TB', model: 'Acer Aspire R7-571G' },
                        { img: '../../images/l-24.jpg', ram: '8GB DD3', cpu: 'Intel Core i7-4500U', price: 1599, display: 15.6, hdd: '256GB SSD', model: 'Acer Aspire V5-573G' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-25.jpg', ram: '32GB DD3', cpu: 'Intel Core i7-4700MQ', price: 2199, display: 17.3, hdd: '1TB', model: 'Toshiba Qosmio X70-A-114' },
                        { img: '../../images/l-26.gif', ram: '4GB DD3', cpu: 'Intel Core i7-3667U', price: 2699, display: 14.0, hdd: '256GB SSD', model: 'Lenovo Thinkpad X1 Carbon' },
                        { img: '../../images/l-27.jpg', ram: '8GB DD3', cpu: 'Intel Core i5-3317U ', price: 1699, display: 12.5, hdd: '128GB SSD', model: 'Dell XPS Duo 12' }
                    ]
                },
                {
                    laptops:
                    [
                        { img: '../../images/l-28.png', ram: '8GB DD3', cpu: 'Intel Core i7-3537U', price: 1799, display: 12.5, hdd: '256GB SSD', model: 'Lenovo ThinkPad Twist S230u' },
                        { img: '../../images/l-29.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3317U ', price: 1299, display: 11.6, hdd: '128GB SSD', model: 'Sony Vaio Duo' },
                        { img: '../../images/l-30.jpg', ram: '4GB DD3', cpu: 'Intel Core i5-3230M', price: 999, display: 15.5, hdd: '256GB SSD', model: 'Sony VAIO' }
                    ]
                }
            ];

            var source =
            {
                localData: data,
                dataType: "array"
            };

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

            $("#dataTable").jqxDataTable(
            {
              width: '100%',
              //height: '100%',
                source: dataAdapter,
                sortable: false,
                pageable: false,
                enableHover: false,
                selectionMode: 'none',
                showHeader: false,
                theme: theme,
                rendered: function () {

                },
                columns: [
                      {
                          align: 'left', dataField: 'model',
                          // row - row's index.
                          // column - column's data field.
                          // value - cell's value.
                          // rowData - rendered row's object.
                          cellsRenderer: function (row, column, value, rowData) {
                              var laptops = rowData.laptops;
                              var container = "<div>";
                              for (var i = 0; i < laptops.length; i++) {
                                  var laptop = laptops[i];
                                  var item = "<div style='float: left; width: 210px; overflow: hidden; white-space: nowrap; height: 265px;'>";
                                  var image = "<div style='margin: 5px; margin-bottom: 3px;'>";
                                  var imgurl = laptop.img;
                                  var img = '<img width=160 height=120 style="display: block;border-radius: 5px; " src="' + imgurl + '"/>';
                                  image += img;
                                  image += "</div>";

                                  var info = "<div style='margin: 5px; margin-left: 10px; margin-bottom: 3px;'>";
                                  info += "<div><i>" + laptop.model + "</i></div>";
                                  info += "<div>Price: $" + laptop.price + "</div>";
                                  info += "<div>RAM: " + laptop.ram + "</div>";
                                  info += "<div>HDD: " + laptop.hdd + "</div>";
                                  info += "<div>CPU: " + laptop.cpu + "</div>";
                                  info += "<div>Display: " + laptop.display + "</div>";
                                  info += "</div>";

                                  var buy = "<button class='buy' style='margin: 5px; width: 80px; left: -40px; position: relative; margin-left: 50%; margin-bottom: 3px;'>Buy</button>";

                                  item += image;
                                  item += info;
                                  item += buy;
                                  item += "</div>";
                                  container += item;
                              }
                              container += "</div>";
                              return container;
                          }
                      }
                ]
            });
        
            //Initial load of page
            sizeContent();

      });
      
      //Dynamically assign height
      function sizeContent() {
        var newHeight = $(window).height() - $("#GalleryHeader").height() - $("#GalleryLinksbar").height();
        $('#dataTable').jqxDataTable({ height: newHeight });
      }
      
      //Every resize of window
      $(window).resize(sizeContent);

    </script>
    <style>
        h4 {
            font-size: 14px;
            margin: 18px 0 15px 15px;
        }

        .tag-title-info {
            background: transparent;
            width: 1px;
            height: 0px;
            border-color: #4272b8 transparent #4272b8 #4272b8 !important;
            border-width: 26px 26px;
            border-style: solid;
            z-index: 1000;
            top: 0px;
            position: absolute;
            left: 598px;
        }

        div#GalleryHeader
        {
            padding-left: 5px;
            padding-right: 5px;
            height: 67px;
            position: absolute;
            width: 100%;
            background-color: green;
        }

        div#GalleryLinksbar
        {
            padding-left: 5px;
            padding-right: 5px;
            height: 20px;
            top: 67px;
            position: absolute;
            white-space: nowrap;
            width: 100%;
            background-color: red;
        }

        .tag-title {
            font-size: 16px;
            color: #fff;
            position: absolute;
            z-index: 100;
            left: 0;
            line-height: 100%;
            background: #4272b8 !important;
            height: 52px;
            padding: 0px;
            margin: 0px;
            top: 0px;
            width: 500px;
            vertical-align: middle;
        }

        .cart-top {
            font-family: Arial, Helvetica, sans-serif;
            height: 35px;
            position: absolute;
            left: 500px;
            top: 0;
            color: #fff;
            padding: 16px 14px 1px 14px;
            font-size: 11px;
            font-weight: 400;
            background: #4272b8 !important;
            z-index: 199;
        }

            .cart-top p {
                font-weight: bold;
                font-size: 11px;
                background: url(../../images/cart-icon.png) no-repeat right center;
                min-height: 16px;
                text-align: left;
                padding: 0 24px 0 0;
                margin-top: 2px;
                float: left;
                font-size: 11px;
                color: #fff;
                text-decoration: none;
            }
    </style>
</head>
<body class='default' style="overflow: hidden; margin: 0px">
    <div id="galleryContent" style="height: 100%">
        <div id="GalleryHeader"></div>
        <div id="GalleryLinksbar"></div>
        <div id="dataTable" style="border: 0px;padding-top: 87px;"></div>

<!--        <div style="box-sizing: border-box; -moz-box-sizing: border-box; padding-top: 87px; width: 100%; height: 100%">
          <div id="dataTable" style="border: 0px"></div>
        </div>-->
    </div>
</body>
</html>

November 3, 2014 at 5:20 pm in reply to: Vertical scrollbar Vertical scrollbar #62061

Peter Sloth

Participant

Hi Peter Stoev

thanks for the reply. The problem is that I don’t know what to set the widget’s height to! I want of course the widget to fill out the remaining vertical space, i.e it’s height should be something like this: “100% – 20px – 75px”.
Is it possible to achieve this in some way?

thanks

Best regards
Peter Sloth

October 19, 2014 at 10:31 am in reply to: No request.form fields in 3.5 No request.form fields in 3.5 #61333

Peter Sloth

Participant

I think I found out the solution. It turns out that it was only the checkbox fields which were not part of the fields sent to the server. The reason being the the did not have a name, only an id. I guess this has changed from 3.01 to 3.5

October 21, 2013 at 8:41 am in reply to: jqxInput change event jqxInput change event #31090

Peter Sloth

Participant

Hi Peter Stoev

the problem is that the change event is not fired on lost focus in IE10. Shouldn’t the example above work in all browsers?

If not, which event will then work?

Thanks

Bests
Peter Sloth

September 9, 2013 at 7:30 am in reply to: Hide/show vertical scrollbar Hide/show vertical scrollbar #28562

Peter Sloth

Participant

Hi Peter

do you have any plans to implement this feature? It seems that more and more web sites web sites (for instance Facebook) use this, so I think it would be a good idea to have support for it in the widget; that is if it is not possible to write code/css that do the same.

thanks

best regards
Peter Sloth

September 9, 2013 at 7:24 am in reply to: Splitter does not show scrollbars Splitter does not show scrollbars #28560

Peter Sloth

Participant

I am running the latest version of the framework, and the above still seems to be an issue.
If I apply the workaround mentioned the scrollbars don’t seem to be styled according to the current theme, so it would be nice to have the fix for the issue.

Any ETA on this?

thanks

best regards
Peter Sloth

September 2, 2013 at 10:57 am in reply to: scroll event? scroll event? #28152

Peter Sloth

Participant

Hi Dimitar

thanks for the reply, but I’m afraid that I cannot use the scrolling method, since I still need to know when (i.e. an event) the user scrolls the grid.

thanks

//Peter

August 21, 2013 at 8:46 am in reply to: Border around selected row Border around selected row #27262

Peter Sloth

Participant

Hi Peter Stoev

okay, so I guess that the grid does not have support for this:-(
It would be great though if you could add this in a future version.

BTW, in order to create the two borders around the selected row I had to change the top, border-top etc. properties.
This is primarily due to the fact that every cell in the grid has it’s own z-index (??) which makes it hard to do any customization on the row selection.

thanks

Bests
Peter

August 12, 2013 at 7:29 am in reply to: Keep the expanded/collapsed state of each item Keep the expanded/collapsed state of each item #26677

Peter Sloth

Participant

Hi scrummie

I have tried that same but apparently my javascripts skills are not sufficient, because it doesn’t work in all cases. If you could upload your code, I would be very greatfull!

thanks

Peter

Author

Posts

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

1 2 →