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