I am a long time UltraWinGrid user. Been using NetAdvantage since 2004.
I have a large code base of WinForm grids that I need to move to ASP.NET MVC.
Currently the code makes heavy use of the UltraWinGrid event handlers and I am unclear about how to migrate the event handling code to the igGrid.
I have checked the igGrid API documentation and do not find what I'm looking for.
Given the list below of UltraWinGrid event handlers and their method names below, can you give me the equivalent igGrid event handlers and methoid names?
The UltraWinGrid event handlers that are being used fall into the following categories:
Grid Events:
event InitializeLayoutEventHandler InitializeLayout;
Row Events
event CancelableRowEventHandler BeforeRowUpdate;
event BeforeRowInsertEventHandler BeforeRowInsert;
event RowEventHandler AfterRowInsert;
event EventHandler AfterRowsDeleted;
Cell Events
event EventHandler AfterCellActivate;
event CellEventHandler AfterCellListCloseUp;
event CellEventHandler AfterCellUpdate;
event CellEventHandler CellChange;
event CellEventHandler ClickCellButton;
event CancelEventHandler BeforeCellDeactivate;
event BeforeCellUpdateEventHandler BeforeCellUpdate;
Mouse Events
event UIElementEventHandler MouseEnterElement;
event UIElementEventHandler MouseLeaveElement;
Hello Mark,
Thank you for contacting Infragistics!
For these events I recommend you look into the following.
First for InitializeLayout there is no replacement as styles are done through CSS instead of the layout. If you require an event early in the cycle I recommend you look into dataBinding/ed or dataRendering/ed
http://help.infragistics.com/jQuery/2014.1/ui.iggrid#events:dataBound
http://help.infragistics.com/jQuery/2014.1/ui.iggrid#events:dataRendering
For the row events I recommend you looking into the following events of the updating feature:
http://help.infragistics.com/jQuery/2014.1/ui.iggridupdating#events:editRowEnded
http://help.infragistics.com/jQuery/2014.1/ui.iggridupdating#events:rowAdding
http://help.infragistics.com/jQuery/2014.1/ui.iggridupdating#events:rowAdded
http://help.infragistics.com/jQuery/2014.1/ui.iggridupdating#events:rowDeleted
For the cell events I recommend the following:
http://help.infragistics.com/jQuery/2014.1/ui.iggridselection#events:activeCellChanged
AfterCellListCloseUp does not have an equivalent
http://help.infragistics.com/jQuery/2014.1/ui.iggrid#events:cellClick
http://help.infragistics.com/jQuery/2014.1/ui.iggridupdating#events:editCellEnded
http://help.infragistics.com/jQuery/2014.1/ui.iggridselection#events:cellSelectionChanged
BeforeCellDeactivate does not have an equivalent
http://help.infragistics.com/jQuery/2014.1/ui.iggridupdating#events:editCellEnding
Mouse events, the grid does not handle the mouse events if you want to handle them you can through jQuery:
http://api.jquery.com/mouseenter/
http://api.jquery.com/mouseleave/
Thank you for the quick response, Mike.
Give me some time to review those links. I have some additional questions, but will get into those later.
Mark
Thank you for the update. I will follow up in a few business days to see how you are progressing with this matter.
Please let me know if you have any further questions concerning this matter.
I am following up to see if the information provided has resolved this matter.
Please let me know if I may be of further assistance with this matter.
Hi Mike,
I have a couple of other topics:
1) Custom Summaries that inherit from ICustomSummaryCalculator.
Is this ICustomSummaryCalculator interface available to be used with the igGrid?
2) With UltraWinGrid, I could define various column styles (EditButton, DropDownValidate).
Are those column styles available to be used with the igGrid?
Thanks
Thank you for the update. If you want to do custom summaries for the igGrid what you would do is create function to calculate your summary then plug that event into the summary feature summaryCalculator property:
http://help.infragistics.com/jQuery/2014.1/ui.iggridsummaries#options:columnSettings.summaryOperands.summaryCalculator
You can see a sample of this at the following link:
http://igniteui.com/grid/summaries-custom
For our IgniteUI product for jQuery all styles are done through CSS. You can see the following documentation on this:
http://help.infragistics.com/doc/jQuery/2014.1/CLR4.0/?page=igGrid_Styling_and_Theming.html
To change a style you would find the corresponding CSS file and CSS class and make the changes to that. You can also use jQuery selectors to add styles/classes to specific elements.
Thanks Mike,
When it comes to using igGrid, I having to make a mental shift from thinking about coding C# classes and interfaces on the server side to thinking about coding jQuery on the client side. Whew!!
Is there an example of how I could simulate the UltraWinGrid ColumnStyle.EditButton behavior in igGrid?
I want to embed a hidden button in the grid. But when the user places their mouse over a cell in the grid, I want the button to appear.
Then if the user clicks the button, a dialog is launched which itself contains a search field, a Go button and a grid for the search results.
The user enters a value in the search field and clicks to Go button to execute a query.
Then if the user double-clicks a row in the grid in the dialog, the search result values from the selected row are copied from the grid in the dialog back to the parent igGrid.
This is the behavior I currently have in many of the UltraWinGrids in my apps.
Let me know.
Thank you for the update. The first thing you will want to do is create a template column. For example you can see the following sample on how to create a template column with a button:
http://igniteui.com/grid/column-template
If you don’t want the button to be on every row and instead just one location you can use jQuery to insert the element:
http://api.jquery.com/append/
http://api.jquery.com/insertafter/
http://api.jquery.com/add/
For you selector that will depend on where you want to insert it. You will have to get the class or ID of that element.
As for hiding and then showing on hover that is something you can achieve through CSS styles. You will want to set display none or similar style.
Then you can handle the click event of the button to show the dialog. For when you click on the grid you can use the cellClick event: