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

Howto: Center align popup window for editing

20 Answers 859 Views
Grid
This is a migrated thread and some comments may be shown as answers.
JD.
Top achievements
Rank 1
JD. asked on 26 Sep 2011, 05:33 PM

Hi
Following are the lines from my HTML page.  I want to control the position of popup window duing add/edit.
It should be center align to the screen/browser window.  How do set it ?
 

Regards
JD

<MasterTableView CommandItemDisplay="TopAndBottom" EditMode="PopUp"   Width="100%" 
DataKeyNames="PropertyID" GridLines="Both"
PagerStyle-AlwaysVisible="True"
>

 

<EditFormSettings EditFormType="Template" PopUpSettings-Width="900px" 
CaptionFormatString="Edit Property: {0}"
CaptionDataField="PropertyName"
InsertCaption="Add New Property"
  
PopUpSettings-ScrollBars="Vertical">

20 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 26 Sep 2011, 06:48 PM
Hello,

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
  <script type="text/javascript">
    var popUp;
    function PopUpShowing(sender, eventArgs) {
      popUp = eventArgs.get_popUp();
      var gridWidth = sender.get_element().offsetWidth;
      var gridHeight = sender.get_element().offsetHeight;
      var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
      var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
      popUp.style.left = ((gridWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px";
      popUp.style.top = ((gridHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";
    }
  </script>
</telerik:RadCodeBlock>
<telerik:RadGrid ID="RadGrid1" AutoGenerateEditColumn="true" runat="server" AllowAutomaticDeletes="True"
  AllowAutomaticInserts="True" AllowAutomaticUpdates="True" DataSourceID="SqlDataSource1"
  AllowSorting="true" Skin="Hay" AllowPaging="true">
  <MasterTableView EditMode="PopUp" CommandItemDisplay="Top" DataKeyNames="ProductID">
    <EditFormSettings CaptionFormatString="Edit ProductID: {0}" CaptionDataField="ProductID"
      PopUpSettings-Height="260px" PopUpSettings-Width="400px" />
  </MasterTableView>
  <ClientSettings>
    <ClientEvents OnPopUpShowing="PopUpShowing" />
    <Selecting AllowRowSelect="true" />
  </ClientSettings>
</telerik:RadGrid>
 


Thanks,
Jayesh Goyani
0
JD.
Top achievements
Rank 1
answered on 27 Sep 2011, 10:54 AM
Hi Jayesh,

Marking this question open again.... Your solution does work, but when i make PopUpSettings-Modal="true"  it fails
to center align window.

<EditFormSettings EditFormType="Template" PopUpSettings-Width="900px"
CaptionFormatString="Edit Property: {0}"
CaptionDataField="PropertyName"
InsertCaption="Add New Property"
PopUpSettings-Modal="true"
PopUpSettings-Height="500px"
PopUpSettings-ScrollBars="Vertical">


Regards
JD.
0
Jayesh Goyani
Top achievements
Rank 2
answered on 27 Sep 2011, 11:06 AM
Hello,

sorry by misatake.........

set <MasterTableView EditMode="PopUp" inplace of PopUpSettings-Modal="true"

Thanks,
Jayesh Goyani
0
JD.
Top achievements
Rank 1
answered on 27 Sep 2011, 11:42 AM
Hi Jayesh,

<MasterTableView EditMode="PopUp"   is already set to popup.

if the default behaviour is that it does popup but also allows user to go behind the popup window.  we need to lock so user does not accidently move to other areas.   Thesefore I set PopUpSettings-Modal="true" with EditMode='Popup' in MasterTableView.

But due to that setting, the javascript code you gave, stopped working.

Regards
JD
0
Accepted
Jayesh Goyani
Top achievements
Rank 2
answered on 27 Sep 2011, 11:54 AM
Hello,

i update JS.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
       <script type="text/javascript">
           var popUp;
           function PopUpShowing(sender, eventArgs) {
 
               var myWidth = 0, myHeight = 0;
               if (typeof (window.innerWidth) == 'number') {
                   //Non-IE
                   myWidth = window.innerWidth;
                   myHeight = window.innerHeight;
               } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                   //IE 6+ in 'standards compliant mode'
                   myWidth = document.documentElement.clientWidth;
                   myHeight = document.documentElement.clientHeight;
               } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                   //IE 4 compatible
                   myWidth = document.body.clientWidth;
                   myHeight = document.body.clientHeight;
               }
                
               popUp = eventArgs.get_popUp();
               var gridWidth = sender.get_element().offsetWidth;
               var gridHeight = sender.get_element().offsetHeight;
               var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
               var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
               popUp.style.left = ((myWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px";
               popUp.style.top = ((myHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";
                
           }
       </script>
   </telerik:RadCodeBlock>
<telerik:RadGrid ID="RadGrid1" AutoGenerateEditColumn="true" runat="server" AllowAutomaticDeletes="True"
           AllowAutomaticInserts="True" AllowAutomaticUpdates="True" DataSourceID="SqlDataSource1"
           AllowSorting="true" Skin="Hay" AllowPaging="true">
           <MasterTableView EditMode="PopUp" CommandItemDisplay="Top">
               <EditFormSettings CaptionFormatString="Edit ProductID:"
                   PopUpSettings-Height="260px" PopUpSettings-Width="400px" PopUpSettings-Modal="true" />
           </MasterTableView>
           <ClientSettings>
               <ClientEvents OnPopUpShowing="PopUpShowing" />
               <Selecting AllowRowSelect="true" />
           </ClientSettings>
       </telerik:RadGrid>
 
       <asp:SqlDataSource ID="SqlDataSource1" runat="server"
           ConnectionString="<%$ ConnectionStrings:Test1DatabaseConnectionString %>"
           SelectCommand="SELECT [col1] FROM [Table1]"></asp:SqlDataSource>

let me know if any concern.

Thanks,
Jayesh Goyani
0
SMc
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 08 Dec 2020, 11:58 PM
Old thread, but it's still not working for me. If I select a grid row near the bottom of the page then the pop up window is centered horizontally and vertically. If I select a row near the top of the grid, the pop up window is left aligned with the grid and just under the selected row. 
0
Attila Antal
Telerik team
answered on 11 Dec 2020, 08:02 AM

Hi SMc,

The code sample provided by Jayesh has worked for the previous person asking the question. Your case scenario may be different and probably the approach would also be different. 

To be able to help, we would need more information on the current setup you have. Please share the Grid declaration from the ASPX page and all related events from the code behind. We will then look at the configuration and tell you how to center the Pop-up.

Regards,
Attila Antal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
SMc
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 11 Dec 2020, 08:08 PM

I wonder if it's because I have Filtering enabled on my grid? Anyway, here's my page:

 

<%@ Page Title="Vendor Maintenance Request Status" Language="VB" MasterPageFile="~/WebApps/VendorMaint/VenMaint.master" AutoEventWireup="false" CodeFile="VenMaint_status.aspx.vb" Inherits="WebApps_VendorMaint_VenMaint_status" %>

<asp:Content ID="Content1" ContentPlaceHolderID="VMBody" runat="Server">

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
var popUp;
function PopUpShowing(sender, eventArgs) {
popUp = eventArgs.get_popUp();
var gridWidth = sender.get_element().offsetWidth;
var gridHeight = sender.get_element().offsetHeight;
var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
popUp.style.left = ((gridWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px";
popUp.style.top = ((gridHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";
}
</script>
</telerik:RadCodeBlock>

<h4>Request Status</h4>

<telerik:RadGrid ID="rgvVenMaintList" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" DataSourceID="sdsVenMaintStatusList" PageSize="25" CellSpacing="10" AllowFilteringByColumn="True">

<GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>

<ExportSettings ExportOnlyData="True" HideStructureColumns="true" FileName="Request List Status" IgnorePaging="True">
<Excel Format="Xlsx" />
</ExportSettings>

<ClientSettings>
<ClientEvents OnPopUpShowing="PopUpShowing" />
<Selecting AllowRowSelect="true" />
</ClientSettings>

<MasterTableView DataKeyNames="wfID" DataSourceID="sdsVenMaintStatusList" HierarchyLoadMode="ServerOnDemand" EditMode="PopUp" CommandItemDisplay="Top">

<ItemStyle Wrap="false" />
<HeaderStyle Font-Bold="true" HorizontalAlign="Center" />

<CommandItemSettings ShowAddNewRecordButton="False" ShowExportToExcelButton="True" ExportToExcelImageUrl="../Images/Excel-icon.png" ExportToExcelText="" />

<EditFormSettings CaptionFormatString="Details for Vendor - {0} " CaptionDataField="vendorName" EditFormType="Template">
<PopUpSettings KeepInScreenBounds="true" ShowCaptionInEditForm="true" CloseButtonToolTip="Close detail" Modal="true" OverflowPosition="Center" Width="50%" Height="60%" />

<FormTemplate>

<table cellspacing="0" cellpadding="3">
<tr>
<td style="width: 25px">&nbsp;</td>
<td colspan="7">
<h5>Vendor Information</h5>
<hr style="width: 25%" />
</td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td><strong>Vendor #</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="vendorNumLabel" runat="server" Text='<%# Eval("vendorNum") %>'></asp:Label>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<strong>Tax ID #</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="TINLabel" runat="server" Text='<%# Bind("TIN") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td><strong>Vendor Name</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("vendorName") %>'></asp:Label>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<strong>Not Set Up</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<telerik:RadCheckBox ID="rcbxNotSetUp" runat="server" Checked='<%# Bind("NotSetUp")%>' Enabled="false"></telerik:RadCheckBox>
</td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td><strong>Request Status</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="statusLabel" runat="server" Text='<%# Bind("status") %>'></asp:Label>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<strong>Change Reason</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="changeReasonLabel" runat="server" Text='<%# Bind("changeReason") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td><strong>New/Change</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("action")%>'></asp:Label>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<strong>Check Flag</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="flagDescriptionLabel" runat="server" Text='<%# Bind("flagDescription") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td><strong>Company</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="companyLabel" runat="server" Text='<%# Bind("company") %>'></asp:Label>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<strong>Individual Payment</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<telerik:RadCheckBox ID="rcbxIndPay" runat="server" Checked='<%# Bind("indPay")%>' Enabled="false"></telerik:RadCheckBox>
</td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td><strong>Currency</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="currencyLabel" runat="server" Text='<%# Bind("currency") %>'></asp:Label>
</td>
<td style="width: 25px">&nbsp;</td>
<td></td>
<td style="width: 25px">&nbsp;</td>
<td></td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td colspan="7">
<h5>Request Process</h5>
<hr style="width: 25%" />
</td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td><strong>Requested by</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="rqstEmpNameLabel" runat="server" Text='<%# Bind("rqstEmpName") %>'></asp:Label>
</td>
<td style="width: 25px">&nbsp;</td>
<td><strong>Requested Date/Time</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="rqstClerkDateTimeLabel" runat="server" Text='<%# Bind("rqstClerkDateTime") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td>
<strong>Request Approved by</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="rqstMgrNameLabel" runat="server" Text='<%# Bind("rqstMgrName") %>'></asp:Label>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<strong>Request Approved Date/Time</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="rqstMgrDateTimeLabel" runat="server" Text='<%# Bind("rqstMgrDateTime") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td><strong>Request Comments</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td colspan="5">
<asp:Label ID="rqstCommentsLabel" runat="server" Text='<%# Bind("rqstComments") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td colspan="7">
<h5>Vendor Maintenance Process</h5>
<hr style="width: 25%" />
</td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td><strong>Approved by</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="vmMgrNameLabel" runat="server" Text='<%# Bind("vmMgrName") %>'></asp:Label>
</td>
<td style="width: 25px">&nbsp;</td>

<td><strong>Approved Date/Time</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="vmMgrDateTimeLabel" runat="server" Text='<%# Bind("vmMgrDateTime") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td>
<strong>Processed by</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="vmClerkNameLabel" runat="server" Text='<%# Bind("vmClerkName") %>'></asp:Label>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<strong>Processed Date/Time</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="vmClerkDateTimeLabel" runat="server" Text='<%# Bind("vmClerkDateTime") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td>
<strong>Request Cancelled by</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="cxdNameLabel" runat="server" Text='<%# Bind("cxdName") %>'></asp:Label>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<strong>Cancelled Date/Time</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td>
<asp:Label ID="cxdTimestampLabel" runat="server" Text='<%# Bind("cxdTimestamp") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px">&nbsp;</td>
<td><strong>Vendor Maintenance Comments</strong>
</td>
<td style="width: 25px">&nbsp;</td>
<td colspan="5">
<asp:Label ID="vmCommentsLabel" runat="server" Text='<%# Bind("vmComments") %>'></asp:Label>
</td>
</tr>
</table>
</FormTemplate>
</EditFormSettings>

<Columns>
<telerik:GridButtonColumn CommandName="Edit" ButtonType="ImageButton" Text="" ImageUrl="../Images/eye_icon_20.png" UniqueName="Select"
ItemStyle-Wrap="False" ItemStyle-HorizontalAlign="Center" HeaderText="View Detail">
<ItemStyle HorizontalAlign="Center" Wrap="False"></ItemStyle>
<HeaderStyle Width="60px" Wrap="true"></HeaderStyle>
</telerik:GridButtonColumn>

<telerik:GridBoundColumn DataField="wfID" DataType="System.Int32" FilterControlAltText="Filter wfID column" HeaderText="#" ReadOnly="True"
SortExpression="wfID" UniqueName="wfID" Visible="false">
<HeaderStyle Width="50px" />
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="vendorNum" HeaderText="Vendor #" FilterControlAltText="Filter vendorNum column" UniqueName="vendorNum" SortExpression="vendorNum">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="vendorName" HeaderText="Vendor" FilterControlAltText="Filter vendorName column" UniqueName="vendorName" SortExpression="vendorName">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="status" FilterControlAltText="Filter status column" HeaderText="Status" SortExpression="status" UniqueName="status">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="action" FilterControlAltText="Filter action column" HeaderText="New/Change" SortExpression="action" UniqueName="action">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="company" FilterControlAltText="Filter company column" HeaderText="Company" SortExpression="company" UniqueName="company">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="currency" FilterControlAltText="Filter currency column" HeaderText="Currency" SortExpression="currency" UniqueName="currency" Display="false">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="TIN" FilterControlAltText="Filter TIN column" HeaderText="TIN" SortExpression="TIN" UniqueName="TIN" Display="false">
</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="NotSetUp" DataType="System.Boolean" FilterControlAltText="Filter NotSetUp column" HeaderText="Not Set Up"
SortExpression="NotSetUp" UniqueName="NotSetUp" Display="false">
</telerik:GridCheckBoxColumn>

<telerik:GridBoundColumn DataField="changeReason" HeaderText="Change Reason" SortExpression="changeReason" UniqueName="changeReason" FilterControlAltText="Filter changeReason column" Display="false"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="flagDescription" FilterControlAltText="Filter flagDescription column" HeaderText="Check Flag" SortExpression="flagDescription"
UniqueName="flagDescription" Display="false">
</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="indPay" DataType="System.Boolean" FilterControlAltText="Filter indPay column" HeaderText="Individual Pay"
SortExpression="indPay" UniqueName="indPay" Display="false">
</telerik:GridCheckBoxColumn>

<telerik:GridBoundColumn DataField="rqstComments" FilterControlAltText="Filter rqstComments column" HeaderText="Requested by Comments" SortExpression="rqstComments" UniqueName="rqstComments" Display="false">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="rqstEmpName" FilterControlAltText="Filter rqstEmpName column" HeaderText="Requested by" SortExpression="rqstEmpName" UniqueName="rqstEmpName" Display="false">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="rqstClerkDateTime" DataType="System.DateTime" FilterControlAltText="Filter rqstClerkDateTime column"
HeaderText="Requested Date/Time" SortExpression="rqstClerkDateTime" UniqueName="rqstClerkDateTime">
</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="rqstMgrApproval" DataType="System.Boolean" FilterControlAltText="Filter rqstMgrApproval column" HeaderText="Request Approved" SortExpression="rqstMgrApproval" UniqueName="rqstMgrApproval" Display="false">
</telerik:GridCheckBoxColumn>

<telerik:GridBoundColumn DataField="rqstMgrName" FilterControlAltText="Filter rqstMgrName column" HeaderText="Request Approved by" SortExpression="rqstMgrName" UniqueName="rqstMgrName" Display="false">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="rqstMgrDateTime" HeaderText="Request Approved Date/Time" SortExpression="rqstMgrDateTime" UniqueName="rqstMgrDateTime" FilterControlAltText="Filter rqstMgrDateTime column" DataType="System.DateTime" Display="false"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="assignedTo" FilterControlAltText="Filter assignedTo column" HeaderText="Assigned To"
SortExpression="assignedTo" UniqueName="assignedTo">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="vmComments" FilterControlAltText="Filter vmComments column" HeaderText="Vendor Maintenance Comments" SortExpression="vmComments"
UniqueName="vmComments" Display="false">
</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="vmMgrApproval" DataType="System.Boolean" FilterControlAltText="Filter vmMgrApproval column" HeaderText="VM Approved" SortExpression="vmMgrApproval" UniqueName="vmMgrApproval" Display="false">
</telerik:GridCheckBoxColumn>

<telerik:GridBoundColumn DataField="vmMgrName" FilterControlAltText="Filter vmMgrName column" HeaderText="Approved by" SortExpression="vmMgrName" UniqueName="vmMgrName" Display="false">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="vmMgrDateTime" DataType="System.DateTime" FilterControlAltText="Filter vmMgrDateTime column"
HeaderText="VM Approved Date/Time" SortExpression="vmMgrDateTime" UniqueName="vmMgrDateTime" Display="false">
</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="vmClerkApproval" DataType="System.Boolean" FilterControlAltText="Filter vmClerkApproval column" HeaderText="Processed" SortExpression="vmClerkApproval" UniqueName="vmClerkApproval" Display="false">
</telerik:GridCheckBoxColumn>

<telerik:GridBoundColumn DataField="vmClerkName" FilterControlAltText="Filter vmClerkName column" HeaderText="Processed by" SortExpression="vmClerkName" UniqueName="vmClerkName">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="vmClerkDateTime" DataType="System.DateTime" FilterControlAltText="Filter vmClerkDateTime column"
HeaderText="Processed Date/Time" SortExpression="vmClerkDateTime" UniqueName="vmClerkDateTime">
</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="cxd" DataType="System.Boolean" FilterControlAltText="Filter cxd column" HeaderText="Cancelled" SortExpression="cxd" UniqueName="cxd" Display="false">
</telerik:GridCheckBoxColumn>

<telerik:GridBoundColumn DataField="cxdName" FilterControlAltText="Filter cxdName column" HeaderText="Cancelled by" SortExpression="cxdName" UniqueName="cxdName" Display="false">
</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="cxdTimestamp" DataType="System.DateTime" FilterControlAltText="Filter cxdTimestamp column" HeaderText="Cancelled Date/Time" SortExpression="cxdTimestamp" UniqueName="cxdTimestamp" Display="false">
</telerik:GridBoundColumn>

</Columns>
<PagerStyle PageSizes="25;50;75;100" AlwaysVisible="true" />
</MasterTableView>
</telerik:RadGrid>

<asp:SqlDataSource ID="sdsVenMaintStatusList" runat="server" ConnectionString="<%$ ConnectionStrings:VenMaint %>"
SelectCommand="sp_VenMaint_Status_AllRequests" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
</asp:Content>

And here's the code behind:

Imports Telerik.Web.UI
Imports System.Drawing


Partial Class WebApps_VendorMaint_VenMaint_status
    Inherits System.Web.UI.Page


Protected Sub rgvVenMaintList_ItemDataBound(sender As Object, e As GridItemEventArgs) Handles rgvVenMaintList.ItemDataBound

If (TypeOf e.Item Is GridDataItem) Then
Dim databounditem As GridDataItem = e.Item

If (databounditem("status").Text = "Cancelled") Then
databounditem.ForeColor = Color.Maroon
databounditem.Font.Bold = True

ElseIf (databounditem("status").Text = "Waiting VM Clerk Processing") Then
databounditem.ForeColor = Color.Red
databounditem.Font.Bold = True

ElseIf (databounditem("status").Text = "Waiting VM Mgr Approval") Then
databounditem.ForeColor = Color.OliveDrab
databounditem.Font.Bold = True

End If
End If

End Sub

Private Sub RadGrid1_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles rgvVenMaintList.Init
Dim menu As GridFilterMenu = rgvVenMaintList.FilterMenu
Dim i As Integer = 0
While i < menu.Items.Count
If menu.Items(i).Text = "NoFilter" Or _
   menu.Items(i).Text = "Contains" Or _
   menu.Items(i).Text = "EqualTo" Or _
   menu.Items(i).Text = "IsNull" Then
i = i + 1
Else
menu.Items.RemoveAt(i)
End If
End While

End Sub

End Class

0
Jerry
Top achievements
Rank 2
Iron
Iron
answered on 15 Dec 2020, 03:39 PM
If you have a long list of rows, like me, it may be popping up way down your page.  I fixed the issue by using 'window.innerHeight' instead of 'sender.get_element().offsetHeight'.
0
SMc
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 15 Dec 2020, 04:39 PM

Hi Jerry,

No, I only have 4 records on my dev site. But I may try your idea!

Thanks

0
SMc
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 15 Dec 2020, 04:54 PM
Well, that didn't work. The pop up is still in the lower left corner of the window.
0
Jerry
Top achievements
Rank 2
Iron
Iron
answered on 15 Dec 2020, 06:40 PM

This is the script for the PopUpShowing event I ended up using and it works perfectly in IE Edge and Chrome.

 function PopUpShowing(sender, eventArgs) {
       popUp = eventArgs.get_popUp();
       var scrollTop = document.documentElement.scrollTop;
       var windowHeight = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
       var windowWidth = document.body.offsetWidth;
       var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
       var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
       popUp.style.position = "fixed";
       popUp.style.left = (Math.floor((windowWidth - popUpWidth) / 2)).toString() + "px";
       popUp.style.top = (Math.floor((windowHeight - popUpHeight) / 2)).toString() + "px";
      }

 

 

0
Jerry
Top achievements
Rank 2
Iron
Iron
answered on 15 Dec 2020, 06:42 PM
The var scrollTop line is not needed, forgot to remove that. 
0
SMc
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 15 Dec 2020, 08:25 PM

Thanks for your help Jerry, but it's still not working for me. At least the pop up is showing within the window, not way down the page (I hope, since I don't have very many records in my dev db.) It just shows to the left on the grid, right below the selected record.

The reason this is so frustrating is that it work perfect on other pages I built for the same project!

Do you set a specific size for your grid? And for the pop up? My grid size is not set at all, and the pop up is set to 50% width and 60% height.

0
Jerry
Top achievements
Rank 2
Iron
Iron
answered on 15 Dec 2020, 08:36 PM
One thing that I did notice that I am doing differently from you is that I am using "WebUserControl" instead of "Template" for EditFormType.  I do not set a size for my grid but I do specify the size of the popup.

<EditFormSettings UserControlName="TeammateEdit.ascx" EditFormType="WebUserControl" CaptionFormatString="Edit Teammate: {0}" CaptionDataField="TeammateName">
        <EditColumn UniqueName="btnEdit"></EditColumn>
        <PopUpSettings Modal="true" OverflowPosition="Center" Height="550px" Width="400px" />
       </EditFormSettings>
0
Attila Antal
Telerik team
answered on 16 Dec 2020, 01:24 PM

Hi SMc,

Thank you for the additional information. This helped me replicate the problem you are experiencing.

While looking at the rendered HTML I have noticed that inline styles are applied to the element and those were preventing the pop-up to be aligned to the center. Usually, if there is an inline style, it is then coming from the markup declaration from the ASPX.

I checked the settings of the Grid and I saw that some settings were applied through the PopUpSettings tag and that conflicted with the styles from the JavaScript.

Here is a short video demonstrating that: http://somup.com/cYlDI22g6f

I advise that in the future only CSS class names are added to the element in the markup declaration, and styling them to be done through CSS.

Also, Telerik Controls have many CSS classes for every element, all you need to do is to create a selector targeting those override the built-in styles.

Example selector for the Popup:

.RadGrid .rgMasterTable .rgEditForm.rgEditPopup {
  // some rules here
}

 

You can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful: 

 

Regards,
Attila Antal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
SMc
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 16 Dec 2020, 05:42 PM

Hi AA,

Thanks for the reply and assistance. I watched the video and I do see how the settings are conflicting each other. By removing the width and height settings the pop up does center in the window; and that's great! My issue now is that the popup window is too small for the data (see attached image). I'm not sure how/where to add the CSS to the popup settings; and the tag does not allow a call to 'class' or 'css'.

0
Attila Antal
Telerik team
answered on 16 Dec 2020, 06:19 PM

Hi SMc,

How about removing all the JavaScript and Inline styles and use the following CSS.

.RadGrid .rgMasterTable .rgEditForm.rgEditPopup {
    left: calc(100% - 95%) !important;
    top: calc(100% - 95%) !important;
    width: calc(100% - 10%) !important;
}

See the results here: http://somup.com/cYlDFF2gd8

CSS is a powerful thing, and if you master it, practically nothing will stand in your way.

You can inspect the articles I have shared earlier to learn some really good tricks.

Regards,
Attila Antal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
SMc
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 16 Dec 2020, 06:39 PM

WOW! Thank you so much! That did the trick. I have to admit I do not know much about css. We do use a style sheet on our site, but it's just the basics.

I didn't know where to put the call to the css class, so I started with the EditFormSettings tag, calling the FormStyle-CssClass="rgEditPopup" and it worked!

I tweeked the style a bit to this:

.RadGrid .rgMasterTable .rgEditForm.rgEditPopup {
    left: calc(100% - 80%) !important;
top: calc(100% - 80%) !important;
width: calc(100% - 50%) !important;
}

0
Attila Antal
Telerik team
answered on 17 Dec 2020, 11:14 AM

There is no need to assign rgEditPopup class to anything because the RadGrid already does that. If you take a moment and inspect the elements using the Browser's Developer Tools, you will see that CSS classes already exist in the HTML DOM. All you need to do is to create a selector in a stylesheet that targets those elements by their class names.

You can remove the FormStyle-CssClass="rgEditPopup". But if you prefer to add a different one, name the CSS class differently and also change the selector targeting that.

.RadGrid .rgMasterTable .rgEditForm.myCustomClass {
 // rules
}

 

Regards,
Attila Antal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
JD.
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
JD.
Top achievements
Rank 1
SMc
Top achievements
Rank 2
Iron
Veteran
Iron
Attila Antal
Telerik team
Jerry
Top achievements
Rank 2
Iron
Iron
Share this question
or