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!!
I have solved the "not open edit template with double click" problem but I still haven't found the solution to some issues and I have added a few more. Any ideas?
The solution I use for that is to set AllowUpdate="No" property for each column in the grid.
The double click event can be handled on the client side and can be canceled as follows by including an event handler for DblClick event:
function UltraWebGrid1_DblClickHandler(gridName, cellId)
return(true);
Now to avoid inserting empty rows, the event handler AfterRowTemplateCloseHandler can be programmed on the client side as follows:
UltraWebGrid1_AfterRowTemplateCloseHandler(gridName, rowId, bSaveChanges)
//Add code to handle your event here.
if(event.srcElement.id == "igtbl_reCancelBtn")
//First get a reference to the row that opened the Row Edit Template
var
row = igtbl_getRowById(rowId);
row.deleteRow()
return;
else if(event.srcElement.id == "igtbl_reOkBtn")
row.processUpdateRow(true);
This way if the cancel button is clicked, then the blank row which was inserted will be deleted.
I've used a WebDateChooser in my RowEditTemplate and it works fine. To be able to reproduce the issue you are having, I need a sample. If you can provide it, that'll be really great.
Would not running this code also delete any row that the cancel button was clicked on?
For example if I open rowedit template on historical data, then click cancel.
I added another line of code in the UltraWebGrid1_AfterRowTemplateCloseHandler to check if the first cell of the row is empty or not before deleting it. In case of new row it is empty.
This changes the UltraWebGrid1_AfterRowTemplateCloseHandler method as follows:
function UltraWebGrid1_AfterRowTemplateCloseHandler(gridName, rowId, bSaveChanges)
var cell = row.getCell(0); // gets the first cell in the row
var val = cell.getValue(); //gets the value of present in the first cell
//for the new row the value in the first cell is null
if(event.srcElement.id == "igtbl_reCancelBtn" && val == null )
row.deleteRow();