jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 45 total)
  • Author
    Posts

  • arunthatham
    Participant

    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,
    Arunthatham


    arunthatham
    Participant

    Thanks 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…


    arunthatham
    Participant

    Hi 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>


    arunthatham
    Participant

    HI 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.


    arunthatham
    Participant

    HI,

    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.


    arunthatham
    Participant

    I 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!!!


    arunthatham
    Participant

    It would be very helpful if you could respond in JSfiddle as soon as possible.


    arunthatham
    Participant

    actually 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.


    arunthatham
    Participant

    Thanks Nadezhda, Its working….


    arunthatham
    Participant

    in 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’
    }


    arunthatham
    Participant

    In 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/


    arunthatham
    Participant

    Hi 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.


    arunthatham
    Participant

    No 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.


    arunthatham
    Participant

    Application 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.


    arunthatham
    Participant

    I 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.

Viewing 15 posts - 1 through 15 (of 45 total)