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

Hide Edit Image Button, Keep Insert/Cancel

8 Answers 398 Views

Grid

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

8 Answers, 1 is accepted

answered on 06 Mar 2009, 05:37 PM

The problem is that if I do not include a GridEditCommandColumn (or auto generate an Edit column) the Insert/Cancel image buttons do NOT appear when I choose to Add a New Record. My code is below. Thanks for the help.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CodesFailureGroups.aspx.cs" Inherits="Web.CodesFailureGroups" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head id="Head1" runat="server">  
        
                <title>Untitled Page</title> 
        
                <telerik:RadCodeBlock ID="uxRadCodeBlock" runat="server">  
        
                    <style type="text/css">  
        
                        html, body, form  
        
                        {  
        
                            height: 100%;  
        
                            width: 100%;  
        
                            padding: 0px;  
        
                            margin: 0px;  
        
                            overflow: hidden;  
        
                        }  
        
                    </style> 
        
                    <script type="text/javascript">  
        
               function centerUpdatePanel()  
        
               {  
        
                    centerElementOnScreen(document.getElementById("uxRadAjaxLoadingPanel"));  
        
               }  
        
               function centerElementOnScreen(element)  
        
               {  
        
                    var scrollTop = document.body.scrollTop;  
        
                    var scrollLeft = document.body.scrollLeft;  
        
                    var viewPortHeight = document.body.clientHeight;  
        
                    var viewPortWidth = document.body.clientWidth;  
        
                    if (document.compatMode == "CSS1Compat")  
        
                    {  
        
                     viewPortHeight = document.documentElement.clientHeight;  
        
                     viewPortWidth = document.documentElement.clientWidth;  
        
                     scrollTop = document.documentElement.scrollTop;  
        
                     scrollLeft = document.documentElement.scrollLeft;  
        
                    }  
        
                    var topOffset = Math.ceil(viewPortHeight/2 - element.offsetHeight/2);  
        
                    var leftOffset = Math.ceil(viewPortWidth/2 - element.offsetWidth/2);  
        
                    var top = scrollTop + topOffset - 40;  
        
                    var left = scrollLeft + leftOffset - 70;  
        
                       element.style.position = "absolute";  
        
                    element.style.top = top + "px";  
        
                    element.style.left = left + "px";  
        
                }  
        
                    </script> 
        
                </telerik:RadCodeBlock> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="uxRadScriptManagerCodes" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <telerik:RadAjaxLoadingPanel IsSticky="true" ID="uxRadAjaxLoadingPanel" runat="server" 
        
                    Height="75px" Width="75px">  
        
                    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading1.gif") %>' 
        
                        style="border: 0px;" /> 
        
                </telerik:RadAjaxLoadingPanel> 
        
                <telerik:RadGrid ID="uxCodesGrid" runat="server" AllowSorting="True"   
        
                    GridLines="None" OnNeedDataSource="uxCodesGrid_NeedDataSource" 
        
                    Skin="WebBlue" 
        
                    OnItemCreated="uxCodesGrid_ItemCreated"   
        
                    AutoGenerateColumns="False"   
        
                    ondetailtabledatabind="uxCodesGrid_DetailTableDataBind"   
        
                    onitemdatabound="uxCodesGrid_ItemDataBound">  
        
                    <HeaderContextMenu EnableTheming="True">  
        
                        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
                    </HeaderContextMenu> 
        
                    <MasterTableView CommandItemDisplay="Top"   
        
                        DataKeyNames="FailureGroupsPrimaryKey" EditMode="InPlace" 
        
                        TableLayout="Fixed">  
        
                        <DetailTables> 
        
                            <telerik:GridTableView runat="server" CommandItemDisplay="Top"   
        
                                DataKeyNames="FailuresPrimaryKey" EditMode="InPlace" Name="Failures">  
        
                                <ParentTableRelation> 
        
                                    <telerik:GridRelationFields DetailKeyField="FailuresPrimaryKey"   
        
                                        MasterKeyField="FailureGroupsPrimaryKey" /> 
        
                                </ParentTableRelation> 
        
                                <CommandItemSettings AddNewRecordImageUrl="UIComponents\Images\add.gif"   
        
                                    RefreshText="" /> 
        
                                <RowIndicatorColumn> 
        
                                    <HeaderStyle Width="20px" /> 
        
                                </RowIndicatorColumn> 
        
                                <ExpandCollapseColumn> 
        
                                    <HeaderStyle Width="20px" /> 
        
                                </ExpandCollapseColumn> 
        
                                <Columns> 
        
                                    <telerik:GridBoundColumn DataField="FailuresPrimaryKey"   
        
                                        HeaderText="FailuresPrimaryKey" ReadOnly="True"   
        
                                        SortExpression="FailuresPrimaryKey" UniqueName="FailuresPrimaryKey">  
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridDropDownColumn DataField="FailuresPrimaryKey" HeaderText="Failure"   
        
                                        ListTextField="Failure" ListValueField="FailuresPrimaryKey"   
        
                                        UniqueName="Failure">  
        
                                    </telerik:GridDropDownColumn> 
        
                                    <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete"   
        
                                        FilterListOptions="VaryByDataTypeAllowCustom" Text="Delete" UniqueName="Delete">  
        
                                    </telerik:GridButtonColumn> 
        
                                </Columns> 
        
                                <EditFormSettings> 
        
                                    <EditColumn ButtonType="ImageButton">  
        
                                    </EditColumn> 
        
                                </EditFormSettings> 
        
                            </telerik:GridTableView> 
        
                        </DetailTables> 
        
                        <CommandItemSettings AddNewRecordImageUrl="UIComponents\Images\add.gif" AddNewRecordText="Add New Record" 
        
                            RefreshText="" /> 
        
                        <RowIndicatorColumn> 
        
                            <HeaderStyle Width="20px"></HeaderStyle> 
        
                        </RowIndicatorColumn> 
        
                        <ExpandCollapseColumn Visible="True">  
        
                            <HeaderStyle Width="20px"></HeaderStyle> 
        
                        </ExpandCollapseColumn> 
        
                        <Columns> 
        
                            <telerik:GridBoundColumn DataField="FailureGroupsPrimaryKey"   
        
                                HeaderText="FailureGroupsPrimaryKey" ReadOnly="True"   
        
                                SortExpression="FailureGroupsPrimaryKey"   
        
                                UniqueName="FailureGroupsPrimaryKey">  
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn DataField="Description" HeaderText="Description"   
        
                                SortExpression="Description" UniqueName="Description">  
        
                            </telerik:GridBoundColumn> 
        
                        </Columns> 
        
                        <SortExpressions> 
        
                            <telerik:GridSortExpression FieldName="Description" /> 
        
                        </SortExpressions> 
        
                        <EditFormSettings> 
        
                            <EditColumn ButtonType="ImageButton">  
        
                            </EditColumn> 
        
                        </EditFormSettings> 
        
                    </MasterTableView> 
        
                    <FilterMenu EnableTheming="True">  
        
                        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
                    </FilterMenu> 
        
                </telerik:RadGrid> 
        
                <telerik:RadAjaxManager runat="server" ID="uxRadAjaxManager">  
        
                    <ClientEvents OnRequestStart="centerUpdatePanel();"></ClientEvents> 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="uxCodesGrid">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="uxCodesGrid" LoadingPanelID="uxRadAjaxLoadingPanel" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                </form> 
        
            </body> 
        
            <head> 
        
                <meta http-equiv="PRAGMA" content="NO-CACHE">  
        
            </head> 
        
            </html>

answered on 09 Mar 2009, 10:23 AM

Hello Matthew,

Test the following suggestion:

    
            <telerik:GridEditCommandColumn UniqueName="myEditColumn" />

    
            protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) 
        
            { 
        
                if (e.Item is GridHeaderItem) 
        
                    RadGrid1.MasterTableView.GetColumn("myEditColumn").Display = RadGrid1.MasterTableView.IsItemInserted; 
        
                if (e.Item is GridEditableItem && !e.Item.IsInEditMode) 
        
                    (e.Item as GridEditableItem)["myEditColumn"].Controls[0].Visible = false; 
        
            }

Let us know whether this helps.

Kind regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.