About summary!

[my_2000Participant]

I don’t know how to write this summary, thank you

<script type="text/javascript">
    $(document).ready(function () {
      $('#clickme').jqxButton({width: 100, height: 26, theme:'base'});
      $("#clickme").on('click', function () {
         $("#product_table").jqxDataTable('addRow', null, {a1:"name",a2:1,a3:0}, 'first');
      });
      $("#product_table").jqxDataTable({
       	theme:"base",
       	width: "600",
          editable: true,
          columnsResize: true,
          showAggregates: true,
          aggregatesHeight: 30,
          columns: [
            { text: 'name', dataField: 'a1', width: 200, align: 'center',editable: false,cellsalign: 'right'},
            { text: 'num1', dataField: 'a2', width: 200, editable: false,align: 'center',cellsalign: 'right',
  			      aggregates: ['sum'],
              aggregatesRenderer: function (aggregates, column, element) {    
                  var renderString = "<div style='margin: 4px; float: right;  height: 100%;'>";
                  renderString += "<strong>Total: </strong>" + aggregates['sum'] + "</div>";
                  return renderString;
              }
            },
            { text: 'num2', dataField: 'a3', width: 200, align: 'center',cellsalign: 'right',
  			      aggregates: [{
  	              'num2_all': function (aggregatedValue, currentValue) {
  	                 return aggregatedValue + currentValue;
  	              },
              aggregatesrenderer: function (aggregates, column, element, summaryData) {
                  var renderstring = "<div  style=''>";
                  $.each(aggregates, function (key, value) {
                      renderstring += '<div style="">All: ' + value + '</div>';
                  });
                  renderstring += "</div>";
                  return renderstring;
              }
  	        }]
          }]
      });
    })
  </script>
<div id="product_table"></div><br>
<div id="clickme">Add row</div>

[HristoParticipant]

Hello my_2000,

Could you provide us with more details?
What do you want to achieve?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[my_2000Participant]

Sorry, in fact, I just want to sum, but I want to change “sum” into Chinese. My English is not very good, so I cut a screen, you can see that the total is displayed undefined, and num2 input numbers will report an error, I do not know how to write, in addition, please do not post demo in http://jsfiddle.net/ , China can’t visit this site!
error pic

thanks

[HristoParticipant]

Hello my_2000,

Thank you for the feedback.
I will create a work item for this case.
Meanwhile, you could try this approach below:

<script type="text/javascript">
    $(document).ready(function() {
        $("#clickme").jqxButton({
            width: 100,
            height: 26,
            theme: "base"
        });

        var source = {
            localdata: [
                // {
                //     a1: "Test",
                //     a2: 1,
                //     a3: 1
                // }
            ],
            datatype: "array",
            datafields: [{
                name: "a1",
                type: "string"
            }, {
                name: 'a2',
                type: 'number'
            }, {
                name: 'a3',
                type: 'number'
            }]
        };

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

        var isInitialState = true;
        $("#product_table").jqxDataTable({
            // theme: "base",
            width: "600",
            editable: true,
            columnsResize: true,
            showAggregates: true,
            aggregatesHeight: 30,
            source: dataAdapter,
            columns: [{
                text: "name",
                dataField: "a1",
                width: 200,
                align: "center",
                editable: false,
                cellsalign: "right"
            }, {
                text: "num1",
                dataField: "a2",
                width: 200,
                editable: false,
                align: "center",
                cellsalign: "right",
                aggregates: ["sum"],
                aggregatesRenderer: function(aggregates, column, element) {
                    if (isInitialState && dataAdapter.records.length == 0) {
                        setTimeout(function() {
                            isInitialState = false;
                        }, 800);
                        return "<strong>( Total )</strong>";
                    } else {
                        var renderString = "<div style='margin: 4px; float: right;  height: 100%;'>";
                        renderString += "<strong>Total: </strong>" + aggregates["sum"] + "</div>";
                        return renderString;
                    }
                }
            }, {
                text: "num2",
                dataField: "a3",
                width: 200,
                align: "center",
                cellsalign: "right",
                aggregates: [{
                    "num2_all": function(aggregatedValue, currentValue) {
                        return aggregatedValue + currentValue;
                    },
                    aggregatesRenderer: function(aggregates, column, element, summaryData, c) {
                        var renderstring = "<div  style=''>";
                        // $.each(aggregates, function(key, value) {
                        //     console.log("<div style="">All: " + value + "</div>");
                        //     renderstring += "<div style="">All: " + value + "</div>";
                        // });

                        renderstring += "</div>";
                        return renderstring;
                    }
                }]
            }]
        });

        var dataArray = [];

        $("#clickme").on("click", function() {
            dataArray.push({
                a1: "name",
                a2: 1,
                a3: Math.floor(Math.random() * 10)
            });

            source.localdata = dataArray;

            $("#product_table").jqxDataTable("render");
        });
    });
</script>

<div id="product_table"></div><br>
<div id="clickme">Add row</div>

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts