jQWidgets Forums

Forum Replies Created

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts

  • anseltim
    Member

    Thanks for the info! I am now using style=”visibility: hidden;” when I initialize the jqxTabs component and call
    $(‘#jqxWidget’).css(‘visibility’, ‘visible’); when I want to show the component.

    Thanks again!

    Tim


    anseltim
    Member

    I was able to recreate the issue I am seeing in my code by updating your jqxTabs wizard example. All I changed in this example was to add a button to show the jqxWidget div while initially loading it with display: none (style=”display: none;”)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="keywords" content="jQuery Tabs, Tabs Widget, TabView" />
    <meta name="description" content="jqxTabs enables you to simplify input tasks by creating a series of pages with validation." />
    <title id='Description'>jqxTabs enables you to simplify input tasks by creating a series of pages with validation. </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.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" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#showTabBtn").click(function() {
    $('#jqxWidget').show();
    });
    var theme = getTheme();
    //Creating wizard module
    var wizard = (function () {
    //Adding event listeners
    var _addHandlers = function () {
    $('#usernameInput').keyup(function () {
    wizard.validate(true);
    });
    $('#usernameInput').change(function () {
    wizard.validate(true);
    });
    $('#usernameInput').change(function () {
    wizard.validate(true);
    });
    $('#passwordInput').keyup(function () {
    wizard.validate(true);
    });
    $('.nextButton').click(function () {
    wizard.validate(true);
    $('#jqxTabs').jqxTabs('next');
    });
    $('.backButton').click(function () {
    wizard.validate(true);
    $('#jqxTabs').jqxTabs('previous');
    });
    $('#acceptCheckBox').bind('change', function (event) {
    wizard.validate(true);
    });
    $('#products').bind('change', function (event) {
    wizard.validate(true);
    var selectedItems = $('#products').jqxListBox('selectedIndexes'),
    count = selectedItems.length;
    $('#orderContainer').html('');
    while (count) {
    count--;
    if (typeof selectedItems[count] !== 'undefined' &&
    selectedItems[count] !== -1) {
    $('#orderContainer').prepend('<div style="width: 190px; height: 20px;">' + wizard.config.source[selectedItems[count]].html + '</div>');
    }
    }
    });
    $('#products').bind('unselect', function (event) {
    wizard.validate(true);
    });
    };
    //Checking if any product have been selected
    var _isItemSelected = function (array) {
    var count = array.length;
    if (count === 0) {
    return false;
    }
    while (count) {
    count -= 1;
    if (array[count] !== -1 &&
    typeof array[count] !== 'undefined') {
    return true;
    }
    }
    return false;
    };
    return {
    //Listbox's source
    config: {
    source: [
    { html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/numberinput.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxNumberInput</span></div>", title: 'jqxNumberInput' },
    { html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/progressbar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxProgressBar</span></div>", title: 'jqxProgressBar' },
    { html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/calendar.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxCalendar</span></div>", title: 'jqxCalendar' },
    { html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/button.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxButton</span></div>", title: 'jqxButton' },
    { html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/dropdownlist.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxDropDownList</span></div>", title: 'jqxDropDownList' },
    { html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/listbox.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxListBox</span></div>", title: 'jqxListBox' },
    { html: "<div style='height: 20px; float: left;'><img style='float: left; margin-top: 2px; margin-right: 5px;' src='../../images/tooltip.png'/><span style='float: left; font-size: 13px; font-family: Verdana Arial;'>jqxTooltip</span></div>", title: 'jqxTooltip' }
    ]
    },
    //Initializing the wizzard - creating all elements, adding event handlers and starting the validation
    init: function () {
    $('#jqxTabs').jqxTabs({ height: 230, width: 500, theme: theme, keyboardNavigation: false });
    $('#acceptCheckBox').jqxCheckBox({ width: 250, theme: theme });
    $('#nextButtonInfo').jqxButton({ width: 50, theme: theme });
    $('#nextButtonBasket').jqxButton({ width: 50, theme: theme });
    $('#backButtonBasket').jqxButton({ width: 50, theme: theme });
    $('#backButtonReview').jqxButton({ width: 50, theme: theme });
    $("#products").jqxListBox({ source: this.config.source, width: '490px', height: '130px', theme: theme, multiple: true });
    _addHandlers();
    this.validate();
    this.showHint('Validation hints.');
    },
    //Validating all wizard tabs
    validate: function (notify) {
    if (!this.firstTab(notify)) {
    $('#jqxTabs').jqxTabs('disableAt', 1);
    $('#jqxTabs').jqxTabs('disableAt', 2);
    return;
    } else {
    $('#jqxTabs').jqxTabs('enableAt', 1);
    }
    if (!this.secondTab(notify)) {
    $('#jqxTabs').jqxTabs('disableAt', 2);
    return;
    } else {
    $('#jqxTabs').jqxTabs('enableAt', 2);
    }
    },
    //Displaying message to the user
    showHint: function (message, selector) {
    if (typeof selector === 'undefined') {
    selector = '.hint';
    }
    if (message === '') {
    message = 'You can continue.';
    }
    $(selector).html('<strong>' + message + '</strong>');
    },
    //Validating the first tab
    firstTab: function (notify) {
    var username = $('#usernameInput').val(),
    password = $('#passwordInput').val(),
    message = '';
    if (username.length < 3) {
    message += 'You have to enter valid username. <br />';
    }
    if (password.length < 3) {
    message += 'You have to enter valid password. <br />';
    }
    if (!$('#acceptCheckBox').jqxCheckBox('checked')) {
    message += 'You have to accept the terms. <br />';
    }
    if (message !== '') {
    if (notify) {
    this.showHint(message, '#hintSection');
    }
    return false;
    }
    this.showHint('You can continue.', '#hintSection');
    return true;
    },
    //Validating the second tab
    secondTab: function () {
    var products = $('#products').jqxListBox('selectedIndex');
    if (!_isItemSelected($('#products').jqxListBox('selectedIndexes'))) {
    this.showHint('You have to select at least one item.', '#hintBasket');
    return false;
    } else {
    this.showHint('You can continue.', '#hintBasket');
    }
    return true;
    }
    }
    } ());
    //Initializing the wizard
    wizard.init();
    });
    </script>
    <style type="text/css">
    #form
    {
    height: 100px;
    float: left;
    margin-top: 30px;
    margin-left: 20px;
    }
    .inputContainer
    {
    width: 150px;
    }
    .formInput
    {
    width: 150px;
    outline: none;
    }
    #hintWrapper
    {
    height: 130px;
    float: right;
    }
    #hintSection
    {
    float: left;
    margin-top: 30px;
    margin-right: 20px;
    padding: 5px;
    width: 225px;
    }
    #checkBoxWrapper
    {
    float: left;
    margin-left: 20px;
    margin-top: 30px;
    }
    #section
    {
    margin: 5px;
    }
    #sectionButtonsWrapper
    {
    float: right;
    margin-top: 30px;
    margin-right: 10px;
    width: 115px;
    }
    #hintBasket
    {
    margin-left: 20px;
    margin-top: 7px;
    float: left;
    padding: 5px;
    }
    .basket div
    {
    position: relative;
    }
    .nextButton
    {
    float: right;
    margin-left: 0px;
    }
    .backButton
    {
    float: left;
    margin-left: 10px;
    }
    #basketButtonsWrapper
    {
    float: right;
    margin-top: 30px;
    margin-right: 10px;
    width: 115px;
    }
    #selectedProductsHeader
    {
    margin-left: 20px;
    float: left;
    width: 200px;
    }
    #selectedProductsButtonsWrapper
    {
    float: right;
    margin-right: 10px;
    width: 115px;
    margin-top: 160px;
    }
    #products
    {
    border: none;
    }
    </style>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="display: none;">
    <div id='jqxTabs'>
    <ul>
    <li style="margin-left: 30px;">Personal info</li>
    <li>Shopping basket</li>
    <li>Review order</li>
    </ul>
    <div class="section">
    <div id="form">
    <div class="inputContainer">
    Username:
    <input class="formInput" type="text" id="usernameInput" /></div>
    <div class="inputContainer">
    Password:
    <input class="formInput" type="password" id="passwordInput" /></div>
    </div>
    <div id="hintWrapper">
    <div id="hintSection" class="hint">
    </div>
    </div>
    <div id="checkBoxWrapper">
    <div id="acceptCheckBox">
    I accept the terms and conditions</div>
    </div>
    <div id="sectionButtonsWrapper">
    <input type="button" value="Next" class="nextButton" id="nextButtonInfo" />
    </div>
    </div>
    <div class="section">
    <div id="products">
    </div>
    <div class="hint" id="hintBasket">
    </div>
    <div id="basketButtonsWrapper">
    <input type="button" value="Back" class="backButton" id="backButtonBasket" />
    <input type="button" value="Next" class="nextButton" id="nextButtonBasket" />
    </div>
    </div>
    <div class="section">
    <div id="selectedProductsHeader">
    <h4>Selected products</h4>
    <div id="orderContainer">
    </div>
    </div>
    <div id="selectedProductsButtonsWrapper">
    <input type="button" value="Back" id="backButtonReview" class="backButton" />
    </div>
    </div>
    </div>
    </div>
    <div>
    <button type="button" id="showTabBtn" class="btn">
    Show Tabs
    </button>
    </div>
    </body>
    </html>

    Thanks,

    Tim

    in reply to: Possible to print grid Possible to print grid #6544

    anseltim
    Member

    Do you know if this option is on the drawing board for future release?

    Thanks,

    Tim


    anseltim
    Member

    Sorry – the initrowdetails function lost some of the html formatting – reporting it again:

    var initrowdetails = function (index) {
    var tabsdiv = null;
    var instructions = null;
    var notes = null;
    tabsdiv = $.find('.tabs' + index);
    if (tabsdiv != null) {
    instructions = $.find('.instructions' + index);
    notes = $.find('.notes' + index);
    var container = $('<div style="margin: 5px;"></div>')
    container.appendTo($(instructions));
    var leftcolumn = $('<div style="float: left; width: 55%;"></div>');
    var rightcolumn = $('<div style="float: left; width: 45%;"></div>');
    container.append(leftcolumn);
    container.append(rightcolumn);
    var datarecord = dataAdapter.records[index];
    var productName = "<div style='margin: 10px;'><b>Product Name:</b> " + datarecord.productName + "</div>";
    $(leftcolumn).append(productName);
    var packaging = "<div style='margin: 10px;'><b>Packaging:</b> " + datarecord.packaging + "</div>";
    $(rightcolumn).append(packaging);
    var notescontainer = $('<div style="white-space: normal; margin: 5px;"><span>' + datarecord.instructions + '</span></div>');
    $(notes).append(notescontainer);
    $(tabsdiv).jqxTabs({ width: 600, height: 170, theme: theme });
    }
    }

    anseltim
    Member

    Thanks Peter – I am now working with the validationSuccess & validationError events that set a property allowing the user to continue or not.

    Thanks for the fast feedback – I appreciate it!

    Tim


    anseltim
    Member

    One more thing….. I have the validation popups working, but they do not stop the action – the updaterow or addrow methods are still called. What am I still missing?

    Thanks!

    Tim


    anseltim
    Member

    Thanks Peter, that did the trick.

    Now I need to validate dropdowns where the selectedIndex = -1, how do I go about doing that?

    Thanks again!

    Tim

    in reply to: Z-index of row details Z-index of row details #5327

    anseltim
    Member

    Ahhhhhh…..so easy and works great. Thanks!

    Tim


    anseltim
    Member

    Hi Peter,

    I changed two lines of code and now it works great! Thanks again!

    Tim


    anseltim
    Member

    Ok – I solved the selected value issue – I wrote a little javascript function that returns the selected index by passing in the datasource and grid field value.

    // Function to get the selected index for dropdownlist from grid value
    var getSelectedIndex = function(source, value) {
    var selectedIndex = - 1;
    for (var i = 0; i < source.totalrecords; i++) {
    if (source.records[i].name == value){
    selectedIndex = i;
    break;
    }
    }
    return (selectedIndex);
    };

    And call it like this:

    $("#customer").jqxDropDownList({ selectedIndex: getSelectedIndex(dataAdapterCustomer, dataRecord.customer), source: dataAdapterCustomer, displayMember: "name", width: 200, height: 25, theme: theme });

    Thanks,

    Tim


    anseltim
    Member

    Thank you, Peter – that worked great.

    I have another question. In the popup window for editing a row from the data grid, how do I set the selected value of the dropdownlist to what is in the grid?

    Thanks again!

    Tim

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