jQWidgets Forums
Forum Replies Created
-
Author
-
April 17, 2015 at 11:10 am in reply to: jQWidgets 3.7.1 Spin Button Issue jQWidgets 3.7.1 Spin Button Issue #69996
Hi JQWidgets Team,
Is there any updates on the above issue that has been addressed. Please provide us when this issue will be resolved.
Regards,
Mullai MalarMarch 30, 2015 at 7:01 am in reply to: jQWidgets 3.7.1 Spin Button Issue jQWidgets 3.7.1 Spin Button Issue #69300Hi JQWidgets Team,
Is there any updates on the above issue that has been addressed.
Regards,
Mullai MalarMarch 18, 2015 at 8:26 am in reply to: jQWidgets 3.7.1 Spin Button Issue jQWidgets 3.7.1 Spin Button Issue #68795Hi Peter,
Thanks for a Quick Response. We have Used jqxNumberInput in many places.
Users using Web Page is facing difficulties while changing the values [0 getting appended at last].Waiting for your Feedback, to fix the above issue…..
Regards,
Mullai MalarMarch 16, 2015 at 2:50 pm in reply to: jQWidgets 3.7.1 Spin Button Issue jQWidgets 3.7.1 Spin Button Issue #68616Hi All,
Updated Latest Version: jQWidgets v3.7.1. Previously I was using jQWidgets v3.5.0.
when I using inputMode: ‘simple’, decimalDigits: 0 mode, like this:
$(“#jqxNumberInput”).jqxNumberInput({
width: ’80′,
height: ’25px’,
decimalDigits : 0,
min: 1,
max: 16,
spinButtonsStep: 1,
inputMode: ‘simple’,
spinButtons: true,
spinMode: ‘simple’ });and select all numbers in the box, type any digit, caret will jump.
Test Scenario:
0 is set initially,
I want to type 2,
So I selected the values in box, and typed 2,
but result as 20But In jQWidgets v3.5.0, the above test Scenario resulted as 2 [what expected]
How can I resolve this issue. IS this a bug.
Regards,
Mullai MalarHi All,
Content in item1 is shown in chrome, IE.
But Content in
item2, Item3 [jqxPanel] is not shown in chrome.The below css is not recognized if the content is placed in jqxpanel.
-moz-column-count: 3;/* Safari and Chrome */
-moz-column-gap: 1.875em;
-moz-column-fill: auto;Please let me know how can i fix this issue.
Regards,
Mullai MalarPlease find the code: Content in item2 is not shown in chrome.
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Responsive Pinterest-style Layout With CSS demo by Osvaldas Valutis</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="Demo of Responsive Pinterest-style Layout With CSS" /> <meta name="robots" content="all"> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.web.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.9.1.min.js "></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.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"> $(document).ready(function () { // Create jqxPanel var theme = getDemoTheme(); $("#jqxWidget").jqxPanel({ width: '100%', height: 300, theme: theme, autoUpdate: true }); $("#item1").jqxPanel({ width: '100%', height: '260', theme: theme, sizeMode: "wrap", autoUpdate: true }); $("#item2").jqxPanel({ width: '100%', height: '260', theme: theme, sizeMode: "wrap", autoUpdate: true }); $("#item3").jqxPanel({ width: '100%', height: '260', theme: theme, sizeMode: "wrap", autoUpdate: true }); }); </script> <style> #WWW_PNL_FloatingColumns { width: 100%; /*overflow: hidden;*/ margin-bottom: -1.875em; /* 30px */ -webkit-column-count: 3; -webkit-column-gap: 1.875em; /* 30px */ -webkit-column-fill: auto; -moz-column-count: 3;/* Safari and Chrome */ -moz-column-gap: 1.875em; /* 30px */ -moz-column-fill: auto; column-count: 3; /*column-gap: 1.875em; /* 30px */ column-fill: auto; } .WWW_PNL_FloatingColumns { /* background-color: #fff; background-color: rgba( 255, 255, 255, .5 );*/ margin-bottom: 1.875em; /* 30px */ -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; } </style></head><body> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;"> <!--Content--> <div id="WWW_PNL_FloatingColumns"> <div id='item1' style="border: 1px solid red;"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa**<br /> qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq**<br /> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa**<br /> qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq**<br /> </div> <div id='item2' style="border: 1px solid red;"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa**<br /> qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq**<br /> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa**<br /> qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq**<br /> </div> <div id='item3' style="border: 1px solid red;"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa**<br /> qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq**<br /> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa**<br /> qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq**<br /> </div> </div> </div></body></html>
August 19, 2013 at 7:58 am in reply to: Docking: By default i need 4 windows to be created using knockout Docking: By default i need 4 windows to be created using knockout #27111Hi,
I need 4 windows using docking. 1st row should contain => 2 windows and 2nd row should contain => 2 windows. But the below code aligns 3 windows in 1st row.
Can you help me in making 3rd and 4th window to be placed in 2nd row.
Here is the code.
<!DOCTYPE html><html lang='en'><head> <meta name='keywords' content='jqxDocking, jQuery Docking, jQWidgets, Default Functionality' /> <meta name='description' content='jqxDocking' /> <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='../../scripts/jquery-1.9.1.min.js'></script> <script type='text/javascript' src='../../scripts/gettheme.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/globalize.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" src="../../scripts/json2.js"></script> <script type="text/javascript" src="../../scripts/knockout-2.2.1.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <style> html, body { width: 100%; height: 100%; overflow: hidden; } </style></head><body class='default'> <div id="content"> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); PeopleModel = function () { //We define observable variable for the name this.personName = ko.observable(); //We define observable variable for the credits this.personCredits = ko.observable(); //We define observable array for the pairs (name, credits) this.people = ko.observableArray([{ name: 'Window 1', credits: 'FranklinFranklin' }, { name: 'Window 2', credits: 5800 }, { name: 'Window 3', credits: 250}]); var self = this, sectionsCount = 0, windowsCount = 0, maxSections; //This method will handle the new added sections function handleSection(el) { var id = 'knockout-section-' + sectionsCount; sectionsCount += 1; el.id = id; $(el).appendTo($('#docking')); $(el).css('width', '47%'); } //This method will handle the new added windows function handleWindow(el) { var id = 'knockout-window-' + windowsCount, section = windowsCount % sectionsCount; windowsCount += 1; $(el).attr('id', id); $('#docking').jqxDocking('addWindow', id, 'docked', section, windowsCount); } function getDOMElement(args) { for (var i = 0; i < args.length; i += 1) { if (args[i].tagName && args[i].tagName.toUpperCase() === 'DIV') { return args[i]; } } return null; } //We define the docking's sections count to be equal to the startup count of the objects in the //people array. This is not mandatory but it's important to create all different sections before the docking initialization maxSections = this.people().length; //This custom render takes care of adding new windows this.buildWindow = function (element) { var el = getDOMElement(element); if (sectionsCount < maxSections) { handleSection(el); // $(el).append('<br>'); handleWindow($(el).children('.knockout-window')); } else { handleWindow($(el).children('.knockout-window')); $(el).remove(); } } }; ko.applyBindings(new PeopleModel()); $('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: '100%', height: '100%', mode: 'docked' }); $('#Add').jqxButton({ theme: theme }); }); </script> <div id='jqxWidget'> <div id="docking" data-bind="template: { foreach: people, afterRender: buildWindow }"> <div class="knockout-section"> <div class="knockout-window" style="height: 45%;"> <div> Name: <span data-bind="text: name"></span> </div> <div> Credits count: <span data-bind="text: credits"></span> </div> </div> </div> </div> </div> </div></body></html>
August 19, 2013 at 6:33 am in reply to: Docking Window is not properly aligned within splitter Docking Window is not properly aligned within splitter #27097Hi Peter ,
Thank you. the solution works.
Best Regards,
Mullai MalarAugust 14, 2013 at 10:38 am in reply to: Docking Window is not properly aligned within splitter Docking Window is not properly aligned within splitter #26800Hi Dimitar,
I enclosed id=”docking” within another div. But still the docking panels are not aligned on page load. Please find the above code.
And i notice on collapse on splitter Panel 1, The docking window “Date and Time” and “News” ie, Column 1 occupies more space when compared to Column 2. I need all windows ie, 4 windows to take uniform width. How can i achieve this.With Regards,
Mullai MalarAugust 14, 2013 at 10:27 am in reply to: Need to avoid scroller in Splitter Need to avoid scroller in Splitter #26799Hi All,
I get vertical and horizontal scroll bar when defining splitter in %. How can i avoid it
<!DOCTYPE html><html lang='en'><head><meta name='keywords' content='jqxDocking, jQuery Docking, jQWidgets, Default Functionality' /><meta name='description' content='jqxDocking' /><title id='Description'>jqxDocking represents a widget which enables you to manage andlayout multiple windows on a web page.</title><link rel='stylesheet' href='../../jqwidgets/styles/jqx.base.css' type='text/css' /><script type='text/javascript' src='../../scripts/jquery-1.9.1.min.js'></script><script type='text/javascript' src='../../scripts/gettheme.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/globalize.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 theme = '';$('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', theme: theme, orientation: 'vertical', panels: [{ size: '10%' }, { size: '90%'}] });});</script><style type="text/css">html, body{height: 100%;width: 100%;margin:0;padding:0;}#splitterContainer{height: 100%;width: 100%;}</style></head><body class='default'><div id="splitterContainer"><div id="mainSplitter"><div class="splitter-panel">Panel 1</div><div class="splitter-panel">Panel 2</div></div></div></body></html>
With Regards,
Mullai MalarAugust 14, 2013 at 10:06 am in reply to: Docking Window is not properly aligned within splitter Docking Window is not properly aligned within splitter #26795Please find the code here,
<!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='../../scripts/jquery-1.9.1.min.js'></script> <script type='text/javascript' src='../../scripts/gettheme.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/globalize.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> <style> html, body { width: 100%; height: 100%; overflow: hidden; } </style> <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 = getDemoTheme(); $('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: '100%', height: '100%', mode: 'docked' }); $('#docking').jqxDocking('disableWindowResize', 'window1'); $('#docking').jqxDocking('disableWindowResize', 'window2'); $('#docking').jqxDocking('disableWindowResize', 'window3'); $('#docking').jqxDocking('disableWindowResize', 'window4'); $('#docking').jqxDocking('hideAllCloseButtons'); $('#docking').jqxDocking('showAllCollapseButtons'); $('#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: 312, height: 180 }); $('#verticalsplitter').jqxSplitter({ width: '99%', height: '98%', orientation: 'vertical', panels: [ { size: "10%", min: "5%" }, { size: '90%', min: "5%", collapsible: false}] }); }); </script></head><body class='default'><div id='PropertiesConatiner' style='width: 100%; height: 100%;'> <div id='verticalsplitter' > <div style='border:1px solid blue'> Nav Panel 1 </div> <div id='dockingConatiner'> <div id='docking' style='border:1px solid red'> <div id='DockPanel1'> <div id='window1' style='height: 220px;'> <div> Date and Time </div> <div style='overflow: hidden;'> <div id='calendar' style='float: left; margin-right: 10px;'> </div> <h3 style='text-align: center; color: #787878;'>Sunny</h3> <div style='float: left; margin-left: 30px; text-align: center;'> <img src='../../images/sun-icon.png' alt='Sunny' /> </div> <div style='text-align: left; margin-left: 5px; margin-top: 10px; font-size: 10px; float: right; margin-right: 20px;'> Mo: 23 °C<br /> To 25 °C<br /> We: 27 °C </div> </div> </div> <div id='window2' style='height: 220px'> <div> News </div> <div style='overflow: hidden;'> <div id='newsTbs'> <ul style='margin-left: 30px'> <li>World</li> <li>Local</li> <li>Sports</li> </ul> <div> <div style='padding: 3px; margin: 10px; width: 150px; height: 84px; float: left;'> <img src='../../images/news_ie6.jpg' alt='IE6' title='IE6' /> </div> <span style='font-size: 11px;'>Microsoft is set to get a little more pushy ensuring you have an up-to-date browser and will automatically update Internet Explorer… <span style='font-size: 8px;'>(BBC)</span> </span> </div> <div> <div style='padding: 3px; margin: 10px; width: 144px; height: 81px; float: left;'> <img src='../../images/local.jpg' alt='Tennis' title='Tennis' /> </div> <span style='font-size: 11px;'>The High Court has dismissed a challenge to laws that require immigrant spouses to be able to speak English in order to live in the UK… <span style='font-size: 8px;'>(BBC)</span> </span> </div> <div> <div style='padding: 3px; margin: 10px; width: 130px; height: 73px; float: left;'> <img src='../../images/tennis.jpg' alt='Tennis' title='Tennis' /> </div> <span style='font-size: 11px;'>British number one Elena Baltacha says Judy Murray is a “fantastic' appointment as Great Britain's new Fed Cup captain… <span style='font-size: 8px;'>(BBC)</span> </span> </div> </div> </div> </div> </div> <div id='DockPanel2' > <div id='window3' style='height: 220px'> <div> Zodiac </div> <div style='overflow: hidden;'> <div id='zodiak'> <div style='padding-right: 20px;'> <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> <div id='window4' style='height: 220px;'> <div> E-mail </div> <div style='overflow: hidden;'> <div id='listbox'> </div> </div> </div> </div> </div> </div> </div> </div></body></html>
August 14, 2013 at 9:09 am in reply to: Docking Window is not properly aligned within splitter Docking Window is not properly aligned within splitter #26792Hi Dimitar,
I enclosed id=”docking” within another div. But still the docking panels are not aligned on page load.
<div> <div style='border:1px solid red'> Code.. to... be placed...</div></div>
With Regards,
Mullai MalarJuly 12, 2013 at 10:10 am in reply to: Vertical Splitter resize issue Vertical Splitter resize issue #25079Navbar
jqxChart – improved date string handling in old IE browsers. .
jqxChart – improved date string handling in old IE browsers. .
jqxSplitter is a widget based on jQuery which provides an easy
way to create dynamic layouts with resizable and collapsible panels.html, body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}$(document).ready(function () {
var rss = (function ($) {
var createWidgets = function () {
var theme = getDemoTheme();$(‘#horizontalsplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, theme: theme, orientation: ‘horizontal’, panels: [{ size: 400, min: 100, collapsible: false }, { min: 100, collapsible: true}] });
});button1
button2
July 10, 2013 at 6:29 am in reply to: Search functionality for all the columns in grid Search functionality for all the columns in grid #24909Hi Stephan,
The Above search mechanism searches the data in all the possible column and filters the grid with search result.
But, i need Search mechanism to be as,
if i search a data, the grid should group the filtered rows and highlight the corresponding rows and unmatched rows should be seen below the filtered rows.
Can you let me know, how this can be accomplished.
With Regards,
Mullai -
AuthorPosts