Hi,
I am developing a webform that has a webgrid. The grid is supposed to be able to allow the user to select the text inside the cell. The only problem I have is that some of the cell have also a JS functionality (cellclick) that I need to handle. Using the ReadOnly property for the grid, I am able to select the text inside a cell, but I am not able to fire the CellClick event. Is there any other way to be able to select a text (or part of a text) and also use the fully functionality for a cell?
Regards,
Aurelian
You can manually attach a click event to the grid's table element, and use the srcElement on the event parameter to get the exact cell in question.
-Tony
Tony, can I have a simple example that I can use?
Aurelian,
You'll want to add an event handler to the grid's main element. Don't use the grid's id exactly, or you'll just end up with getting a reference to the hidden input field for the grid.
Here's a code snippet. This uses MS AJAX.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function pageLoad(sender, args)
{
var grd=$get("G_grid");
$addHandler(grd,"click",grid_click);
}
function grid_click(args)
var cell=igtbl_getCellById(args.target.id);
if(cell)
cell.setValue("hello");
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<div>
<igtbl:UltraWebGrid runat="server" ID="grid">
<Bands>
<igtbl:UltraGridBand>
<Columns>
<igtbl:UltraGridColumn Key="col1">
</igtbl:UltraGridColumn>
<igtbl:UltraGridColumn Key="col2">
</Columns>
</igtbl:UltraGridBand>
</Bands>
<Rows>
<igtbl:UltraGridRow>
</igtbl:UltraGridRow>
</Rows>
</igtbl:UltraWebGrid>
</div>
</form>
</body>
</html>
Tony, that is not what I want. I don't want to setValue to a cell, but to highlight the cell and to be able to have the copy functionality like the normal cell in a HTML table cells. Also, and I repeat, I don't want to loose the functionality of the cell (cellclick, or doubleclick). The example that you gave me is to set value to a cell. Could you please give another example that shows me how to highligt the cell?
Thanks for your help,
In the code above, you are in effect handling the cell click and/or double click. What you do from inside of that handler is limited only to your imagination. You can highlight (select) cells through the client-side object model which is documented in our help files. You'll want to use the select function off of the cell object. In my code snippet above, I'm calling setValue, just replace that with select
http://help.infragistics.com/Help/NetAdvantage/NET/2007.3/CLR2.0/html/WebGrid_cell_Object_CSOM.html
Also, as an alternate approach, you can set the grid's AllowUpdateDefault property to false, which will prevent the user from entering data. The user will still be able to use other functions of the grid, but will not be able to edit any of the cells.
The readonlymode property of the grid is used to limit functionality (and hence, 'weight') of the grid.
Hope this helps,
Hi Tony,
I am using the following code to navigate through cells using arrow keys. When i land on the cell I want the existing text to be selected. I am trying to use the setSelected(true) method but it is not selecting.
function ugrdApplicants_EditKeyDownHandler(gridName, cellId, key){ var grid = igtbl_getGridById(gridName); var cell = igtbl_getCellById(cellId); var row = cell.getRow(); var col = cell.Column; switch(key) { //If Up/Down Key case 38: case 40: if (col.ColumnType != 5) { if (key == 38) var nextRow = row.getPrevRow(); else var nextRow = row.getNextRow(); if(nextRow != null) { cell.endEdit(true); var newCell = nextRow.getCell(cell.Index);
newCell.beginEdit(); newCell.setSelected(true); } } break; //If left/right key case 37: case 39: if (key == 37) var nextCell = cell.getPrevCell(); else var nextCell = cell.getNextCell(); if(nextCell != null) { cell.endEdit(true); newCell.setSelected(true); newCell.beginEdit(); } break; default: break; }
I have the following settings on my Grid.
<DisplayLayout AutoGenerateColumns="False" SelectTypeCellDefault="Single" SelectTypeColDefault="Single">
Thank you.
Let me get this straight:
You want to:
Is that right?
This call: newCell.setSelected(true);
will only set the cell to selected, not the text inside of the editor.
I don't know how to get the editor, but I have a workaround for you that _might_ work.
If you use a WebTextEdit control and set the "SelectionOnFocus" property to "SelectAll" and then apply the editor to each column that you want this behavior on it should select all of the text as soon as you enter edit mode.
To apply a WebTextEdit control to a column do this:
Code:
grid.Bands[0].Columns[0].Type = ColumnType.Custom;
grid.Bands[0].Columns[0].EditorControlID = txtEdit.UniqueID;
Aspx:
<igtbl:UltraGridColumn Type="Custom" EditorControlID="txtEditId">
Wow, great tip! Thanks for sharing this with everyone.