I need to configure igGrid control so it can perform the following in the attached sample project ( igGrid001.html )
1. Out of all columns only last two should be editable ( 'inStock' and 'read')
2. 'inStock' should be a check box ( can make it checkable) and 'read' should be a drop down with two string values 'Yes' & 'No' and underlying boolean true/false ( now it is string)
3. on inStock values change it should fire event that will modify inStock value in data source ( obtain reference to the data source object) and rebind grid to it again.
4. Same as 3 for 'read' change..
Thanks.
Hello,
Thank you for contacting Infragistics Support!
We are currently looking into this matter and will keep you posted of any available information.
Please do not hesitate to contact us with any updates or additional questions regarding this scenario in the meantime.
Kind Regards,
Petko Zhekov
Software Developer
Infragistics, Inc.
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,
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.
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.
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,
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.htmlThanks.
Just replace the comment “// REBIND GRID HERE.” with this line of code:
var grid = this.updating.grid;
Then use grid's instance to change the data source(use the option method).
Also the change in cell's style is because the cell is entering in edit mode. This could not be prevented. What you can do is to set a template to the column to render regular checkbox and forbid the updating for it. And then update the values on checkbox click with Updating's API methods.
Just wonder if it is against Infragistics policies to demonstrate it in the provided html file ...
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.
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.
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 )
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.
What is the role of editCellStarted: it seems like there is no knowledge of changed value there ?
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…
1.) I thought by “rebind grid to it again” you meant to change the data source when checkbox is clicked. Since I know this is not the case you can just call endEdit method to save the changes without the need of any additional interactions. The instance of the data source can be obtained from the updating variable as it's shown in the sample;
2.) The changes are added to the data source after the edit is ended;
3.) You can remove the editCellStarted handler;
4.) We do not have documentation about the editor providers because they are created for internal purposes. Since the functionality you want is currently not supported (it is now on the top of our backlog and it will be added in a future volume release) and that’s why I used it to create a very custom solution for you. You can find more information about the editors themselves here and here.
5.) Yes it will be added.
I updated the sample.
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..