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 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,
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 ...
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...
I’m glad you managed to resolve the issue. If you have any further questions please don’t hesitate to contact us again.
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..