jQWidgets Forums
Forum Replies Created
-
Author
-
August 29, 2012 at 8:02 am in reply to: Issue with Grid and modal window Issue with Grid and modal window #7234
Hello Sushma,
Here is an example on how to set the focus on the window.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This example shows how to create a Grid from Array data. </title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <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/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.selection.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = new Array(); 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" ]; for (var i = 0; i < 100; 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; data[i] = row; } var source = { localdata: data, datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (data) { } }); $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, selectionmode: 'singlecell', editable: true, editmode: 'dblclick', 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' } ] }); $("#jqxwindow").jqxWindow({ height: 90, width: 200, theme: 'classic', isModal: true, autoOpen: false }); $("#jqxgrid").bind("celldoubleclick", function (event) { var column = event.args.column; var rowindex = event.args.rowindex; var cellvalue = $('#jqxgrid').jqxGrid('getcellvalue', rowindex, column.datafield); if (cellvalue.length > 5) { $("#jqxwindow").jqxWindow('open'); setTimeout(function () { $("#inputField").focus(); }, 100); }; }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> <div id="jqxwindow"> <div> Header</div> <div id='content'> <input id='inputField' type="text" /></div> </div> </div></body></html>
We also recommend using the latest version of jqWidgets.
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/Hi fgaonet,
Here is how to show an empty string instead of a NaN value using cellsrenderer:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Grid populated from JSON.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <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/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.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript"> $(document).ready(function () { var url = "beverages.txt"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'name' }, { name: 'type' }, { name: 'calories' }, { name: 'totalfat' }, { name: 'protein' }, ], id: 'id', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); // if a cell value is NaN, the customCellsrenderer shows it as an empty string var customCellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) { if (isNaN(value)) { return ''; }; }; $("#jqxgrid").jqxGrid( { width: 920, autoheight: true, source: dataAdapter, selectionmode: 'singlecell', editable: true, editmode: 'click', columns: [ { text: 'Name', datafield: 'name', width: 250 }, { text: 'Beverage Type', datafield: 'type', width: 250 }, { text: 'Calories', datafield: 'calories', width: 180, columntype: 'numberinput', cellsrenderer: customCellsrenderer }, { text: 'Total Fat', datafield: 'totalfat', width: 120 }, { text: 'Protein', datafield: 'protein', width: 120 } ] }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div></body></html>
And here is the JSON date in beverages.txt:
[{ "id": "1", "name": "Hot Chocolate", "type": "Chocolate Beverage", "calories": "370", "totalfat": "16g", "protein": "14g" }, { "id": 2, "name": "Peppermint Hot Chocolate", "type": "Chocolate Beverage", "calories": "NaN", "totalfat": "16g", "protein": "13g"}, { "id": "3", "name": "Salted Caramel Hot Chocolate", "type": "Chocolate Beverage", "calories": "450", "totalfat": "16g", "protein": "13g"}]Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/August 29, 2012 at 5:47 am in reply to: Possibility to make a set of rows non editable in an editable grid Possibility to make a set of rows non editable in an editable grid #7228Hello Sushma,
Here is an example that shows you how to disable the editing of some rows – in this case the first, the third and the fifth.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This example shows how to create a Grid from Array data. </title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <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/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.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = new Array(); 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" ]; for (var i = 0; i < 100; 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; data[i] = row; } var source = { localdata: data, datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (data) { } }); // cancels the editing of desired rows var beginedit = function (row, datafield, columntype) { if ((row == 1) || (row == 3) || (row == 5)) { return false; }; }; $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, editable: true, editmode: 'dblclick', selectionmode: 'singlecell', columns: [ { text: 'First Name', datafield: 'firstname', width: 100, cellbeginedit: beginedit }, { text: 'Last Name', datafield: 'lastname', width: 100, cellbeginedit: beginedit }, { text: 'Product', datafield: 'productname', width: 180, cellbeginedit: beginedit }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellbeginedit: beginedit }, { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2', cellbeginedit: beginedit }, { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2', cellbeginedit: beginedit } ] }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div></body></html>
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/Hello fgaonet,
JqxMaskedInput cannot be used to edit a cell in jqxGrid. However, you can use jqxNumberInput for ths purpose. Please, check out the demo jqxGrid – Editing:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellediting.htm?classic
In the demo, the columns Quantity and Price have number-only input.
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/August 28, 2012 at 5:23 am in reply to: How to remove white background. How to remove white background. #7179Hi homepagestore,
Here is how the style should be implemented:
<!DOCTYPE html><html lang="en"><head> <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" /> <meta name="description" content="The jqxTree displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property." /> <title id='Description'>jQuery Tree with Context Menu.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <style type="text/css"> #jqxTree { background-image: url(../../custom_images/leaves-texture.jpg); } #jqxTree .jqx-widget-content { background-color: transparent; } </style> <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/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/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); // Create jqxTree $('#jqxTree').jqxTree({ theme: theme, height: '450px', width: '250px' }); var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', theme: theme, height: '56px', autoOpenPopup: false, mode: 'popup' }); var clickedItem = null; // open the context menu when the user presses the mouse right button. $("#jqxTree li").live('mousedown', function (event) { var target = $(event.target).parents('li:first')[0]; var rightClick = isRightClick(event); if (rightClick && target != null) { $("#jqxTree").jqxTree('selectItem', target); var scrollTop = $(window).scrollTop(); var scrollLeft = $(window).scrollLeft(); contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop); return false; } }); $("#jqxMenu").live('itemclick', function (event) { var item = $(event.args).text(); switch (item) { case "Add Item": var selectedItem = $('#jqxTree').jqxTree('selectedItem'); if (selectedItem != null) { $('#jqxTree').jqxTree('addTo', { label: 'Item' }, selectedItem.element); } break; case "Remove Item": var selectedItem = $('#jqxTree').jqxTree('selectedItem'); if (selectedItem != null) { $('#jqxTree').jqxTree('removeItem', selectedItem.element); } break; } }); // disable the default browser's context menu. $(document).bind('contextmenu', function (e) { if ($(e.target).parents('.jqx-tree').length > 0) { return false; } return true; }); function isRightClick(event) { var rightclick; if (!event) var event = window.event; if (event.which) rightclick = (event.which == 3); else if (event.button) rightclick = (event.button == 2); return rightclick; } }); </script></head><body class='default'> <div id='jqxWidget'> <div id='jqxTree'> <ul> <li id='home'><a href="http://beecreekumc.org/#/home" alt="Go to Home Page">Home</a></li> <li><a href="http://beecreekumc.org/#/about-us" alt="Go to About Us page">About Us</a></li> <li><a href="http://beecreekumc.org/#/calendarnews" alt="Go to Calendar News page">Calendar/News</a></li> <li><a href="http://beecreekumc.org/#/worship" alt="Go to Worship Services page">Worship</a></li> <li><a href="http://beecreekumc.org/#/children-preschool" alt="Go to Children and Preschool page"> Children & Preschool</a></li> <li><a href="http://beecreekumc.org/#/youth" alt="Go to Youth Page">Youth</a></li> <li id='home' item-selected='true'>Adult Ministries <ul> <li item-selected='true'>Adult Ministries</li> <li><a href="http://beecreekumc.org/#/adult-ministries/adult-studies" alt="Go to Adult Studies page"> Adult Studies</a></li> <li item-selected='true'> <img src="images/active.jpg" width="16" height="9"> Stephen Ministries</li> <li><a href="http://beecreekumc.org/#/adult-ministries/mens-ministry" alt="Go to Men's Ministry page"> Men's Ministry</a></li> <li><a href="http://beecreekumc.org/#/adult-ministries/womens-ministry" alt="Go to Women's Ministry page"> Women's Ministry</a></li> <li><a href="http://beecreekumc.org/#/adult-ministries/prayer-shawl-ministry" alt="Go to Prayer Shawl Ministry page"> Prayer Shawl Ministry</a></li> <li><a href="http://beecreekumc.org/#/adult-ministries/hospital-visitation-team" alt="Go to Hospital Visitation Team page">Hospital Visitation Team</a></li> <li><a href="http://beecreekumc.org/#/adult-ministries/small-groups" alt="Go to Small Groups page"> Small Groups</a></li> <li><a href="http://beecreekumc.org/#/adult-ministries/get-connected-at-bcumc" alt="Go to Get Connected at Bee Creek UMC page"> Get Connected at BCUMC</a></li> </ul> </li> <li><a href="http://beecreekumc.org/#/outreachmissions" alt="Go to Out Reach Missions page"> Outreach/Missions</a></li> </ul> </div> </div></body></html>
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/August 27, 2012 at 10:08 am in reply to: Is there a default row displaying after initializing the grid? Is there a default row displaying after initializing the grid? #7164Hello midi,
Can you please send us your entire page source code, so that we can determine the exact reason for the issue.
Best Regards,
DimitarjqWidgets team,
http://www.jqwidgets.com/Hello Mark,
Here is an example that answers your question:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>In order to enter in edit mode, click any of the 'Edit' buttons. To save the changes, click the 'Save' button in the popup dialog. To cancel the changes click the 'Cancel' button in the popup dialog.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <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/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.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.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="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../demos/jqxgrid/generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); // prepare the data var data = generatedata(200); var source = { localdata: data, datatype: "array", updaterow: function (rowid, rowdata) { // synchronize with the server - send update command } }; // initialize the input fields. $("#firstName").addClass('jqx-input'); $("#lastName").addClass('jqx-input'); $("#product").addClass('jqx-input'); $("#firstName").width(150); $("#firstName").height(23); $("#lastName").width(150); $("#lastName").height(23); $("#product").width(150); $("#product").height(23); if (theme.length > 0) { $("#firstName").addClass('jqx-input-' + theme); $("#lastName").addClass('jqx-input-' + theme); $("#product").addClass('jqx-input-' + theme); } $("#quantity").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true }); $("#price").jqxNumberInput({ width: 150, height: 23, theme: theme, spinButtons: true }); var dataAdapter = new $.jqx.dataAdapter(source); var editrow = -1; var imagerenderer = function () { return '<img style="margin-left: 5px;" src="../images/icon-right.png"/>'; } // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, pageable: true, autoheight: true, columns: [ { text: 'Edit', datafield: 'edit', width: 50, cellsrenderer: imagerenderer }, { text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 190 }, { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' }, { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' } ] }); // bind cellclick to grid $("#jqxgrid").bind('cellclick', function (event) { if (event.args.columnindex == 0) { var scrollTop = $(window).scrollTop(); var scrollLeft = $(window).scrollLeft(); editrow = event.args.rowindex; var rowsheight = $("#jqxgrid").jqxGrid('rowsheight'); var top = $("#jqxgrid").offset().top + (2 + editrow) * rowsheight; var left = $("#jqxgrid").offset().left; $("#jqxmenu").jqxMenu('open', left + 5 + scrollLeft, top + 5 + scrollTop); }; }); // bind itemclick to menu $("#jqxmenu").bind('itemclick', function (e) { var ET = $(e.args).text(); if (ET == "Edit") { // open the popup window when the user clicks Edit. var offset = $("#jqxgrid").offset(); $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} }); // get the clicked row's data and initialize the input fields. var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); $("#firstName").val(dataRecord.firstname); $("#lastName").val(dataRecord.lastname); $("#product").val(dataRecord.productname); $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity }); $("#price").jqxNumberInput({ decimal: dataRecord.price }); // show the popup window. $("#popupWindow").jqxWindow('show'); } else if (ET == "Delete") { // delete the row if the user clicks Delete var rowid = $('#jqxgrid').jqxGrid('getrowid', editrow); $('#jqxgrid').jqxGrid('deleterow', rowid); }; $("#jqxmenu").jqxMenu('close'); }); // initialize the menu, popup window and buttons. var contextMenu = $("#jqxmenu").jqxMenu({ autoCloseOnClick: false, width: '100px', height: '60px', autoOpenPopup: false, mode: 'popup' }); $("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#Cancel").jqxButton({ theme: theme }); $("#Save").jqxButton({ theme: theme }); // update the edited row when the user clicks the 'Save' button. $("#Save").click(function () { if (editrow >= 0) { var row = { firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(), quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal')) }; $('#jqxgrid').jqxGrid('updaterow', editrow, row); $("#popupWindow").jqxWindow('hide'); } }); }); </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 id='jqxmenu'> <ul> <li>Edit</li> <li>Delete</li> </ul> </div> <div id="popupWindow"> <div> Edit</div> <div style="overflow: hidden;"> <table> <tr> <td align="right"> First Name: </td> <td align="left"> <input id="firstName" /> </td> </tr> <tr> <td align="right"> Last Name: </td> <td align="left"> <input id="lastName" /> </td> </tr> <tr> <td align="right"> Product: </td> <td align="left"> <input id="product" /> </td> </tr> <tr> <td align="right"> Quantity: </td> <td align="left"> <div id="quantity"> </div> </td> </tr> <tr> <td align="right"> Price: </td> <td align="left"> <div id="price"> </div> </td> </tr> <tr> <td align="right"> </td> <td style="padding-top: 10px;" align="right"> <input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /> </td> </tr> </table> </div> </div> </div></body></html>
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/August 27, 2012 at 7:11 am in reply to: How to remove white background. How to remove white background. #7162Hello homepagestore,
Add this style to your project:
<style type="text/css"> #jqxTree { background-image: url(../custom_images/leaves-texture.jpg); } #jqxTree .jqx-widget-content { background-color: transparent; } </style>
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/August 27, 2012 at 6:35 am in reply to: Animation speed for expandItem and collapseItem Animation speed for expandItem and collapseItem #7161Hello rfladebo2,
You can control the speed of expandItem and collapseItem by setting the properties animationShowDuration and animationHideDuration. For example:
$(‘#jqxWidget’).jqxTree({ source: records, width: ‘300px’, theme: theme, animationShowDuration: 1000, animationHideDuration: 1000 });
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/August 27, 2012 at 6:24 am in reply to: Very simple but it doest not work Very simple but it doest not work #7160Hello franck,
You just have to do a slight reorder of your divs to make your layout show properly. Here is how:
<!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" /> <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/jqxdockpanel.js"></script> <script type="text/javascript"> $(document).ready(function () { // Create jqxDockPanel var theme = $.data(document.body, 'theme'); if (theme == null || theme == undefined) theme = 'classic'; $("#jqxDockPanel").jqxDockPanel({ width: 800, height: 600, theme: theme, lastchildfill: false }); $("#jqxDockPanel div").css('color', 'white'); $("#jqxDockPanel").jqxDockPanel('render'); }); </script></head><body class='default'> <div id="jqxWidget" style="width: 800px; height: 600px; font-size: 13px; font-family: Verdana;"> <div id='jqxDockPanel'> <div id='first' dock='top' style='height: 150px; background: #486974;'> <span>Frist</span> </div> <div id='fourth' dock='bottom' style='height: 150px; background: #0000FF;'> <span>Fourth</span> </div> <div id='second' dock='left' style='width: 200px; background: #368ba7;'> <span>Second</span> </div> <div id='third' dock='right' style='width: 600px; background: #df7169;'> <span>Third</span> </div> </div> </div></body></html>
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/Hello GD,
Here is an example based on the one in the jqxDocking demo – Knockout. There are four panels on a row and when you add another one, it is on a new row. Note this line:
$(el).css('width', '25%');It sets the width of the elements to be 25% of the overall width. If you have five elements per row, use 20% and so on.
The whole 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> <title id='Description'>Integration of jqxDocking with Knockout. Type something in the text fields and press the Add button.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../../scripts/knockout-2.1.0.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script></head><body class='default'> <div id="content"> <script type="text/javascript"> $(document).ready(function () { var theme = 'classic'; 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: 'Franklin', credits: 250 }, { name: 'Mario', credits: 5800 }, { name: 'Marko', credits: 1700 }, { name: 'Jacob', credits: 1200}]); 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', '25%'); } //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 method handles adding a new person (when the user click on the Add button) this.addPerson = function () { if (this.people().length < 10) { if (this.personName() && this.personCredits()) { this.people.push({ name: this.personName(), credits: this.personCredits() }); } } } //This custom render takes care of adding new windows this.buildWindow = function (element) { var el = getDOMElement(element); if (sectionsCount < maxSections) { handleSection(el); handleWindow($(el).children('.knockout-window')); } else { handleWindow($(el).children('.knockout-window')); $(el).remove(); } } }; ko.applyBindings(new PeopleModel()); $('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 1030, mode: 'docked' }); $('#Add').jqxButton({ theme: theme }); }); </script> <div id='jqxWidget'> <input type="text" data-bind="value: personName" /> <input type="text" data-bind="value: personCredits" /> <input id="Add" type="button" data-bind="click: addPerson" value="Add" /> <div id="docking" data-bind="template: { foreach: people, afterRender: buildWindow }"> <div class="knockout-section"> <div class="knockout-window"> <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>
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/Hello wwhalen,
Here is an example in which there is a JSON tree. By clicking two buttons you can either expand the first element or expand a selected element.
<!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> <title id='Description'>In this demo the jqxTree is built from JSON data.</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/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/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script></head><body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); var data = [ { "id": "2", "parentid": "1", "text": "Hot Chocolate" }, { "id": "3", "parentid": "1", "text": "Peppermint Hot Chocolate" }, { "id": "4", "parentid": "1", "text": "Salted Caramel Hot Chocolate" }, { "id": "5", "parentid": "1", "text": "White Hot Chocolate" }, { "text": "Chocolate Beverage", "id": "1", "parentid": "-1" }, { "id": "6", "text": "Espresso Beverage", "parentid": "-1" }, { "id": "7", "parentid": "6", "text": "Caffe Americano" }, { "id": "8", "text": "Caffe Latte", "parentid": "6" }, { "id": "9", "text": "Caffe Mocha", "parentid": "6" }, { "id": "10", "text": "Cappuccino", "parentid": "6" }, { "id": "11", "text": "Pumpkin Spice Latte", "parentid": "6" }, { "id": "12", "text": "Frappuccino", "parentid": "-1" }, { "id": "13", "text": "Caffe Vanilla Frappuccino", "parentid": "12" }, { "id": "15", "text": "450 calories", "parentid": "13" }, { "id": "16", "text": "16g fat", "parentid": "13" }, { "id": "17", "text": "13g protein", "parentid": "13" }, { "id": "14", "text": "Caffe Vanilla Frappuccino Light", "parentid": "12" }] // prepare the data var source = { datatype: "json", datafields: [ { name: 'id' }, { name: 'parentid' }, { name: 'text' } ], id: 'id', localdata: data }; // create data adapter. var dataAdapter = new $.jqx.dataAdapter(source); // perform Data Binding. dataAdapter.dataBind(); // get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter // specifies the mapping between the 'text' and 'label' fields. var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]); $('#jqxWidget').jqxTree({ source: records, width: '300px', theme: theme }); $("#FirstExpandB").click(function (event) { var FE_search = $("#jqxWidget").find("li"); var FE = FE_search[0]; $("#jqxWidget").jqxTree('expandItem', FE); }); $("#SelExpandB").click(function () { var selectedItem = $('#jqxWidget').jqxTree('selectedItem'); $("#jqxWidget").jqxTree('expandItem', selectedItem.element); }); }); </script> <div id='jqxWidget'> </div> <button id="FirstExpandB"> Expand the first item</button> <button id="SelExpandB"> Expand selected item</button> </div></body></html>
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/August 24, 2012 at 6:38 am in reply to: How to resize window automaticaly when browser size change How to resize window automaticaly when browser size change #7084Hi Pascal,
You should add a width: 50% value to the divs which represent the columns. This example illustrates the solution:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>jQuery jqxDocking Sample</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" /> <style type="text/css"> .InnerDivs { width: 50%; } </style> <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/jqxdocking.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript"> $(document).ready(function () { // Create jqxDocking $("#docking").jqxDocking({ width: '100%', theme: 'classic', orientation: 'horizontal' }); }); </script></head><body class='default'> <div id="docking"> <div class="InnerDivs"> <div id="window1"> <div> Header 1</div> <div> Content 1</div> </div> <div id="window2"> <div> Header 2</div> <div> Content 2</div> </div> </div> <div class="InnerDivs"> <div id="window3"> <div> Header 3</div> <div> Content 3</div> </div> <div id="window4"> <div> Header 4</div> <div> Content 4</div> </div> </div> </div></body></html>
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/Hello Sam,
Here is how the ‘itemclick’ event should look like, based on the same example from the demo.
$("#jqxWidget").bind('itemclick', function (event) { var txt = $(event.args).text(); if (txt === 'Hot Chocolate') { // this also works - if (event.args.id == 2) window.location = 'http://en.wikipedia.org/wiki/Hot_chocolate'; } $("#eventLog").html("Id: " + event.args.id + ", Text: " + txt); });
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/August 24, 2012 at 5:14 am in reply to: How to resize window automaticaly when browser size change How to resize window automaticaly when browser size change #7081Hello pcatric,
You should change the width of the jqxDocking widget to a percentage, so that it stays relative to the width of the browser. For example:
$("#docking").jqxDocking({ width: '100%', theme: 'classic' });
Best Regards,
DimitarjqWidgets team
http://www.jqwidgets.com/ -
AuthorPosts