bug with Grid height

[lina fetisova]

I have got a grid
It collapse it height when I set it's height to 100% and only if I set it height in pixels =( but I want it's heidht to be auto.
In other grids everything is ok, height=100% works. But in this grid 100% height makes grid collapse =(
You can see the collapsed grid on the attached image.

Here is the code of page with grid.

Dic.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Dic.aspx.cs" Inherits="CAP.Site.Administrators.Dic" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Src="~/Controls/DicBase.ascx" TagName="DicBase" TagPrefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server" >
    <uc1:DicBase runat="server" ID="db" />
</asp:Content>

DicBase.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DicBase.ascx.cs" Inherits="CAP.Site.Controls.DicBase" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>


<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btDelete">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="grid" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="grid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="grid" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="gridMenu" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="gridMenu">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="grid"
                            LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="gridMenu" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"/>

<telerik:RadGrid  ID="grid" runat="server" GridLines="None" AllowFilteringByColumn="true" BorderWidth="0" BorderColor="White"
            AllowPaging="True" Culture="ru-RU" AllowAutomaticInserts="True" AllowAutomaticDeletes="false" AllowAutomaticUpdates="True" AllowMultiRowSelection="true"
            AllowSorting="True" ShowGroupPanel="true" Skin="Office2007"  AutoGenerateColumns="False" PageSize="100"
            EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="false"     
            Width="100%" Height="100%" GroupPanel-Width="100%"
            OnDeleteCommand="RadGrid1_DeleteCommand" OnInsertCommand="RadGrid1_InsertCommand" OnUpdateCommand="RadGrid1_UpdateCommand">      
        <GroupingSettings CaseSensitive="false" />
        <MasterTableView EditMode="PopUp" DataKeyNames="Id"  TableLayout="Auto" ClientDataKeyNames="Id">
             <EditFormSettings  InsertCaption="Добавление"
                 CaptionFormatString="Редактирование" EditColumn-CancelText="Отмена"
                 EditColumn-EditText="Изменить" EditColumn-InsertText="Сохранить"
                 EditColumn-UpdateText="Изменить" >               
                 <FormTableItemStyle Width="200px"/>
                 <EditColumn CancelText="Отмена" EditText="Изменить" UpdateText="Изменить" InsertText="Сохранить"></EditColumn>
            </EditFormSettings>
               <Columns>
                <telerik:GridClientSelectColumn Reorderable="False" UniqueName="ClientSelectColumn">
                    <HeaderStyle Width="30px" />
                </telerik:GridClientSelectColumn>
                <telerik:GridBoundColumn DataField="Id" HeaderText="Имя" SortExpression="Id" Visible="false" ReadOnly="true" ShowFilterIcon="false" AutoPostBackOnFilter="true" FilterControlWidth="95%"/>
                <telerik:GridBoundColumn DataField="Name" HeaderText="Имя" SortExpression="Name" CurrentFilterFunction="Contains" ShowFilterIcon="false" AutoPostBackOnFilter="true" FilterControlWidth="95%"/>
               </Columns>
        </MasterTableView>       
         <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">
                            <ClientEvents OnRowContextMenu="RowContextMenu"></ClientEvents>
                            <Selecting AllowRowSelect="true"/>
                            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        </ClientSettings>
        <PagerStyle Mode="NextPrevAndNumeric" />
    </telerik:RadGrid>
    <asp:Label runat="server" ID="laMessage" Visible="false"/>
    <asp:ObjectDataSource ID="dsObject" runat="server" DeleteMethod="DeleteById"
            InsertMethod="Save" SelectMethod="GetAllSoftVariant" UpdateMethod="Upate" />
    <asp:ObjectDataSource ID="dsRegion" runat="server" DeleteMethod="DeleteById"
            InsertMethod="Save" SelectMethod="GetAllSoftVariant" UpdateMethod="Upate"
            DataObjectTypeName="Clients.Core.Domains.Region"
            TypeName="Base.Core.Repositories.Repository`1[[Clients.Core.Domains.Region, Clients.Core, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]], Base.Core, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
    <asp:ObjectDataSource ID="dsBranch" runat="server" DeleteMethod="DeleteById"
            InsertMethod="Save" SelectMethod="GetAllSoftVariant" UpdateMethod="Upate"
            DataObjectTypeName="Clients.Core.Domains.Branch"
            TypeName="Base.Core.Repositories.Repository`1[[Clients.Core.Domains.Branch, Clients.Core, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]], Base.Core, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
    <telerik:RadContextMenu ID="gridMenu" runat="server"  EnableRoundedCorners="true" EnableShadows="true" OnItemClick="RadMenu1_ItemClick" OnClientItemClicked="OnClientItemClick" Skin="Office2007" >
      <Items>
                    <telerik:RadMenuItem Text="Добавить" />
                    <telerik:RadMenuItem Text="Изменить" />
                    <telerik:RadMenuItem Text="Удалить" />
                    <telerik:RadMenuItem Text="Обновить" />
       </Items>
    </telerik:RadContextMenu>
    <input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" />
    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("div_footer").style.display = "none";
        }

        function RowContextMenu(sender, eventArgs) {
            var menu = $find("<%=gridMenu.ClientID %>");
            var evt = eventArgs.get_domEvent();

            if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                return;
            }
            var index = eventArgs.get_itemIndexHierarchical();
            document.getElementById("radGridClickedRowIndex").value = index;
            sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);
            menu.show(evt);
            evt.cancelBubble = true;
            evt.returnValue = false;
            if (evt.stopPropagation) {
                evt.stopPropagation();
                evt.preventDefault();
            }
        }

        function OnClientItemClick(sender, args) {
            var item = args.get_item();
            if (item.get_text() == "Удалить") {
                return confirm('Вы уверены, что Вы хотите удалить запись?');
            }
        }


     </script>
    </telerik:RadCodeBlock>

DicBase.ascx.cs

using System;
using System.Reflection;
using System.Security.Authentication;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using Base.Core.Repositories;
using CAP.Site.Code;
using Clients.Core.Domains;
using Telerik.Web.UI;

namespace CAP.Site.Controls
{
    public partial class DicBase : UserControl
    {
        private readonly Type[] complexType = new[] { typeof(City), typeof(ActivityCategory), typeof(ProductGroup) };
        private Type type;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Roles.IsUserInRole(HttpContext.Current.User.Identity.Name, Constants.RoleAdministrators))
                throw new InvalidCredentialException();
        }
        protected void RadMenu1_ItemClick(object sender, RadMenuEventArgs e)
        {
            var radGridClickedRowIndex = Convert.ToInt32(Request.Form["radGridClickedRowIndex"]);
            switch (e.Item.Text)
            {
                case "Добавить":
                    grid.MasterTableView.IsItemInserted = true;
                    grid.Rebind();
                    break;
                case "Изменить":
                    grid.Items[radGridClickedRowIndex].Edit = true;
                    grid.Rebind();
                    break;
                case "Удалить":
                    InitDeleteAction();
                    break;
                case "Обновить":
                    ;
                    break;
            }
        }
        public void InitSaveAction()
        {
            grid.MasterTableView.IsItemInserted = true;
            grid.Rebind();
        }
        public void InitEditAction()
        {
            if (grid.SelectedItems.Count == 0)
                return;
            grid.SelectedItems[0].Edit = true;
            grid.Rebind();
        }
        public void InitDeleteAction()
        {
            if (grid.SelectedItems.Count == 0)
                return;
            var generic = typeof(Repository<>);
            Type[] typeArgs = { type };
            Type constructed = generic.MakeGenericType(typeArgs);
            object repository = Activator.CreateInstance(constructed);
            MethodInfo method = constructed.GetMethod("DeleteById");
            foreach (GridDataItem dicItem in grid.SelectedItems)
            {
                object item = Activator.CreateInstance(type);
                var prop = type.GetProperty("Id");
                prop.SetValue(item, Int32.Parse(dicItem.GetDataKeyValue("Id").ToString()), null);
                try
                {
                    method.Invoke(repository, new[] { item });
                }
                catch (Exception)
                {
                    laMessage.Text = @"Удалить нельзя";
                    laMessage.Visible = true;
                }

            }
        }


        public void InitDic(Type type)
        {
            this.type = type;
            dsObject.DataObjectTypeName = type.FullName;
            var generic = typeof(Repository<>);
            Type[] typeArgs = { type };
            Type constructed = generic.MakeGenericType(typeArgs);
            dsObject.TypeName = constructed.FullName;
            grid.DataSourceID = dsObject.ID;

            if (!IsPostBack)
            {
                if (type == typeof(City))
                    AddCityColumns();
                else if (type == typeof(ActivityCategory) || type == typeof(ProductGroup))
                    AddBranchColumns();
            }

            if (Array.Exists(complexType, t => t == type))
            {
                grid.AllowAutomaticInserts = false;
                grid.AllowAutomaticUpdates = false;
            }
        }
        private void AddCityColumns()
        {
            var regionColumn = new GridDropDownColumn();
            grid.MasterTableView.Columns.Add(regionColumn);
            regionColumn.UniqueName = "Region.Id";
            regionColumn.DataField = "Region.Id";
            regionColumn.HeaderText = @"Регион";
            regionColumn.DataSourceID = dsRegion.ID;
            regionColumn.ListTextField = "Name";
            regionColumn.ListValueField = "Id";
            regionColumn.AllowFiltering = false;
            regionColumn.AllowSorting = false;
            regionColumn.DropDownControlType = GridDropDownColumnControlType.RadComboBox;
        }


        private void AddBranchColumns()
        {
            var regionColumn = new GridDropDownColumn();
            grid.MasterTableView.Columns.Add(regionColumn);
            regionColumn.UniqueName = "Branch.Id";
            regionColumn.DataField = "Branch.Id";
            regionColumn.HeaderText = @"Отрасль";
            regionColumn.DataSourceID = dsBranch.ID;
            regionColumn.ListTextField = "Name";
            regionColumn.ListValueField = "Id";
            regionColumn.AllowFiltering = false;
            regionColumn.AllowSorting = false;
            regionColumn.DropDownControlType = GridDropDownColumnControlType.RadComboBox;
        }


        protected void RadGrid1_InsertCommand(object source, GridCommandEventArgs e)
        {
            if (Array.Exists(complexType, t => t == type))
            {
                var insertedItem = (GridEditFormInsertItem)e.Item;
                string name = ((TextBox)insertedItem["Name"].Controls[0]).Text;
                if (type == typeof(City))
                {
                    int regionId = Int32.Parse(((RadComboBox)insertedItem["Region.Id"].Controls[0]).SelectedValue);
                    var city = new City { Name = name, Region = new Region { Id = regionId } };
                    using (var repo = new Repository<City>())
                        repo.Save(city);
                    //grid.MasterTableView.EditFormSettings.FormTableStyle.
                }
                else if (type == typeof(ActivityCategory))
                {
                    int relId = Int32.Parse(((RadComboBox)insertedItem["Branch.Id"].Controls[0]).SelectedValue);
                    var obj = new ActivityCategory { Name = name, Branch = new Branch { Id = relId } };
                    using (var repo = new Repository<ActivityCategory>())
                        repo.Save(obj);
                }
                else if (type == typeof(ProductGroup))
                {
                    int relId = Int32.Parse(((RadComboBox)insertedItem["Branch.Id"].Controls[0]).SelectedValue);
                    var obj = new ProductGroup { Name = name, Branch = new Branch { Id = relId } };
                    using (var repo = new Repository<ProductGroup>())
                        repo.Save(obj);
                }
                e.Canceled = true;
                e.Item.OwnerTableView.IsItemInserted = false;
            }
            else
            {
                e.Canceled = false;
            }

        }
        protected void RadGrid1_UpdateCommand(object source, GridCommandEventArgs e)
        {
            if (Array.Exists(complexType, t => t == type))
            {
                var editedItem = (GridEditableItem)e.Item;
                int id = Int32.Parse(((TextBox)editedItem["Id"].Controls[0]).Text);
                string name = ((TextBox)editedItem["Name"].Controls[0]).Text;
                if (type == typeof(City))
                {
                    int regionId = Int32.Parse(((RadComboBox)editedItem["Region.Id"].Controls[0]).SelectedValue);
                    using (var repo = new Repository<City>())
                    {
                        City city = repo.GetById(id);
                        city.Name = name;
                        city.Region = new Region { Id = regionId };
                        repo.Upate(city);
                    }
                }
                else if (type == typeof(ActivityCategory))
                {
                    int relId = Int32.Parse(((RadComboBox)editedItem["Branch.Id"].Controls[0]).SelectedValue);
                    using (var repo = new Repository<ActivityCategory>())
                    {
                        ActivityCategory obj = repo.GetById(id);
                        obj.Name = name;
                        obj.Branch = new Branch { Id = relId };
                        repo.Upate(obj);
                    }
                }
                else if (type == typeof(ProductGroup))
                {
                    int relId = Int32.Parse(((RadComboBox)editedItem["Branch.Id"].Controls[0]).SelectedValue);
                    using (var repo = new Repository<ProductGroup>())
                    {
                        ProductGroup obj = repo.GetById(id);
                        obj.Name = name;
                        obj.Branch = new Branch { Id = relId };
                        repo.Upate(obj);
                    }
                }
            }
        }
        protected void RadGrid1_DeleteCommand(object source, GridCommandEventArgs e)
        {
            ;
        }
    }
}


I have no more ideas what to do to set the grid height to auto =( can you help me please?

[Pavlina]

Hello lina fetisova,

The problem is caused by missing height style for the update panel <div>, which is generated around RadGrid. Please refer to the following example, which shows how to get the update panel's client ID by using the AjaxSettingCreated event and add a 100% height CSS style:

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx

Moreover, if you are using the latest RadControls version, you can set UpdatePanelHeight="100%" in the RadGrid telerik: AjaxUpdatedControl tag.

I hope this helps.

Greetings,
Pavlina
the Telerik team

[lina fetisova]

Pavlina, thank you very much but  UpdatePanelHeight="100%" doesn't help and I don't set it in other fors but 100% height works at other forms.

[Pavlina]

Hi Lina,

If you want the RadGrid height to be 100%, you must ensure that the page layout conforms to the CSS specification, which requires that an element with percentage height must have a parent with an explicit height. The rule applies until a parent with a pixel height is reached, or until the HTML element is reached (which also needs a height in this case). Therefore you should check if there is a parent element with missing height.

Let me know if you need additional assistance.

Best wishes,
Pavlina
the Telerik team

[lina fetisova]

Pavlina, you are right!
I've found grid's parent without any height and I set 100% height to it and everything works now!:)))
Thank you very much!!