jQWidgets Forums
Forum Replies Created
-
Author
-
May 13, 2015 at 2:06 pm in reply to: Reorder issue in Columns hierarchy Reorder issue in Columns hierarchy #71072
Hi,
Am asking about columns which are in between 2 groups. In the above sample code I have given, column “Price” is not part of any group. Now I want to move that in front of the ProductDetails group. ie., next to the column “SupplierName” which is also not part of any group. Please suggest.
Thanks,
ArunthathamMay 12, 2015 at 1:07 pm in reply to: Jqwidget soryby and gotopage event in single line Jqwidget soryby and gotopage event in single line #71009Thanks for the reply,
I have another question we have a server side jqwidget grid implementation by default when the initilization happens i need the grid to sort based on one column decending order.
I dont want a solution like having the piece of code “$(‘#data’).jqxGrid(‘sortby’, ‘DateLastReported’, ‘desc’);” written in binding complete.
Instead i need in initilization itself,Because if i put in binding complete it makes first call without default sort and then once it comes to binding complete from there it will make another server call.
Please suggest…May 12, 2015 at 1:06 pm in reply to: jqxGrid: Column Groups initialization Error – Columns Hierarchy jqxGrid: Column Groups initialization Error – Columns Hierarchy #71008Hi Peter,
Thanks for the reply. So it means that the columns to be grouped should be placed next to each other in the columns array. I have one more doubt. I want to reorder all the columns in the array. I understand that the column groups can not be dragged to reorder. But I want to place a column which is not part of any group in front of a group. The modified code is below. I have remove column “Price” from the “ProductDetails” group. Now I want to drag and drop in front of the group. ie., next to SupplierName. How do I achieve that?
Note: Am able to drag drop a column in front of the group if there are already two columns if front of the group.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This sample illustrates the Columns Hierarchy feature of jqxGrid.
</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.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.sort.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsreorder.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.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/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘SupplierName’, type: ‘string’ },
{ name: ‘Quantity’, type: ‘number’ },
{ name: ‘OrderDate’, type: ‘date’ },
{ name: ‘OrderAddress’, type: ‘string’ },
{ name: ‘Freight’, type: ‘number’ },
{ name: ‘Price’, type: ‘number’ },
{ name: ‘City’, type: ‘string’ },
{ name: ‘ProductName’, type: ‘string’ },
{ name: ‘Address’, type: ‘string’ }
],
url: ‘../sampledata/orderdetailsextended.xml’,
root: ‘DATA’,
record: ‘ROW’
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {}
});
// create jqxgrid.
$(“#jqxgrid”).jqxGrid(
{
width: 850,
groupable:false,
source: dataAdapter,
pageable: true,
autorowheight: true,
altrows: true,
columnsresize: true,
columnsreorder:true,
columns: [
{ text: ‘Supplier Name’, cellsalign: ‘center’, align: ‘center’, datafield: ‘SupplierName’, width: 110 },
{ text: ‘Name’, columngroup: ‘ProductDetails’, cellsalign: ‘center’, align: ‘center’, datafield: ‘ProductName’, width: 120 },
{ text: ‘Quantity’, columngroup: ‘ProductDetails’, datafield: ‘Quantity’, cellsformat: ‘d’, cellsalign: ‘center’, align: ‘center’, width: 80 },
{ text: ‘Freight’, columngroup: ‘OrderDetails’, datafield: ‘Freight’, cellsformat: ‘d’, cellsalign: ‘center’, align: ‘center’, width: 100 },
{ text: ‘Order Date’, columngroup: ‘OrderDetails’, cellsalign: ‘center’, align: ‘center’, cellsformat: ‘d’, datafield: ‘OrderDate’, width: 100 },
{ text: ‘Order Address’, columngroup: ‘OrderDetails’, cellsalign: ‘center’, align: ‘center’, datafield: ‘OrderAddress’, width: 100 },
{ text: ‘Price’, datafield: ‘Price’, cellsformat: ‘c2’, align: ‘center’, cellsalign: ‘center’, width: 70 },
{ text: ‘Address’, columngroup: ‘Location’, cellsalign: ‘center’, align: ‘center’, datafield: ‘Address’, width: 120 },
{ text: ‘City’, columngroup: ‘Location’, cellsalign: ‘center’, align: ‘center’, datafield: ‘City’, width: 80 }
],
columngroups:
[
{ text: ‘Product Details’, align: ‘center’, name: ‘ProductDetails’ },
{ text: ‘Order Details’, parentgroup: ‘ProductDetails’, align: ‘center’, name: ‘OrderDetails’ },
{ text: ‘Location’, align: ‘center’, name: ‘Location’ }
]
});
});
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”>
</div>
</body>
</html>May 12, 2015 at 12:50 pm in reply to: jqxGrid: Column Groups initialization Error – Columns Hierarchy jqxGrid: Column Groups initialization Error – Columns Hierarchy #71006HI Peter,
Below is the default code of columns hierarchy with a small change. I have removed column group for “OrderDate”. Wont it automatically group the columns “Freight” and “Order Address”?
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This sample illustrates the Columns Hierarchy feature of jqxGrid.
</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.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.sort.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsreorder.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcheckbox.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/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘SupplierName’, type: ‘string’ },
{ name: ‘Quantity’, type: ‘number’ },
{ name: ‘OrderDate’, type: ‘date’ },
{ name: ‘OrderAddress’, type: ‘string’ },
{ name: ‘Freight’, type: ‘number’ },
{ name: ‘Price’, type: ‘number’ },
{ name: ‘City’, type: ‘string’ },
{ name: ‘ProductName’, type: ‘string’ },
{ name: ‘Address’, type: ‘string’ }
],
url: ‘../sampledata/orderdetailsextended.xml’,
root: ‘DATA’,
record: ‘ROW’
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {}
});
// create jqxgrid.
$(“#jqxgrid”).jqxGrid(
{
width: 850,
groupable:false,
source: dataAdapter,
pageable: true,
autorowheight: true,
altrows: true,
columnsresize: true,
columnsreorder:true,
columns: [
{ text: ‘Supplier Name’, cellsalign: ‘center’, align: ‘center’, datafield: ‘SupplierName’, width: 110 },
{ text: ‘Name’, columngroup: ‘ProductDetails’, cellsalign: ‘center’, align: ‘center’, datafield: ‘ProductName’, width: 120 },
{ text: ‘Quantity’, columngroup: ‘ProductDetails’, datafield: ‘Quantity’, cellsformat: ‘d’, cellsalign: ‘center’, align: ‘center’, width: 80 },
{ text: ‘Freight’, columngroup: ‘OrderDetails’, datafield: ‘Freight’, cellsformat: ‘d’, cellsalign: ‘center’, align: ‘center’, width: 100 },
{ text: ‘Order Date’, cellsalign: ‘center’, align: ‘center’, cellsformat: ‘d’, datafield: ‘OrderDate’, width: 100 },
{ text: ‘Order Address’, columngroup: ‘OrderDetails’, cellsalign: ‘center’, align: ‘center’, datafield: ‘OrderAddress’, width: 100 },
{ text: ‘Price’, columngroup: ‘ProductDetails’, datafield: ‘Price’, cellsformat: ‘c2’, align: ‘center’, cellsalign: ‘center’, width: 70 },
{ text: ‘Address’, columngroup: ‘Location’, cellsalign: ‘center’, align: ‘center’, datafield: ‘Address’, width: 120 },
{ text: ‘City’, columngroup: ‘Location’, cellsalign: ‘center’, align: ‘center’, datafield: ‘City’, width: 80 }
],
columngroups:
[
{ text: ‘Product Details’, align: ‘center’, name: ‘ProductDetails’ },
{ text: ‘Order Details’, parentgroup: ‘ProductDetails’, align: ‘center’, name: ‘OrderDetails’ },
{ text: ‘Location’, align: ‘center’, name: ‘Location’ }
]
});
});
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”>
</div>
</body>
</html>Thanks,
Arunthatham.May 12, 2015 at 12:34 pm in reply to: jqxGrid: Column Groups initialization Error – Columns Hierarchy jqxGrid: Column Groups initialization Error – Columns Hierarchy #71000HI,
Thanks for replying. I understand the exception. But what does it mean? Am getting it when am trying to group column 1 and 3 in an array of 10 columns. Is this not possible? Please let me know the correct steps.
April 27, 2015 at 10:58 am in reply to: Jqwidget grid date column displays different datetime Jqwidget grid date column displays different datetime #70293I think my question didn’t reach you properly.
My question is i get my data from server with datetime type in .Net and I assign to a column of date type in jqwidget.
The one of solution you provided is put column type like format: “yyyy-MM-ddTHH:mm:ss-HH:mm” but i need only date to be displayed in grid so i cant use this format.I can understand that java script object is doing this offset addition but we are not doing anything externally so you have to provide a solution to make that data to be displayed as same as what i get from server.
I didn’t ask for a jsfiddle example i already provided a example in my post,I asked for a jsfiddle with the solution.
Please help US!!!April 27, 2015 at 6:36 am in reply to: Jqwidget grid date column displays different datetime Jqwidget grid date column displays different datetime #70272It would be very helpful if you could respond in JSfiddle as soon as possible.
April 25, 2015 at 6:36 am in reply to: Jqwidget grid date column displays different datetime Jqwidget grid date column displays different datetime #70258actually we take the data from server with URL since to replicate the issue i did a client side implemenatation.
the data returned from server is of datetime and if this changes need to be done only in implementation please correct the jsfiddle and revert back.March 18, 2015 at 1:11 pm in reply to: Date filter allows characters like 'a' and 'p' Date filter allows characters like 'a' and 'p' #68822Thanks Nadezhda, Its working….
February 9, 2015 at 5:15 am in reply to: In jqwidget grid filter not supporting custome format In jqwidget grid filter not supporting custome format #66740in case of declaration we didnt do any mistake we are sneding the data from server to client in a specified format and that is what we are binding to UI declaration as mentioned below in updatefilterpanel we are modifiying and showing the format which works fine in chrome but not in IE.
var source = {
type: ‘POST’,
datatype: ‘json’,
datafields: [{
name: ‘ReportedDateTime’,
type: ‘date’,
format: ‘MM/dd/yyyy hh:mm tt’
}February 2, 2015 at 9:53 am in reply to: Remove black border to the chart Remove black border to the chart #66291In the Fiddle example you can see 2 bars and the bar is covered by black border,I need to remove that border.
http://jsfiddle.net/qtjvcqjq/January 30, 2015 at 9:18 am in reply to: Jqwidget chart not loading in IE9 due to Dataadapter Jqwidget chart not loading in IE9 due to Dataadapter #66208Hi Peter,
After a subtle amount of research, we have 3 instances of strange behaviour in jqxCharts.
SCENARIO 1
http://jsfiddle.net/datachand/Lde9kg6t/
In this scenario, I have only one object in the array of sampleData, this works good in both Chrome & IE 9.
SCENARIO 2
http://jsfiddle.net/datachand/Lde9kg6t/1 This will basically crash in any browser.
The sampleData we’re holding is: (to replicate, replace the same sampleData in scenario 1 jsfiddle)
var sampleData = [{ "RunTime": "", "RunTimeData": 19, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "19.0", "WorkingTimeData": 19, "MiniDate": "05/10/2014", "MaxiDate": "NA", "XAxisItem": "05/10/2014" },{ "RunTime": "", "RunTimeData": 15, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "15.0", "WorkingTimeData": 15, "MiniDate": "01/11/2014", "MaxiDate": "NA", "XAxisItem": "01/11/2014" } ];
SCENARIO 3
http://jsfiddle.net/datachand/Lde9kg6t/3/
In this scenario, we have provided the same kind of response we get when we use dataAdapter, we were able to generate the chart in Chrome, but in IE 9 it crashed.
YOUR EXAMPLE
Replace your data with this in your example (http://jsfiddle.net/o2n7qz3v/1/),
var sampleData = [{ "RunTime": "", "RunTimeData": 19, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "19.0", "WorkingTimeData": 19, "MiniDate": "05/10/2014", "MaxiDate": "NA", "XAxisItem": "05/10/2014" }, { "RunTime": "", "RunTimeData": 15, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "15.0", "WorkingTimeData": 15, "MiniDate": "01/11/2014", "MaxiDate": "NA", "XAxisItem": "01/11/2014" }, { "RunTime": "", "RunTimeData": 15, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "15.0", "WorkingTimeData": 15, "MiniDate": "01/11/2014", "MaxiDate": "NA", "XAxisItem": "01/11/2014" }, { "RunTime": "", "RunTimeData": 15, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "15.0", "WorkingTimeData": 15, "MiniDate": "01/11/2014", "MaxiDate": "NA", "XAxisItem": "01/11/2014" }, { "RunTime": "", "RunTimeData": 15, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "15.0", "WorkingTimeData": 15, "MiniDate": "01/11/2014", "MaxiDate": "NA", "XAxisItem": "01/11/2014" }, { "RunTime": "", "RunTimeData": 15, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "15.0", "WorkingTimeData": 15, "MiniDate": "01/11/2014", "MaxiDate": "NA", "XAxisItem": "01/11/2014" }, { "RunTime": "", "RunTimeData": 15, "IdleTime": "5.0", "IdleTimeData": 5, "WorkingTime": "15.0", "WorkingTimeData": 15, "MiniDate": "01/11/2014", "MaxiDate": "NA", "XAxisItem": "01/11/2014" }];
This does not work in either. We are providing extra datafields for our functionality, even on removal this is same, replacing/removing double quotes in JSON data, has basically no effect.
Basically scenario 3 is what we are currently using just we cut pasted the server side logic to client side and we are able to replicate the issue.Please provide solution with scenario 3 mostly.Please sort this issue.
January 30, 2015 at 4:43 am in reply to: Jqwidget chart not loading in IE9 due to Dataadapter Jqwidget chart not loading in IE9 due to Dataadapter #66196No it didnt work after removing that also .
Even i searched line by line where all that mistake is there but no where able to find.
It didnt work.
Kindly let us know any valuable reply.January 29, 2015 at 3:59 pm in reply to: Jqwidget chart not loading in IE9 due to Dataadapter Jqwidget chart not loading in IE9 due to Dataadapter #66186Application is going to Live today ,It would be very help full if you highlight the mistake in the above code and reply as soon as possible .
Please do the favor.January 29, 2015 at 3:49 pm in reply to: Jqwidget chart not loading in IE9 due to Dataadapter Jqwidget chart not loading in IE9 due to Dataadapter #66185I have given the code in above post can you paste the same and highlight which line is the mistake .
I am not able to find.
Please do the favour. -
AuthorPosts