jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 196 through 210 (of 226 total)
  • Author
    Posts

  • Mariya
    Participant

    Hi Apeksha Singh,

    The jqxDropDownButton is not closing by itself when you click its content so in order to close it you should use the ‘close’ method. It depends on you how to use the method. You can call it when the jqxDropDownButton is clicked (as shown in our Demo) or when the content is clicked.
    When you select the selected item for the second time it is normal not to be able to fire the same event because is has already been fired and nothing would change.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    Mariya
    Participant

    Hi Casel Chen,

    In virtual mode, the data in the Grid is loaded on demand.That’s what we use for Server Paging or Server Scrolling.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    Mariya
    Participant

    Hi Kamran,

    You can try by doing the following things:
    1. Get the parent item
    2. Loop through its “items” array
    3. Use the ‘uncheckItem’ method for all of the items except for the present one.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    Mariya
    Participant

    Hi Snehal,

    Thank you for the provided feedback! We confirm the behavior and will resolve it for the next release.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    Mariya
    Participant

    Hi Casel Chen,

    Server side pagination can be implemented with virtualmode=true as shown:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverpaging.htm?web
    If you skip to set the forth parameter in the ‘export’ data method, it would export all of the rows which are loaded into the jqxGrid.
    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    Mariya
    Participant

    Hi Kamran,

    In order to get the checked items you can use the ‘getCheckedItems’ method.
    In order to access your data in JSON you can use the label, value or id members.

    Please, find an example which gets the label, value and id below:

    <!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>
    <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.9.0.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>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    var data = [
    { "id": "2",
    "parentid": "1",
    "text": "Hot Chocolate"
    }, {
    "id": "3",
    "parentid": "1",
    "text": "Peppermint Hot Chocolate"
    }, {
    "id": "4",
    "parentid": "1",
    "text": "Salted Caramel Hot Chocolate"
    }, {
    "id": "5",
    "parentid": "1",
    "text": "White Hot Chocolate"
    }, {
    "text": "Chocolate Beverage",
    "id": "1",
    "parentid": "-1"
    }, {
    "id": "6",
    "text": "Espresso Beverage",
    "parentid": "-1"
    }, {
    "id": "7",
    "parentid": "6",
    "text": "Caffe Americano"
    }, {
    "id": "8",
    "text": "Caffe Latte",
    "parentid": "6"
    }, {
    "id": "9",
    "text": "Caffe Mocha",
    "parentid": "6"
    }, {
    "id": "10",
    "text": "Cappuccino",
    "parentid": "6"
    }, {
    "id": "11",
    "text": "Pumpkin Spice Latte",
    "parentid": "6"
    }, {
    "id": "12",
    "text": "Frappuccino",
    "parentid": "-1"
    }, {
    "id": "13",
    "text": "Caffe Vanilla Frappuccino",
    "parentid": "12"
    }, {
    "id": "15",
    "text": "450 calories",
    "parentid": "13"
    }, {
    "id": "16",
    "text": "16g fat",
    "parentid": "13"
    }, {
    "id": "17",
    "text": "13g protein",
    "parentid": "13"
    }, {
    "id": "14",
    "text": "Caffe Vanilla Frappuccino Light",
    "parentid": "12"
    }]
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'id' },
    { name: 'parentid' },
    { name: 'text' }
    ],
    id: 'id',
    localdata: data
    };
    // create data adapter.
    var dataAdapter = new $.jqx.dataAdapter(source);
    // 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'}]);
    $('#jqxWidget').jqxTree({ source: records, width: '300px', theme: theme });
    $('#jqxButton').jqxButton({ width: '100px', height: '30px', theme: theme });
    $('#jqxButton').on('click', function () {
    var item = $('#jqxWidget').jqxTree('getSelectedItem');
    var label = item.label;
    var value = item.value;
    var id = item.id;
    });
    });
    </script>
    <div id='jqxWidget'>
    </div>
    <div id='jqxButton'>
    </div>
    </div>
    </body>
    </html>

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    Mariya
    Participant

    Hi Casel Chen,

    The only way to export a full data set besides current page in virtual mode is by using the ‘export’ data method. There you can have a fourth optional parameter which determines the array of rows to be exported.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    in reply to: Jqxwindow with backbone.js Jqxwindow with backbone.js #23810

    Mariya
    Participant

    Hi pushpendra,

    Make sure that your button is binded only once to the event. If you still have a problem provide us with an example and we will gladly help you.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    Mariya
    Participant

    Hi Kamran,

    Unfortunately it is not possible to have a jqxTree with radio buttons instead of checkboxes. If you have any further questions do not hesitate to contact us.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    Mariya
    Participant

    Hi rrust,

    In order to reset the page number you can use the ‘gotopage’ method.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    in reply to: getting all the parents. getting all the parents. #23670

    Mariya
    Participant

    Hi sergion,

    Please take a look at the provided example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <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.9.0.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">
    $(document).ready(function () {
    var theme = getDemoTheme();
    // Create jqxTree
    $('#jqxTree').jqxTree({ theme: theme });
    // Create jqxExpander
    $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: 'auto', theme: theme });
    $('#jqxTree').on('select', function (event) {
    if (event.args) {
    var parentElement = event.args.element;
    var parents = new Array();
    while (parentElement != null) {
    var parentItem = $("#jqxTree").jqxTree('getItem', parentElement);
    var element = parentItem.element;
    parents.push(element);
    var parentElement = parentItem.parentElement;
    }
    var parentItems = new Array();
    var parentTexts = "";
    for (var i = 1; i < parents.length; i++) {
    var item = $("#jqxTree").jqxTree('getItem', parents[i]);
    parentItems.push(item);
    parentTexts += item.label + ", ";
    }
    alert(parentTexts);
    }
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id='jqxExpander'>
    <div>
    Folders</div>
    <div id='jqxTree'>
    <ul>
    <li item-expanded='true'>
    <img style='float: left; margin-right: 5px;' src='../../images/mailIcon.png' /><span
    item-title="true">Mail</span>
    <ul>
    <li item-expanded='true'>
    <img style='float: left; margin-right: 5px;' src='../../images/calendarIcon.png' /><span
    item-title="true">Calendar</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/contactsIcon.png' /><span
    item-title="true">Contacts</span> </li>
    <li>
    <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>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">jQWidgets</span>
    <ul>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Admin</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Corporate</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Finance</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Other</span> </li>
    </ul>
    </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Personal</span> </li>
    </ul>
    </li>
    <li 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>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Today</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Last Week</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/folder.png' /><span
    item-title="true">Last Month</span> </li>
    </ul>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/notesIcon.png' /><span
    item-title="true">Notes</span> </li>
    <li>
    <img style='float: left; margin-right: 5px;' src='../../images/settings.png' /><span
    item-title="true">Settings</span> </li>
    <li>
    <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>
    </body>
    </html>

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    Mariya
    Participant

    Hi swisspen,

    Please take a look at the provided example at:http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/dragdrop.htm?web

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    Mariya
    Participant

    Hi Apeksha,

    Non-editable ComboBox is called DropDownList. Because of that I already recommended you to use it as it would be more suitable:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdropdownlist/defaultfunctionality.htm?web

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    Mariya
    Participant

    Hi Apeksha,

    Please provide us with an example.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    Mariya
    Participant

    Hi Apeksha,

    If you want just to select items and not be able to enter anything, we recommend you to use the jqxDropDownList as it would be more suitable for your needs. If you have any further questions, do not hesitate to contact us.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 15 posts - 196 through 210 (of 226 total)