help~~ I want to automatically add grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: agrregates, automatically, column, computed, computed column, details, dynamic, grid, jqxgrid, master-details, server, synchronize, update

This topic contains 19 replies, has 3 voices, and was last updated by Dimitar 8 years, 8 months ago.

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

1 2 →

Author

help~~ I want to automatically add grid Posts

November 4, 2014 at 6:51 am help~~ I want to automatically add grid #62075

Inverse

Participant

I want to automatically add grid

e.g.
http://jsfiddle.net/magick344/B2Gma/5/

Quantity Unit Price Total

Total = Quantity * Unit Price

can edit ,
editing Quantity and Unit Price,
Total is even more dynamic digital

thank you~

November 4, 2014 at 7:33 am help~~ I want to automatically add grid #62079

Dimitar

Participant

Hello Inverse,

Maybe you are looking for the Computed Column functionality?

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 4, 2014 at 9:09 am help~~ I want to automatically add grid #62086

Inverse

Participant

thank you~

If I want to add aggregates: [‘sum’] in total

What should I do

November 4, 2014 at 9:28 am help~~ I want to automatically add grid #62090

Dimitar

Participant

Hi Inverse,

Aggregates are not available for computed columns if they are implemented this way. This issue is discussed in the forum topic Aggregation not working with Cellsrenderer in jqxGrid.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 4, 2014 at 5:34 pm help~~ I want to automatically add grid #62126

Inverse

Participant

Hello Dimitar

Aggregates are not available for computed columns?

I tried to read this forum , But less can understand….

Are there other ways ?

Thanks~

November 5, 2014 at 6:54 am help~~ I want to automatically add grid #62153

Inverse

Participant

Excuse me

I tried to make

 {   text: 'Total', datafield: 'amount',cellsalign: 'right', cellsformat: 'n2',
                          aggregates: [{'sum': function (aggregatedValue, currentValue, column, record) {
                          var total = currentValue ; 
                             return aggregatedValue + total;
                          }},],
            aggregatesrenderer: function(aggregates) {
                var renderstring = aggregates["sum"];
                return '<span style="margin-top: 4px; float: right;">' + renderstring + '</span>';
            },
            cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
                          var amount = Math.round(rowdata.price) * Math.round(rowdata.quantity);
                          return "<div style='margin: 4px;' class='jqx-right-align'>" + dataAdapter.formatNumber(amount, "n2") + "</div>";
            },
            }

Aggregation to be effective must be adjusted manually

But I want to let Aggregation be able to automatically calculate

can any one help me Thanks~~

November 5, 2014 at 6:55 am help~~ I want to automatically add grid #62156

Dimitar

Participant

Hi Inverse,

There is no automatic way. The “manual” ways are specified here: http://www.jqwidgets.com/community/topic/computed-column-that-will-sort-and-use-the-cellclass/#post-58260 and here: http://www.jqwidgets.com/community/topic/computed-column-that-will-sort-and-use-the-cellclass/#post-58472.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 5, 2014 at 7:57 am help~~ I want to automatically add grid #62164

Inverse

Participant

Thanks Dimitar

but sorry…

I really do not understand…

Can you give me an example ?

November 6, 2014 at 10:27 am help~~ I want to automatically add grid #62290

Dimitar

Participant

Hello Inverse,

Here is an example. We hope it is helpful to you.

<!DOCTYPE html>
<html lang="en">
<head>
    <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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(5);

            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                },
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'date', type: 'date' },
                    { name: 'total', type: 'number' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                autoheight: true,
                source: dataAdapter,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                showstatusbar: true,
                statusbarheight: 25,
                showaggregates: true,
                ready: function () {
                    var rowsCount = $("#jqxgrid").jqxGrid("getrows").length;
                    for (var i = 0; i < rowsCount; i++) {
                        var currentQuantity = $("#jqxgrid").jqxGrid('getcellvalue', i, "quantity");
                        var currentPrice = $("#jqxgrid").jqxGrid('getcellvalue', i, "price");
                        var currentTotal = currentQuantity * currentPrice;
                        $("#jqxgrid").jqxGrid('setcellvalue', i, "total", currentTotal.toFixed(2));
                    }
                },
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80 },
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
                  {
                      text: 'Quantity', datafield: 'quantity', width: 100, align: 'right', cellsalign: 'right', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 1500) {
                              return { result: false, message: "Quantity should be in the 0-150 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                      }
                  },
                  {
                      text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 1500) {
                              return { result: false, message: "Price should be in the 0-15 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      }
                  },
                  { text: 'Total', editable: false, datafield: 'total', cellsalign: 'right', aggregates: ['sum'], cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 6, 2014 at 2:55 pm help~~ I want to automatically add grid #62320

Inverse

Participant

Thanks Dimitar~

very very happy you can help meヾ(*´∀｀*)ﾉ

but this example(http://jsfiddle.net/magick344/B2Gma/6/) Seems to be total can not fluctuate of quantity and price

I want to be this effect (http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/computedcolumn.htm?arctic)

and total add aggregates[sum]

 ready: function () {
                    var rowsCount = $("#jqxgrid").jqxGrid("getrows").length;
                    for (var i = 0; i < rowsCount; i++) {
                        var currentQuantity = $("#jqxgrid").jqxGrid('getcellvalue', i, "quantity");
                        var currentPrice = $("#jqxgrid").jqxGrid('getcellvalue', i, "price");
                        var currentTotal = currentQuantity * currentPrice;
                        $("#jqxgrid").jqxGrid('setcellvalue', i, "total", currentTotal.toFixed(2));
                    }
                }

Are this code which change it?

What should I do

Can you please help me Thanks~~

November 7, 2014 at 6:29 am help~~ I want to automatically add grid #62351

Dimitar

Participant

Hi Inverse,

Here is an updated version of the example with dynamic update of the “Total” column:

<!DOCTYPE html>
<html lang="en">
<head>
    <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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(5);

            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                },
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'date', type: 'date' },
                    { name: 'total', type: 'number' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                autoheight: true,
                source: dataAdapter,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                showstatusbar: true,
                statusbarheight: 25,
                showaggregates: true,
                ready: function () {
                    var rowsCount = $("#jqxgrid").jqxGrid("getrows").length;
                    for (var i = 0; i < rowsCount; i++) {
                        var currentQuantity = $("#jqxgrid").jqxGrid('getcellvalue', i, "quantity");
                        var currentPrice = $("#jqxgrid").jqxGrid('getcellvalue', i, "price");
                        var currentTotal = currentQuantity * currentPrice;
                        $("#jqxgrid").jqxGrid('setcellvalue', i, "total", currentTotal.toFixed(2));
                    }
                },
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80 },
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
                  {
                      text: 'Quantity', datafield: 'quantity', width: 100, align: 'right', cellsalign: 'right', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 1500) {
                              return { result: false, message: "Quantity should be in the 0-150 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                      }
                  },
                  {
                      text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 1500) {
                              return { result: false, message: "Price should be in the 0-15 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      }
                  },
                  { text: 'Total', editable: false, datafield: 'total', cellsalign: 'right', aggregates: ['sum'], cellsformat: 'c2' }
                ]
            });

            $("#jqxgrid").on('cellendedit', function (event) {
                // event arguments.
                var args = event.args;
                // column data field.
                var dataField = event.args.datafield;
                // row's bound index.
                var rowBoundIndex = event.args.rowindex;
                // cell value
                var value = args.value;
                // cell old value.
                var oldvalue = args.oldvalue;
                // row's data.
                var rowData = args.row;

                var total;
                if (dataField == "quantity") {
                    total = value * rowData.price;
                } else if (dataField == "price") {
                    total = rowData.quantity * value;
                }
                $("#jqxgrid").jqxGrid('setcellvalue', rowBoundIndex, "total", total.toFixed(2));
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 8, 2014 at 4:12 pm help~~ I want to automatically add grid #62423

Inverse

Participant

Hi Dimitar~~

Thank your example ~ Thank you very much for your help~!

I encountered a problem….

‘TypeError: rowData is undefined’

Excuse me, My CODE where is an error

Thanks. I appreciate your help~

 var dataFields2 = [
                      { name:'id', type: 'string'},
                      { name: 'name', type: 'string'},
                      { name: 'price', type: 'number'},
                      { name: 'total', type: 'number'},
                      { name: 'quantity', type: 'number'},
                    ];  
            var source =
            {
                datatype: "json",
                      updaterow: function (rowid, rowdata, commit) {          
                                  commit(true);
                },
               datafields: dataFields,
               url: 'addcontent.php',
               root: 'Rows', 
               };  
            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();
               $("#product").on('rowselect rowunselect', function (event) {
                            var selectedRows = $('#product').jqxGrid('getselectedrowindexes');
                            var customerIDs = new Array();
                            for (var j = 0; j < selectedRows.length; j++) {
                                var currentid = $('#product').jqxGrid('getcellvalue', selectedRows[j], "id");
                                customerIDs.push(currentid);
                            };
                            var records = new Array();
                            for (var k = 0; k < customerIDs.length; k++) {
                                var customerID = customerIDs[k];
                                var length = dataAdapter.records.length;
                                for (var i = 0; i < length; i++) {
                                    var record = dataAdapter.records[i];
                                    if (record.id == customerID) {
                                        records[records.length] = record;
                                    }
                                }
                            };
                            var dataSource = {
                                datafields: dataFields,
                                localdata: records
                            }
                            var adapter = new $.jqx.dataAdapter(dataSource);
                            // update data source.
                            $("#addcontent").jqxGrid({ source: adapter });
                        });

            $("#addcontent").jqxGrid(
            {
                width: 810,
                height: 250,
                source: dataAdapter,
                keyboardnavigation: false,
                showstatusbar: true,
                statusbarheight: 25,
                showaggregates: true,
                altrows: true,
                theme: theme,
                editmode: 'click',
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                ready: function () {
                    var rowsCount = $("#addcontent").jqxGrid("getrows").length;
                    for (var i = 0; i < rowsCount; i++) {
                        var currentQuantity = $("#addcontent").jqxGrid('getcellvalue', i, "quantity");
                        var currentPrice = $("#addcontent").jqxGrid('getcellvalue', i, "price");
                        var currentTotal = currentQuantity * currentPrice;
                        $("#addcontent").jqxGrid('setcellvalue', i, "total", currentTotal.toFixed(2));
                    }
                },
                columns:  [
                { text: 'product_name', datafield: 'name',   width: 150},
                {
                      text: 'Quantity', datafield: 'quantity', width: 100, align: 'right', cellsalign: 'right', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 1500) {
                              return { result: false, message: "Quantity should be in the 0-150 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                      }
                  },
                 {
                      text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 1500) {
                              return { result: false, message: "Price should be in the 0-15 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      }
                  },
                 { text: 'Total', editable: false, datafield: 'total', cellsalign: 'right', aggregates: ['sum'], cellsformat: 'c2' }
                ]
            });

  $("#addcontent").on('cellendedit', function (event) {
                // event arguments.
                var args = event.args;
                // column data field.
                var dataField = event.args.datafield;
                // row's bound index.
                var rowBoundIndex = event.args.rowindex;
                // cell value
                var value = args.value;
                // cell old value.
                var oldvalue = args.oldvalue;
                // row's data.
                var rowData = args.row;

                var total;
                if (dataField == "quantity") {
                    total = value * rowData.price;
                } else if (dataField == "price") {
                    total = rowData.quantity * value;
                }
                $("#addcontent").jqxGrid('setcellvalue', rowBoundIndex, "total", total.toFixed(2));
            });

November 10, 2014 at 7:27 am help~~ I want to automatically add grid #62442

Dimitar

Participant

Hi Inverse,

Your cellendedit code seems fine but you bind your grid source to the undefined (at least in this code snippet) dataFields variable. I think you should have:

datafields: dataFields2,

instead.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 11, 2014 at 9:58 am help~~ I want to automatically add grid #62527

Inverse

Participant

Hi Dimitar

Thank very much~~p(^-^q)

I have found problem~

Is a version of the problem

Replace jqwidgets-ver3.5.0 is ok~~

Thank you~~~~!

—————————————————-
I’d like to ask a question

https://www.youtube.com/watch?v=mZBTpXm-NRY&feature=youtu.be

Master-Details Will always refresh

can i not let him do to affect my price?

Thanks Dimitar~~!!!

November 11, 2014 at 11:34 am help~~ I want to automatically add grid #62534

Dimitar

Participant

Hi Inverse,

From your video, I did not understand what your issue is. Please explain it in detail and, if it is possible, provide us with a JSFiddle example which we can test.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

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

1 2 →

You must be logged in to reply to this topic.