jQWidgets Forums
Forum Replies Created
-
Author
-
August 10, 2012 at 12:27 am in reply to: Tab header distorts when hidden then shown Tab header distorts when hidden then shown #6716
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
August 9, 2012 at 3:00 pm in reply to: Tab header distorts when hidden then shown Tab header distorts when hidden then shown #6707I 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
Do you know if this option is on the drawing board for future release?
Thanks,
Tim
July 12, 2012 at 10:21 pm in reply to: Row details with jqxTabs – error after update Row details with jqxTabs – error after update #5927Sorry – 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 }); } }
June 29, 2012 at 3:51 am in reply to: Validation in popup editing jqxWindow Validation in popup editing jqxWindow #5476Thanks 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
June 29, 2012 at 3:22 am in reply to: Validation in popup editing jqxWindow Validation in popup editing jqxWindow #5473One 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
June 29, 2012 at 2:56 am in reply to: Validation in popup editing jqxWindow Validation in popup editing jqxWindow #5472Thanks 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
Ahhhhhh…..so easy and works great. Thanks!
Tim
June 26, 2012 at 2:54 am in reply to: Row details not showing after update Row details not showing after update #5326Hi Peter,
I changed two lines of code and now it works great! Thanks again!
Tim
June 22, 2012 at 6:54 pm in reply to: Multiple DropDownLists in Popup editor Multiple DropDownLists in Popup editor #5245Ok – 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
June 22, 2012 at 3:43 pm in reply to: Multiple DropDownLists in Popup editor Multiple DropDownLists in Popup editor #5243Thank 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
-
AuthorPosts