This is a migrated thread and some comments may be shown as answers.

Why RadAjaxLoadingPanel1 not displaying in center of the form on grid and row selection displaying multiple colors when Hover and select

6 Answers 159 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Dorababu asked on 16 May 2012, 01:33 PM

grid.png

RadAjaxLoadingPanel1.png

I have worked with grid with several options but I am facing two issues i.e unable to display the RadAjaxLoadingPanel1 in the center of the form on grid and row selected color is displaying multiple colors when row is selected and hover on the row

My code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="_Default1" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link href="Grid.Office2010Silver.css" rel="stylesheet" type="text/css" />

<link href="Ajax.Office2010Silver.css" rel="stylesheet" type="text/css" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<div>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Visible="true"

CssClass="RadAjax_Office2010Silver" MinDisplayTime="2000" Transparency="1">

<asp:Image ID="img" runat="server" ImageUrl="~/loading.gif" />

</telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="RadGrid1" ShowFooter="false" CssClass="RadGrid_Office2010Silver"

AllowMultiRowSelection="false" OnItemCommand="RadGrid1_ItemCommand"

AllowPaging="true" AllowSorting="true" PageSize="10" runat="server" OnPageIndexChanged="RadGrid1_PageIndexChanged"

EnableAjaxSkinRendering="false" AllowCustomPaging="True" OnPageSizeChanged="RadGrid1_PageSizeChanged" OnNeedDataSource="RadGrid1_NeedDataSource">

<PagerStyle Mode="NextPrevAndNumeric" />

<ClientSettings EnableRowHoverStyle="true">

<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="200" SaveScrollPosition="true"

FrozenColumnsCount="3"></Scrolling>

<Selecting AllowRowSelect="true" />

</ClientSettings>

<MasterTableView DataKeyNames="EmployeeID" AutoGenerateColumns="false">

<Columns>

<telerik:GridBoundColumn DataField="EmployeeID" UniqueName="EmployeeID" HeaderText="EmployeeID"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FirstName" HeaderStyle-HorizontalAlign="Center"

ItemStyle-HorizontalAlign="Center" UniqueName="FirstName" HeaderText="FirstName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LastName" UniqueName="LastName" HeaderText="LastName"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Address" UniqueName="Address" HeaderText="Address"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

6 Answers, 1 is accepted

answered on 17 May 2012, 09:29 AM

Hello Dorababu,

This help article demonstrates how you can center the Loading Panel on the Screen. Give it a try and see if it helps to achieve your goal.

Regarding the problem with half selected row you can check this code library which explains how to find out the original RadGrid hover/selected row background and enforce it back.

Regards,
Pavlina
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 17 May 2012, 12:19 PM

one.png

two.png

I am working on this example

http://demos.telerik.com/aspnet-ajax/grid/examples/client/selecting/defaultcs.aspx

and this is my grid design

<telerik:RadGrid ID="RadGrid1" ShowFooter="false" AllowMultiRowSelection="false"

CssClass="RadGrid_Office2010Silver" OnItemCommand="RadGrid1_ItemCommand" AllowPaging="true"

AllowSorting="true" PageSize="10" runat="server" OnPageIndexChanged="RadGrid1_PageIndexChanged"

EnableAjaxSkinRendering="false" EnableEmbeddedSkins="false" AllowCustomPaging="True" OnPageSizeChanged="RadGrid1_PageSizeChanged"

OnNeedDataSource="RadGrid1_NeedDataSource">

<PagerStyle Mode="NextPrevAndNumeric" />

<ClientSettings EnableRowHoverStyle="true">

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="3">

</Scrolling>

<Selecting AllowRowSelect="true" />

</ClientSettings>

<MasterTableView DataKeyNames="EmployeeID" AutoGenerateColumns="false">

<Columns>

<telerik:GridBoundColumn DataField="EmployeeID" UniqueName="EmployeeID" HeaderText="EmployeeID"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FirstName" HeaderStyle-HorizontalAlign="Center"

ItemStyle-HorizontalAlign="Center" UniqueName="FirstName" HeaderText="FirstName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LastName" UniqueName="LastName" HeaderText="LastName"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Address" UniqueName="Address" HeaderText="Address"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

This one is working good but if I set EnableEmbeddedSkins="true" I am getting multi colors as I posted. If I set it to false Grid is working fine but the Page size css is getting changed ..

Check my attachments the functionality which is available in second image is changed to first Image if I set EnableEmbeddedSkins="false" any help please

answered on 17 May 2012, 10:10 PM

Hi,

Note that you should set Skin property for your grid with the name of your custom skin instead of CssClass property. This way the custom skin will be applied for the pager combo properly:

<telerik:RadGrid ID="RadGrid1" ShowFooter="false" AllowMultiRowSelection="false"

Skin="RadGrid_Office2010Silver"

Kind regards,
Pavlina
the Telerik team