Use the infragistics. webui. ultrawebgrid button

In the process of using infragistics. webui. ultrawebgrid, we may also add some rows to the Microsoft gridview control, such as adding the row,

The delete button for this row. If you are a friend of the infragistics. webui. ultrawebgrid control for the first time, you may have to explore it for a while. Therefore, it is not a waste of time to write it for your reference.

In a few minutes, you can play with Cs and so on,

 

First look at the effect:

 

Click "+" on the right to add a row and click "-" to delete the row. Is it convenient?

 

How can we do this? Some key points are difficult to find. Please refer to it.

 

Add on the server:

Ultrawebgrid1.displaylayout. allowaddnewdefault = Infragistics. webui. ultrawebgrid. allowaddnew. Yes;
Ultrawebgrid1.displaylayout. allowdeletedefault = Allowdelete. Yes;
Ultrawebgrid1.displaylayout. addnewbox. Hidden =   True ;

They are allowed to be added and deleted, and the addnewbox customized by infragistics. webui. ultrawebgrid is removed. Of course

It can be defined in the client or its XML style file.

 

Add two columns on the server

// Add button Column
Ultrabodcolumn addcol =   New Ultrabodcolumn ();
Addcol. header. Caption =   "" ;
Addcol. Width = Unit. parse ( " 30 " );
Addcol. cellstyle. horizontalalign = Horizontalalign. Center;
Addcol. Type = Columntype. Button;
Addcol. cellbuttonstyle. cssclass =   " Addbutton " ;
Addcol. Key =   " Add " ;
Addcol. cellbuttondisplay = Cellbuttondisplay. Always;
Ultrawebgrid1.bands [ 0 ]. Columns. Add (addcol );
// Delete button Column
Ultratedcolumn delcol =   New Ultrabodcolumn ();
Delcol. header. Caption =   "" ;
Delcol. Width = Unit. parse ( " 30 " );
Delcol. cellstyle. horizontalalign = Horizontalalign. Center;
Delcol. Type = Columntype. Button;
Delcol. cellbuttonstyle. cssclass =   " Delbutton " ;
Delcol. Key =   " Del " ;
Delcol. cellbuttondisplay = Cellbuttondisplay. Always;
Ultrawebgrid1.bands [ 0 ]. Columns. Add (delcol );

 

Note that delcol. type = columntype. Button; the column type must be set to the button type,

Next, delcol. cellbuttondisplay = cellbuttondisplay. Always; this button must be set to always display; otherwise, only the mouse is displayed. (Depressing, infragistics. webui. ultrawebgrid is like this .)

 

Then add the clientCodeFirst, add CSS.

 

. Addbutton
{
Background-Position : Center ;
Background-Image : URL (http://images.cnblogs.com/webgrid/add.gif) ;
Background-repeat : No-repeat ;
Background-color : # Ffffff ;
Border : 0 ;
}
. Delbutton
{
Background-Position : Center ;
Background-Image : URL (http://images.cnblogs.com/webgrid/del.gif) ;
Background-repeat : No-repeat ;
Background-color : # Ffffff ;
Border : 0 ;

}

 

Add JS Code

 

// After the button column is clicked
Function Afterclickcellbuttonhandler (gridname, cellid)
{
VaR Ocell = Igtbl_getcellbyid (cellid );
Switch (Ocell. Column. Key)
{
Case   " Add " :
Insertrow ();
Break ;
Case   " Del " :
Deleterow ();
Break ;
}
}

FunctionInsertrow ()
{
Currentgrid=Igtbl_getgridbyid (ultrawebgrid1 );
Currentgrid. Rows. addnew ();
}

FunctionDeleterow ()
{
VaRRow=Igtbl_getactiverow (ultrawebgrid1 );
Currentrow=Row;

If (Row ! =   Null )
{
VaR ID = Row. getcell ( 0 ). Getvalue ();
If (ID = Null )
{
Row. deleterow (); // Delete new row directly
Return ;
}
Else
// Ajax deletes existing rows
}

 

Of course, the above points can basically come out. However, there may be some minor issues. Please contact us.