jQWidgets Forums

Forum Replies Created

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

Author

Posts

March 17, 2015 at 10:40 am in reply to: Collapse all possible bug Collapse all possible bug #68718

Participant

Thank you for your reply. Unfortunately my jqxTree code initialization is quite complex and it is nested in some modules of my web app so I can’t provide you with a simple ‘copy-paste’ sample of my code. Plus, my tree is built with JSON data. Thanx anyway, the change I had made to the source code works fine anyway.

November 6, 2014 at 12:07 pm in reply to: Problem localizing jqxDateTimeInput Problem localizing jqxDateTimeInput #62312

mirko.lugano

Participant

Hi thank you, yes as I stated in my last post just adding the missing ‘globalize.js’ script solved the issue and now it works with both approaches on my side too. Thanx for your help.

November 6, 2014 at 11:47 am in reply to: Problem localizing jqxDateTimeInput Problem localizing jqxDateTimeInput #62304

mirko.lugano

Participant

SOLVED: it works. Adding the ‘globalize.js’ to the <head> section was actually everything that was needed.

November 6, 2014 at 11:25 am in reply to: Problem localizing jqxDateTimeInput Problem localizing jqxDateTimeInput #62301

mirko.lugano

Participant

UPDATE: I was not including the globalize.js script in the <head> section. I now can load the script correctly, but even then when I set the culture like this

 $.getScript('Scripts/lib/jqwidgets/globalization/globalize.culture.de-DE.js')
              .done(function (script, textStatus) {
                 //Now I DO get here
                  $("#result").jqxDateTimeInput({ culture: 'de-DE' });
              })
              .fail(function (jqxhr, settings, exception) {

              });

the component remains in English. I get no errors on the developer tools’ console.

November 6, 2014 at 11:02 am in reply to: Problem localizing jqxDateTimeInput Problem localizing jqxDateTimeInput #62298

mirko.lugano

Participant

Thanx for the quick reply, sorry, I failed to explain myself correctly. I did follow the example mentioned above, the relevant code I had tried anyway is

           //the scripts contents are retrieved correctly, but
            //this gives parse error: "Cannot read property 'addCultureInfo' of undefined"
            $.getScript('Scripts/lib/jqwidgets/globalization/globalize.culture.de-DE.js')
              .done(function (script, textStatus) {
                  //NOTE: I never get here
                  $("#result").jqxDateTimeInput({ culture: 'de-DE' });
                  //console.log(script);
                  //console.log(textStatus);
              })
              .fail(function (jqxhr, settings, exception) {
                  //NOTE: I always land here
                  debugger;
              });

I have used this $.getScript() syntax which is different from the ‘official’ Demo example because I am using jquery 2.1.0. The point is I never get to the .done() function because the getScript function fails as described in my previous post.
I had also tried to load the localized file by including in the <head> section, like

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>      
    <script src="Scripts/lib/jqwidgets/jqx-all.js"></script>        
    <script src="Scripts/lib/jqwidgets/globalization/globalize.culture.de-DE.js"></script>
</head>

But already here I get the same error: ‘Cannot read property ‘addCultureInfo’ of undefined’. Of course if I later try to initialize the dateTimeInput component like this

$("#result").jqxDateTimeInput({
                width: '10%',
                formatString: 'dd.MM.yyyy',
                culture: 'de-DE'
            });

it doesn’t work. I am using the very latest version of jqxWidget (downloaded yesterday)

November 11, 2013 at 1:52 pm in reply to: jqxGrid, how to use set its width like table can use %, then it can automatic resize upon container size change jqxGrid, how to use set its width like table can use %, then it can automatic resize upon container size change #32403

mirko.lugano

Participant

Hi Everybody,
sorry for re-opening this thread, but I have ran into a strange issue with percentages. I am using version 3.0.4 (just downloaded it today (11 nov ’13)) and I noticed (as stated before in this thread) that I can set the width of the grid using percentages as well. The point is, I can also set percentages with decimals (e.g. 30.5%) for the Grid, but not for the single columns. Here is a snippet taken from the jqwidgets demos under /demos/jqxgrid/autosize.html: (I have added comments)

$(“#jqxgrid”).jqxGrid(
{
width: ‘50%’, //here I can set for instance 50.5% <——–
height: '50%',
source: dataAdapter,
showfilterrow: true,
filterable: true,
theme: theme,
selectionmode: 'multiplecellsextended',
columns: [
{ text: 'Name', columntype: 'textbox', datafield: 'name', width: '20%' }, //here I cannot set 20.5% <———
{
text: 'Product', datafield: 'productname', width: '35%'
},
{ text: 'Ship Date', datafield: 'date', filtertype: 'date', width: '30%', cellsalign: 'right', cellsformat: 'd' },
{ text: 'Qty.', datafield: 'quantity', width: '15%', cellsalign: 'right' }
]
});

that means, the percentage value of the single column will always be 20, regardless wehter I enter 20% or 20.5% or even a string like 20.abced%. I would like to ask if this is a known issue and wether it is possible to fix it in future releases.
I have tested this on the latest versions (as of today) of chrome and firefox.
Thank you and BTW great widget!
Mirko

August 28, 2012 at 2:25 pm in reply to: jqxMenu not closing automatically jqxMenu not closing automatically #7214

mirko.lugano

Participant

I forgot: using the ‘animationHideDelay’ property also does not work

August 23, 2012 at 12:38 pm in reply to: Problem with Firebug Problem with Firebug #7048

mirko.lugano

Participant

Solved the issue myself, the problem was with the FireQuery Extension. After disabling it, everything works fine.

August 23, 2012 at 11:01 am in reply to: Problem with Firebug Problem with Firebug #7046

mirko.lugano

Participant

Sorry I had posted my code incorrectly….

August 23, 2012 at 11:01 am in reply to: Problem with Firebug Problem with Firebug #7045

mirko.lugano

Participant

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
    <meta name="description" content="The jqxTree displays a hierarchical collection of items. You
        can populate it from 'UL' or by using its 'source' property." />
    <title id='Description'>The sample demonstrates the Tree's drag and drop functionality.
    </title>
    <link rel="stylesheet" href="/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
    
    <script type="text/javascript" src="/Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            // Create jqxTree
            $('#treeA').jqxTree({
                allowDrag: true, allowDrop: true, height: '300px', width: '220px', theme: theme,
                dragStart: function (item) {
                    if (item.label == "Community")
                        return false;
                }
            });
            $('#treeB').jqxTree({
                allowDrag: true, allowDrop: true, height: '300px', width: '220px', theme: theme,
                dragEnd: function (item) {
                    if (item.label == "Forum")
                        return false;
                }
            });
            $("#treeA, #treeB").bind('dragStart', function (event) {
                $("#dragStartLog").text("Drag Start: " + event.args.label);
                $("#dragEndLog").text("");
            });
            $("#treeA, #treeB").bind('dragEnd', function (event) {
                $("#dragEndLog").text("Drag End");
                if (event.args.label) {
                    var ev = event.args.originalEvent;
                    var x = ev.pageX;
                    var y = ev.pageY;
                    if (event.args.originalEvent.originalEvent.touches) {
                        var touch = event.args.originalEvent.originalEvent.changedTouches[0];
                        x = touch.pageX;
                        y = touch.pageY;
                    }
                    var offset = $("#textarea").offset();
                    var width = $("#textarea").width();
                    var height = $("#textarea").height();
                    var right = parseInt(offset.left) + width;
                    var bottom = parseInt(offset.top) + height;
                    if (x >= parseInt(offset.left) && x <= right) {
                        if (y >= parseInt(offset.top) && y <= bottom) {
                            $("#textarea").val(event.args.label);
                        }
                    }
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div id='treeA' style='float: left; margin-left: 0px;'>
                <ul>
                    <li id='home' item-selected='true'>Home</li>
                    <li item-expanded='true'>Solutions
                        <ul>
                            <li>Education</li>
                        </ul>
                    </li>
                    <li>Financial services</li>
                    <li>Community</li>
                </ul>
            </div>
            <div style='float: left; margin-left: 20px;' id="treeB">
                <ul>
                    <li>Products
                    </li>
                    <li item-expanded='true'>Support
                        <ul>
                            <li>Support home</li>
                            <li>Customer Service</li>
                        </ul>
                    </li>
                    <li>Knowledge base</li>
                    <li>Forum</li>
                </ul>
            </div>
            <div style="width: 200px; height: 200px; float: left; margin-left: 20px;">
                <textarea rows="5" id="textarea"></textarea>
            </div>
        </div>
        <div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;">
                <b>Events Log:</b>
                <div id="dragStartLog">
                </div>
                <div id="dragEndLog">
                </div>
                <br />
                <b>Note:</b>
                <br />
                Dragging of "Community" is disabled.
                <br />
                Dropping of "Forum" is disabled.
        </div>
    </div>
</body>
</html>

Author

Posts

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