Questions on UI for ASP.NET AJAX Forum

4 answers

148 views

It seems that after a PB the LayoutColumn loses its span if i have a CSS set.

Ex:

3 Columns, span=3, span=6, span=3. middle layoutcolumn is centered. after a PB, all 3 columns are displaying like a span=12

This only happens on a CSS to the CompositeLayoutColumn and when i use telerik postback controls - panel or manager. the asp UpdatePanel does not wipe out the Column spans. If the CSS is removed on the CompositeLayoutColumn it doesnt have any issues and stays where it should according to the spanning, 3, 6, and 3

<telerik:RadPageLayout runat="server" GridType="Fluid" ShowGrid="false">

<telerik:LayoutRow>

<Columns>

<telerik:LayoutColumn Span="4" HiddenXs="true" SpanSm="1" SpanMd="2" SpanLg="3" />

<telerik:CompositeLayoutColumn CssClass="fieldsetOpt0" Span="4" SpanXs="12" SpanSm="10" SpanMd="8" SpanLg="6">

</telerik:CompositeLayoutColumn>

<telerik:LayoutColumn Span="4" HiddenXs="true" SpanSm="1" SpanMd="2" SpanLg="3" />

</Columns>

</telerik:LayoutRow>

</telerik:RadPageLayout>

.fieldsetOpt0 {

-webkit-box-shadow: 5px 5px 2.5px 0px rgba(0,0,0,0.75);

-moz-box-shadow: 5px 5px 2.5px 0px rgba(0,0,0,0.75);

box-shadow: 5px 5px 2.5px 0px rgba(0,0,0,0.75);

box-shadow: 5px 5px 2.5px #101010;

border-radius: 10px;

border-color: black;

border-style: solid;

border-width: 1px;

padding: 2.5px;

width: 100%;

}

PageLayout

answered on 14 May 2020

7 answers

778 views

RadComboBox zIndex Issue in RadWindow

Hi Telerik. I am trying to change the zIndex on a RadComboBox drop down list inside a RadWindow. I have had to override some of the zIndex values on the elements due to the application interface requirements, and I have run into a few minor issues. I am currently able to fix the Calendar elements with the following technique:

Sys.Application.add_load(changeZIndex);

function changeZIndex() {

Type.registerNamespace(

"Telerik.Web.UI.Calendar");

window.Telerik.Web.UI.Calendar.Popup.zIndex = 14000;

}

Is there a way to do this same technique with the RadComboBox to get the list to show up in front of the RadWindow?

Type.registerNamespace(

"Telerik.Web.UI.RadComboBox");

window.Telerik.Web.UI.RadComboBox.???.zIndex = 14000;

Thanks in advance for your assistance.

Tim

Window

answered on 13 May 2020

5 answers

517 views

Prevent users rowselect RadGrid

Hello, guys.

I have a grid and I need to select/deselect rows progammatically in javascript depending on some operations (This is already done).

Now, I need to prevent user on selecting/deselecting rows by clicking. Im creating the grid completelly in my code behind and this is how I'm trying to achieve this behavior with no success:

VB

With GridListaItm.ClientSettings

.AllowKeyboardNavigation = False

.AllowColumnsReorder = False

.EnablePostBackOnRowClick = False

.EnableRowHoverStyle = True

.Selecting.AllowRowSelect = True

.Selecting.EnableDragToSelectRows = False

.Resizing.AllowColumnResize = True

.Resizing.AllowResizeToFit = True

.Scrolling.AllowScroll = True

.Scrolling.UseStaticHeaders = True

.Scrolling.SaveScrollPosition = True

.Scrolling.FrozenColumnsCount = 3

.ClientEvents.OnRowSelecting = "RowSelecting"

.ClientEvents.OnRowSelecting = "RowSelecting"

.ClientEvents.OnRowClick = "RClic"

End With

JS

<script type="text/javascript">

var snClic=0;

var snCambio=0;

function RowSelecting(sender, eventArgs) {

if (snCambio == 1) { snCambio = 0; return 0;}

if (snClic == 1) { eventArgs.set_cancel(true); snCambio = 1; snClic = 0;}

}

function RClic(sender, eventArgs) {

snClic = 1;

snCambio = 0;

}

</script>

Grid

answered on 13 May 2020

16 answers

440 views

Radgrid export to PDF grid footer showing up on every page - how to make i show up only on last page.

Hello folks,

First off - I know this question (or one very similar) was answered in 2011 via this post called "ExportToPDF footer show on last page RadGrid" as referenced here Footer shows up in every page when export to PDF but the answer page is now 404. So I thought I would ask it again.

Is there a way to get the footer that RadGrid displays at the bottom of the grid on the web page to ONLY show up on the last page of the PDF when exporting to PDF?

I have a RadGrid with grouping, each group has a footer with subtotals, the entire grid has a footer with a an overall total. I tried setting ShowFooter="false" so that I could append a customer footer to the RAWHTML on export but the grid on screen still shows (and exports) all of the footers including the grid level total.

Any help is appreciated.

Thanks!

Grid

answered on 12 May 2020

11 answers

1.3K+ views

RadWindow OnClientClose not working

I am using radwindowmanager on my master page and my other aspx pages are showing radwindows using this manager. except one aspx page, everything is working as expected. on this problematic page i have nothing different, I have the radwindow shown but the bloody OnClientClose event is not working! On other pages when i delete the OnClientClose function on javascript code, it gives me the event is not defined error as normal. but on the problematic page when i delete the OnClientClose, it doesnt even give an error.

function confirm(text) {

var oManager = GetRadWindowManager();

var oWnd = oManager.open(null, "RadWindow6");

oWnd.SetTitle(text);

}

<telerik:RadWindow ID="RadWindow6" runat="server" Animation="None" Behavior="Default"

Height="170px"

InitialBehavior="None" Left="" Modal="True" NavigateUrl="~/popups/ConfirmWindow.aspx" OnClientClose="OnClientClose"

Overlay="True" Top="" VisibleStatusbar="False" Width="360px" Skin="WebBlue" Behaviors="Move,Close" >

</telerik:RadWindow>

and here's the script that is added to a close button on the ConfirmWindow.aspx page which is inside this radwindow (works and closes the window as expected) :

function CloseWindow(type) {

var oWnd = GetRadWindow();

var oArg = new Object();

oArg.result = false;

oArg.type = type;

oWnd.close(oArg);

}

the javascript func is opening radwindow and my close button is closing the window but OnClientClose is not working, not even seeked! What am I missing?

Window

answered on 11 May 2020

5 answers

338 views

Change the markers text size when zooming the map

I'm using marker to show text with polygon. This seems to work ok.
Is there possibility to resize the text when zooming the map? When zooming out, text shows smaller and when zoomin in, text size is bigger

Here's the code which shows the example text.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

<style type="text/css">

.RadMap .k-marker::before, .RadMap .k-marker-Pin-target::before, .RadMap .k-marker-pin-target::before {

content: none !important;

}

.RadMap .k-marker {

text-shadow: none !important;

}

.k-map.RadMap .k-marker {

width: auto !important;

height: auto !important;

text-shadow: none;

padding: 0;

background-image: none;

cursor: default;

margin: -11px 0 0 -2px !important;

color: black !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<telerik:RadCodeBlock runat="server">

<script type="text/javascript">

var shapeData = [{

"type": "Feature",

"properties": {

"object": "seat",

"num": 2,

"marker": {

"title": "LONG MESSAGE TEXT",

"location": [4, 3]

}

},

"geometry": {

"type": "Polygon",

"coordinates": [

[

29.102396965026852,

62.7612086158975

],

[

29.109349250793457,

62.7612086158975

],

[

29.109349250793457,

62.762092508522215

],

[

29.102396965026852,

62.762092508522215

],

[

29.102396965026852,

62.7612086158975

]

}

];

function shapeCreated(e) {

try {

if (e.shape.dataItem.properties["marker"]) {

var map = e.sender;

var marker = e.shape.dataItem.properties.marker;

// make sure a custom shape title is added, so that the custom code could affect only these markers

// note that this affects the selector which customizes the markers (see the RenderTextNode function below)

marker["shape"] = "text-label";

// add the custom marker to the markers collection

var markerElement = map.markers.add(marker);

// // render the shape label

var markerElm = markerElement.element;

// // get the dynamically added title attribute and add it as text to the span element

var markerTitle = markerElm.attr("title");

markerElm[0].style.fontSize = "22px;"

markerElm.text(markerTitle);

var tooltip = markerElm.data("kendoTooltip");

tooltip.destroy();

}

catch (err) {

alert(err);

}

function OnInitialize(sender, args) {

var originalOptions = args.get_options();

originalOptions.layers[1].dataSource = { data: shapeData };

args.set_options(originalOptions);

}

</script>

</telerik:RadCodeBlock>

<div style="width: 100%; height: 100%;">

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="500">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">

<asp:HiddenField runat="server" ID="HiddenGeoJSON" />

<telerik:RadMap runat="server" ID="RadMap2" Zoom="8" LayersDataSourceID="">

<ClientEvents OnInitialize="OnInitialize" OnShapeCreated="shapeCreated" />

<CenterSettings Latitude="5" Longitude="5" />

<LayerDefaultsSettings>

<ShapeSettings>

<StyleSettings>

</StyleSettings>

</ShapeSettings>

</LayerDefaultsSettings>

<LayersCollection>

<telerik:MapLayer Type="Tile" UrlTemplate="http://a.tile.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png">

</telerik:MapLayer>

<telerik:MapLayer Type="Shape">

</telerik:MapLayer>

</LayersCollection>

</telerik:RadMap>

</telerik:RadAjaxPanel>

</div>

</form>

</body>

</html>

Regards,
Auvo

Map

answered on 11 May 2020

2 answers

396 views

How to refresh telerik:RadGrid Batch Editing state with out post back

Looking for javascript Method which will force client rebind of the telerik:RadGrid Batch Editing and will refresh its state with out post backI used bellow syntax to refresh grid state,it’s not working

function assignDataSourceAndRefresh()
{
var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
masterTable.dataBind();
}

I also used bellow syntax it’s working but it’s make a post back.i need a process which refresh grid state without postback

function testRefresh(sender, args) {
alert("shamim");

var batchManager = $find('<%=RadGrid2.ClientID%>').get_batchEditingManager();
batchManager.cancelChanges($find('<%=RadGrid2.ClientID%>').get_masterTableView());
}

Grid

answered on 11 May 2020

3 answers

107 views

Use "rem" (root em) instead of "em" not possible?

Hi guys, is there a way to use "rem" instead of "em" on the controls? Using "rem" gives a build error ...

Thanks, Tom

General Discussions

answered on 08 May 2020

6 answers

526 views

Credit Cards Masks

I need to set the mask when they start to type e.g.
if they enter 4 the mask should be 16 digits split into 4 groups of 4 digits each #### #### #### #### - VISA
if they enter number 51-55 the mask should be same as above - MASTERCARD
if they enter 6011 or 65 the mask should be same with the previous two - DISCOVER
if they enter 34 or 37 the last group should be 3 character instead (15 in total) - AMEX

Thank you

EDIT: In addition, the very same regex which works for regular textbox does not work (ONLY AMEX) for Masked textbox:

<telerik:RadMaskedTextBox ID="txtCCNumber" runat="server"

Mask="#### #### #### ####" ValidationGroup="CardValidate" />

<asp:RequiredFieldValidator ID="cardnumbervalidator" runat="server"

ControlToValidate="txtCCNumber" ErrorMessage="Card Number is Required!"

SetFocusOnError="True" ValidationGroup="CardValidate">!</asp:RequiredFieldValidator>

<asp:RegularExpressionValidator ID="cardregvalidator" runat="server"

ControlToValidate="txtCCNumber" ErrorMessage="Card Number is not valid!"

ValidationExpression="^((4\d{3})|(5[1-5]\d{2})|(6011))-?\d{4}-?\d{4}-?\d{4}|3[4,7][\d\s-]{13}$" ValidationGroup="CardValidate">!</asp:RegularExpressionValidator>

Input

answered on 08 May 2020

5 answers

287 views

Classic and LightWeight Rendering of Icons

It's my understanding that if I'm using Classic RenderMode, I should get the Sprite Icons on the pushbutton, if I use LightWeight rendering I should get the Kendo css images, with that being said, this took some digging to get it to this simple of an example, with the RadButton ID="btnRadButton" the icons will show the sprite image and the css image for both Classic and LightWeight rendering. If you take the RadButton ID="btnRadButton" off the page, or set visible="false", you'll get the css images only.

Using 2020.1.114.45 Upgraded to 2020.1.219.45 same issue with the latest version

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Test._Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="True">
        </telerik:RadScriptManager>
        <telerik:RadButton ID="btnRadButton" runat="server" Text="My Button" RenderMode="Classic"
            AutoPostBack="false" >
        </telerik:RadButton>
        <h1>Classic</h1>
        <telerik:RadPushButton ID="btnOK" runat="server" Text="OK Classic" RenderMode="Classic" >
            <Icon CssClass="rbOk" Top="6px" />
        </telerik:RadPushButton>
        <telerik:RadPushButton ID="btnSearch" runat="server" Text="Search Classic" RenderMode="Classic">
            <Icon CssClass="rbSearch" Top="6px" />
        </telerik:RadPushButton>
        <telerik:RadPushButton ID="btnCancel" runat="server" Text="Cancel Classic" RenderMode="Classic">
            <Icon CssClass="rbCancel" Top="6px" />
        </telerik:RadPushButton>
        <h1>Lightweight</h1>
        <telerik:RadPushButton ID="RadPushButton1" runat="server" Text="OK Classic" RenderMode="Lightweight" >
            <Icon CssClass="rbOk" Top="6px" />
        </telerik:RadPushButton>
        <telerik:RadPushButton ID="RadPushButton2" runat="server" Text="Search Classic" RenderMode="Lightweight">
            <Icon CssClass="rbSearch" Top="6px" />
        </telerik:RadPushButton>
        <telerik:RadPushButton ID="RadPushButton3" runat="server" Text="Cancel Classic" RenderMode="Lightweight">
            <Icon CssClass="rbCancel" Top="6px" />
        </telerik:RadPushButton>
    </form>
</body>
</html>

PushButton

answered on 07 May 2020