jQWidgets Forums

Forum Replies Created

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts

December 30, 2013 at 5:24 pm in reply to: Nested grid bug with columnsresize: true, columnsreorder: true, Nested grid bug with columnsresize: true, columnsreorder: true, #47084

Gecko

Participant

Confirm fixed in at least 3.1.0 — thank you very much.

December 5, 2013 at 10:53 pm in reply to: jqxGrid filtering of date values jqxGrid filtering of date values #46046

Gecko

Participant

bump.

November 14, 2013 at 10:24 pm in reply to: jqxGrid filtering of date values jqxGrid filtering of date values #32670

Gecko

Participant

@Peter

It’s been two months. Is this a bug?

If you have { text: ‘Started’, datafield: ‘startTime’, cellsformat: ‘MM/dd/yy hh:mm tt’}
And attempt to column filter ‘less than’ in the exact same format 09/09/13 07:00 AM, it does not return any values.

October 17, 2013 at 2:48 pm in reply to: jqxGrid filtering of date values jqxGrid filtering of date values #30944

Gecko

Participant

@Peter

“We will test whether there is something wrong with the Format String that you use in your application.”

Any update?

October 10, 2013 at 7:23 pm in reply to: 4 new themes. in 3.0.3 4 new themes. in 3.0.3 #30574

Gecko

Participant

Luesak,
They appear to be:

jqx.android.css
jqx.blackberry.css
jqx.mobile.css
jqx.windowsphone.css

located in the download with the other .css files jqwidgets-ver3.0.3.zip\jqwidgets\styles\
The demos can reference them by calling them like any other .css file – in the html
You will see the demos call jqx.base.css, you just want to add the desired style (for example)

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.orange.css" type="text/css" />

and in your javascript details of the grid set

theme: 'orange',

Also remember you can create your own theme using their theme builder.

September 17, 2013 at 7:26 pm in reply to: jqxGrid filtering of date values jqxGrid filtering of date values #29144

Gecko

Participant

So no one on this forum uses times in their date fields?

September 13, 2013 at 3:26 pm in reply to: Substring or get a selected value in cellsrenderer:function Substring or get a selected value in cellsrenderer:function #28956

Gecko

Participant

Akshar,
Following Peters’ instructions please try this

cellsrenderer:function (row, column,value,data ) {
    var date = value.toString().indexOf("1970");
    alert (date);
    if(date !== -1){
        return '<div> </div>';
    }
}

or this (which is a little cleaner)

cellsrenderer:function (row, column,value,data ) {
  if(value.toString().indexOf("1970")!== -1){
    return '<div> </div>';
  }
}

September 12, 2013 at 3:27 pm in reply to: jqxGrid filtering of date values jqxGrid filtering of date values #28864

Gecko

Participant

Can anyone tell me how to the correct input for a user to ‘less than’ filter on a date column that contains a date & time?
I found that I can use 05-September-2013 but I haven’t found the syntax to include time in the filter (05-September-2013 09:00 AM fails).

August 30, 2013 at 7:42 pm in reply to: Retrieve bound data from the clicked row or cell of a nested grid? Retrieve bound data from the clicked row or cell of a nested grid? #28077

Gecko

Participant

Thanks Peter, this helps a lot.
It allows me to do rowclicks off the nested grid, but I have rowclicks on the main grid too.
When I click on the nested grid it is still firing the $(“#main_grid”).on(‘rowclick’, function (event) {
Any thoughts on how to keep the nested_grid clicks from firing the main_grid event?

August 27, 2013 at 10:03 pm in reply to: Retrieve bound data from the clicked row or cell of a nested grid? Retrieve bound data from the clicked row or cell of a nested grid? #27817

Gecko

Participant

gonna make me work it out my self aren’t you?

August 23, 2013 at 2:26 pm in reply to: Retrieve bound data from the clicked row or cell of a nested grid? Retrieve bound data from the clicked row or cell of a nested grid? #27567

Gecko

Participant

Peter thanks for your time and your reply but could you please expand a bit?
given the code for nested demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to display nested Grid plugins.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.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.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../sampledata/employees.xml";
            var source =
            {
                datafields: [
                    { name: 'FirstName' },
                    { name: 'LastName' },
                    { name: 'Title' },
                    { name: 'Address' },
                    { name: 'City' }
                ],
                root: "Employees",
                record: "Employee",
                id: 'EmployeeID',
                datatype: "xml",
                async: false,
                url: url
            };
            var employeesAdapter = new $.jqx.dataAdapter(source);
            var orderdetailsurl = "../sampledata/orderdetails.xml";
            var ordersSource =
            {
                datafields: [
                    { name: 'EmployeeID', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                root: "Orders",
                record: "Order",
                datatype: "xml",
                url: orderdetailsurl,
                async: false
            };
            var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
            orders = ordersDataAdapter.records;
            // create nested grid.
            var initrowdetails = function (index, parentElement, gridElement, record) {
                var id = record.uid.toString();
                var grid = $($(parentElement).children()[0]);
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = id;
                var filtercondition = 'equal';
                var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                // fill the orders depending on the id.
                var ordersbyid = [];
                for (var m = 0; m < orders.length; m++) {
                    var result = filter.evaluate(orders[m]["EmployeeID"]);
                    if (result)
                        ordersbyid.push(orders[m]);
                }
                var orderssource = { datafields: [
                    { name: 'EmployeeID', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                    id: 'OrderID',
                    localdata: ordersbyid
                }
                if (grid != null) {
                    grid.jqxGrid({ source: orderssource, theme: theme, width: 600, height: 200,
                        columns: [
                          { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                          { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                          { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                          { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                          { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                       ]
                    });
                }
            }
            var photorenderer = function (row, column, value) {
                var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName;
                var imgurl = '../../images/' + name.toLowerCase() + '.png';
                var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
                return img;
            }
            var renderer = function (row, column, value) {
                return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
            }
            // creage jqxgrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 365,
                source: source,
                theme: theme,
                rowdetails: true,
                rowsheight: 35,
                initrowdetails: initrowdetails,
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                ready: function () {
                    $("#jqxgrid").jqxGrid('showrowdetails', 1);
                },
                columns: [
                      { text: 'Photo', width: 50, cellsrenderer: photorenderer },
                      { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer },
                      { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer },
                      { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer },
                      { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer },
                      { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer }
                  ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

I assume that you are talking about putting in the var initrowrecords but if you could provide the actual syntax to get the ShipAddress for that row when rowclick on the nested grid that would save me hours of trial and error.

July 25, 2013 at 10:22 pm in reply to: Nested JSON display in JQGrid available in newer version Nested JSON display in JQGrid available in newer version #25761

Gecko

Participant

Hey Peter, thanks for the response.

I was unable to find anything about nested in the phpdemos directory of the download package (personal version 2.9.3), could you elaborate where this example of nested grids with JSON is located please.

I am also having difficulties (like the original poster of this thread), correctly mapping my datafields from a json return with an array.
I your example above but what if it had an array, like this:
var data = [{ “empName”: “test”, “age”: “67”, “department”: [{ “id”: “1234”, “name”: “Sales” }], “author”: “ravi”}];

the map seems to no longer work

var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'empName' },
                    { name: 'age' },
                    { name: 'id', map: 'department>id' },
                    { name: 'name', map: 'department>name' },
                    { name: 'author' }
                ],
                localdata: data
            };

Any ideas?
I thought maybe something where I do a jquery for each but haven’t yet been able to figure out how to assign it in the datafields bindings.

var json = [
 {"GROUP_ID":"143",
  "GROUP_TYPE":"2011 Season",
  "EVENTS":[
    {"EVENT_ID":"374","SHORT_DESC":"Wake Forest"},
    {"EVENT_ID":"376","SHORT_DESC":"Yale"},
    {"EVENT_ID":"377","SHORT_DESC":"Michigan State"}]
 }];
$.each(json, function(arrayID,group) {
    $.each(group.EVENTS, function(eventID,eventData) {
            document.write('  '+eventData.SHORT_DESC+'<br />');
     });
});

July 25, 2013 at 4:47 pm in reply to: Nested JSON display in JQGrid available in newer version Nested JSON display in JQGrid available in newer version #25740

Gecko

Participant

Peter, I am confused. You say that

It isn’t possible to build a Grid from 2 files. If that’s your scenario, you will have to merge the 2 files in one JSON string or in 1 file and then load the Grid from it.

but isn’t that exactly what your current nested demo does(employees.xml & orderdetails.xml)? (or is this post just older than that ability?)

I ask because I am attempting something similar. A nested grid where the outer grid is populated (json web service call) but the inner grid isn’t populated until the user clicks on the arrow to expand, at that time I make another json web service call (to get the details of that one outer grid row). I would greatly appreciate any assistance you be able to provide (I am a javascript novice).

Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)