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 149 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, 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