KnowledgeSharing: How to use Infragistic ultrawebgrid
After installing Infragistics ,add some dll of it to your application and to use ultrawebgrid add the dll of it.then drag and drop that control from toolbox after right click on toolbox and selecting choose items then select ultrawebgrid.
<igtbl:ultrawebgrid id="UltraWebGrid1" runat="server" Width="824px" UseAccessibleHeader="False">
<DisplayLayout AllowDeleteDefault="Yes" AllowAddNewDefault="Yes" AllowSortingDefault="OnClient"
RowHeightDefault="21px" Version="3.00" SelectTypeRowDefault="Extended" AllowColumnMovingDefault="OnServer"
SelectTypeCellDefault="Single" BorderCollapseDefault="Separate" EnableClientSideRenumbering="True"
EnableInternalRowsManagement="True" FixedHeaderIndicatorDefault="Button" AllowRowNumberingDefault="Continuous"
Name="UltraWebGrid1" CellClickActionDefault="Edit" AllowUpdateDefault="RowTemplateOnly">
<AddNewBox Hidden="False" Prompt="add row">
<ButtonStyle></ButtonStyle>
</AddNewBox>
<Pager ChangeLinksColor="True" StyleMode="CustomLabels" >
<Style >
</Style>
</Pager>
<HeaderStyleDefault TextOverflow="Ellipsis" Cursor="Hand" " CustomRules="background-image:url(/ig_common/images/Office2003OliveBG.png);background-repeat:repeat-x;">
<BorderDetails ColorTop="215, 223, 193" ColorLeft="215, 223, 193"></BorderDetails>
</HeaderStyleDefault>
<FrameStyle Width="824px" BorderWidth="1px" ></FrameStyle>
<FooterStyleDefault >
<BorderDetails ></BorderDetails>
</FooterStyleDefault>
<ClientSideEvents BeforeExitEditModeHandler="BeforeExitEditMode" BeforeEnterEditModeHandler="BeforeEnterEditmode"
BeforeSortColumnHandler="beforesort" DblClickHandler="MyDblClick" CellClickHandler="GridCellClick"
AfterRowDeletedHandler="AfterDelete" AfterEnterEditModeHandler="HandleAfterEnterEditMode" AfterRowActivateHandler="AfterRowActivate"
MouseOverHandler="MouseOver" InitializeRowHandler="initializerow" MouseOutHandler="MouseOut" BeforeRowDeletedHandler="BeforeDelete"
InitializeLayoutHandler="InitializeGrid" ClickCellButtonHandler="CellButtonClick"></ClientSideEvents>
<SelectedHeaderStyleDefault Font-Bold="True"></SelectedHeaderStyleDefault>
<EditCellStyleDefault BorderWidth="0px" BorderStyle="None"></EditCellStyleDefault>
<SelectedRowStyleDefault ForeColor="White" BackColor="#F09D21" CustomRules="background-image:url(/ig_common/images/Office2003SelRow.png);background-repeat:repeat-x;"></SelectedRowStyleDefault>
<RowStyleDefault >
<Padding Left="3px"></Padding>
<BorderDetails WidthLeft="0px" WidthTop="0px"></BorderDetails>
</RowStyleDefault>
</DisplayLayout>
<Bands>
<igtbl:UltraGridBand>
<COLUMNS>
<igtbl:UltraGridColumn Type="checkbox" IsBound="True"></igtbl:UltraGridColumn>
</COLUMNS>
</igtbl:UltraGridBand>
<igtbl:UltraGridBand>
<ROWEDITTEMPLATE>
// add control for row template for editing and there will a ok button and cancel button
</ROWEDITTEMPLATE>
<ROWTEMPLATESTYLE
<BORDERDETAILS ></BORDERDETAILS>
</ROWTEMPLATESTYLE>
</igtbl:UltraGridBand>
</Bands>
</igtbl:ultrawebgrid>
It has some clientside events ,after dropping it it have no clientside event tag.you have to add that tag that is added in above.
that is
<ClientSideEvents BeforeExitEditModeHandler="BeforeExitEditMode" BeforeEnterEditModeHandler="BeforeEnterEditmode"
BeforeSortColumnHandler="beforesort" DblClickHandler="MyDblClick" CellClickHandler="GridCellClick"
AfterRowDeletedHandler="AfterDelete" AfterEnterEditModeHandler="HandleAfterEnterEditMode" AfterRowActivateHandler="AfterRowActivate"
MouseOverHandler="MouseOver" InitializeRowHandler="initializerow" MouseOutHandler="MouseOut" BeforeRowDeletedHandler="BeforeDelete"
InitializeLayoutHandler="InitializeGrid" ClickCellButtonHandler="CellButtonClick"></ClientSideEvents>
Every clientside event calling a javascript function.
for example in above AfterRowActivateHandler="AfterRowActivate"
AfterRowActivateHandler calling AfterRowActivate function.
<script language="javascript">
function AfterRowActivate(gn, rowID)
{
var grid=igtbl_getGridById("UltraWebGrid1");
var row=igtbl_getElementById(rowID);
var n = rowID.replace("UltraWebGrid3r_","");
var x=grid.Rows.getRow(n).getCell(0).getValue();
}
</script>
passing two argument one for id of grid and one for id of row.
you can find the value of a cell using like this grid.Rows.getRow(n).getCell(0).getValue(); and assign to a control.
there are several clientside event that i have mentioned earlier.
and you try it using these function for respective clientsideevent.
<script language="javascript">
function BeforeExitEditMode(tableName, itemName)
{
// Obtain the Row object for the current cell
var row = igtbl_getRowById(itemName);
// Obtain the Cell object for Column 9
var cell = row.getCell(7);
// Update the Cell value in Column 9
//cell.setValue("Updated");
return 0;
}
function BeforeEnterEditmode(gridname, cellid)
{
var row=igtbl_getRowById(cellid);
var value=row.getCell(0).getValue();
if(value == "false")
{
alert("plz check the checkbox");
return true;
}
else
{
return false;
}
}
function beforesort()
{
var grid = igtbl_getGridById('UltraWebGrid1');
grid.Allowsort=3;
}
function GridCellClick (gridName,CellID,button)
{
if(button == 2)
{
igtbl_UltraWebgrid3('UltraWebgrid3', event);
return true;
}
}
ROW_HEIGHT = 40;
ROW_HEIGHT_DELTA = 10;
function MyDblClick(tableName,itemName)
{
var row = igtbl_getRowById(itemName);
var cell = igtbl_getElementById(itemName);
var parts = itemName.split("_");
var grid = igtbl_getGridById('UltraWebGrid1');
grid.AllowUpdate = true;
if(parts[2]==1)
{
alert("can't be edited");
grid.AllowUpdate = false;
return false;
}
if (row != null)
{
if (row.Element.style.height == "")
{
row.Element.style.height = ROW_HEIGHT;
}
oldheight = parseInt(row.Element.style.height.replace(/px/,''));
igtbl_resizeRow("UltraWebGrid1", row.Element.id, oldheight + ROW_HEIGHT_DELTA)
}
}
function HandleAfterEnterEditMode(gridID, cellID)
{
var cell = igtbl_getCellById(cellID);
cell.Element.style.backgroundColor = "#99FFFF";
}
function AfterDelete()
{
// set deleting to true so when deleting
// multiple rows confirm is shown only once
deleting=true;
del=true;
}
function MouseOver(tableName, itemName, type)
{
if(type == 0)
{ // Are we over a cell
var cell = igtbl_getElementById(itemName);
cell.style.cursor = 'hand';
cell.style.color = 'red';
var label = document.getElementById("mylebel");
var parts = itemName.split("_");
if(label && parts.length>=3)
label.innerHTML = "Current Row:" + parts[1] + " - Current Column:" + parts[2];//add a label control to your webform
}
}
function AfterRowActivate(gn, rowID)
{
var grid=igtbl_getGridById("UltraWebGrid1");
var row=igtbl_getElementById(rowID);
var n = rowID.replace("UltraWebGrid3r_","");
//var x=grid.Rows.getRow(n).getCell(0).getValue();
}
function InitializeRow(tableName,rowName)
{
var icount;
var row = igtbl_getElementById(rowName);
var FirstActiveCell = igtbl_getBandFAC(tableName, row);
var objDd = document.getElementById("commonfield_drpdwn");
igtbl_getCellById(row.cells[FirstActiveCell+2].id).setValue(objDd.options[objDd.selectedIndex].text);
var x=document.getElementById("commonfield_drpdwn").options[document.getElementById("commonfield_drpdwn").selectedIndex].value;
igtbl_getCellById(row.cells[FirstActiveCell+3].id).setValue(x);
igtbl_getCellById(row.cells[FirstActiveCell+4].id).setValue(0);
igtbl_getCellById(row.cells[FirstActiveCell+7].id).setValue(false);
igtbl_getCellById(row.cells[FirstActiveCell+5].id).setValue(0);
igtbl_getCellById(row.cells[FirstActiveCell+6].id).setValue(0);
igtbl_getCellById(row.cells[FirstActiveCell+8].id).setValue(false);
igtbl_getCellById(row.cells[FirstActiveCell+0].id).setValue(-1); //-1 for adding a new row
igtbl_getCellById(row.cells[FirstActiveCell+9].id).setValue(0);
flagExitAlert=1;
}
function CellButtonClick(gridId, cellId) {
var oGrid = igtbl_getGridById(gridId);
var oRow = igtbl_getRowById(cellId);
oRow.editRow();
}
function MouseOut(tableName, itemName, type)
{
if(type == 0) { // Are we over a cell
var cell = igtbl_getElementById(itemName);
cell.style.color = 'black';
}
}
function BeforeDelete(gridname, rowid)
{
if(!deleting) // used to determine if confirm box has shown yet
{
// show the confirm box
del = confirm("You sure you want to delete row(s)");
// set deleting to true so confirm is not shown again
deleting=true;
}
// returning true cancels the event so return the opposite
// of what the user selected in the confirm box
return !del;
alert(del);
}
</script>
you can editrow template means when you click a popuplike window will there where cell values will in textboxes or in other control where it can be editable.there you can edit it and there are two buttos that is ok button and cancel button.if you click ok button cell value will change according to your changes.
Comments
Post a Comment