Hello mcseidel,

Below you can find the answers of the requirements you have:

1.) Every column you want to be read only you have to set the readOnly option to true explicitly in the column settings;

2.) To enable a checkbox for single Boolean column you can set the format option with “checkbox” value. And if you want a different options in the dropdown of the other column you can define a text editor with dropdown with the desired options. However if you choose “Yes” or “No” this will be in the editor. So at editRowEnding event we change the value of the editor back to the desired Boolean ones.  The code snippet below demonstrates the approach:

{
    columnKey: "read",
    editorType: "text",
    editorOptions: {
        button: "dropdown",
        listItems : [
           "Yes",
           "No"
        ],
        keypress: function(evt, args){
            evt.preventDefault();
        },
        textChanged: function (evt, args){
            var dataSource = $("#grid1").data('igGrid').dataSource;
            // your custom code here
        }
    }
}

3.) Currently we do not have functionality that can fulfill your requirements but we are working towards improving this. You can expect it in one of our future volume releases. For now I can propose you a workaround. The basic idea is to override the setValue function of the checkbox and in it run your custom code. Example here:

var origfun = $.ig.EditorProviderCheckbox.prototype.setValue;
$.ig.EditorProviderCheckbox.prototype.setValue = 

function (val, updating) {
    if (updating) {
        val = !this.value;
    }
    origfun.call(this, val, updating);
    var dataSource = $("#grid1").data('igGrid').dataSource;
    // your custom code here.
}

4.) For the other column bind to textChanged event and then execute your custom logic.

I updated the sample to demonstrate everything I explained.

I hope this helps! 

Kind regards,
Petko Zhekov
Software Developer

Hi Petko,

Thanks for your help.

there are still couple of things to figure out :

I created another file igGrid002. I noticed that you change js libraries to more up to date, but I need to have it working with the set that on the sample project, since it going to be part of a bigger picture...

Somehow the igGrid001 updated.html did not work in IE10, see err01.jpg file attached.. it worked in Chrome  I've seen it several times before when were using newer js libs.. You might know what it is.. if you are please let me know for future references...

So,  I copied grid into new file igGrid002 with original libraries, removed column with drop down.. I need to concentrate on having check box working, it does not work now... I also change it to 'cell' editing to avoid 'done/cancel'  Here what I need help with : check box somehow does not show itself checked. not sure how to fix it.

Also I added event editCellStarted and $("#grid1").data('igGrid').dataSource._data;  is returning underlying data source.. but I do not see how to spot check box value changed so to update data source  on the client to keep it in sync with the grid

Please see if check box issues can be corrected on the given *.js set.

Thanks.

Hi,

I tried the sample in IE10 with the scripts you provided and it worked as expected. The checkbox does not look checked because you did not copy the images that the theme uses. The editCellStarted event will not provide you the information that you need because the change in the checkbox did not happen yet.  If you need something to execute when the checkbox click occurs it should be done in the setValue function that we’ve overridden. Or you can bind to editCellEnded and check the values and oldValues properties for differences in the values.

Kind regards,
Petko Zhekov
Software Developer

Hi Petco, can you modify igGrid002.html in the igGrid002.rar so it shows check boxes checked on the given set of libraries, I am not sure exactly what styles to add.. and also show how to set value or get the changes to the dataSource in the same file ( igGrid002.html) .. the editCellEnded seems like getting fired only when leaving row, that might not work for me.  Also if I am changing datasource values, how to trigger rebinding of the igGrid. Thanks.

Hi,

No other styles need to be added. Just get the images from the IgniteUI install directory and place them in samples images folder. And as for the rebinding of the grid do it in the setValue override. Please see the snippet below: 

$.ig.EditorProviderCheckbox.prototype.setValue = function (val, updating) {
    if (updating) {
        val = !this.value;
    }
    origfun.call(this, val, updating);
    // REBIND GRID HERE.
}

Kind regards,

Petko Zhekov

Software Developer

Hi,
Thanks for get back to me...
I found missing image file and added to my pj, now this part is working...
Can you show me exactly in the igGrid002.html where to put
$.ig.EditorProviderCheckbox.prototype.setValue so it will fire and I will have reference to datasource.
Also if you can show me how to do the following: right now when I click checkbox style of the cell is getting changed.. how to prevent it from happening so it just showing checked/uncheck
and no style change.  If you can show it in the igGrid002.html
Thanks.

ok, vertical-align: middle solved the issue, and gave me a little satisfaction :-) Thanks for your help.

Petko, last thing left for me to be done :

I added this style to site.css ( made them red to see position)  :

.jjGrid.ui-iggrid-table > tbody > tr.ui-iggrid-activerow > td.ui-iggrid-selectedcell > span,
.jjGrid.ui-iggrid-table > tbody > tr.ui-iggrid-altrecord.ui-iggrid-activerow > td.ui-iggrid-selectedcell > span {
        border-top: 2px solid red;
    border-bottom: 2px solid  red;
    line-height: 30px;
   

}

and removed template from column setting.. it added two lines to the check box column when selected .. but they are not straight ( continuous ) , the red line on the check box column is 1 - 2 px off..  do you know how to correct it..if you are please show it on the latest  sample site attached.

Thanks

Hi Petco

Attached updated site.. I need some help me with style.. I added style.css with selectors that work with template: "<span class='cellContent'>${ProductID}</span>" in columns setting...all columns work well except check box column (InStock) If you can help me to configure it correctly so checkbox column looks the same on selected row.  basically .cellContent for selected row has { border-top: 2px solid #27c7eb;
    border-bottom: 2px solid #27c7eb;} but somehow attempt to apply the same style to checkbox column leads to checkbox disappear.

can you help to fix it so the check box is visible and functional and on the selected row check box cell styles exactly the same as other cells in selected row, i.e. white background with two blue lines...

Thanks.

Hi,

I’m glad you managed to resolve the issue. If you have any further questions please don’t hesitate to contact us again.

Kind regards,

Petko Zhekov

Software Developer

Hi Petko,

Thanks for your help. The last update is pretty close but 'dataSource = updating.grid.dataSource;' still does not bring changes to the data source ( products ) so I updated

this to  :

               origfun.call(this, val, updating);
                if(updating){
                    var grid = updating.grid;
                    var rowID = updating._row_;
                    updating.endEdit(true);
                    var prodRow = _.find(products, function (product) {
                      return ( product.ProductID == rowID )
                    })
                    if (prodRow) {
                        prodRow.inStock = val;
                    }

That seemed to start working and keeping products and grid in sync.  I'll leave this case open since I might have question when transferring it to main project, but close in couple of days it it goes well.. 

Thanks.