[Solved] Image columns not loading

[yeswanth pavan]

Posted on Dec 28, 2009 (permalink)

Hi there,

1) Iam using a Radgrid which consists of '5' image columns on page load it is getting loaded fine but when I perform any Filter option which is provided with grid it is not loading  for getting  for image columns unless you perform any operation  remaining columns load quickly  same with page index also is not getting loaded.I want to get to be loaded when i perform any operation.

2) And Iam facing another problem with grouping it is grouping properly when i drag some times it is grouped but some times not in this also image columns are not getting loaded when iam ungrouping it is throwing an exception.

3) I want Tooltip for Radgrid for all columns It should display according to database.

Here's my code
------------------------------------------------------------------------------------------
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="uclTaskGrid.ascx.cs" Inherits="uclTaskGrid"  %>
  <%@ Register assembly="msgBox" namespace="BunnyBear" tagprefix="cc2" %>
  <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
  <script language="javascript" type="text/javascript">
  function FireMyIASGroupPrint(myURL){
   if(myURL)
     {

    window.open("RejectTaskStatus.aspx?taskID=" + myURL ,'_blank','left = 300, top=150, width=600, height=200,menubar=no , scrollbars=no, resizable=no');

     }
}







    </script>
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="12000">
</asp:Timer>
<table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
        <td valign="top" height="6"></td>
        </tr>
<tr>
        <td height="30" align="left">&nbsp;&nbsp;&nbsp;<b>Project name</b>&nbsp;<asp:DropDownList ID="ddlProjects" CssClass="text" runat="server" AutoPostBack="True"
        onselectedindexchanged="ddlProjects_SelectedIndexChanged">
    </asp:DropDownList>

        </td>
    <td align="right">
    <table width="160" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <asp:Label ID="lblRecCount" CssClass="LabelText" runat="server"
    Text="Total Record(s): 14"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
            &nbsp;&nbsp;&nbsp;</td>
          </tr>
</table>
</td>
</tr>
  <tr>
        <td valign="top" colspan="2" height="5">
            &nbsp;</td></tr>
<tr>
        <td valign="top" align="center" colspan="2">
    <table cellpadding="0" cellspacing="0" border="0" width="98%">
    <tr>
    <td align="left" valign="top">

                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                     <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                    </Triggers>
                        <ContentTemplate>
                            <telerik:RadGrid ID="gviewTasks" runat="server" AllowFilteringByColumn="True"
        AllowPaging="True" AllowScroll="True" EnableVirtualScrollPaging="True"
                                PageSize="10" AllowSorting="True" GridLines="None" ShowGroupPanel="True"
            style="top: 300px; left: 10px;"
        AutoGenerateColumns="False" Skin="Vista" onitemcommand="gviewTasks_ItemCommand"
                                onitemdatabound="gviewTasks_ItemDataBound" AutoGenerateHierarchy="True" AllowCustomPaging="True"

         >

<MasterTableView>




<columns>
          <telerik:GridBoundColumn DataField="TaskID" HeaderText="ID" />

<telerik:GridBoundColumn DataField="Resource Name" HeaderText="Resource Name"
              HeaderStyle-Width="80px"  >
    <HeaderStyle Width="80px" />
          </telerik:GridBoundColumn>
 <telerik:GridTemplateColumn HeaderText="Task Name" AllowFiltering="false" Groupable="false" HeaderStyle-Width="50px" >
                       <ItemTemplate>
                       <asp:LinkButton ID="lnkTask" runat="server" CommandName="select"></asp:LinkButton>
                       </ItemTemplate>
                       <HeaderStyle Width="50px" />
                       </telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="Task Name" HeaderText="TaskName"  />
<telerik:GridBoundColumn DataField="Description" HeaderText="TaskDescription"
              HeaderStyle-Width="80px"  >
    <HeaderStyle Width="80px" />
          </telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="Phase" HeaderStyle-Width="50px" AllowFiltering="false" Groupable="false"  >
            <ItemTemplate>
                <asp:Label ID="lblphase" runat="server"  Text='<%#DataBinder.Eval(Container.DataItem,"Phase") %>'></asp:Label> &nbsp;
               </ItemTemplate>
               <HeaderStyle Width="50px" />
               </telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="Project Name" HeaderText="Project"
              HeaderStyle-Width="50px" AllowFiltering="false" >
    <HeaderStyle Width="50px" />
          </telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="AssignedBy" HeaderText="Assigned By"
              HeaderStyle-Width="75px"  >
    <HeaderStyle Width="75px" />
          </telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Estimated Hours" HeaderText="ETA [Hrs]"
              HeaderStyle-Width="50px"  >
    <HeaderStyle Width="50px" />
          </telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Date" HeaderText="Date" HeaderStyle-Width="75px"  >
    <HeaderStyle Width="75px" />
          </telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Status" HeaderText="Status" HeaderStyle-Width="75px" >
    <HeaderStyle Width="75px" />
          </telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Approve Status" HeaderText="Approval Status"
              HeaderStyle-Width="75px"  >


    <HeaderStyle Width="75px" />
          </telerik:GridBoundColumn>


<telerik:GridTemplateColumn HeaderText="Approve" AllowFiltering="false" Groupable="false" HeaderStyle-Width="40px" >
                       <ItemTemplate>

                       <asp:ImageButton ID="imgbtnactivate" runat="server" ImageUrl="~/images/activate.gif" CommandName="Approve" OnClientClick="return confirm('Are you sure you want to approve this task?');"></asp:ImageButton>

                       </ItemTemplate>
                       <HeaderStyle Width="40px" />
                       </telerik:GridTemplateColumn>
                       <telerik:GridTemplateColumn HeaderText="Reject" AllowFiltering="false" Groupable="false" HeaderStyle-Width="30px" >
                       <ItemTemplate>

                       <asp:ImageButton ID="imgbtndeactivate" runat="server" ImageUrl="~/images/de-activate.gif" CommandName="Reject" OnClientClick="return confirm('Are you sure you want to reject this task?');"></asp:ImageButton>

                       </ItemTemplate>
                            <HeaderStyle Width="30px" />
                            </telerik:GridTemplateColumn>
                       <telerik:GridTemplateColumn HeaderText="Forward" AllowFiltering="false" Groupable="false" HeaderStyle-Width="40px">
                       <ItemTemplate>

                       <asp:ImageButton ID="imgforward" runat="server" ImageUrl="~/images/forward.gif" CommandName="Select1"></asp:ImageButton>

                       </ItemTemplate>
                           <HeaderStyle Width="40px" />
                       </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="ResourceID"/>
                       <telerik:GridTemplateColumn HeaderText="Delete" AllowFiltering="false" Groupable="false" HeaderStyle-Width="30px">
                       <ItemTemplate>

                       <asp:ImageButton ID="imgdelete" runat="server"    ImageUrl="~/images/delete-icon.gif" CommandName="deleteTask" OnClientClick="return confirm('Are you sure you want to delete the task?');"></asp:ImageButton>

                       </ItemTemplate>
                           <HeaderStyle Width="30px" />
                       </telerik:GridTemplateColumn>


</columns>


</MasterTableView>
<ClientSettings EnableRowHoverStyle="true">
                <Selecting AllowRowSelect="true" />
                <Scrolling EnableVirtualScrollPaging="True" UseStaticHeaders="True" />
                <Resizing AllowColumnResize="True" />
            </ClientSettings>
        <ClientSettings AllowDragToGroup="True" AllowExpandCollapse="true">
            <Scrolling EnableVirtualScrollPaging="True" UseStaticHeaders="True" />
            <Resizing AllowColumnResize="True" />
        </ClientSettings>
                                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="Blue" />
                                <PagerStyle Height="30px" HorizontalAlign="Center" Font-Bold="True"
                                    Font-Names="Arial" Font-Size="Smaller" />
                                <HeaderStyle BorderStyle="None"  Font-Bold="True"
        Height="30px" />
                            </telerik:RadGrid>

                        </ContentTemplate>
                    </asp:UpdatePanel></td></tr>
                    </table>

</td>
</tr></table>
-------------------------------------------------------------------------------------
here's the code for tooltip
-------------------------------------
 protected void gviewTasks_ItemDataBound(object sender, GridItemEventArgs e)
    {
        int index;
        try
        {
            if (e.Item.ItemType == GridItemType.CommandItem )
            {


                index = e.Item.RowIndex + (gviewTasks.PageSize * gviewTasks.PageSize);
                for (int i = 0; i < e.Item.Cells.Count; i++)
                {
                    if (dtTemp.Rows.Count > 0)
                    {
                        e.Item.Cells[0].ToolTip = dtTemp.Rows[index]["Resource Name_Org"].ToString();
                        e.Item.Cells[2].ToolTip = dtTemp.Rows[index]["Task Name_Org"].ToString();
                        e.Item.Cells[3].ToolTip = dtTemp.Rows[index]["Task Name_Org"].ToString();
                        e.Item.Cells[4].ToolTip = dtTemp.Rows[index]["Description_Org"].ToString();
                        e.Item.Cells[5].ToolTip = dtTemp.Rows[index]["Phase_Org"].ToString();
                        e.Item.Cells[6].ToolTip = dtTemp.Rows[index]["Project Name_Org"].ToString();
                        e.Item.Cells[7].ToolTip = dtTemp.Rows[index]["AssignedBy_org"].ToString();
                        e.Item.Cells[8].ToolTip = dtTemp.Rows[index]["Estimated Hours_org"].ToString();
                        e.Item.Cells[9].ToolTip = dtTemp.Rows[index]["Date_Org"].ToString();
                        e.Item.Cells[10].ToolTip = dtTemp.Rows[index]["Status_Org"].ToString();
                        e.Item.Cells[11].ToolTip = dtTemp.Rows[index]["Approve Status_Org"].ToString();
                    }
                }
            }


        }
        catch (Exception ex)
        {
        }


    }

[Veli]

Hi yeswanth,

We are not able to identify any misconfigurations from the markup you have provided. For problem 2, please, describe what kind of exception you are getting.

You can add a tooltip for RadGrids column/cells using the PreRender event, where you can loop over your grid items and set their cell's tooltip:

protected void Page_PreRender(object sender, EventArgs e)
{
    foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
    {
        item["Column1"].ToolTip = "ToolTip1";
        item["Column2"].ToolTip = "ToolTip2";
        item["Column3"].ToolTip = "ToolTip3";
    }
}

The above code will put a tooltip in each cell of every row.

Regards,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.