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
<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
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.
sorry by misatake.........
set <
MasterTableView
EditMode
=
"PopUp"
inplace of
PopUpSettings-Modal="true"Thanks,
Jayesh Goyani
<
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
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
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/.
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"> </td>
<td colspan="7">
<h5>Vendor Information</h5>
<hr style="width: 25%" />
</td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td><strong>Vendor #</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="vendorNumLabel" runat="server" Text='<%# Eval("vendorNum") %>'></asp:Label>
</td>
<td style="width: 25px"> </td>
<td>
<strong>Tax ID #</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="TINLabel" runat="server" Text='<%# Bind("TIN") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td><strong>Vendor Name</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("vendorName") %>'></asp:Label>
</td>
<td style="width: 25px"> </td>
<td>
<strong>Not Set Up</strong>
</td>
<td style="width: 25px"> </td>
<td>
<telerik:RadCheckBox ID="rcbxNotSetUp" runat="server" Checked='<%# Bind("NotSetUp")%>' Enabled="false"></telerik:RadCheckBox>
</td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td><strong>Request Status</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="statusLabel" runat="server" Text='<%# Bind("status") %>'></asp:Label>
</td>
<td style="width: 25px"> </td>
<td>
<strong>Change Reason</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="changeReasonLabel" runat="server" Text='<%# Bind("changeReason") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td><strong>New/Change</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("action")%>'></asp:Label>
</td>
<td style="width: 25px"> </td>
<td>
<strong>Check Flag</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="flagDescriptionLabel" runat="server" Text='<%# Bind("flagDescription") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td><strong>Company</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="companyLabel" runat="server" Text='<%# Bind("company") %>'></asp:Label>
</td>
<td style="width: 25px"> </td>
<td>
<strong>Individual Payment</strong>
</td>
<td style="width: 25px"> </td>
<td>
<telerik:RadCheckBox ID="rcbxIndPay" runat="server" Checked='<%# Bind("indPay")%>' Enabled="false"></telerik:RadCheckBox>
</td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td><strong>Currency</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="currencyLabel" runat="server" Text='<%# Bind("currency") %>'></asp:Label>
</td>
<td style="width: 25px"> </td>
<td></td>
<td style="width: 25px"> </td>
<td></td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td colspan="7">
<h5>Request Process</h5>
<hr style="width: 25%" />
</td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td><strong>Requested by</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="rqstEmpNameLabel" runat="server" Text='<%# Bind("rqstEmpName") %>'></asp:Label>
</td>
<td style="width: 25px"> </td>
<td><strong>Requested Date/Time</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="rqstClerkDateTimeLabel" runat="server" Text='<%# Bind("rqstClerkDateTime") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td>
<strong>Request Approved by</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="rqstMgrNameLabel" runat="server" Text='<%# Bind("rqstMgrName") %>'></asp:Label>
</td>
<td style="width: 25px"> </td>
<td>
<strong>Request Approved Date/Time</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="rqstMgrDateTimeLabel" runat="server" Text='<%# Bind("rqstMgrDateTime") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td><strong>Request Comments</strong>
</td>
<td style="width: 25px"> </td>
<td colspan="5">
<asp:Label ID="rqstCommentsLabel" runat="server" Text='<%# Bind("rqstComments") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td colspan="7">
<h5>Vendor Maintenance Process</h5>
<hr style="width: 25%" />
</td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td><strong>Approved by</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="vmMgrNameLabel" runat="server" Text='<%# Bind("vmMgrName") %>'></asp:Label>
</td>
<td style="width: 25px"> </td>
<td><strong>Approved Date/Time</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="vmMgrDateTimeLabel" runat="server" Text='<%# Bind("vmMgrDateTime") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td>
<strong>Processed by</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="vmClerkNameLabel" runat="server" Text='<%# Bind("vmClerkName") %>'></asp:Label>
</td>
<td style="width: 25px"> </td>
<td>
<strong>Processed Date/Time</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="vmClerkDateTimeLabel" runat="server" Text='<%# Bind("vmClerkDateTime") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td>
<strong>Request Cancelled by</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="cxdNameLabel" runat="server" Text='<%# Bind("cxdName") %>'></asp:Label>
</td>
<td style="width: 25px"> </td>
<td>
<strong>Cancelled Date/Time</strong>
</td>
<td style="width: 25px"> </td>
<td>
<asp:Label ID="cxdTimestampLabel" runat="server" Text='<%# Bind("cxdTimestamp") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="width: 25px"> </td>
<td><strong>Vendor Maintenance Comments</strong>
</td>
<td style="width: 25px"> </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
Hi Jerry,
No, I only have 4 records on my dev site. But I may try your idea!
Thanks
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";
}
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.
<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>
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:
- Specifics on CSS Specificity;
- CSS Specificity: Things You Should Know;
- Specificity - CSS | MSDN;
- CSS !important: Don’t Use It. Do This Instead
To learn more about CSS styling and using the Browser's developer tools, you may find the following videos useful:
- How to Use the Chrome Inspector to Edit Your Website CSS - contains a Video
- Get Started With Viewing And Changing CSS
- Chrome Developer Tools Tutorial - Inspect and Test CSS 2019 - video
- Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - video
- Testing CSS Styles with Chrome Inspector Tool - video
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/.
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'.
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/.
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;
}
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/.