jQuery UI Widgets Forums Grid Add javascript code after created

This topic contains 5 replies, has 3 voices, and was last updated by  Dimitar 6 years ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Add javascript code after created #8330

    jose Ivan
    Member

    HI,

    It is posible to add another part of code in grid.

    for example

    this is initial code.

    $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    source: dataAdapter,
                    theme: theme,
                    pageable: true,
                    autoheight: true,
                    columns: [
                      { text: 'First Name', datafield: 'firstname', width: 100 },
                      { text: 'Last Name', datafield: 'lastname', width: 100 },
                      { text: 'Product', datafield: 'productname', width: 190 },
                      { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
                      { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                    ]
                });
    And when I  press a button add JavaScript code to show the sum of a column or validation.
    the idea it's add javascript code after the grid it's created .something like this.
    $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    source: dataAdapter,
                    theme: theme,
                    pageable: true,
                    autoheight: true,
                    columns: [
                      { text: 'First Name', datafield: 'firstname', width: 100 },
                      { text: 'Last Name', datafield: 'lastname', width: 100 },
                      { text: 'Product', datafield: 'productname', width: 190 },
                      { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right',
    				 aggregates:
     [{'total_credit': function(Value, currentValue, column, record) { 
     if( typeof( currentValue)!='undefined' )
     return parseFloat(currentValue) + parseFloat(Value) 
     else if( typeof( Value)!='undefined')
     return parseFloat(Value) 
     else
     return 0
     } }],
     aggregatesrenderer :function(aggregates) {
     var renderstring = aggregates['total_credit'];
     return '<span style="margin-top: 4px; float: right;"><strong> Total : ' + renderstring + '</strong></span>';
     },
     validation: function (cell, value) {
     try {
     var myresult = eval(value.toString());
     if(myresult>15 and myresult<150)return true;
     else return false
     }
     catch (err) {
     return { result: false, message: 'Error en la digitaciĆ³n...' };
     }
     },
                      { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                    ]
                });
    how could i do this?
    var column = $('#grid').jqxGrid('getcolumn', 'columndatafield');
    column.aggregates=" aggregates: [{'total_credit': function(Value, currentValue, column, record) { ...... "
    thanks!
    Add javascript code after created #8368

    Dimitar
    Participant

    Hello jose Ivan,

    Here is how to show aggregates when a button is clicked. The example is based on the one in the demo Aggregates.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>In this sample is demonstrated how to display aggregates in
    jqxGrid.</title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
    type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../demos/jqxgrid/generatedata.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    // prepare the data
    var data = generatedata(200);
    var source =
    {
    localdata: data,
    datatype: "array",
    updaterow: function (rowid, rowdata) {
    // synchronize with the server - send update command
    }
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {
    width: 680,
    source: dataAdapter,
    theme: theme,
    showstatusbar: false,
    editable: true,
    showaggregates: false,
    selectionmode: 'singlecell',
    columns: [
    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
    { text: 'Product', datafield: 'productname', width: 170 },
    { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125 },
    { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2' },
    { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
    ]
    });
    $("#aggregatesButton").click(function () {
    $("#jqxgrid").jqxGrid({ showaggregates: true, showstatusbar: true, statusbarheight: 50,
    columns: [
    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 },
    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 },
    { text: 'Product', datafield: 'productname', width: 170,
    aggregates: ['count',
    { 'Cappuccino Items':
    function (aggregatedValue, currentValue) {
    if (currentValue == "Cappuccino") {
    return aggregatedValue + 1;
    }
    return aggregatedValue;
    }
    }
    ]
    },
    { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125,
    aggregates: [{ 'In Stock':
    function (aggregatedValue, currentValue) {
    if (currentValue) {
    return aggregatedValue + 1;
    }
    return aggregatedValue;
    }
    },
    { 'Not In Stock':
    function (aggregatedValue, currentValue) {
    if (!currentValue) {
    return aggregatedValue + 1;
    }
    return aggregatedValue;
    }
    }
    ]
    },
    { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2', aggregates: ['min', 'max'],
    aggregatesrenderer: function (aggregates) {
    var renderstring = "";
    $.each(aggregates, function (key, value) {
    var name = key == 'min' ? 'Min' : 'Max';
    renderstring += '<div style="position: relative; margin: 4px; overflow: hidden;">' + name + ': ' + value + '</div>';
    });
    return renderstring;
    }
    },
    { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] }
    ]
    });
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id="jqxgrid">
    </div>
    <button id="aggregatesButton">
    Show aggregates</button>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Add javascript code after created #8385

    jose Ivan
    Member

    HI , thanks for reply.

    i’m doing this way.

      for (var i = 0; i < config.columsDecimal.length; i++) {
    var datafield = config.columsDecimal[i];
    var column = $('#' + config.name).jqxGrid('getcolumn', datafield);
    column.validation = numbervalidation;
    column.initeditor = numberiniteditor;
    column.aggregates = aggregates;
    column.aggregatesrenderer = aggregatesrenderer;
    }

    where config.columsDecimal=[‘column1′,’column2’] ;

    this way i’m doing dynamic columns. I got a class config.So i add the function this way but i got a problem with aggregates and rernder.It’s seem the aggregates it’s a array so in the aggregatesrenderer get the value in the array.

    These are the functions

     var aggregatesrenderer = function (aggregates) {
    var renderstring = aggregates['total_'];
    return '<span style="margin-top: 4px; float: right;"><strong> Total : ' + renderstring + '</strong></span>';
    };
    var aggregates = function (Value, currentValue, column, record) {
    //[{ 'total_': function (Value, currentValue, column, record) {
    if (typeof (currentValue) != 'undefined')
    return parseFloat(currentValue) + parseFloat(Value)
    else if (typeof (Value) != 'undefined')
    return parseFloat(Value)
    else
    return 0
    // }
    // }]
    };

    how can i do the aggregate and aggregaterenderer like other functions…

    Add javascript code after created #8407

    Dimitar
    Participant

    Hi jose Ivan,

    In our approach to adding aggregates, the whole columns property is changed, which refreshes the grid. You add aggregates dynamically and the grid cannot reflect the changes.

    Best Regards,
    Dimitar

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

    Add javascript code after created #97325

    veenahosur
    Participant

    Hi Jose Ivan,

    I need same functionality.where to put for loop
    for (var i = 0; i < config.columsDecimal.length; i++) {
    var datafield = config.columsDecimal[i];
    var column = $(‘#’ + config.name).jqxGrid(‘getcolumn’, datafield);
    column.validation = numbervalidation;
    column.initeditor = numberiniteditor;
    column.aggregates = aggregates;
    column.aggregatesrenderer = aggregatesrenderer;
    }`

    • This reply was modified 6 years ago by  veenahosur.
    Add javascript code after created #97327

    Dimitar
    Participant

    Hi veenahosur,

    This topic has been inactive for more than five years. Please specify in detail what your requirement regarding aggregates is and we will try to assist you or offer advice.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.