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,

No, this is not against Infragistics policies. I just didn’t want to steal the satisfaction of doing it by yourself. I updated the sample.

If you have any further question please let me know.

Kind regards,
Petko Zhekov
Software Developer

Petko,

Thank you very much for consideration and attempt to provide with satisfaction .. but at the moment since I am at the beginning of client side controls adventure, please do steal it without hesitation it is rather leads to frustration.... I wish the documentation were a bit clearer, so your help is only hope. To that end I am, trying to understand all the details on the page that you provided so I can use some of it in my project.

1. Why it has two datasources ? I change to one (products) , visually it still working but I do not see value in the source actually reflects values of the checkboxes. ( I changed two of them but in products it still ‘True’ ) ( prod002.png )

2. While going through debugger I did not see the part that updating data source, somehow after checkbox value changed it needed to be reflected in datasource - ‘products’ in this case, can you show me how, isn’t this should be added to new setValue handler? Can you show me exact place.

3. What is the role of editCellStarted:  it seems like there is no knowledge of changed value there ?

4. What is the updating object that you used  and where I can find documentation what is its structure. Is it related somehow to igGridUpdating

I also did not find anything on EditorProviderCheckbox, or any other EditorProviders…. if you can point me to some description how it structured and samples of use.

    5. Is it possible to do what I need using igGridUpdating, at least it documented somehow better…

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.

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

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.