jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Calling cellsrenderer function when you add a new row

Tagged: , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 11 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Calling cellsrenderer function when you add a new row Posts
  • July 30, 2013 at 7:07 pm Calling cellsrenderer function when you add a new row #25969

    dchauhan
    Participant

    I have a grid where I have defined some cellsrender functions to show their corresponding images. The problem is that when I try to add a new row the cellsrender functions don’t get triggered so I don’t have the custom code on the new row. How can I accomplish getting the functions to fire when I add the new row. Below is an example

    $(“#jqxGrid”).jqxGrid({
    width: 1000,
    height: ‘90%’,
    source: QueryListSourceAdapter,
    theme: ‘fresh’,
    sortable: true,
    filterable: true,
    showfilterrow: true,
    editable: true,
    columnsheight: 40,
    selectionmode: ‘none’,
    position: ‘center’,
    ready: function () {
    $(tagName).jqxGrid(‘hidecolumn’, ‘userName’);
    $(tagName).jqxGrid(‘hidecolumn’, ‘defaultReportFormat’);
    },
    autoshowfiltericon: true,
    altrows: true,
    columns: [
    {text: ‘Select’, menu: false,sortable: false, datafield: ‘available’, columntype: ‘checkbox’, width: 50},
    {text: ‘Query Type’, dataField: ‘queryType’, width: 100,cellsrenderer:queryTypeRenderer},
    {text: ‘Query Name’, dataField: ‘queryName’, width: 200},
    {text: ‘Status’, dataField: ‘status’, width: 100,cellsrenderer:statusRenderer},
    {text: ‘Creation Date’, dataField: ‘creationDate’, width: 200,cellsformat: ‘D’,filtertype: ‘date’ },
    {text: ‘Update Date’, dataField: ‘updateDate’, width: 200,cellsformat: ‘dddd, MMMM dd, yyyy’,filtertype: ‘date’ },
    {text: ‘Default Report Format’, datafield: ‘defaultReportFormatImg’, width: 110, cellsrenderer: reportFormatImagerenderer},
    {text: ‘User Name’, dataField: ‘userName’, hidden:’true’},
    {text: ‘Default Report Format text’, dataField: ‘defaultReportFormat’, hidden:’true’}
    ]
    });

    var dt = new Date();
    var row = {};
    row[“available”] = false;
    row[“userName”] = “”;
    row[“queryType”] = businessModelType;
    alert(businessModelType);
    row[“queryName”] = queryName;
    row[“status”] = “A”;
    row[“creationDate”] = dt;//dt.toLocaleFormat(‘yyyy-MM-dd HH:mm:ss.f’);
    row[“updateDate”] = dt;
    row[“defaultReportFormat”]= ‘X’;
    alert(row);
    //queryTypeRenderer(row, queryType, businessModelType);
    $(“#jqxGrid”).jqxGrid(‘addrow’, null, row);

    July 31, 2013 at 7:20 am Calling cellsrenderer function when you add a new row #25987

    Dimitar
    Participant

    Hello dchauhan,

    Here is an example based on the demo Statusbar. In it the first column’s cells are italicized. When you add a new row, its first cell also has the custom style.

    <!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.10.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/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                var getAdapter = function () {
                    // prepare the data
                    var data = generatedata(15);
                    var source =
                    {
                        localdata: data,
                        datatype: "array",
                        datafields:
                        [
                            { name: 'firstname', type: 'string' },
                            { name: 'lastname', type: 'string' },
                            { name: 'productname', type: 'string' },
                            { name: 'quantity', type: 'number' },
                            { name: 'price', type: 'number' },
                            { name: 'available', type: 'bool' }
                        ],
                        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 failed.
                            commit(true);
                        }
                    };
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    return dataAdapter;
                }
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 680,
                    source: getAdapter(),
                    theme: theme,
                    showstatusbar: true,
                    renderstatusbar: function (statusbar) {
                        // appends buttons to the status bar.
                        var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                        var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
                        var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
                        var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
                        var searchButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Find</span></div>");
                        container.append(addButton);
                        container.append(deleteButton);
                        container.append(reloadButton);
                        container.append(searchButton);
                        statusbar.append(container);
                        addButton.jqxButton({ theme: theme, width: 60, height: 20 });
                        deleteButton.jqxButton({ theme: theme, width: 65, height: 20 });
                        reloadButton.jqxButton({ theme: theme, width: 65, height: 20 });
                        searchButton.jqxButton({ theme: theme, width: 50, height: 20 });
                        // add new row.
                        addButton.click(function (event) {
                            var datarow = generatedata(1);
                            $("#jqxgrid").jqxGrid('addrow', null, datarow[0]);
                        });
                        // delete selected row.
                        deleteButton.click(function (event) {
                            var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                            var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                            if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                                var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                                $("#jqxgrid").jqxGrid('deleterow', id);
                            }
                        });
                        // reload grid data.
                        reloadButton.click(function (event) {
                            $("#jqxgrid").jqxGrid({ source: getAdapter() });
                        });
                        // search for a record.
                        searchButton.click(function (event) {
                            var offset = $("#jqxgrid").offset();
                            $("#jqxwindow").jqxWindow('open');
                            $("#jqxwindow").jqxWindow('move', offset.left + 30, offset.top + 30);
                        });
                    },
                    columns: [
                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90,
                          cellsrenderer: function (row, column, value) {
                              return "<i>" + value + "</i>";
                          }
                      },
                      { 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' }
                    ]
                });
                // create jqxWindow.
                $("#jqxwindow").jqxWindow({ resizable: false, theme: theme, autoOpen: false, width: 210, height: 180 });
                // create find and clear buttons.
                $("#findButton").jqxButton({ width: 70, theme: theme });
                $("#clearButton").jqxButton({ width: 70, theme: theme });
                // create dropdownlist.
                $("#dropdownlist").jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 23, theme: theme,
                    source: [
                        'First Name', 'Last Name', 'Product', 'Quantity', 'Price'
                    ]
                });
                if (theme != "") {
                    $("#inputField").addClass('jqx-input-' + theme);
                }
                // clear filters.
                $("#clearButton").click(function () {
                    $("#jqxgrid").jqxGrid('clearfilters');
                });
                // find records that match a criteria.
                $("#findButton").click(function () {
                    $("#jqxgrid").jqxGrid('clearfilters');
                    var searchColumnIndex = $("#dropdownlist").jqxDropDownList('selectedIndex');
                    var datafield = "";
                    switch (searchColumnIndex) {
                        case 0:
                            datafield = "firstname";
                            break;
                        case 1:
                            datafield = "lastname";
                            break;
                        case 2:
                            datafield = "productname";
                            break;
                        case 3:
                            datafield = "quantity";
                            break;
                        case 4:
                            datafield = "price";
                            break;
                    }
                    var searchText = $("#inputField").val();
                    var filtergroup = new $.jqx.filter();
                    var filter_or_operator = 1;
                    var filtervalue = searchText;
                    var filtercondition = 'contains';
                    var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                    filtergroup.addfilter(filter_or_operator, filter);
                    $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup);
                    // apply the filters.
                    $("#jqxgrid").jqxGrid('applyfilters');
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid">
            </div>
            <div id="jqxwindow">
                <div>
                    Find Record</div>
                <div style="overflow: hidden;">
                    <div>
                        Find what:</div>
                    <div style='margin-top: 5px;'>
                        <input id='inputField' type="text" class="jqx-input" style="width: 200px; height: 23px;" />
                    </div>
                    <div style="margin-top: 7px; clear: both;">
                        Look in:</div>
                    <div style='margin-top: 5px;'>
                        <div id='dropdownlist'>
                        </div>
                    </div>
                    <div>
                        <input type="button" style='margin-top: 15px; margin-left: 50px; float: left;' value="Find"
                            id="findButton" />
                        <input type="button" style='margin-left: 5px; margin-top: 15px; float: left;' value="Clear"
                            id="clearButton" />
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.