Questions on UI for ASP.NET AJAX Forum

6 answers

150 views

Filter Template with Combo Box - with Images

I am trying to implement a Filter Template with a Combo Box that uses Images

- there is no explicit DataTextField or DataValueField in the data items

it doesn't work at all!

the markup:

<telerik:GridTemplateColumn UniqueName="Target" DataField="Target" SortExpression="Target" HeaderText="Target" HeaderStyle-Width="40" >

<FilterTemplate>

<telerik:RadComboBox ID="rcbTarget" OnPreRender="rcbTarget_PreRender" OnSelectedIndexChanged="rcbTarget_SelectedIndexChanged" AutoPostBack="true" runat="server" />

</FilterTemplate>

<ItemTemplate>

<asp:ImageButton ID="imgTarget" ImageUrl="../Images/tgt_neutral.png" CommandName="SetTarget" CommandArgument='<%# Eval("Target") %>' Height="36" Width="36" runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn>

the code behind:

    protected void rcbTarget_PreRender(object sender, EventArgs e)

    {

        RadComboBox rcbTarget;

        rcbTarget = sender as RadComboBox;

        if (ViewState["rcbTarget"] == null) { } else

        {

            rcbTarget.SelectedValue = ViewState["rcbTarget"].ToString();

        }

    }

protected void rgDraftProspects_ItemCreated(object sender, GridItemEventArgs e) { GridFilteringItem theFilterItem; RadComboBox rcbTarget, rcbPager; if (e.Item is GridFilteringItem) { theFilterItem = e.Item as GridFilteringItem; //set dimensions for the filters rcbTarget = theFilterItem["Target"].Controls[1] as RadComboBox; FillTargetFilter(rcbTarget); }

}

private void FillTargetFilter(RadComboBox rcbTarget) { RadComboBoxItem rcbiTarget; rcbiTarget = new RadComboBoxItem(); rcbiTarget.Text = "No Filter"; rcbiTarget.Value = string.Empty; rcbTarget.Items.Add(rcbiTarget); // rcbiTarget = new RadComboBoxItem(); // rcbiTarget.ImageUrl = "../Images/tgt_neutral.png"; // rcbiTarget.Value = DBNull.Value.ToString(); // rcbTarget.Items.Add(rcbiTarget); rcbiTarget = new RadComboBoxItem(); rcbiTarget.ImageUrl = "../Images/tgt_yes.png"; rcbiTarget.Value = "1"; rcbTarget.Items.Add(rcbiTarget); rcbiTarget = new RadComboBoxItem(); rcbiTarget.ImageUrl = "../Images/tgt_no.png"; rcbiTarget.Value = "0"; rcbTarget.Items.Add(rcbiTarget); }

protected void rcbTarget_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e) { StringBuilder sb; ViewState["rcbTarget"] = e.Value; sb = new StringBuilder(); sb.Append("([Target] = '"); sb.Append(e.Value); sb.Append("') "); rgDraftProspects.MasterTableView.FilterExpression = sb.ToString(); ; rgDraftProspects.MasterTableView.Rebind(); }

Grid

answered on 28 Mar 2018

0 answers

259 views

RadMenu fixed position on top full width

Hello all.

I'm new to Telerik UI for ASP.NET AJAX.

I have on Master Page. All other pages are nested.

Now if I have on page scroll down - everything goes down. But I want that at least my main menu from Master page stays fixed always on screen.

I tried something like this, but it works not so good, my main panel blinking while scrolling.

Please advise me how I can figure it out. Thanks, I hope that there must be a single property!

Master Page.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="VulcanDash.Site1" %>

<!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>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="CSS/MasterPage.css" rel="stylesheet" type="text/css" />
</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>
<div class="container RadMenu_Fixed">
<telerik:RadMenu ID="RadMenu1" Runat="server" ClickToOpen="True" Skin="Telerik" EnableRoundedCorners="True">
<Items>
<telerik:RadMenuItem runat="server" Text="Dashboard" NavigateUrl="GeneralForm.aspx" Target="_parent">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="TA" NavigateUrl="TransactionApprovalForm.aspx" Target="_parent">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Login" NavigateUrl="LoginForm.aspx" Target="_parent">
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
</div>
<div class="container MainContent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

Master Page.css

.RadMenu_Fixed
{
position:fixed !important;
width:100%;
top:0px;
}

* html .RadMenu_Fixed /*required for IE6*/
{
position:relative !important;
top:expression(eval(document.documentElement.scrollTop? document.documentElement.scrollTop : document.body.scrollTop) + "px");
left:expression(eval(document.documentElement.scrollLeft? document.documentElement.scrollLeft : document.body.scrollLeft ) + "px");
}

.MainContent
{
margin-top: 15px;
width:100%;
}

Menu

asked on 28 Mar 2018

1 answer

92 views

Deleting <p> tag with whitespace - Track Changes issue

I've noticed some more unexpected behavior relating to the Telerik Editor's track changes feature. It seems that when a <p> element contains nothing but whitespace (newline, space or tab characters) any time one character is deleted, the entire element is deleted. Another issue relating to this, is that when the line is deleted, if there is another whitespace <p> element above the element, the cursor is placed not on that line, but on whatever line is next without any whitespace. This behavior can be reproduced in the track-changes demo (Found at https://demos.telerik.com/aspnet-ajax/editor/examples/trackchanges/defaultcs.aspx ) ,by following these steps:

1. Create a <p> element containing some text

2. Below this element, create 3 more containing nothing but whitespace

3. On the last line enter a space and then press the backspace key

The cursor will be moved to the <p> element containing text and the entire element will be deleted (not just the space which was entered)

Do you have any suggestions or workarounds for this issue?

Kind Regards,

Aidan Harris

Editor

answered on 28 Mar 2018

6 answers

1.2K+ views

Radcombobox SelectedIndexChanged Event not firing

Hi,

I have a combobox added in a usercontrol. I am loading the user control dynamically in the page. I have registered the event selectedIndexChanged in the user control, but the event is not firing.

Below is the control added in user control.

    
            <telerik:RadComboBox ID="rcbPlain" runat="server" CausesValidation="false" MaxLength="30" AutoPostBack="true" OnSelectedIndexChanged="rcbPlaint_SelectedIndexChaned">  
        
                            </telerik:RadComboBox>

I am then loading the usercontrol dynamically in the page in the page_load event.
But the event is not firing.

Thanks in Advance,
Afzal

ComboBox

answered on 28 Mar 2018

2 answers

160 views

Add padding to backgroundposition option

OK, so this might be a semi-strange one but here goes. I have an AjaxLoadingPanel wired up to a UpdatePanel and it's working really well. Inside the UpdatePanel is a RadGrid that is set to Client Load. It's perfect - almost.

By default, the icon for loading is centered on the radgrid which is set to paging enabled at 100. That means, the loading icon isn't visible because you would have to scroll down the page to see it. Since the paging of 50 starts the grid at a size of 50 rows. Setting the BackgroundPosition to top is handy but doesn't look great. I know this sounds silly but it's right over the command bar of the RadGrid. Visually, it just looks "off".

So using this: <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" BackgroundPosition="Top"></telerik:RadAjaxLoadingPanel>

Is there a way, most likely CSS, to set a padding-top so the icon appears maybe 100px padded from the top of the loading window. Again, I know it sounds silly but I put an image so you had an idea of what I was referring to.

I'll keep hacking around and see if I can find the option in CSS.

Thanks,

Richard

AjaxLoadingPanel

answered on 28 Mar 2018

0 answers

199 views

Function in ClientTemplate from Server

Hi,
In my mvc project grid, subgrid are generated from server side.i want to template one of my column.What i need is to call a java script function from client template.But the java script function call is assigned from server side.

Javascript function : function Test() {return "Hi"; }
Function call in template from server side: uiGridCoulmn.ClientTemplate= "#=Test() #";

this showing exactly 'Hi' in my specific column. But the problem is when i set a parameter to Test() and try to add the variable in function call it shows Invalid template

Javascript function : function Test(url) {return "Hi"; }
Function call in template from server side: var url ="sometext";
uiGridCoulmn.ClientTemplate= "#=Test(' "+url+" ') #";

Character ' is actually encoded to \u0027.

How can i stop this?

thanks

sabbir

Grid

asked on 28 Mar 2018

9 answers

310 views

Close radmenu item on click

Hi,

I have a radmenu with items that target a iframe inside the page. I like the menu to close immediately after it has been clicked. How can i do that? I think this should be a feature of the menu itself. But it seems it's not possible to do this easily without a lot of javascripts. Can you please show me how to do this?

Thanks in advance.

Menu

answered on 28 Mar 2018

0 answers

112 views

RadEditor render issue

The radeditor renders fine(radeditor2.png) while debugging in VS but when the site is deployed to IIS the radeditor renders without the edit mode.Any help regarding this would be highly appreciated.

Telerik version : 2017.3.913.35

Web.config registration -

</system.web><httpHandlers>

<remove verb="*" path="*.asmx" />
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" />

<add path="Reserved.ReportViewerWebControl.axd" verb="*" type="Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />
<add path="Telerik.Web.UI.WebResource.axd" verb="*" type="Telerik.Web.UI.WebResource, Telerik.Web.UI, Version=2017.3.913.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" validate="false" />
<add path="Telerik.Web.UI.DialogHandler.axd" verb="*" type="Telerik.Web.UI.DialogHandler, Telerik.Web.UI, Version=2017.3.913.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" validate="false" />
<add path="ChartImage.axd" verb="*" type="Telerik.Web.UI.ChartHttpHandler, Telerik.Web.UI, Version=2017.3.913.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" validate="false" />
</httpHandlers>
<httpModules>

<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

</httpModules>
</system.web>

<system.webServer>
<validation validateIntegratedModeConfiguration="false" />
<modules>
<add name="WSFederationAuthenticationModule" type="System.IdentityModel.Services.WSFederationAuthenticationModule, System.IdentityModel.Services, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" preCondition="managedHandler" />
<add name="SessionAuthenticationModule" type="System.IdentityModel.Services.SessionAuthenticationModule, System.IdentityModel.Services, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" preCondition="managedHandler" />
<remove name="WebDAVModule" />
<add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
</modules>
<handlers>
<remove name="WebServiceHandlerFactory-Integrated" />
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<remove name="OPTIONSVerbHandler" />
<remove name="TRACEVerbHandler" />
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
<add name="WebResource" path="Telerik.Web.UI.WebResource.axd" verb="*" type="Telerik.Web.UI.WebResource, Telerik.Web.UI, Version=2017.3.913.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" />
<add name="DialogHandler" path="Telerik.Web.UI.DialogHandler.axd" verb="*" type="Telerik.Web.UI.DialogHandler, Telerik.Web.UI, Version=2017.3.913.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" />
<add name="ChartImage" path="ChartImage.axd" verb="*" type="Telerik.Web.UI.ChartHttpHandler, Telerik.Web.UI, Version=2017.3.913.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" />
</handlers></system.webServer>

General Discussions

asked on 28 Mar 2018

0 answers

249 views

Enter data into Rad Editor after apply "Bold" style data not shown as dotted lines.

Hi Team,
Below sample code I am using, now when I run the application, I have entered some text and make it as "Bold" (select from toolbar) and click enter and write some more sentence, now, what ever I wrote those sentence I am seeing with dotted lines (see the attached image).
Note# "EditMode="Design" please help me asap.
FYI, to replicate this issue use below sample code and, follow below steps.
when "EditMode="Design" first enter some sample text then make it bold that text -->click on enter-->enter some more text you will able to see dotted lines.
Goto "Preview" mode, you can able to see all the sentence which you entered in "Design" mode.
If I remove "ContentAreaMode="Div" " property, it's working fine but I need this property.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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>
</head>
<script type="text/javascript">

function RadEditorOnLoad(editor, args) {
//debugger;
var htmlArea = editor.get_textArea();
var contentArea = editor.get_contentArea();

var editorId = editor._element.id;
if (htmlArea) {
htmlArea.attachEvent('onchange', function () { MyCharacterCounter(editor, ''); });
htmlArea.attachEvent('onkeyup', function () { MyCharacterCounter(editor, ''); });
htmlArea.attachEvent('onkeypress', function () { MyCharacterCounter(editor, ''); });
}
if (contentArea) {
contentArea.attachEvent('onchange', function () { MyCharacterCounter(editor, ''); });
contentArea.attachEvent('onkeyup', function () { MyCharacterCounter(editor, ''); });
contentArea.attachEvent('onkeypress', function () { MyCharacterCounter(editor, ''); });
}
}

function MyCharacterCounter(editor, ExpLen) {

var comments = editor._contentArea.innerText;

var counterlabel = editor._element.parentElement.children[2];

if (document.getElementById(ExpLen)) {
var maxlength = document.getElementById(ExpLen).value;
}
else {
var maxlength = document.getElementById('hdnExplanationLength').value;
}

if (comments.length == parseInt(maxlength)) {
counterlabel.innerHTML = "0 Text Limit has been reached";
}
else if (comments.length > parseInt(maxlength)) {
counterlabel.innerHTML = (parseInt(maxlength) - comments.length) + " Text Limit has been exceeded, Please reduce the text";
}
else {
counterlabel.innerHTML = (parseInt(maxlength) - comments.length);
}

if (comments.length > parseInt(maxlength)) {
counterlabel.style.color = 'red'
}
else {
counterlabel.style.color = 'grey'
}
}
</script>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div>
<table width="100%">
<tr width="100%">
<td width="100%">
<asp:HiddenField ID="hdnExplanationLength" runat="server" Value="2000" />
<telerik:RadEditor ID="txt_GeneralExplanationAdd" BorderStyle="None" runat="server"
Width="50%" ToolsFile="ToolsFile.xml" Height="200px" Font-Names="Tahoma" Font-Size="11px"
Style="margin-bottom: 5px;" EnableResize="False" ContentAreaMode="Div" StripFormattingOptions="MSWordRemoveAll,ConvertWordLists"
StripFormattingOnPaste="None" NewLineMode="Br" NewLineBr="true" OnClientLoad="RadEditorOnLoad">
</telerik:RadEditor>
<asp:Label ID="lbl_PrescriberExpTextCounter" runat="server" Text='2000' Style="color: Gray;
float: right; margin-bottom: 5px;"></asp:Label>
</td>
</tr>
</table>

</div>
</form>
</body>
</html>
ToolsFile.XML
<root>
<tools>
<tool name="Bold" strip="FontBasicTools" shortcut="CTRL+B"/>
<tool name="Italic" strip="FontBasicTools" shortcut="CTRL+I"/>
<tool name="Underline" strip="FontBasicTools" shortcut="CTRL+U"/>
<tool name="ForeColor"/>
<tool name="BackColor"/>
</tools>
<tools>
<tool name="InsertUnorderedList" strip="ListsAndIndention"/>
<tool name="InsertOrderedList" strip="ListsAndIndention"/>
<tool name="JustifyLeft" strip="Align"/>
<tool name="JustifyCenter" strip="Align"/>
<tool name="JustifyRight" strip="Align"/>
<tool name="JustifyFull" strip="Align"/>
</tools>
</root>

General Discussions

asked on 28 Mar 2018

0 answers

101 views

Rad Editor content interrupt the letters/words

Hi Team,

Below sample code I am using, now when I run the application, I have entered some text and make it as "Bold" (select from toolbar) and click enter and write some more sentence, now, what ever I wrote those sentence I am seeing with dotted lines (see the attached image).

Note# "EditMode="Design" please help me asap.

FYI, to replicate this issue use below sample code and, follow below steps.

when "EditMode="Design" first enter some sample text then make it bold that text -->click on enter-->enter some more text you will able to see dotted lines.

Goto "Preview" mode, you can able to see all the sentence which you entered in "Design" mode.

If I remove "ContentAreaMode="Div" " property, it's working fine but I need this property.

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

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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>
</head>
<script type="text/javascript">

function RadEditorOnLoad(editor, args) {
//debugger;
var htmlArea = editor.get_textArea();
var contentArea = editor.get_contentArea();

var editorId = editor._element.id;
if (htmlArea) {
htmlArea.attachEvent('onchange', function () { MyCharacterCounter(editor, ''); });
htmlArea.attachEvent('onkeyup', function () { MyCharacterCounter(editor, ''); });
htmlArea.attachEvent('onkeypress', function () { MyCharacterCounter(editor, ''); });
}
if (contentArea) {
contentArea.attachEvent('onchange', function () { MyCharacterCounter(editor, ''); });
contentArea.attachEvent('onkeyup', function () { MyCharacterCounter(editor, ''); });
contentArea.attachEvent('onkeypress', function () { MyCharacterCounter(editor, ''); });
}
}

function MyCharacterCounter(editor, ExpLen) {

var comments = editor._contentArea.innerText;

var counterlabel = editor._element.parentElement.children[2];

if (document.getElementById(ExpLen)) {
var maxlength = document.getElementById(ExpLen).value;
}
else {
var maxlength = document.getElementById('hdnExplanationLength').value;
}

if (comments.length == parseInt(maxlength)) {
counterlabel.innerHTML = "0 Text Limit has been reached";
}
else if (comments.length > parseInt(maxlength)) {
counterlabel.innerHTML = (parseInt(maxlength) - comments.length) + " Text Limit has been exceeded, Please reduce the text";
}
else {
counterlabel.innerHTML = (parseInt(maxlength) - comments.length);
}

if (comments.length > parseInt(maxlength)) {
counterlabel.style.color = 'red'
}
else {
counterlabel.style.color = 'grey'
}
}
</script>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div>
<table width="100%">
<tr width="100%">
<td width="100%">
<asp:HiddenField ID="hdnExplanationLength" runat="server" Value="2000" />
<telerik:RadEditor ID="txt_GeneralExplanationAdd" BorderStyle="None" runat="server"
Width="50%" ToolsFile="ToolsFile.xml" Height="200px" Font-Names="Tahoma" Font-Size="11px"
Style="margin-bottom: 5px;" EnableResize="False" ContentAreaMode="Div" StripFormattingOptions="MSWordRemoveAll,ConvertWordLists"
StripFormattingOnPaste="None" NewLineMode="Br" NewLineBr="true" OnClientLoad="RadEditorOnLoad">
</telerik:RadEditor>
<asp:Label ID="lbl_PrescriberExpTextCounter" runat="server" Text='2000' Style="color: Gray;
float: right; margin-bottom: 5px;"></asp:Label>
</td>
</tr>
</table>

</div>
</form>
</body>
</html>

ToolsFile.XML

General Discussions

asked on 28 Mar 2018