jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 16 through 30 (of 145 total)
  • Author
    Posts
  • in reply to: Events problem Events problem #23304

    support
    Participant

    Hi jondecker76,

    Unfortunately it is not possible because every event is fired on any change no matter if it is from API or from UI. If you have any further question, please do not hesitate to contact us.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    support
    Participant

    Hi ohioguy67,

    Thank you for your interest in jqxGrid. When you use the filtering menu you can only filter the date by entering it into a text box. If you want to use a calendar you can use the filter row as shown: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/filterrow.htm. Unfortunately you can not use two conditions in filter row. If you have any further questions, please do not hesitate to contact us.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    in reply to: Edit a field – CRUD Edit a field – CRUD #23298

    support
    Participant

    Hi rafmoura,

    Please take a look at the following examples:
    1.In this example it is shown how we can manipulate data at client side by CRUD. The Grid plugin provides you callback functions when you add, remove or update a row.
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/createremoveupdatedata.htm
    2. In the example in order to edit you should use the edit button which will trigger a pop-up window.
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/popupediting.htm

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    in reply to: rendered event rendered event #23297

    support
    Participant

    Hi Peter Sloth,

    If you want to use the ‘initialized’ event, you can do it before initializing the jqxTree. In other case the event would not be triggered because the initialized event because the Tree will be already initialized, in case you bind to the event after calling jqxTree’s constructor.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    in reply to: setcolumnproperty not working setcolumnproperty not working #23258

    support
    Participant

    Hi Maurizio,

    Please take a look at the “id” of the jqxGrid. In your case the Grid’s “id” is “jqxgrid” and you try to call a property in “jqxGrid”.If you have any further questions please do not hesitate to contact us.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    support
    Participant

    Hi Stephan,

    Thank you for your interest in jqxGrid. Unfortunately it is still not possible to localize the “Loading…” text but it would be in the next version.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    support
    Participant

    Hi snowyl,

    In order to change the edited rows’ font color you can do the following things:
    1. Create an Array
    2. Fill the Array with the row indexes
    3. Check whether the row has been changed or not
    4. When the row has been changed the cellsrender would change the color

    Please take a look at the following 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/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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
    var MyArray = new Array();
    $(document).ready(function () {
    var theme = getDemoTheme();
    // prepare the data
    var data = generatedata(200);
    var source =
    {
    localdata: data,
    datatype: "array",
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server - send update command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failder.
    commit(true);
    },
    datafields:
    [
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'productname', type: 'string' },
    { name: 'available', type: 'bool' },
    { name: 'quantity', type: 'number' },
    { name: 'price', type: 'number' },
    { name: 'date', type: 'date' }
    ]
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
    var inarray=false;
    for(var i=0;i<MyArray.length;i++){
    if(MyArray[i] ==row)
    {
    inarray=true;
    }
    }
    if (
    inarray==true
    ) {
    if (columnfield == "date") {
    value = dataAdapter.formatDate(value, "d");
    }
    else if (columnfield == "price") {
    value = dataAdapter.formatNumber(value, "c2");
    }
    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value + '</span>';
    }
    else {
    return defaulthtml;
    }
    }
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {
    width: 680,
    source: dataAdapter,
    editable: true,
    theme: theme,
    selectionmode: 'multiplecellsadvanced',
    columns: [
    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80, cellsrenderer: cellsrenderer },
    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80, cellsrenderer: cellsrenderer },
    { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195, cellsrenderer: cellsrenderer },
    { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, cellsalign: 'right', cellsformat: 'd',cellsrenderer: cellsrenderer,
    validation: function (cell, value) {
    if (value == "")
    return true;
    var year = value.getFullYear();
    if (year >= 2013) {
    return { result: false, message: "Ship Date should be before 1/1/2013" };
    }
    return true;
    }
    },
    { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput', cellsrenderer: cellsrenderer,
    validation: function (cell, value) {
    if (value < 0 || value > 150) {
    return { result: false, message: "Quantity should be in the 0-150 interval" };
    }
    return true;
    },
    createeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
    }
    },
    { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput', cellsrenderer: cellsrenderer,
    validation: function (cell, value) {
    if (value < 0 || value > 15) {
    return { result: false, message: "Price should be in the 0-15 interval" };
    }
    return true;
    },
    createeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ digits: 3 });
    }
    }
    ]
    });
    // events
    $("#jqxgrid").on('cellendedit', function (event) {
    var args = event.args;
    MyArray.push(args.rowindex);
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id="jqxgrid"></div>
    <div style="margin-top: 30px;">
    <div id="cellbegineditevent"></div>
    <div style="margin-top: 10px;" id="cellendeditevent"></div>
    </div>
    </div>
    </body>
    </html>

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    support
    Participant

    Hi Syai,

    Could you please, provide additional information and a sample about your issue.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    support
    Participant

    Hi Apeksha Singh,

    If you want to hide all the hints you can use the jqxvalidator’s method – “hide”. Please take a look at the provided example: $(‘#jqxValidator’).jqxValidator(‘hide’);. You can call that method whenever you need. For example, when you trigger the ‘tabclick’ event.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    support
    Participant

    Hi Apeksha Singh,

    Hints are not supposed to be hidden, if the validation has failed. They are HTML elements with absolute position displayed next to the Input with Failed Validation. In our samples we do not hide the hints, too. They are on the page, but are with lower z-index than the new displayed content in the same tabs widget.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    in reply to: Json data Json data #21538

    support
    Participant

    Hi Peter Sloth,

    In Json, you can escape special characters using backslash.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    support
    Participant

    Hi thiagoericson,

    Please take a look at the following 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/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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    // prepare the data
    var data = {};
    var firstNames =
    [
    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
    ];
    var lastNames =
    [
    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
    ];
    var productNames =
    [
    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    ];
    var priceValues =
    [
    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    ];
    var generaterow = function (i) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var price = parseFloat(priceValues[productindex]);
    var quantity = 1 + Math.round(Math.random() * 10);
    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row["productname"] = productNames[productindex];
    row["price"] = price;
    row["quantity"] = quantity;
    row["total"] = price * quantity;
    return row;
    }
    for (var i = 0; i < 10; i++) {
    var row = generaterow(i);
    data[i] = row;
    }
    var source =
    {
    localdata: data,
    datatype: "local",
    datafields:
    [
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'productname', type: 'string' },
    { name: 'quantity', type: 'number' },
    { name: 'price', type: 'number' },
    { name: 'total', type: 'number' }
    ],
    addrow: function (rowid, rowdata, position, commit) {
    // synchronize with the server - send insert command
    // call commit with parameter true if the synchronization with the server is successful
    //and with parameter false if the synchronization failed.
    commit(true);
    },
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {
    width: 500,
    height: 350,
    source: dataAdapter,
    theme: theme,
    columns: [
    { text: 'First Name', datafield: 'firstname', width: 100 },
    { text: 'Last Name', datafield: 'lastname', width: 100 },
    { text: 'Product', datafield: 'productname', width: 180 },
    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
    { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
    ]
    });
    $("#addrowbutton").jqxButton({ theme: theme });
    // create new row.
    $("#addrowbutton").on('click', function () {
    var datarow = generaterow();
    var commit = $("#jqxgrid").jqxGrid('addrow', null, {});
    var rows = $('#jqxgrid').jqxGrid('getrows');
    $('#jqxgrid').jqxGrid('selectrow',rows.length-1 );
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div style="float: left;" id="jqxgrid">
    </div>
    <div style="margin-left: 10px; float: left;">
    <div>
    <input id="addrowbutton" type="button" value="Add New Row" />
    </div>
    </div>
    </div>
    </body>
    </html>

    Firstly, you add the new row. Secondly, you should get the last added row’s index by using the ‘getrows’ method. And thirdly, you can select the row by using the ‘selectrow’ method, where we pass the index as parameter.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    in reply to: Tree selectItem Tree selectItem #21532

    support
    Participant

    Hi kzl,

    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 });
    $('#jqxTree2').jqxTree({ theme: theme });
    // Create jqxExpander
    $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: 'auto', theme: theme });
    $('#jqxExpander').jqxExpander({ showArrow: false, toggleMode: 'none', width: '300px', height: 'auto', theme: theme });
    $('#jqxTree').on('select', function (event) {
    var args = event.args;
    $('#jqxTree2').jqxTree('selectItem', $('#Calendar')[0]);
    var label = item.label;
    });
    });
    </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 id='jqxExpander2'>
    <div>
    Folders</div>
    <div id='jqxTree2'>
    <ul>
    <li 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>
    <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>
    </div>
    </body>
    </html>

    In the ‘select’ event of jqxTree we call the ‘selectitem’ method of jqxTree2 and select an item with id=Calendar. You can use the same approach for selecting other items.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    support
    Participant

    Hi Apeksha Singh,

    The first thing that we should know in order to help you is how are you navigating through the pages?
    If you want to hide all the hints you can use the jqxvalidator’s method – “hide”. Please take a look at the provided example: $(‘#jqxValidator’).jqxValidator(‘hide’);

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com


    support
    Participant

    Hi samik,

    In order to solve your issue please make sure that you have added the three needed files for the jqxTab and that path to the files’ folder is the right one:
    1. jqxcore.js
    2. jqxtabs.js
    3. jqx.base.css

    If you have any further questions, please do not hesitate to contact us.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 15 posts - 16 through 30 (of 145 total)