[Solved] Displaying Image on Top Left corner of the column in addition to Text

[Palanivelrajan]

Dear Telerik Team,

I want to display image on top left corner of the column in addition to normal text in the same column.
requesting your help on the same.

thanks and regards
Palanivelrajan

[Princy]

Hi,

I guess you want to add an Image to the left side of the  HeaderText of a column. Please take a look into the following code snippet.

C#:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    GridHeaderItem headerItem = (GridHeaderItem)RadGrid1.MasterTableView.GetItems(GridItemType.Header)[0];
    Image img = new Image();
    img.ImageUrl = "~/Images/Image1.gif";
    headerItem["column1"].Controls.AddAt(0, img);
}

Thanks,
Princy.

[Palanivelrajan]

Dear Princy,

thanks for the timely reply.

I need it on first column of each row except header row.

Can you guide me on that.

Thanks and regards
Palanivelrajan.L

[Princy]

Hi,

Please try the following code snippet to show image in the first column in every row.

C#:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
    {
        Image img = new Image();
        img.ImageUrl = "~/Images/Image1.gif";
        item["UniqueNameOfFirstColumn"].Controls.AddAt(0, img);
    }
}

Thanks,
Princy.

[Palanivelrajan]

Hi Princy,

thanks for the quick reply.

I want the image to be appended with the first column text. The Image should appear on the top left corner of the text.
This is for each row except header row.

Please help me

Thanks and regards
Palanivelrajan.L

[Princy]

Hi,

Unfortunately I couldn't replicate the any issues. Please take a took into the screen shot. Please elaborate more if it doesn't help.

Thanks,
Princy.

[Palanivelrajan]

Dear Princy,

Thanks for your effort to understand the problem.

I have attached the image for your reference, which has image (ie. New) at first column in addition to text (ie. a) . In real time text will be long text. I was looking for similar feature where image is first at top left corner and text in normal way in one column. 

Requesting your help for the same.

Thanks and regards
Palanivelrajan.L

[Princy]

Hi,

One suggestion is to add a CSSClass to the image and adjust the position it in the cell using CSS.

C#:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
    {
        Image img = new Image();
        img.ImageUrl = "~/Images/Image1.gif";
        img.CssClass = "ImageCSS";
        item["UniqueNameOfFirstColumn"].Controls.Add(img);
    }
}

CSS:

<style type="text/css">
    .ImageCSS
    {
        float: left;
        margin-top  : -23px; <%-- set margin top maching to your cell(here a sample css is shown)  --%>
    }

</style>

Thanks,
Princy.

[Palanivelrajan]

Dear Princy,

I tried with your code. but could not keep image in the text column. I want to conditionally add image to the top left corner of column that has text in it.

In you In your example 
UniqueNameOfFirstColumn
display only image where as I need both text and image(top left corner) on the same column.

since I am binding the column through dataset, I don't give uniquename instead I want to specify the ordinal of the column (ie in term of 0,1..)

Thanks and regards
Palanivelrajan

[Princy]

Hi,

You can use the DataField's name of the column instead of the UniqueName. You can add the image on condition as follows.

C#:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
    {
        Image img = new Image();
        img.ImageUrl = "~/Images/Image1.gif";
        if(item["DataField"].Text=="your text")
        {
           item["DataField"].Controls.Add(img);
           img.CssClass = "ImageCSS";
        }
    }
}

Thanks,
Princy.

[Palanivelrajan]

Dear Princy,

I tried with your sample and found text is replaced by the image but I want both image and Text in the same column where image is to appear top left corner of the text. Kindly guide me on this.

Thanks and regards
Palanivelrajan.L

[Princy]

Hi,

Can you please try the following code snippet and appropriate CSS.

C#:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
    {
        Image img = new Image();
        img.ImageUrl = "~/Images/Image1.gif";
        if(item["DataField"].Text=="your text")
        {
           item["UniqueNameOfFirstColumn"].Controls.Add(img);
           img.CssClass = "ImageCSS";
        }
    }
}

CSS:

<style type="text/css">
    .ImageCSS
    {
        float: left;
        margin-top  : -23px; <%-- set margin top maching to your cell(here a sample css is shown)  --%>
    }

</style>

Thanks,
Princy.

[Palanivelrajan]

Dear Princy,

We did the same and got only image in that column(ie. Image is replaced the text). Do I need to do anything in the design part of the grid.
Kindly guide me to get both text and image as part of one column.

<telerik:RadGrid ID="rgrdGoalList" GroupingEnabled="true" AllowFilteringByColumn="True"
    AllowSorting="True" AllowPaging="True" PageSize="15" runat="server" OnItemCommand="rgrdGoalList_ItemCommand"
    OnColumnCreated="rgrdGoalList_ColumnCreated" OnPageIndexChanged="rgrdGoalList_PageIndexChanged"
    CellSpacing="0" OnPageSizeChanged="rgrdGoalList_PageSizeChanged" OnItemDataBound="rgrdGoalList_ItemDataBound"
    OnSortCommand="rgrdGoalList_OnSortCommand" GridLines="None" OnInit="rgrdGoalList_Init"
    OnPreRender="rgrdGoalList_PreRender" EnableEmbeddedSkins="false" Skin="MySkin">
    <PagerStyle Mode="NumericPages" />
    <GroupingSettings CaseSensitive="false" />
    <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">
        <Selecting AllowRowSelect="True" />
        <Scrolling UseStaticHeaders="True" SaveScrollPosition="true" />
        <Resizing AllowColumnResize="true" EnableRealTimeResize="true" AllowResizeToFit="true"
            ResizeGridOnColumnResize="true" />
        <ClientEvents OnGridCreated="OnGridCreated_OrgGoal" />
    </ClientSettings>
    <ExportSettings Excel-Format="Html" ExportOnlyData="true" OpenInNewWindow="true"
        IgnorePaging="true" HideStructureColumns="true" Excel-FileExtension=".xls" Pdf-PaperSize="A4"
        Pdf-PageWidth="297mm" Pdf-PageHeight="210mm" Pdf-AllowPrinting="true">
        <Pdf PageHeight="210mm" PageWidth="297mm" PaperSize="A4" />
        <Excel FileExtension=".xls" />
    </ExportSettings>
    <MasterTableView TableLayout="Auto" Width="100%">
        <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
        </RowIndicatorColumn>
        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridTemplateColumn HeaderText="View" AllowFiltering="false">
                <ItemTemplate>
                    <asp:ImageButton ID="EditPage" runat="server" ImageUrl="../../App_Themes/OPMS/Images/ViewIcon.png" />
                </ItemTemplate>
                <HeaderStyle Width="40px" />
                <ItemStyle Width="40px" />
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn DataField="KeyValue" UniqueName="KeyValueName" AllowFiltering="true"
                Visible="false">
            </telerik:GridBoundColumn>
         </Columns>
        <EditFormSettings>
            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
            </EditColumn>
        </EditFormSettings>
        <HeaderStyle Font-Bold="true" />
    </MasterTableView>
    <FilterMenu EnableImageSprites="False">
    </FilterMenu>
    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Outlook">
    </HeaderContextMenu>
</telerik:RadGrid>

Code Behind Data Binding

rgrdGoalList.DataSource = dsSearchMeetingList.Tables[2];
rgrdGoalList.DataBind();

With Regards
L.Palanivelrajan

[Princy]

Hi,

Here is the complete code i tried. I am adding the Image from code behind not from ASPX.

ASPX:

<telerik:RadGrid ID="RadGrid1" Skin="Office2010Black" DataSourceID="SqlDataSource1"
    AutoGenerateColumns="False" OnPreRender="RadGrid1_PreRender" >
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" UniqueName="CustomerID">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
    {
        Image img = new Image();
        img.ImageUrl = "~/Images/Image1.gif";
        if(item["CustomerID"].Text=="CENT")
        {
           item["CustomerID"].Controls.Add(img);
           img.CssClass = "ImageCSS";
        }
    }
}

CSS:

<style type="text/css">
    .ImageCSS
    {
        float: left;
        margin-top  : -23px; <%-- set margin top maching to your cell(here a sample css is shown)  --%>
    }

</style>

Thanks,
Princy.