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

How i Manually Design Commanditemdisplay="Top"

8 Answers 173 Views
Grid
This is a migrated thread and some comments may be shown as answers.
mohamed
Top achievements
Rank 1
mohamed asked on 28 Apr 2011, 10:50 AM
How Can I Change The popup Designed Manually .

8 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 28 Apr 2011, 11:40 AM
Hello,

The command item content can be customized using the template of a GridTableView.CommandItemTemplate. Check the following help article for more details.
Command item template

Thanks,
Shinu
0
mohamed
Top achievements
Rank 1
answered on 28 Apr 2011, 01:21 PM
Thanks For Ur Reply Shinu.
How I center The fieldset not inner content
whole Manfacturers design

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Manfacturers.aspx.cs" Inherits="TBS_HelpDesk.Views.Assets.Manfacturers"
    MasterPageFile="~/Views/Shared/MasterPage.Master" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
    <div style="width: 500px; height: 600px;">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" UpdatePanelHeight="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadGrid ID="RadGrid1" runat="server" Skin="Office2007" AllowAutomaticInserts="True"
            AllowAutomaticUpdates="True" GridLines="None" AutoCompleteType="Disabled" AllowFilteringByColumn="True"
            AllowPaging="True" AllowSorting="True" OnRowDataBound="RadGrid1_RowDataBound1"
            OnItemCommand="RadGrid1_ItemCommand">
            <ExportSettings>
                <Pdf PageHeight="297mm" PageWidth="210mm" />
            </ExportSettings>
            <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top" EditMode="PopUp"
                IsFilterItemExpanded="false">
                <PagerStyle BackColor="#D8EBFC" Mode="NextPrevNumericAndAdvanced" />
                <HeaderStyle CssClass="dataheadcolor" />
                <RowIndicatorColumn>
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>
                <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType="ImageButton" />
                    <telerik:GridNumericColumn ReadOnly="true" DataField="Manuf_ID" HeaderText="Manuf ID"
                        SortExpression="Manuf_ID" UniqueName="Manuf_ID" MaxLength="4" FilterControlWidth="30px"
                        HeaderStyle-Width="80px" Visible="false">
                        <HeaderStyle Width="80px"></HeaderStyle>
                    </telerik:GridNumericColumn>
                    <telerik:GridBoundColumn DataField="Manuf_Name" HeaderText=" Name" SortExpression="Manuf_Name"
                        UniqueName="Manuf_Name" FilterControlWidth="40px" HeaderStyle-Width="120px">
                        <HeaderStyle Width="120px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Manuf_Description" HeaderText=" Description"
                        SortExpression="Manuf_Description" UniqueName="Manuf_Description" FilterControlWidth="30px"
                        HeaderStyle-Width="200px">
                        <HeaderStyle Width="200px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridCheckBoxColumn DataField="Manuf_Inactive" DataType="System.Boolean"
                        HeaderText=" Inactive" SortExpression="Manuf_Inactive" UniqueName="Manuf_Inactive"
                        FilterControlWidth="30px" HeaderStyle-Width="100px">
                        <HeaderStyle Width="100px"></HeaderStyle>
                    </telerik:GridCheckBoxColumn>
                    <telerik:GridButtonColumn CommandName="Delete" ButtonType="ImageButton" />
                </Columns>
                <EditFormSettings CaptionFormatString="Create" EditFormType="Template">
                    <EditColumn UniqueName="EditCommandColumn1">
                    </EditColumn>
                    <FormTemplate>
                        <table>
                            <tr>
                                <td>
                                    <fieldset style="height: 75px; width: 350px;">
                                        <table>
                                            <tr>
                                                <td>
                                                    <asp:Label ID="Label3" runat="server" ForeColor="Red" Text="*" Width="1px"></asp:Label>
                                                    <asp:Label ID="Label2" Text="Mandatory Field(s)" runat="server"></asp:Label>
                                                </td>
                                            </tr>
                                        </table>
                                        <legend style="margin-bottom: 10px">Manfacturer</legend>
                                        <table cellspacing="2" cellpadding="2" width="100%" border="0">
                                            <tr>
                                                <td>
                                                    <asp:TextBox Width="200px" ID="Manuf_ID" AutoCompleteType="Disabled" runat="server"
                                                        Visible="false" Text='<%# Bind("Manuf_ID") %>'></asp:TextBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="right">
                                                    <asp:Label ID="Label1" runat="server" ForeColor="Red" Text="*" Width="1px"></asp:Label>
                                                    Name:
                                                </td>
                                                <td>
                                                    <asp:TextBox Width="200px" ID="Manuf_Name" AutoCompleteType="Disabled" runat="server"
                                                        Text='<%# Bind("Manuf_Name") %>'></asp:TextBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="right" valign="top">
                                                    Description:
                                                </td>
                                                <td>
                                                    <asp:TextBox Width="200px" ID="Manuf_Description" AutoCompleteType="Disabled" runat="server"
                                                        TextMode="MultiLine" Height="100" Text='<%# Bind("Manuf_Description") %>'></asp:TextBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="right">
                                                    Inactive:
                                                </td>
                                                <td>
                                                    <asp:CheckBox Width="200px" ID="Manuf_Inactive" AutoCompleteType="Disabled" runat="server"
                                                        Text='<%# Bind("Manuf_Inactive") %>' />
                                                </td>
                                            </tr>
                                        </table>
                                    </fieldset>
                                </td>
                            </tr>
                        </table>
                        <table>
                            <tr>
                                <td>
                                    <asp:Button ID="Button1" runat="server" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                        CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>
                                    </asp:Button>
                                    <asp:Button ID="Button2" runat="server" Text="Cancel" CausesValidation="false" CommandName="Cancel">
                                    </asp:Button>
                                </td>
                            </tr>
                        </table>
                    </FormTemplate>
                    <PopUpSettings Modal="True"></PopUpSettings>
                </EditFormSettings>
            </MasterTableView>
            <ClientSettings>
                <Selecting AllowRowSelect="True" EnableDragToSelectRows="True" />
            </ClientSettings>
        </telerik:RadGrid>
    </div>
</asp:Content>



Thanks
Mohamed
0
Princy
Top achievements
Rank 2
answered on 29 Apr 2011, 07:12 AM
Hello Mohamed,

In your scenario, since you are placing FieldSet inside a container, one approach is to change the position of FieldSet by changing the style attributes of the container(or td).

Thanks,
Princy.
0
mohamed
Top achievements
Rank 1
answered on 29 Apr 2011, 10:17 AM
Thanks for ur reply Princy.
I want get like that image .
see and reply as soon as possible

Thanks
Mohamed
0
Accepted
Shinu
Top achievements
Rank 2
answered on 29 Apr 2011, 11:53 AM
Hello Mohamed,

One easy way to achieve this is by placing the  two tables inside a div and style the div accordingly. Here is the styling I tried. This worked for me as expected. Hope this helps you.

aspx:
<div style="margin: auto; width: 50%;">
  <table>
     ....
  </table>
 <table>
  ....
</table>
</div

Regards,
Shinu.
0
mohamed
Top achievements
Rank 1
answered on 29 Apr 2011, 12:32 PM
Thanks  For UR Replay.
how  i mandatory fields comes on align right

<div style="margin-left: 15px;">
                            <table>
                                <tr>
                                    <td style="height: 75px; width: 400px;">
                                        <table>
                                            <tr>
                                                <td align="right">
                                                    <asp:Label ID="Label3" runat="server" ForeColor="Red" Text="*" Width="1px"></asp:Label>
                                                    <asp:Label ID="Label2" Text="Mandatory Field(s)" runat="server"></asp:Label>
                                                </td>
                                            </tr>
                                        </table>
                                        <fieldset>
                                            <legend style="margin-bottom: 10px">Manfacturer</legend>
                                            <table cellspacing="2" cellpadding="1" width="100%" border="0">
                                                <tr>
                                                    <td align="right">
                                                        Name :
                                                    </td>
                                                    <td>
                                                        <asp:TextBox Width="200px" ID="Manuf_Name" AutoCompleteType="Disabled" runat="server"
                                                            Text='<%# Bind("Manuf_Name") %>'></asp:TextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td valign="top" align="right">
                                                        Description :
                                                    </td>
                                                    <td>
                                                        <asp:TextBox Width="200px" ID="Manuf_Description" AutoCompleteType="Disabled" runat="server"
                                                            TextMode="MultiLine" Height="100px" Text='<%# Bind("Manuf_Description") %>'></asp:TextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td align="right">
                                                        Inactive :
                                                    </td>
                                                    <td>
                                                        <asp:CheckBox Width="200px" ID="Manuf_Inactive" AutoCompleteType="Disabled" runat="server"
                                                            Text='<%# Bind("Manuf_Inactive") %>' />
                                                    </td>
                                                </tr>
                                            </table>
                                        </fieldset>
                                    </td>
                                </tr>
                            </table>
                            <table>
                                <tr>
                                    <td>
                                        <asp:Button ID="Button3" runat="server" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                            CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>
                                        </asp:Button>
                                        <asp:Button ID="Button4" runat="server" Text="Cancel" CausesValidation="false" CommandName="Cancel">
                                        </asp:Button>
                                    </td>
                                </tr>
                            </table>
                        </div>


Thanks
Mohamed
0
Accepted
Shinu
Top achievements
Rank 2
answered on 29 Apr 2011, 01:21 PM
Hello,

Try to set the styling for the table using float property.

aspx:
<table   style="float:right;">
   <tr>
 <td >
  <asp:Label ID="Label3" runat="server" ForeColor="Red" Text="*" Width="1px"></asp:Label>
       <
asp:Label ID="Label2" Text="Mandatory Field(s)"  runat="server" ></asp:Label>
 </td>
   </tr>
</table>

Regards,
Shinu.
0
mohamed
Top achievements
Rank 1
answered on 29 Apr 2011, 01:33 PM
Thank Alot Shinu

Thanks
Mohamed
Tags
Grid
Asked by
mohamed
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
mohamed
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or