Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
20
Delete & Edit button on Ultragrid which is created dynamically
posted

Hi All,

 

I am very new to Infragistics and planning to use for one of our project after realizing that we cant go live without enhancing the look and feel.

I have a UltraGrid populated using a datatable

//bind data

public void BindGrid()

{

Grid_TitleDeeds.DataSource = TDdataTable;

Grid_TitleDeeds.DataBind();

}

//get source

public void GetSource()

{

if (Session["TitleDeeds"] == null)

{

TDdataTable =
new DataTable();

TDdataTable.Columns.Add(new DataColumn("TitleDeedNo",typeof(string)));

TDdataTable.Columns.Add(new DataColumn("DateIssued", typeof(DateTime)));

TDdataTable.Columns.Add(new DataColumn("Location", typeof(string)));

TDdataTable.Columns.Add(new DataColumn("Owner", typeof(string)));Session["TitleDeeds"] = TDdataTable;

}

else

{

TDdataTable=(
DataTable)Session["TitleDeeds"];

}

 

}

 

protected void Grid_TitleDeeds_InitializeLayout(object sender, Infragistics.WebUI.UltraWebGrid.LayoutEventArgs e)

{

this.Grid_TitleDeeds.DisplayLayout.Bands[0].Columns[0].Header.Caption = "رقم الصك";

this.Grid_TitleDeeds.DisplayLayout.Bands[0].Columns[0].Width = Unit.Percentage(20);

this.Grid_TitleDeeds.DisplayLayout.Bands[0].Columns[1].Header.Caption = "تاريخ الصك";

this.Grid_TitleDeeds.DisplayLayout.Bands[0].Columns[1].Width = Unit.Percentage(20);

this.Grid_TitleDeeds.DisplayLayout.Bands[0].Columns[2].Header.Caption = "موقع الملكية";

this.Grid_TitleDeeds.DisplayLayout.Bands[0].Columns[2].Width = Unit.Percentage(20);

this.Grid_TitleDeeds.DisplayLayout.Bands[0].Columns[3].Header.Caption = "صاحب الصك";

this.Grid_TitleDeeds.DisplayLayout.Bands[0].Columns[3].Width = Unit.Percentage(40);

this.Grid_TitleDeeds.DisplayLayout.Bands[0].Columns[0].Footer.Caption = "<a href='BLOCKED SCRIPTigtbl_addNew(_clientGridID, 0).editRow()'> <img src='../../Images/AddButton.jpg' /></a>";

}

Grid is coming perfectly with row template for edit mode. I have added a button for adding new row. everything is working fine.

 Now i need to add a button or a link for edit and delete. I have used this row template as a workaround for an issue. I am building an arabic application which is right to left. issue is cell edit is giving alignment problem if it is right to left. One more thing I noticed was after page postback all the style sheet applied to the grid is missing.

 below is the grid code

<igtbl:UltraWebGrid ID="Grid_TitleDeeds" runat="server" OnInitializeBand="Grid_TitleDeeds_InitializeBand" OnInitializeLayout="Grid_TitleDeeds_InitializeLayout" OnInitializeRow="Grid_TitleDeeds_InitializeRow" Width="100%">

<Bands>

<igtbl:UltraGridBand ColFootersVisible="Yes">

 

<RowEditTemplate>

<table><tr><td align="left">

<asp:Label id="lbl1" runat="server" Text="©çê ںé­è :" CssClass="ArabicLabel"></asp:Label>

</td><td>

<asp:TextBox id="editTitleDeedNo" runat="server" CssClass="TextBox" columnkey="TitleDeedNo"></asp:TextBox>

</td>

<td>

</td>

</tr>

<tr><td align="left">

<asp:Label id="lbl2" runat="server" Text="¢ں©ï¦ ںé­è (ى¤©ï) :" CssClass="ArabicLabel"></asp:Label></td><td>

<asp:TextBox id="editDateIssued" runat="server" CssClass="TextBox" columnkey="DateIssued"></asp:TextBox>

 

</td>

<td>

<img src="../../Images/Calendar.gif" Width="20px" height="21px" /></td>

</tr>

<tr>

<td align="left">

<asp:Label ID="Label9" runat="server" CssClass="ArabicLabel" Text="¢ں©ï¦ ںé­è(êïéں§ï) :"></asp:Label></td>

<td>

<asp:TextBox ID="TextBox3" runat="server" columnkey="DateIssued" CssClass="TextBox"></asp:TextBox></td>

<td>

<img src="../../Images/Calendar.gif" Width="20px" height="21px" /></td>

</tr>

<tr><td align="left">

<asp:Label id="lbl3" runat="server" Text="êيçم ںéêéèï، :" CssClass="ArabicLabel"></asp:Label></td><td>

<asp:TextBox id="editLocation" runat="server" CssClass="TextBox" columnkey="Location"></asp:TextBox>

</td>

<td>

</td>

</tr>

<tr>

<td align="left">

<asp:Label id="Label8" runat="server" Text="­ں¥  ںé­è :" CssClass="ArabicLabel"></asp:Label></td><td>

<asp:TextBox id="TextBox2" runat="server" CssClass="TextBox" columnkey="Owner"></asp:TextBox>

</td>

<td>

</td>

</tr>

<tr>

<td colspan="3" style="text-align: center">

&nbsp;<input id="Button1" onclick="igtbl_gRowEditButtonClick(event);" style="width: 50px"

type="button" value="OK" />

<input id="Button2" onclick="igtbl_gRowEditButtonClick(event);" style="width: 50px"

type="button" value="Cancel" /></td>

</tr>

</table>

 

</RowEditTemplate>

<RowTemplateStyle BackColor="White" BorderColor="#139C47" BorderStyle="Solid">

<BorderDetails WidthBottom="3px" WidthLeft="3px" WidthRight="3px" WidthTop="3px" />

</RowTemplateStyle>

 

 

</igtbl:UltraGridBand>

</Bands>

<DisplayLayout AllowAddNewDefault="Yes" AllowColSizingDefault="NotSet" AllowDeleteDefault="Yes"

AllowSortingDefault="OnClient" AllowUpdateDefault="RowTemplateOnly"

BorderCollapseDefault="Separate" CellClickActionDefault="RowSelect" CellPaddingDefault="1"

CellSpacingDefault="1" HeaderClickActionDefault="SortSingle" Name="ctl11xGridxTitleDeeds"

SelectTypeColDefault="Single" SelectTypeRowDefault="Single" TabDirection="RightToLeft"

TableLayout="Fixed" Version="4.00" AllowRowNumberingDefault="Continuous" ColWidthDefault="" >

<ActivationObject BorderColor="" BorderWidth="">

</ActivationObject>

<FilterOptionsDefault AllowRowFiltering="OnClient" FilterUIType="HeaderIcons">

</FilterOptionsDefault>

<RowSelectorStyleDefault BackgroundImage="../../ig_res/Trendy/images/tab_top_f.gif">

</RowSelectorStyleDefault>

<EditCellStyleDefault Width="100%">

</EditCellStyleDefault>

<FrameStyle Width="100%">

</FrameStyle>

</DisplayLayout>

</igtbl:UltraWebGrid>

 

 Any help would be highly appreciated. I am stuck with this for the last 3 days trying different option.Client is very happy with current look and feel and wants to continue with these controls

 

Thanks

 

Shajid

  • 334
    posted

    About the stylesheet try to link this using a reference tag on the HTML of the page, for example:

    <LINK href="../xxxxxxx.css" type="text/css" rel="stylesheet">

    Good Luck!