jQWidgets Forums
Forum Replies Created
-
Author
-
Hi basumrinmoy,
In order to change the possible navigation options throw the keyboard you can use the formatString property. Here is an example:
<!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/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/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.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/globalization/jquery.global.js"></script></head><body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { // create a jqxDateTimeInput. $("#jqxDateTimeInput").jqxDateTimeInput({ width: '300px', height: '25px', formatString: 'yyyy' }); }); </script> <div id='jqxDateTimeInput'> </div> <br /> </div></body></html>
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comHi morfeusz,
To change the group separator you can do the following:
<!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/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); // Create jqxNumberInput $("#numericInput").jqxNumberInput({ width: '250px', height: '25px', theme: theme, groupSeparator: " ",decimalDigits:0 }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div style='margin-top: 10px;'> Number</div> <div style='margin-top: 3px;' id='numericInput'> </div> </div></body></html>
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comHi morfeusz,
The NumberInput works only with number values .Due to this fact it can not be shown as empty text box.
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comFebruary 5, 2013 at 12:07 pm in reply to: jqxDropDownList promptText jqxDropDownList promptText #14737Hi mkdodos,
I have checked whether the promptText property works with our latest version and it works as expected. Below please find a sample:
<!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/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script></head><body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); var url = "../../demos/sampledata/customers.txt"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'CompanyName' }, { name: 'ContactName' } ], id: 'id', url: url, async: false }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxDropDownList $("#jqxWidget").jqxDropDownList({ source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName",promptText:"Select", width: 200, height: 25, theme: theme }); }); </script> <div id='jqxWidget'> </div> </div></body></html>
Best Wishes,
MariyajQWidgets Team
http://www.jqwidgets.comJanuary 31, 2013 at 2:44 pm in reply to: SQL input from Slider value SQL input from Slider value #14440Hi Andy,
You can trigger the ‘change’ event of jqxSlider. That event is raised when the slider’s value is changed.
<!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/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#slider').jqxSlider({}); $('#slider').bind('change', function (event) { var value = event.args.value; $("#textInput").val(parseInt(value)); }); }); </script> </head><body class='default'> <div id='slider'> </div> <br /> <input type="text" id="textInput" /></body></html>
Best Regards,
MariyajQWidgets Team
http://www.jqwidgets.comHi hardcode,
Below is a sample which demonstrates how to disable a Button in the Button Group:
<!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/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttongroup.js"></script></head><body class='default'> <div id='content'> <script type="text/javascript"> $(document).ready(function () { // Create jqxButton widgets. $("#jqxWidget").jqxButtonGroup({ mode: 'default' }); $('#jqxWidget').jqxButtonGroup('disableAt', 2); }); </script> <div id='jqxWidget'> <button style="padding:4px 16px;" id="Left"> Left</button> <button style="padding:4px 16px;" id="Center"> Center</button> <button style="padding:4px 16px;" id="Right"> Right</button> </div> </div></body></html>
Best Regards,
MariyajQWidgets Team
http://www.jqwidgets.comHi jholcomb,
We still haven’t built Twitter Bootstrap compatible theme. I will create a new work item about that and we will consider adding the Theme in a future release.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comTo get the ID of the tag, use the Item’s Id.
var id = item.id
For example:
$('#jqxTree').bind('select', function (event) { var args = event.args; var item = $('#jqxTree').jqxTree('getItem', args.element); var id = item.id;});
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comMay 3, 2012 at 4:52 am in reply to: jqx.dataAdapter records.length jqx.dataAdapter records.length #3832Hi ehoffman62,
The downloadComplete is called when the data is loaded from the remote data source. However, at that point, the data is still not loaded and the records will return 0. To ensure that the data is loaded and records is filled with items, you need to use the loadComplete callback instead.
var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () { var length = dataAdapter.records.length; } });
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comMay 3, 2012 at 4:49 am in reply to: DropDown alphabet order in grid cell DropDown alphabet order in grid cell #3831Hi rmanev,
The DropDownList editor does not still have built-in sorting capabilities, but you can sort its items by doing the following:
{ text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177, initeditor: function (row, cellvalue, editor) { var tmpToString = Object.prototype.toString; var items = editor.jqxDropDownList('getItems'); Object.prototype.toString = function () { return this.label }; items.sort(); Object.prototype.toString = tmpToString; $.each(items, function (i) { this.index = i; }); editor.jqxDropDownList({ selectedIndex: -1 }); }},
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comMay 3, 2012 at 4:35 am in reply to: how can i do editable a dropdownlist in Grid? how can i do editable a dropdownlist in Grid? #3830Hi jose Ivan,
It is not possible to add an edit field inside the DropDownList. This is supported by the ComboBox widget, but there’s still no such editor in the Grid. The DropDownList allows you to only choose between a list of selectable items.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comMay 3, 2012 at 4:33 am in reply to: Nested Grid view(Master Details ) Nested Grid view(Master Details ) #3829Hi Sushant,
It is possible to display the row details with offset by setting the margin property of the details row.
For example:
$(“#jqxgrid”).jqxGrid(‘setrowdetails’, i, “
“, 220, hidden);
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comMay 3, 2012 at 4:28 am in reply to: List Text Posisition on Combobox List Text Posisition on Combobox #3828Hi matchday73,
I suppose that this issue has been resolved since jQWidgets 1.8, because I am unable to reproduce it with jQWidgets 2.0. The ComboBox was rendered correctly in my test app with the latest version of jQWidgets. So, as a solution I suggest you to download and update the version of jQWidgets that you use.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comFebruary 27, 2012 at 4:07 pm in reply to: Appending Child Nodes to a panel widget Appending Child Nodes to a panel widget #2464Hi ayan,
You can use the jqxPanel’s ‘append’ and ‘prepend’ methods.
For example:
$('#Events').jqxPanel('prepend', '<div style="margin-top: 5px">Expanded'</div>');
Best Regards,
George TodorovjQWidgets Team
http://www.jqwidgets.comJanuary 25, 2012 at 10:12 am in reply to: Problem with splitter content Problem with splitter content #1889Hi Mahesh Babu,
Thank you for the feedback.
I was able to reproduce the issue and created a new work item about it. This is an issue in the jqxTree widget regarding its scrolling. When the scrollbar dissapears, the Tree must automatically scrolls its contents to left. We will fix the reported issue in the next release which will be available in less than a week. I will update this thread when the new version is uploaded.
Your feedback is greatly appreciated.
Best Wishes,
Peter Stoevhttp://www.jqwidgets.com
jQWidgets Team -
AuthorPosts