how can i add a checkbox at first column

[jose IvanMember]

hi i would like to add at first column a checkbox , this is if the end user want select all the row o rows for example to delete .

var dataAdapter = new $.jqx.dataAdapter(source);
    $("#jqxgrid").bind('bindingcomplete', function () {
        numColumns = $("#jqxgrid").jqxGrid('columns').length();
        lascolumn = numColumns - 1;
        numrow = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
        lasrow = $("#jqxgrid").jqxGrid('getdatainformation').rowscount - 2;
        var localizationobj = $("#jqxgrid").jqxGrid('gridlocalization');
        localizationobj.currencysymbol = "C$";
        localizationobj.currencysymbolposition = "before";
        localizationobj.decimalseparator = ".";
        localizationobj.thousandsseparator = ",";
        localizationobj.pagergotopagestring = "Ir a: ";
        localizationobj.pagerrangestring = " de ";
        localizationobj.percentsymbol = "%";
        localizationobj.pagerpreviousbuttonstring = "Previa";
        localizationobj.pagernextbuttonstring = "siguiente";
        localizationobj.pagershowrowsstring = "Mostrar filas:";
        // apply localization.
        $("#jqxgrid").jqxGrid('render');
    });
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
            {
                width: 1200,
                source: dataAdapter,
                editable: true,
                altrows: true,
                enablehover: true,
                enabletooltips: true,
                enableanimations: true,
                theme: 'summer',
                keyboardnavigation: true,
                autoheight: true,
                editmode: /*'selectedcell',*/'programmatic',
                theme: theme,
                pageable: true,
                columnsresize: true,
                selectionmode: 'singlecell',
                //                rendergridrows: function () {
                //                    return dataadapter.records + 5;
                //                },
                columns: [
                  { text: 'fila', columntype: 'checkbox', width: 50 },
                  { text: 'id', columntype: 'textbox', datafield: 'id', width: 50,
                      change: function (s, e) { 
                      alert()
                      }
                  },
                  { text: 'Numero de Cuenta', columntype: 'textbox', datafield: 'Account', width: 150 },
                  { text: 'Descripción', datafield: 'Description', columntype: 'textbox', width: 170 },
                  { text: 'Activo', datafield: 'available', columntype: 'checkbox', width: 67 },
                  { text: 'Debe', datafield: 'Debe', width: 70, cellsalign: 'right', cellsformat: 'c2', columntype: 'textbox'
                      //                      validation: function (cell, value) {
                      //                          var al = cell;
                      //                          var k = value;
                      //                      },
                      //                      initeditor: function (row, cellvalue, editor) {
                      //                          editor.jqxNumberInput({ digits: 3 });
                      //                      }
                  },
                  { text: 'Haber', datafield: 'Haber', width: 70, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                      validation: function (cell, value) {
                          return true;
                      },
                      initeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      }
                  },
                  { text: 'notas', datafield: 'nota', columntype: 'textbox', width: 250 }
                ]
            });

as you can see i created a checkbox column but it doesn’t have an field associated but when a i check one they disappear

function GetnewRow() {
    var row = {};
   
    row["id"] = 9;
    row["available"] = 0;
    row["Account"] = "";
    row["Description"] = "";
    row["Debe"] = "";
    row["Haber"] = "";
    row["nota"] = "";
    return row;
}
and my fuction  addrow
function insertrow() {
    var something = GetnewRow();
    var value = $('#jqxgrid').jqxGrid('addrow', null, something);
    return value;
}

[jose IvanMember]

and i would like to bind a event change () i see the events of checkbox what part of code i can do this…
maybe in cellsrenderer: function (row, column, value) {};

[Peter StoevKeymaster]

Hi jose Ivan,

The ‘cellendedit’ event is raised when the value of a cell is changed. The event provides as arguments the edit row, column and cell value. It is also necessary to set the column’s datafield property to a valid field in your datasource.

To change the built-in rendering of a column header, you need to create a custom renderer function that returns a new HTML string. The column’s definition should include a renderer property that points to your custom renderer function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jose IvanMember]

hi thanks for reply …. but i think that don’t understand me …. i want add a column checkbox and when the end user check this select the row and to delete it .

so i want to bind the event change of checkbox to a function when find the id of this row but i don’t know what part of my code i have to bind it , maybe in cellsrenderer ?? maybe u can help me

[jose IvanMember]

mmm my bad sorry

[Author]

Posts