Customizing jqxGrid's Column

[akashParticipant]

Hi,
i’m trying to customizing the jqxGrid column, my intention to have two custom columns, one with check-box(both header and cell) and another column with Drop down cells. I have tried many approaches but it fails. Following is my source code on which i’m working.

 $scope.source = [
        { "Date": "1/2/2014", "S&P500": 1831.98, "NASDAQ": 4143.07, "Discontinued": true },
        { "Date": "1/3/2014", "S&P500": 1831.37, "NASDAQ": 4131.91, "Discontinued": false }];

dataProxy.getJsonData().success(function (data, status) {
        simpleGrid();
        $scope.createGrid = true;
    });

var simpleGrid = function () {
        var source =
        {
            datatype: "array",
            localdata: $scope.source,
            datafields:
           [
               { name: 'NASDAQ', type: 'string' },
               { name: 'S&P500', type: 'string' },
               { name: 'Date', type: 'Date' },
               { name: 'Discontinued', type: 'bool' }
           ]

        };
       
        var dataAdapter = new $.jqx.dataAdapter(source);
        var cellRendrer = function (row, columnfield, value, defaulthtml, columnproperties) {
            console.log(row);
            return "<input type='checkbox' checked='false' style='margin-left: 40px' id='row"+row+"' '/>"

        };
        var renderer = function () {
            return "<div><input type='checkbox'/>"
        };
        var cellvaluechanging =function (row, datafield, columntype, oldvalue, newvalue) {
            console.log( "$" + newvalue);
        }

        $scope.gridSettings =
         {
             width: "100%",
             source: dataAdapter,
             columnsresize: true,
             pagesize: 50,
             pageable: true,
             bindingcomplete: function (event) {
                 var elm = angular.element(document.getElementById('jqxgrid'));
                 console.log(elm);

             },
             cellvaluechanged: function (event) 
             {
                 console.log("Cell");
             },
             columns: [
                {
                    text: 'Discontinued', align: 'center', width: 80, editable: true, editmode: 'click', columntype: 'checkbox', cellsrenderer: cellRendrer, renderer: renderer, cellendedit: function (row, datafield, columntype, oldvalue, newvalue) {
                        console.log("HIR");
                    }
                },
             { text: 'NASDAQ', datafield: 'NASDAQ' },
             { text: 'S&P500', datafield: 'S&P500' },
             { text: 'Date', datafield: 'Date', cellsformat: 'MM-dd-yy' },
             
             ]

        };

}

<jqx-grid id="id" jqx-create="createGrid" jqx-settings="settings"></jqx-grid>

I’m not able to make header checkbox working, cell checkbox is working but not able to put any event(like on change), i took the cellRendrer approch for dropdown, but drop down is not working, it is not even rendering.

Is there any other way to do this in angular , what am i missing

[Peter StoevKeymaster]

Hi akash,

As we demonstrate in our jqxGrid’s demos and pointed out many times in the Forum, we do not support widgets in the Grid’s cells. Cells could contain HTML Strings like Images, Links, Bold/Italic text and nothing else.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts