jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 6,496 through 6,510 (of 6,536 total)

Author

Posts

August 23, 2012 at 9:51 am in reply to: When we have to use jqxDataAdapter When we have to use jqxDataAdapter #7041

Participant

Hello zbrong,

Use jqxDataAdapter when you have data binding scenarios. It is always used with the widgets jqxGrid, jqxChart, jqxListBox, jqxDropDownList and jqxComboBox. Read more about jqxDataAdapter here:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 23, 2012 at 6:33 am in reply to: Column width Column width #7037

Dimitar

Participant

Hello Tom,

There is no way of setting a fixed width to the columns in jqxChart. The width is dependant on the width of the div you create the chart from.

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 23, 2012 at 6:14 am in reply to: How to pin a single row How to pin a single row #7036

Dimitar

Participant

Hello midi,

Unfortunately, there is no such functionality.

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 23, 2012 at 6:07 am in reply to: popup box as modal window popup box as modal window #7035

Dimitar

Participant

Hello Nick,

Here is an 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 Window 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.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxwindow").jqxWindow({ height: 150, width: 300, theme: 'summer', isModal: true, autoOpen: false });
                $("#popup").click(function () {
                    $("#jqxwindow").jqxWindow('open');
                });
                $("#button_input").click(function () {
                    var T = $("#text_input").val();
                    $("#textbox").text(T);
                    $("#jqxwindow").jqxWindow('close');
                });
                $("#button_no").click(function () {
                    $("#jqxwindow").jqxWindow('close');
                });
            });
        </script>
        <div id='jqxwindow'>
            <div>
                Header</div>
            <div>
                Please enter some text for the textbox:
                <input type="text" id="text_input" />
                <br />
                Save the data?
                <input type="button" value="Yes" id="button_input" />
                <input type="button" value="No" id="button_no" />
            </div>
        </div>
        <button id="popup">
            Popup window!</button>
        <p>
            Textbox:</p>
        <div id="textbox" style="width: 300px; height: 300px; border: 2px solid green;">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 23, 2012 at 5:32 am in reply to: Dropdownlist in a popup table Dropdownlist in a popup table #7034

Dimitar

Participant

Hello rkmoray,

This is due to the inappropriate width of your popupWindow and its table. The table is much wider, that is why it doesn’t show all its items within the window. Try these widths:

            $("#popupWindow").jqxWindow({ width: 500, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });

and

                <table style="width: 500px; height: 400px;">

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 22, 2012 at 8:17 am in reply to: Dynamic tab creation with Image Dynamic tab creation with Image #7011

Dimitar

Participant

Hi anilsaxena,

The .html() method replaces the html code of the title element. This means it also removes the information about the tab’s close button. This is also the case for setTitleAt. The only way to change a tab title and its contents and retain the close button is to remove the old tab and replace it with a new one. So, your script should be like this:

    <script type="text/javascript">
        $(document).ready(function () {
            $('#tabDiv').jqxTabs({
                showCloseButtons: true
            });
            $('#tabDiv').jqxTabs('addLast', 'Second', 'Second Page');
            $("#tabDiv").jqxTabs('removeLast');
            $('#tabDiv').jqxTabs('addLast', 'Second Changed', 'Second Page Changed');
        });
    </script>

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 22, 2012 at 7:22 am in reply to: Dynamic tab creation with Image Dynamic tab creation with Image #7004

Dimitar

Participant

Hi anilsaxena,

Please check the following example from the demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/closebuttons.htm?classic

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 22, 2012 at 5:46 am in reply to: Dynamic tab creation with Image Dynamic tab creation with Image #6984

Dimitar

Participant

Hello anilsaxena,

Here is an example. By pressing a button, a jqxTabs is dynamically created with images as titles. By pressing another button, one of the images is dynamically changed.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Tabs Sample</title>
    <link rel="stylesheet" href="../../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="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxtabs dynamically by pressing a button
            $("#tab_create").click(function () {
                $("body").append('<div id="jqxtabs"><ul style="margin-left: 20px;"><li><img src="../custom_images/IE.png" /></li><li><img src="../custom_images/Firefox.png" /></li><li><img src="../custom_images/Opera.png" /></li></ul><div>Internet Explorer</div><div>Firefox</div><div>Opera</div></div>');
                $('#jqxtabs').jqxTabs({ width: 550, height: 150 });
                $("#tab_create")[0].disabled = true;
            });
            // change a tab title image dynamically by pressing a button
            $("#images_change").click(function () {
                $("#jqxtabs").find("ul:first").find("li:first").html('<img src="../custom_images/Firefox.png" />');
                $("#images_change")[0].disabled = true;
            });
        });
    </script>
</head>
<body class='default'>
    <button id="tab_create">
        Create a tab</button>
    <button id="images_change">
        Change tab titles to images</button>
</body>
</html>

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 21, 2012 at 7:37 am in reply to: Control tree from link in splitter Control tree from link in splitter #6922

Dimitar

Participant

Hello txspiderman,

Here is how to have the first list item selected and opened when the page is loaded. Its text will be shown on the right. The example is based on the one in the demo.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is demonstrated how to create a basic navigation
        with jqxTree and jqxSplitter. </title>
    <link rel="stylesheet" href="../../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="../../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/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'classic';
            // Create jqxTree
            $('#jqxTree').jqxTree({ theme: theme, height: '100%', width: '100%' });
            $("#splitter").jqxSplitter({ theme: theme, width: 650, height: 400, panels: [{ size: 250}] });
            $('#jqxTree').bind('select', function (event) {
                $("#TextContent").html("<div style='margin: 10px;'>" + event.args.element.id + "</div>");
            });
            //finds all the li elements in the jqxTree
            var Desc = $("#jqxTree").find("li");
            // enables and selects the first item
            $('#jqxTree').jqxTree('enableItem', Desc[0]);
            $('#jqxTree').jqxTree('selectItem', Desc[0]);
        });
    </script>
</head>
<body class='default'>
    <div id="splitter">
        <div>
            <div style="border: none;" id='jqxTree'>
                <ul>
                    <li id="Mail" item-expanded='true'>
                        <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' /><span
                            item-title="true">Mail</span>
                        <ul>
                            <li id="Calendar" item-expanded='true'>
                                <img style='float: left; margin-right: 5px;' src='../../images/calendarIcon.png' /><span
                                    item-title="true">Calendar</span> </li>
                            <li id="Contacts">
                                <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span
                                    item-title="true">Contacts</span> </li>
                            <li id="Inbox">
                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                    item-title="true"> <span>Inbox</span><span style='color: Blue;'> (3)</span></span>
                                <ul>
                                    <li id="jQWidgets">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">jQWidgets</span>
                                        <ul>
                                            <li id="Admin">
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Admin</span> </li>
                                            <li id="Corporate">
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Corporate</span> </li>
                                            <li id="Finance">
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Finance</span> </li>
                                            <li id="Other">
                                                <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                                    item-title="true">Other</span> </li>
                                        </ul>
                                    </li>
                                    <li id="Personal">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Personal</span> </li>
                                </ul>
                            </li>
                            <li id="Deleted Items" item-expanded='true'>
                                <img style='float: left; margin-right: 5px;' src='../../images/recycle.png' /><span
                                    item-title="true"> <span>Deleted Items</span><span style='color: Blue;'> (10)</span></span>
                                <ul>
                                    <li id="Today">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Today</span> </li>
                                    <li id="Last Week">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Last Week</span> </li>
                                    <li id="Last Month">
                                        <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
                                            item-title="true">Last Month</span> </li>
                                </ul>
                                <li id="Notes">
                                    <img style='float: left; margin-right: 5px;' src='../../images/notesIcon.png' /><span
                                        item-title="true">Notes</span> </li>
                                <li id="Settings">
                                    <img style='float: left; margin-right: 5px;' src='../../images/settings.png' /><span
                                        item-title="true">Settings</span> </li>
                                <li id="Favorites">
                                    <img style='float: left; margin-right: 5px;' src='../../images/favorites.png' /><span
                                        item-title="true">Favorites</span> </li>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div id="ContentPanel">
            <div id="TextContent">
            </div>
        </div>
    </div>
</body>
</html>

Unfortunately, at this time, we do not have an API which to implement your other queries with.

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 20, 2012 at 8:55 am in reply to: How to do Nested Tabs position as center How to do Nested Tabs position as center #6887

Dimitar

Participant

Hello RajaniKantaPanda,

This issue can be solved by setting the initTabContent property and its callback function as seen in the “Integration with other widgets” part of the demo. Here is your example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Tabs Sample</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxtabs.
            var initTab = function () {
                $('#tab').jqxTabs({ width: 550, height: 150 });
            };
            var initTab_a = function () {
                $('#tab_a').jqxTabs({ width: 550, height: 150 });
            };
            var initTab_b = function () {
                $('#tab_b').jqxTabs({ width: 550, height: 150 });
            };
            var initWidgets = function (tab) {
                switch (tab) {
                    case 0:
                        initTab();
                        break;
                    case 1:
                        initTab_a();
                        break;
                    case 2:
                        initTab_b();
                        break;
                }
            }
            $('#Maintab').jqxTabs({ width: 550, height: 150, initTabContent: initWidgets });
        });
    </script>
</head>
<body class='default'>
    <div id='Maintab'>
        <ul style='margin-left: 20px;'>
            <li>Platform</li>
            <li>Peripherals</li>
            <li>Platform Software</li>
        </ul>
        <div id="tab">
            <ul style='margin-left: 20px;'>
                <li>Newly imported platforms</li>
                <li>Existing platforms</li>
                <li>Agile PH Import Status</li>
            </ul>
            <div>
                Content 1
            </div>
            <div>
                Content 2
            </div>
            <div>
                Content 3
            </div>
        </div>
        <div id="tab_a">
            <ul style='margin-left: 20px;'>
                <li>Newly Imported SubPH</li>
                <li>SubPH Import Status</li>
            </ul>
            <div>
                Content 1
            </div>
            <div>
                Content 2
            </div>
        </div>
        <div id="tab_b">
            <ul style='margin-left: 20px;'>
                <li>Newly imported platforms</li>
                <li>Agile PH Import Status</li>
            </ul>
            <div>
                Content 1
            </div>
            <div>
                Content 2
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 20, 2012 at 7:42 am in reply to: Docking in columns Docking in columns #6880

Dimitar

Participant

Hello GDHafeleUK,

Here is the solution – you should add your widgets only to the second “column”, represented by a div element. Take a look at this example based on the one in the demo. In this case, the “columns” are the div elements with ids “FirstColumn” and “SecondColumn”.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jqxDocking, jQuery Docking, jQWidgets, Default Functionality" />
    <meta name="description" content="jqxDocking is a widget which helps you to control and manage multiple windows and 
    even the layout of your page. Each window which is part of jqxDocking can be dragged around the Web page, 
    docked into docking zones, collapsed into a minimized state, expanded or pinned." />
    <title id='Description'>jqxDocking represents a widget which enables you to manage and
        layout multiple windows on a web page.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = [
                    'JavaScript Certification - Welcome to our network',
                    'Business Challenges via Web take a part',
                    'jQWidgets better web, less time. Take a tour',
                    'Facebook - you have 7 new notifications',
                    'Twitter - John Doe is following you. Look at his profile',
                    'New videos, take a look at YouTube.com'
		        ];
            var theme = 'classic';
            $('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 680, mode: 'docked' });
            $('#docking').jqxDocking('disableWindowResize', 'window1');
            $('#docking').jqxDocking('disableWindowResize', 'window2');
            $('#docking').jqxDocking('disableWindowResize', 'window3');
            $('#docking').jqxDocking('disableWindowResize', 'window4');
            $('#calendar').jqxCalendar({ theme: theme, width: 180, height: 180 });
            $('#newsTbs').jqxTabs({ theme: theme, width: 310, height: 181, selectedItem: 1 });
            $('#listbox').jqxListBox({ source: source, theme: theme, width: 310, height: 181 });
            $('#zodiak').jqxPanel({ theme: theme, width: 310, height: 180 });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="docking">
            <div id="FirstColumn">
            </div>
            <div id="SecondColumn">
                <div id="window3" style="height: 220px">
                    <div>
                        Zodiac</div>
                    <div style="overflow: hidden;">
                        <div id="zodiak">
                            <div style="padding: 3px; width: 150px; height: 110px; float: left; margin: 10px;">
                                <img src="../../images/leo.jpg" alt="Leo" title="Leo" />
                            </div>
                            <h3 style="text-align: center; color: #787878;">
                                Leo</h3>
                            <span style="font-size: 11px">Individuals born under the zodiac sign of Leo are very
                                good looking and have a healthy physique, with a broad forehead. Leo are very intelligent,
                                extremely courageous, love their freedom and live by their own rules. Indulgence
                                and extravagance is like second nature to them and they love to... </span>
                        </div>
                    </div>
                </div>
                <div id="window4" style="height: 220px;">
                    <div>
                        E-mail</div>
                    <div style="overflow: hidden;">
                        <div id="listbox">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jqWidgets
http://www.jqwidgets.com/

August 20, 2012 at 7:10 am in reply to: Problem with json & checkboxes Problem with json & checkboxes #6878

Dimitar

Participant

Hello lior,

If you wish to get the checked items, use the method getCheckedItems.

var items = $("#jqxListBox").jqxListBox('getCheckedItems');

In your case you have only one selected item and multiple checked ones. If you wish to be able to select multiple items, then you have to set the property multiple to true.

$("#jqxListBox").jqxListBox({multiple: true});

Then you may call the getSelectedItems method.

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 20, 2012 at 6:34 am in reply to: How to "destroy" a widget How to "destroy" a widget #6875

Dimitar

Participant

Hello Søren,

Here is an example which changes the widget when buttons are clicked. However, it has two different div elemets to create the two widgets. You should not have different widgets created from the same div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQuery CheckBox Sample</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#check").click(function () {
                $("#jqxradiobutton").remove(); // removes the other widget
                var found1 = $("body").find("#jqxcheckbox");
                if (found1.length == 0) { // checks if the widget has been removed
                    $("#check").before('<div id="jqxcheckbox"></div>'); // if the widget has been removed, its div is inserted in the body again
                };
                $("#jqxcheckbox").jqxCheckBox({ width: 120, height: 25 }); // creates the widget
            });
            $("#radio").click(function () {
                $("#jqxcheckbox").remove();
                var found2 = $("body").find("#jqxradiobutton");
                if (found2.length == 0) {
                    $("#check").before('<div id="jqxradiobutton"></div>');
                };
                $("#jqxradiobutton").jqxRadioButton({ width: 120, height: 25 });
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxcheckbox"></div>
    <div id="jqxradiobutton"></div>
    <button id="check">Checkbox</button>
    <button id="radio">Radio button</button>
</body>
</html>

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 20, 2012 at 5:33 am in reply to: Open calendar Up direction Open calendar Up direction #6873

Dimitar

Participant

Hello Stephen,

By default, there is no way to open the calendar in the up direction. However, you can set the property enableBrowserBoundsDetection to true. When this property is set to true, the popup calendar may open above the input, if there’s not enough space below the DateTimeInput.

$('#DateTimeInput').jqxDateTimeInput({ enableBrowserBoundsDetection: true});

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

August 17, 2012 at 4:46 pm in reply to: How to make a cell in the Grid as non editable based on cell value How to make a cell in the Grid as non editable based on cell value #6836

Dimitar

Participant

Hello DollyB,

You can’t set a dropdownlist editor in a such way and only for some of the cells in a column. You can set one editor per column as it is demonstrated in the demos.

Best Regards,
Dimitar

jqWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 15 posts - 6,496 through 6,510 (of 6,536 total)

← 1 … 433 434 435 436 →