jQWidgets Forums

Tagged: #jqwidgets-grid, Button, grid, javascript grid, jquery grid, nested

This topic contains 17 replies, has 2 voices, and was last updated by Hristo 7 years, 6 months ago.

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

1 2 →

Author

Button at bottom of nested grid Posts

October 15, 2017 at 3:48 pm Button at bottom of nested grid #96703

Participant

Is there a way to add a button to bottom of a nested grid. I want to place an ‘Add to Entry’ button for the nested grid.

Bob K.

October 17, 2017 at 2:13 pm Button at bottom of nested grid #96764

Hristo

Participant

Hello Bob K.,

You could try to append an additional element next to the Grid’s container.
On another side, it is possible to use this approach for the Nested Grids.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

October 17, 2017 at 4:11 pm Button at bottom of nested grid #96773

rkamarowski

Participant

The problem with the example is that it changes the look of the status bar. Is there a way to add a button without changing the look? I’m trying to keep the grids consistent.

October 18, 2017 at 8:09 am Button at bottom of nested grid #96785

Hristo

Participant

Hello Bob K.,

You could just add an additional HTML element (button) and implement relevant logic there.
Please, take a look at this example:

</!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.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.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/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            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;
            var nestedGrids = new Array();

            // create nested grid.
            var initrowdetails = function (index, parentElement, gridElement, record) {
                var id = record.uid.toString();
                var grid = $($(parentElement).children()[0]);
                nestedGrids[index] = grid;
                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
                }
                var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
                
                if (grid != null) {
                    var buttonElement = grid[0].parentElement.children[1];
                    var button = $(buttonElement).jqxButton({});
                    button.click(() => {
                        console.log('Button to Nested Grid', grid[0].id);
                    });

                    grid.jqxGrid({
                        source: nestedGridAdapter, width: 780, 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: 850,
                height: 465,
                source: source,
                rowdetails: true,
                rowsheight: 35,
                initrowdetails: initrowdetails,
                rowdetailstemplate: {
                    rowdetails: "<div id='grid' style='margin: 10px;'></div><button class='nested-button'>Add to Entry</button>",
                    rowdetailsheight: 250,
                    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>
    <div id="jqxgrid">
    </div>
</body>
</html>

(it is based on this “Nested Grids” demo)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

October 18, 2017 at 5:32 pm Button at bottom of nested grid #96803

rkamarowski

Participant

Hristo, I’m unable to get the code to work. Here is my nested grid code:

` if (grid != null)
{
var dataAdapter = new $.jqx.dataAdapter(sourceOrder,
{
autobind: true,
contentType: ‘application/json; charset=utf-8’,
formatData: function (data)
{
$.extend(data,
{
active: ‘1’,
workRecordID: workRecord[“WorkRecordID”]
});
return data;
},

loadError: function (xhr, status, error)
{
console.warn(xhr.responseText);
alert(error);
},
loadComplete: function ()
{
var text = dataAdapter.records;
},
downloadComplete: function (data, status, xhr) { },
});

grid.jqxGrid(
{
autoheight: true,
pageable: true,
rowdetails: true,
selectionmode: ‘singlerow’,
sortable: true,
source: dataAdapter,
width: ‘95%’,
columns: [
{text: ‘Order Date’, datafield: ‘OrderDate’, width: ‘20%’},
{text: ‘Description’, datafield: ‘Description’, width: ‘60%’},
{text: “Order Category”, datafield: ‘OrderCategoryName’, width: ‘20%’},
]
}
);
grid.bind(‘rowselect’, function (event)
{
event.stopPropagation();
var selectedRowIndex = event.args.rowindex;
if (selectedRowIndex < 0)
return;

var data = grid.jqxGrid(‘getrowdata’, selectedRowIndex);

OrdersWidgetsClear();

TabsEnable(2);

NewDataFields(false, 1);

$(“#comboBoxRightOrderActive”).val(data.Active);
$(“#numberInputOrderCost”).val(data.Cost);
$(“#textAreaRightOrderDescription”).val(data.Description);
$(“#textAreaRightOrderNotes”).val(data.Notes);
$(“#comboBoxRightOrderCategory”).val(data.OrderCategoryID);
$(“#dateTimeInputRightOrderDate”).val(data.OrderDate);
$(“#inputRightOrderPartNumber”).val(data.PartNumber);
$(“#numberInputOrderShipping”).val(data.Shipping);
$(“#numberInputOrderTaxes”).val(data.Taxes);
$(“#inputRightOrderTotalCost”).val(data.TotalCost);
$(“#inputRightOrderWorkOrder”).val(workRecord[“WorkRecordName”]);
$(“#inputRightOrderVendor”).val(data.VendorName);

order[“Cost”] = data.Cost;
order[“Description”] = data.Description;
order[“Notes”] = data.Notes;
order[“OrderCategoryID”] = data.OrderCategoryID;
order[“OrderCategoryName”] = data.OrderCategoryName;
order[“OrderDate”] = data.OrderDate;
order[“OrderID”] = data.OrderID;
order[“PartNumber”] = data.PartNumber;
order[“Shipping”] = data.Shipping;
order[“Taxes”] = data.Taxes;
order[“TotalCost”] = data.TotalCost;
order[“VendorID”] = data.VendorID;
order[“VendorName”] = null;
order[“WorkRecordID”] = data.WorkRecordID;
});
}
}`

October 19, 2017 at 1:20 pm Button at bottom of nested grid #96824

Hristo

Participant

Hello Bob K.,

Could you provide a simple example in https://www.jseditor.io/ or https://fiddle.jshell.net/
In your example has code that I do not have information about.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

October 22, 2017 at 4:06 pm Button at bottom of nested grid #96853

rkamarowski

Participant

I’m not sure how I could break it down because there are so many tables accessed. Is there a way for your example code to work in JS Editor?

October 24, 2017 at 7:20 am Button at bottom of nested grid #96884

Hristo

Participant

Hello Bob K.,

If I understand you correctly you want to show you the previous example in the jseditor.
Please, take a look at this example:
https://www.jseditor.io/?key=grid-and-nested-grids

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

October 26, 2017 at 4:24 pm Button at bottom of nested grid #96956

rkamarowski

Participant

Thank you. Now back to the original question, is there a way to put an ‘add’ button on the standard status bar of a nested grid?

October 27, 2017 at 11:58 am Button at bottom of nested grid #96968

Hristo

Participant

Hello Bob K.,

Please, take a look at this example:
https://www.jseditor.io/?key=grid-and-nested-grids-optional-add-buttons

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

October 27, 2017 at 2:13 pm Button at bottom of nested grid #96977

rkamarowski

Participant

That link just returns ‘This is a test.’

October 30, 2017 at 2:12 pm Button at bottom of nested grid #97002

Hristo

Participant

Hello Bob K.,

I am so sorry. Please, take a look at this example (it is with turned on sharing option, now):
https://www.jseditor.io/?key=grid-and-nested-grids-optional-add-buttons

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

October 30, 2017 at 4:19 pm Button at bottom of nested grid #97012

rkamarowski

Participant

No problem. Thank you. So I guess the answer is that there is no way to add a button (or plus sign) to the standard status bar.

October 30, 2017 at 5:21 pm Button at bottom of nested grid #97013

rkamarowski

Participant

Thinking about this another way, is there a way to add the standard status bar elements (Go to page, Show rows, etc.) to a custom status bar?

October 31, 2017 at 12:28 pm Button at bottom of nested grid #97025

Hristo

Participant

Hello Bob K.,

The example that I shared is only to demonstrates the approach how to use and create something in the statusbar.
If you want you could use all methods to get information about the pages and to navigate (getrows, gotopage, and etc).
Please, take a look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/custompager.htm?light
This example shows how to customize the rendering of the jqxGrid’s Pager.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

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

1 2 →

You must be logged in to reply to this topic.