jQWidgets Forums
Forum Replies Created
-
Author
-
August 16, 2013 at 4:34 pm in reply to: Status of "Stacked Columns" aka Multi-line Columns Status of "Stacked Columns" aka Multi-line Columns #27004
Here’s a full working example, with XML.
XML:
<Groups> <Group> <ID>1240</ID> <Name><![CDATA[Added From Dashboard]]></Name> <Status><![CDATA[Active]]></Status> <Courses>0</Courses> <Users>0</Users> <Active>0</Active> <Warning>0</Warning> <Overdue>0</Overdue> <Completed>0</Completed> <CertMet>0</CertMet> <CertWarning>0</CertWarning> <CertNotMet>0</CertNotMet> <TotalRows>7</TotalRows> </Group> <Group> <ID>1241</ID> <Name><![CDATA[Added From Dashboard 2]]></Name> <Status><![CDATA[Active]]></Status> <Courses>0</Courses> <Users>0</Users> <Active>0</Active> <Warning>0</Warning> <Overdue>0</Overdue> <Completed>0</Completed> <CertMet>0</CertMet> <CertWarning>0</CertWarning> <CertNotMet>0</CertNotMet> <TotalRows>7</TotalRows> </Group> <Group> <ID>1238</ID> <Name><![CDATA[Cuarto Proyecto]]></Name> <Status><![CDATA[Active]]></Status> <Courses>3</Courses> <Users>4</Users> <Active>0</Active> <Warning>0</Warning> <Overdue>0</Overdue> <Completed>0</Completed> <CertMet>0</CertMet> <CertWarning>0</CertWarning> <CertNotMet>0</CertNotMet> <TotalRows>7</TotalRows> </Group> <Group> <ID>1022</ID> <Name><![CDATA[Primer Proyecto]]></Name> <Status><![CDATA[Active]]></Status> <Courses>2</Courses> <Users>3</Users> <Active>0</Active> <Warning>0</Warning> <Overdue>0</Overdue> <Completed>0</Completed> <CertMet>0</CertMet> <CertWarning>0</CertWarning> <CertNotMet>0</CertNotMet> <TotalRows>7</TotalRows> </Group> <Group> <ID>1239</ID> <Name><![CDATA[Quinto Proyecto]]></Name> <Status><![CDATA[Active]]></Status> <Courses>2</Courses> <Users>2</Users> <Active>0</Active> <Warning>0</Warning> <Overdue>0</Overdue> <Completed>0</Completed> <CertMet>0</CertMet> <CertWarning>0</CertWarning> <CertNotMet>0</CertNotMet> <TotalRows>7</TotalRows> </Group> <Group> <ID>1236</ID> <Name><![CDATA[Segundo Proyecto]]></Name> <Status><![CDATA[Active]]></Status> <Courses>2</Courses> <Users>3</Users> <Active>0</Active> <Warning>0</Warning> <Overdue>0</Overdue> <Completed>0</Completed> <CertMet>0</CertMet> <CertWarning>0</CertWarning> <CertNotMet>0</CertNotMet> <TotalRows>7</TotalRows> </Group> <Group> <ID>1237</ID> <Name><![CDATA[Tercer Proyecto]]></Name> <Status><![CDATA[Active]]></Status> <Courses>2</Courses> <Users>3</Users> <Active>0</Active> <Warning>0</Warning> <Overdue>0</Overdue> <Completed>0</Completed> <CertMet>0</CertMet> <CertWarning>0</CertWarning> <CertNotMet>0</CertNotMet> <TotalRows>7</TotalRows> </Group></Groups>
Code:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. </title> <link rel="stylesheet" href="/javascript/jqwidgets/3.0.0/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="/javascript/jquery.current.min.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxcore.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxdata.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxbuttons.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxscrollbar.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxmenu.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxcheckbox.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxlistbox.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxdropdownlist.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.sort.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.pager.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.selection.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.edit.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.filter.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/jqxgrid.columnsreorder.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/3.0.0/scripts/gettheme.js"></script> <script type="text/javascript" src="/javascript/jqueryui/1.10.0/js/jquery-ui.custom.min.js"></script> <link rel="stylesheet" href="/javascript/jqueryui/1.10.0/css/ui-lightness/jquery-ui-1.10.0.custom.css" /> <link rel="stylesheet" href="/user/includes/font-awesome/3.0.0/css/font-awesome.css" /> <script type="text/javascript"> $(document).ready(function () { var theme = 'defaultsmarteru'; var url = '/javascript/jqwidgets/demos/sampledata/groupsdashboard.xml'; var source = { cache: false, datatype: "xml", datafields: [ {name: 'ID', map: 'ID', type: 'number'}, {name: 'Name', map: 'Name', type: 'string'}, {name: 'Status', map: 'Status', type: 'string'}, {name: 'Courses', map: 'Courses', type: 'number'}, {name: 'Users', map: 'Users', type: 'number'}, {name: 'Active', map: 'Active', type: 'number'}, {name: 'Warning', map: 'Warning', type: 'number'}, {name: 'Overdue', map: 'Overdue', type: 'number'}, {name: 'Completed', map: 'Completed', type: 'number'}, {name: 'Met', map: 'CertMet', type: 'number'}, {name: 'CertWarning', map: 'CertWarning', type: 'number'}, {name: 'NotMet', map: 'CertNotMet', type: 'number'}, {name: 'TotalRows', map: 'TotalRows', type: 'number'} ], root: "Groups", record: "Group", id: 'ID', url: url, sort: function(params) { $("#groupsGrid").jqxGrid('updatebounddata'); }, filter: function(params, data) { $("#groupsGrid").jqxGrid('updatebounddata'); }, beforeprocessing: function (data) { var totalrows = $(data).find('TotalRows'); if (totalrows.length==0){ source.totalrecords = 0; } else { source.totalrecords = totalrows.first().text(); } } }; var dataAdapter = new $.jqx.dataAdapter(source); var rendergridrows = function (params) { return dataAdapter.records; } var rcr_hidden = false; //create grid $("#groupsGrid").jqxGrid ({ width: '100%', source: dataAdapter, theme: theme, altrows: true, autoheight: true, columnsresize: true, selectionmode: 'none', sortable: true, filterable: true, enablebrowserselection: true, pageable: true, virtualmode: true, rendergridrows: rendergridrows, showdefaultloadelement: false, pagesize: 20, pagesizeoptions: ['20', '50', '100', '200', '400'], columns: [ {text: 'Group', datafield: 'Name', width: '30%'}, {text: 'Status', datafield: 'Status', width: '10%'}, {text: 'Courses', datafield: 'Courses', width: '10%', cellsalign: 'right', filterable: false, sortable: false}, {text: 'Users', datafield: 'Users', width: '8%', cellsalign: 'right', filterable: false, sortable: false}, {text: 'Active', datafield: 'Active', width: '6%', cellsalign: 'right', columngroup: 'Assignments', filterable: false, sortable: false}, {text: 'Warning', datafield: 'Warning', width: '6%', cellsalign: 'right', columngroup: 'Assignments', filterable: false, sortable: false}, {text: 'Overdue', datafield: 'Overdue', width: '6%', cellsalign: 'right', columngroup: 'Assignments', filterable: false, sortable: false}, {text: 'Completed', datafield: 'Completed', width: '6%', cellsalign: 'right', columngroup: 'Assignments', filterable: false, sortable: false}, {text: 'Met', datafield: 'Met', width: '6%', cellsalign: 'right', columngroup: 'Certifications', hidden: rcr_hidden, filterable: false, sortable: false}, {text: 'Warning', datafield: 'CertWarning', width: '6%', cellsalign: 'right', columngroup: 'Certifications', hidden: rcr_hidden, filterable: false, sortable: false}, {text: 'Not Met', datafield: 'NotMet', width: '6%', cellsalign: 'right', columngroup: 'Certifications', hidden: rcr_hidden, filterable: false, sortable: false} ], columngroups: [ {text: 'Assignments', align: 'center', name: 'Assignments'}, {text: 'Certifications', align: 'center', name: 'Certifications'} ], ready: function() { $('#groupsGrid').jqxGrid('content').unbind('selectstart.jqxgrid'); } }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="groupsGrid"> </div> </div></body></html>
As provided, the code results in the column group siblings error. If you comment out/remove the Completed column, it works fine.
August 16, 2013 at 2:39 pm in reply to: Status of "Stacked Columns" aka Multi-line Columns Status of "Stacked Columns" aka Multi-line Columns #26981I’ve updated to version 3 and I’m trying to implement the column groups on my grid. I keep getting the following error: “Error: jqxGrid: Column Groups initialization Error. Please, check the initialization of the jqxGrid’s columns array. The columns in a column group are expected to be siblings in the columns array.”
Below is my grid code:
$("#grid").jqxGrid ({ width: '100%', source: dataAdapter, theme: theme, altrows: true, autoheight: true, columnsresize: true, selectionmode: 'none', sortable: true, filterable: true, enablebrowserselection: true, pageable: true, virtualmode: true, rendergridrows: rendergridrows, showdefaultloadelement: false, pagesize: 20, pagesizeoptions: ['20', '50', '100', '200', '400'], columns: [ {text: 'Group', datafield: 'Name', width: '30%'}, {text: 'Status', datafield: 'Status', width: '10%'}, {text: 'Course', datafield: 'Courses', width: '10%', cellsalign: 'right', filterable: false, sortable: false}, {text: 'Users', datafield: 'Users', width: '8%', cellsalign: 'right', filterable: false, sortable: false}, {text: 'Active', datafield: 'Active', width: '6%', cellsalign: 'right', filterable: false, sortable: false}, {text: 'Warning', datafield: 'Warning', width: '6%', cellsalign: 'right', filterable: false, sortable: false}, {text: 'Overdue', datafield: 'Overdue', width: '6%', cellsalign: 'right', filterable: false, sortable: false}, {text: 'Completed', datafield: 'Completed', width: '6%', cellsalign: 'right',filterable: false, sortable: false}, {text: 'Met', datafield: 'Met', width: '6%', cellsalign: 'right', columngroup: 'Certifications', filterable: false, sortable: false}, {text: 'Warning', datafield: 'CertWarning', width: '6%', cellsalign: 'right', columngroup: 'Certifications', filterable: false, sortable: false}, {text: 'Not Met', datafield: 'NotMet', width: '6%', cellsalign: 'right', columngroup: 'Certifications', filterable: false, sortable: false} ], columngroups: [ {text: 'Certifications', align: 'center', name: 'Certifications'} ], ready: function() { $('#groupsGrid').jqxGrid('content').unbind('selectstart.jqxgrid'); }});
Based on the error, it sounds like I’m doing something wrong in the columns specification, but I’m not sure what. It appears to match the example provided under demos.
For some reason, when I comment out the Completed column it works. There’s no difference in the Completed and Overdue columns, except for the title/datafield, but if Overdue is right next to the grouped columns it works fine.
August 16, 2013 at 1:34 pm in reply to: Status of "Stacked Columns" aka Multi-line Columns Status of "Stacked Columns" aka Multi-line Columns #26977Looks good, thanks.
June 5, 2013 at 1:28 pm in reply to: Dropdown Grid – Close on select Dropdown Grid – Close on select #22637I can’t find a reference to a close method for either the dropdown grid or the dropdown button, which is why I asked for an example.
Where’s the documentation on month and year views in 2.7/2.8? I can’t find anything regarding this in your current demo/API pages.
Hello? Can someone please clarify what that item in the release notes means? We make extensive use of the splitters, and if they’re broken in the latest release there’s no possible way we can update.
Also, what does this item mean (under the Breaking Changes section of your release notes):
– jqxSplitter works with two split panels.Will 2.8 also resolve the issue w/ the Font Awesome icon?
First off, thank you for posting the full example and explanation. It made it much clearer what you’re trying to do. Secondly. given that I started this thread on March 22, and it’s only been 1 full business day since you released 2.8, I’m still using JQWidgets v2.7. If you could please keep that in mind in your responses it would be appreciated.
Looking at your example, both sorting and filtering is turned off for the entire grid. This is not what I need from this grid. While the columns that I’m trying to add links to should not be sortable/filterable, other columns need to have this functionality. If I turn filtering back on in the grid in your example, the link no longer works (even if the specific column has filterable: false).
This is actually related to an issue we’ve brought up before. If sorting and filtering is turned off for a column, the “…Sorting, Filtering and Columns Menu elements…” still appear for that column, even though all the options are greyed out. It would seem to make more sense if the menu elements didn’t appear at all if the functionality is disabled.
Additionally, working straight from your example and only changing the link text to a Font Awesome icon, it doesn’t work at all there either. The icon appears, but clicking it does nothing.
I don’t understand your response Peter, I can do what? I presented two bugs to you in my previous post, and your response doesn’t appear related to either of them. In fact, I added the code you provided and it did not fix either of the bugs I outlined.
Well I finally got it working, but I found a weird issue. If the column isnt wide enough to display the full text of the link, the link just doesnt work. In the code snippit below, I made the link column too narrow to show the full text of “Name Link”, and added an alert to show the target.href on the columnclick. You’ll notice that hovering over the part of the link that is visible does not change the mouse icon to a hand, and clicking on it results in an alert showing undefined.
This is not ideal, given that we allow our users to resize the column widths. I’m concerned that while the initial state of the grid allows the links to work, any resizing done by the user will disable the links and cause them to raise a bug with us. Please let me know if there’s a work around, or if a bug will be opened.
And one more issue – I want to use a Font Awesome (http://fortawesome.github.com/Font-Awesome/) icon for the link, instead of text. I can get the icon to appear, but clicking on it gives the same “undefined” message as above for the target.href. This is the link code, with the FA icon:
<a style='display: inline;' href='http://www.google.ca' target='_blank'><i class='icon-question-sign blue'></i></a>
Column width issue code snippit:
$("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, pageable: true, autoheight: true, sortable: false, filterable: false, altrows: true, enabletooltips: true, editable: true, selectionmode: 'multiplecellsadvanced', columns: [ { text: '', datafield: 'ProductName', width: 50, renderer: function() { return "<div style='margin-top: 3px; margin-left: 3px;'>Name<a style='display: inline;' href='http://www.google.ca' target='_blank'>Link</a></div>"; } }, { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 }, { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 }, { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 }, { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }, ] }); $("#jqxgrid").on('columnclick', function (event) { var args = event.args; var originalClick = args.originalEvent; var target = originalClick.target; alert(target.href); if (target.href) { window.open(target.href); } });
Okay, so now the text and the link both show up properly, thank you. However, clicking the link doesnt actually do anything. I had to turn off sorting on the grid so I could actually hit the link (which is fine), and then I changed it to point to Google for testing. I even tried adding target=”_blank”, but that didn’t change anything.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. </title> <link rel="stylesheet" href="/javascript/jqwidgets/2.7.0/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="/javascript/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxcore.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxdata.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxbuttons.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxscrollbar.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxmenu.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxcheckbox.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxlistbox.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxdropdownlist.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.sort.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.pager.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.selection.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.edit.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ''; var url = "/javascript/jqwidgets/demos/sampledata/products.xml"; // prepare the data var source = { datatype: "xml", datafields: [ { name: 'ProductName', type: 'string' }, { name: 'QuantityPerUnit', type: 'int' }, { name: 'UnitPrice', type: 'float' }, { name: 'UnitsInStock', type: 'float' }, { name: 'Discontinued', type: 'bool' } ], root: "Products", record: "Product", id: 'ProductID', url: url }; var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) { if (value < 20) { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>'; } else { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>'; } } var dataAdapter = new $.jqx.dataAdapter(source, { downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, pageable: true, autoheight: true, sortable: false, altrows: true, enabletooltips: true, editable: true, selectionmode: 'multiplecellsadvanced', columns: [ { text: '', datafield: 'ProductName', width: 250, renderer: function() { return "<div style='margin-top: 3px; margin-left: 3px;'>Name<a style='display: inline;' href='http://www.google.ca' target='_blank'>Link</a></div>"; } }, { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 }, { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 }, { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 }, { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }, ] }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div></body></html>
I’m not sure what you mean Peter. You can see in the second example I posted that I am returning an HTML string, which does contain both the text and the link, and it doesn’t work. Please provide an actual working example, with text and a link, or further explanation.
I appreciate the example, but that doesnt work.
If I just move the link to the renderer, I get the link and no text (and the link is oddly-aligned). If I move them both, I get the text and no link (and the text is oddly-aligned).
I need a column header that includes both plain text (in this case an abbreviation), and a link (used as a tooltip to explain the abbreviation). They must be on the same line, completely visible, and properly lined up.
Example w/ renderer:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. </title> <link rel="stylesheet" href="/javascript/jqwidgets/2.7.0/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="/javascript/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxcore.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxdata.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxbuttons.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxscrollbar.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxmenu.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxcheckbox.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxlistbox.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxdropdownlist.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.sort.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.pager.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.selection.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.edit.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ''; var url = "/javascript/jqwidgets/demos/sampledata/products.xml"; // prepare the data var source = { datatype: "xml", datafields: [ { name: 'ProductName', type: 'string' }, { name: 'QuantityPerUnit', type: 'int' }, { name: 'UnitPrice', type: 'float' }, { name: 'UnitsInStock', type: 'float' }, { name: 'Discontinued', type: 'bool' } ], root: "Products", record: "Product", id: 'ProductID', url: url }; var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) { if (value < 20) { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>'; } else { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>'; } } var dataAdapter = new $.jqx.dataAdapter(source, { downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, pageable: true, autoheight: true, sortable: true, altrows: true, enabletooltips: true, editable: true, selectionmode: 'multiplecellsadvanced', columns: [ { text: '', datafield: 'ProductName', width: 250, renderer: function() { return '<div style="margin-left: 10px; margin-top: 5px;">Text <a href="#">Link</a></div>'; } }, { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 }, { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 }, { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 }, { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }, ] }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div></body></html>
JQuery: 1.7.2
JQWidgets: 2.7.0
Device: PC
Browser: All of them (specifically FF 19.0.2, Chrome 25.1, IE 9.0)I’m not sure how much more ‘step-by-step’ I can get – I added a link to the column header and it doesnt show up. In the example below, I added the a tag to the first column, and it doesnt display properly. It’s like it’s getting pushed down a line somehow and since the header is only one line high, it disappears. The column is clearly large enough for the text of the a tag to appear, so I dont know what’s going on.
Example:
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. </title> <link rel="stylesheet" href="/javascript/jqwidgets/2.7.0/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="/javascript/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxcore.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxdata.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxbuttons.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxscrollbar.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxmenu.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxcheckbox.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxlistbox.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxdropdownlist.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.sort.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.pager.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.selection.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/jqxgrid.edit.js"></script> <script type="text/javascript" src="/javascript/jqwidgets/2.7.0/scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ''; var url = "/javascript/jqwidgets/demos/sampledata/products.xml"; // prepare the data var source = { datatype: "xml", datafields: [ { name: 'ProductName', type: 'string' }, { name: 'QuantityPerUnit', type: 'int' }, { name: 'UnitPrice', type: 'float' }, { name: 'UnitsInStock', type: 'float' }, { name: 'Discontinued', type: 'bool' } ], root: "Products", record: "Product", id: 'ProductID', url: url }; var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) { if (value < 20) { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>'; } else { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>'; } } var dataAdapter = new $.jqx.dataAdapter(source, { downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, pageable: true, autoheight: true, sortable: true, altrows: true, enabletooltips: true, editable: true, selectionmode: 'multiplecellsadvanced', columns: [ { text: 'Product Name <a href="#">lalala</a>', datafield: 'ProductName', width: 250 }, { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 }, { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 }, { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 }, { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }, ] }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div></body></html>
-
AuthorPosts