Hello,I'm using UltraWebGrid and my actual situation let me:
I would like to:
This article explain how to do some things I want to do (delete), but not all:http://dotnetslackers.com/articles/aspnet/QuickGuideToImplementingTheNetAdvantageUltraWebGrid.aspxAnd in the infragistics sample page (http://samples.infragistics.com/2008.3/WebFeatureBrowser/Default.aspx) also have an example of a column with an edit image, but looking at the sourcecode I don't know how it creates that button (it isn't a "normal button column"). It also let you edit the row clicking in any part of the row. The example I mean is "WebGrid -> Row Templates".Thanks in advance
Hi,
It looks like you are trying to include two image button columns in the WebGrid to handle the editing and deleting of rows. This can be done using template columns. The following Knowledge Base article explains how to do this with examples:
http://devcenter.infragistics.com/Support/KnowledgeBaseArticle.aspx?ArticleID=4876
The following link to our online documentation also explains this with step-by-step example:
http://help.infragistics.com/Help/NetAdvantage/NET/2008.3/CLR3.5/html/WebGrid_Templating.html
Once the image button column is placed in the Grid, then the client side CellButtonClick event can be handled and the row object can be made to enter the edit mode, which will result in opening the RowEditTemplate for editing. The javascript method should look like as follows:
function
UltraWebGrid1_ClickCellButtonHandler(gridName, cellId)
{
var row = igtbl_getRowById(cellId);
row.editRow(true);
}
To open the RowEditTemplate after the Add button is clicked, you can handle client side AfterRowInsert event and set the row to be in edit mode as follows:
function UltraWebGrid1_AfterRowInsertHandler(gridName, rowId, index)
var row = igtbl_getRowById(rowId);
row.editRow(true); //opens the RowEditTemplate
To include the client side event handlers, in the properties window expand DisplayLayout--> ClientSideEvents and then navigate through the events and click on the right side box to add a new handler. This creates the method signature in the HTML source page.
Now the last question is still open, i.e. how to disable the delete key. I'm doing a research on this and will get back to you once I have an answer.
Hope this helps.
Thanks
Thanks for the answer, it helped very much but I still have a few problems.
I created a TemplateColumn as you said, and put inside 2 input button (I'll set the image later throught css).
<igtbl:TemplatedColumn><CellTemplate> <input id="btnEditar" type="button" value="Editar" onclick="EditRow();" /> <br /> <input id="btnEliminar" type="button" value="Eliminar" onclick="DeleteRow();" /></CellTemplate></igtbl:TemplatedColumn>
function EditRow() { var oGrid; //Get a reference for the grid on the client oGrid=igtbl_getGridById('ctl00_MainContent_gridPersonas'); oGrid.beginEditTemplate(); return true; }
function DeleteRow() { if (confirm("Are you sure")) { var oGrid; //Get a reference for the grid on the client oGrid=igtbl_getGridById('ctl00_MainContent_gridPersonas'); bDeleteClicked = true; oGrid.deleteSelectedRows(); return true; } return false; }
To avoid the DEL key press deletion, I use this function (BeforeRowDeletedHandler="BeforeDelete"):
function BeforeDelete() { if (!bDeleteClicked) {//DEL key pressed return true; } else { bDeleteClicked = false; return false; } }
The insert + edit template problem is solved using:
function UltraWebGrid1_AfterRowInsertHandler(gridName, rowId, index){ var row = igtbl_getRowById(rowId); row.editRow(true); //opens the RowEditTemplate
The problems I still have (and a new one) are:
Thanks again!!