Questions on UI for ASP.NET AJAX Forum

10 answers

178 views

[Solved] Editor toolbar disapper when using set_useClassicDialogs(true)

Hi Rumen,

I found one more issue in rad editor after taking latest version 2018.2.710.45 telerik dll.
While i trying to upload any image from rad editor tools and second time trying to edit the editor,Editor tools not coming.
It was working fine in version 2013.2.717.45 but it is not working in 2018.2.710.45(which i upgrade) and also not working with latest version 2019.1.215.

Steps to reproduce
1.click on editor, it will be edited and rad tools will come on the top
2.try to add image from tools(insert/cancel from popup).
3.click outside the editor.
4.again click on editor it will be edited but toolbar is not showing.

when i am using set_useClassicDialogs(true) then only it happens.

If i passed false then its working fine.

code given below.

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

<html>
<head>

<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>

<style>
.annotation {
border: 1px solid red;
width: 600px;
position: relative;
}
</style>
</head>

<body>

<script type="text/javascript">
var isEditing = false;
var currentEditor;

function setEditorVisible(toShow) {
var editorWrapper = $get("editorWrapper");

if (toShow) {
editorWrapper.style.visibility = "visible";
editorWrapper.style.position = "";
}
else {
editorWrapper.style.visibility = "hidden";
editorWrapper.style.position = "absolute";
}
}

function editAnnotation(target, ev) {
//Cancel the event - prevent it to reach body
//TODO: Add more stuff to cancel it in Mozilla
ev.cancelBubble = true;
ev.returnValue = false;

//Check if already editing
if (isEditing) return;

var editorWrapper = $get("editorWrapper");
var editor = $find("<%=RadEditor1.ClientID %>");

//Position the editor next to the div, hide the div
var bounds = $telerik.getBounds(target);

//Do not set the size explicitly anymore - witn new version when using abs positioning
editor.setSize(bounds.width, bounds.height);

target.parentNode.insertBefore(editorWrapper, target);

setEditorVisible(true);

currentEditor = editor;

target.style.display = "none";

//set editor content
editor.set_html(target.innerHTML);

//Prevent from moving the editor to another annotation while editing current one
isEditing = true;

setTimeout("showEditor();", 1000);
}

function showEditor() {
currentEditor.onParentNodeChanged();
}

</script>

<form runat="server">

<asp:ScriptManager ID="s1" runat="server"></asp:ScriptManager>
<script type="text/javascript">
var currentEditorObject = null;
var focusEditor = null;

function e1_ClientLoad(editor, eventArgs) {
editor.set_useClassicDialogs(true);
editor.removeShortCut("InsertTab");
currentEditorObject = editor;
}

function hideEditor() {
if (isEditing) {

var editorWrapper = $get("editorWrapper");

var parent = editorWrapper.parentElement;
while (parent.style.position != "absolute") {
parent = parent.parentElement;
}

var st = parent.scrollTop;
var sl = parent.scrollLeft;

var target = $($(editorWrapper).parent()).children().first();
var newVal = currentEditorObject.get_html(true);

$(target).next().val(newVal); //hidden input tag
$(target).html(newVal); //anchor tag
setEditorVisible(false);
$(target).show();
target.focus();

parent.scrollTop = st;
parent.scrollLeft = sl;
}

isEditing = false;
}
////MET-8615
//Radeditor edit error after telerik upgrade
//hot fix from telerik website
Telerik.Web.UI.Editor.Utils.isWindowDestroyed = function (window) {
var doc;
try {
doc = window.document;
} catch (e) {
return true;
}
if (!doc) {
return true;
}
return !doc.defaultView && !doc.parentWindow;
}
</script>
<div id="tempEditorWrapper" style="visibility: hidden; position: absolute; top: 0px; z-index: 10002" class="tempeditorWrapper">

<div id="editorWrapper" style="visibility: hidden; position: absolute; top: 0px; z-index: 10002" onclick="hideEditor();" class="editorWrapper">

<div class="editorBackground"></div>

<div class="editorBorder">
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="e1_ClientLoad" ToolbarMode="ShowOnFocus"
Height="300px" EditModes="Design">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="AjaxSpellCheck" />
<telerik:EditorTool Name="Cut" />
<telerik:EditorTool Name="Copy" />
<telerik:EditorTool Name="PasteStrip" />
<telerik:EditorTool Name="Bold" />
<telerik:EditorTool Name="Italic" />
<telerik:EditorTool Name="Underline" />
<telerik:EditorTool Name="Superscript" />
<telerik:EditorTool Name="Subscript" />
<telerik:EditorTool Name="FormatStripper" />
<telerik:EditorTool Name="JustifyLeft" />
<telerik:EditorTool Name="JustifyRight" />
<telerik:EditorTool Name="JustifyCenter" />
<telerik:EditorTool Name="JustifyFull" />

<telerik:EditorTool Name="InsertLink" />
<telerik:EditorTool Name="InsertSnippet" />
<telerik:EditorTool Name="ImageManager" />
<telerik:EditorTool Name="InsertTable" />
<telerik:EditorTool Name="ApplyClass" />
<telerik:EditorTool Name="InsertSymbol" />
<telerik:EditorTool Name="InsertParagraph" />
<telerik:EditorTool Name="InsertOrderedList" />
<telerik:EditorTool Name="InsertUnorderedList" />
</telerik:EditorToolGroup>
</Tools>
<Modules>
<telerik:EditorModule Name="RadEditorStatistics" />
</Modules>
<DocumentManager SearchPatterns="*.*" ViewPaths="~/" UploadPaths="~/" />
<ImageManager ViewPaths="~/" UploadPaths="~/" />
<CssFiles>
<telerik:EditorCssFile Value="~/styles/editor.css" />
</CssFiles>
<Content>

</Content>
</telerik:RadEditor>
</div>
</div>
</div>

click to edit an annotation.<br />
To Cancel editing - double-click outside any div, in the BODY<br />
To save the changes to the edited DIV click on Save button
<br />
<br />
Annotation 1
<div class="annotation" onclick="editAnnotation(this, event)">
This is sample content
</div>

</form>

</body>
</html>

Editor

answered on 27 Jun 2019

2 answers

119 views

[Solved] Using A WebControl to edit records radgrid hierarchy

I have a Hierarchy grid with a using a Master TableView and one DetailTable that looks like this

<telerik:RadGrid runat="server" ID="PrintRadGrid" OnDetailTableDataBind="PrintRadGrid_DetailTableDataBind"

AutoGenerateColumns="false" OnPageIndexChanged="PrintRadGrid_PageIndexChanged" OnPageSizeChanged="PrintRadGrid_PageSizeChanged"

GroupPanelPosition="Top" OnUpdateCommand="PrintRadGrid_UpdateCommand" OnInsertCommand="PrintRadGrid_InsertCommand"

AllowPaging="true" OnNeedDataSource="PrintRadGrid_NeedDataSource">

<GroupingSettings CollapseAllTooltip="Collapse all groups" />

<PagerStyle Mode="NextPrevAndNumeric" />

<MasterTableView CommandItemDisplay="Top" DataKeyNames="CaseId_Fk,LatentsId" HierarchyDefaultExpanded="false" RetainExpandStateOnRebind="true">

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="PrintsEditCommandColumn"></telerik:GridEditCommandColumn>

<telerik:GridDateTimeColumn DataField="SubmittedDate" HeaderText="Submitted Date" SortExpression="SubmittedDate"

PickerType="DatePicker" EnableTimeIndependentFiltering="true" DataFormatString="{0:MM/dd/yyyy}">

</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn UniqueName="SubmittedBy" HeaderText="Submitted By" DataField="SubmittedBY"></telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SubmittedByNoneOCSO" HeaderText="Submitted By None Employee" DataField="SubmittedByNoneOcso"></telerik:GridBoundColumn>

<telerik:GridTemplateColumn AllowFiltering="false">

<ItemTemplate>

<asp:Button ID="btnDeleteParent" CssClass="btn btn-xs btn-danger" Text="Delete" runat="server" OnClick="btnDeletePrintParent_Click" OnClientClick="confirmAspButton(this); return false;"></asp:Button>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<DetailTables>

<telerik:GridTableView Name="PrintsLiftedGrid" Width="100%" DataKeyNames="LatentsId_FK"

CommandItemDisplay="Top" EnableNoRecordsTemplate="true" HierarchyDefaultExpanded="false">

<NoRecordsTemplate>

<asp:Label ID="Label8" runat="server" CssClass="label" Text="No charges have been added." />

</NoRecordsTemplate>

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">

</telerik:GridEditCommandColumn>

<telerik:GridDateTimeColumn DataField="LiftedDate" HeaderText="Lifted Date Date" SortExpression="LiftedDate"

PickerType="DatePicker" EnableTimeIndependentFiltering="true" DataFormatString="{0:MM/dd/yyyy}">

</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn UniqueName="ExhibitNum" HeaderText="Exhibit Number" DataField="ExhibitNum"></telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="LocationLifted" HeaderText="Location Lifted" DataField="LocationLifted"></telerik:GridBoundColumn>

<telerik:GridTemplateColumn AllowFiltering="false">

<ItemTemplate>

<asp:Button ID="btnDeletePrintChild" CssClass="btn btn-xs btn-danger" Text="Delete" runat="server" OnClick="btnDeletePrintChild_Click" OnClientClick="confirmAspButton(this); return false;"></asp:Button>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<CommandItemStyle BackColor="#AfAFa4" Font-Bold="true" Height="50px"

VerticalAlign="Bottom" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" />

<CommandItemTemplate>

<div class="boldLabel"> Prints</div>

<asp:Button runat="server" ID="lbAddPrint" Text="ADD NEW PRINT" CommandName="InitInsert"

CssClass="rgButtonText" CausesValidation="false" />

</CommandItemTemplate>

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="LatentsId_FK" MasterKeyField="LatentsId" />

</ParentTableRelation>

</telerik:GridTableView>

In the MasterTable View and the the DetailTable I want to use a web control for Inserting and Updating the records. I have tried adding this code:

<EditFormSettings UserControlName="SubjectEdit.ascx" EditFormType="WebUserControl" PopUpSettings-Modal="false">

<EditColumn UniqueName="EditCommandColumn1"></EditColumn>

</EditFormSettings>

Put keep getting this error :Telerik.Web.UI.GridTableViewCollection must have items of type 'Telerik.Web.UI.GridTableView'. 'EditFormSettings' is of type 'System.Web.UI.HtmlControls.HtmlGenericControl'.

What is the syntax to use the web control page and where within MasterTableView and DetailTableView do I put it?

Grid

answered on 26 Jun 2019

5 answers

539 views

RadAjaxPanel & Dropdownlist with AutoPostBack enabled issue

I have a dropdownlist located inside RadAjax Panel (Build Q4 2006 ) with AutoPostBack option enabled and SelectedIndexChanged event is handled. Whenever loading the page a javascript exception is through "Expected ')'".

The problem is related to the generated Javascript handler added to the dropdownlist "onchange" client event. I have tried to locate a solution for this issue through all threads but couldn't locate anything helpful for this issue.

Here is the aspx markup used by the page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="RadAjax.Net2" Namespace="Telerik.WebControls" TagPrefix="radA" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<radA:RadAjaxPanel ID="RadAjaxPanel1" runat="server" height="200px" width="300px" ClientIDMode="AutoID" EnableOutsideScripts="True">
<br />
<asp:DropDownList ID="ddlItems" runat="server" AutoPostBack="True">
<asp:ListItem>Item1</asp:ListItem>
<asp:ListItem>Item2</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<asp:Label ID="lblTest" runat="server"></asp:Label>

</radA:RadAjaxPanel>
</div>
</form>
</body>
</html>

Ajax

answered on 25 Jun 2019

24 answers

603 views

Issue with Ajax Control

Hi,

I have ajax.net2 version 1.8.1.0. I want use to this on my asp.net 4.0 site. It work fine with other controls but when I use this with dropdown list I get JS error. Reason it convert ' to '. How can I fix this?

<select name="ctl00$PageContentPlaceHolder$PageGrid$ctl01$ctl03$ctl01$PageDropDownList" onchange="javascript:setTimeout('AjaxNS.AR(\'ctl00$PageContentPlaceHolder$PageGrid$ctl01$ctl03$ctl01$PageDropDownList\',\'\', 'ctl00_PageContentPlaceHolder_RadAjaxManager1', event)', 0)" id="ctl00_PageContentPlaceHolder_PageGrid_ctl01_ctl03_ctl01_PageDropDownList" class="csa_textbox" style="width:40px;">

Ajax

answered on 25 Jun 2019

2 answers

138 views

ClearSelection needed

Hi,

This is really needed, the RadCombobox already has such a feature.

Marc

MultiColumnComboBox

answered on 25 Jun 2019

1 answer

127 views

ASP Net core ajax not recognizing passed data.

I have controller method which looks like this:

[HttpPost]

public IActionResult CreateNew(string Naslov, int KorisnikID, int GrupaID, string Tekst)

{

//Some code

}

Ajax function that is calling this is:

$.ajax({

type: "POST",

url: "/Story/CreateNew",

contentType: "application.json; charset=utf-8",

dataType: "json",

data: JSON.stringify({

"Naslov": $("#Naslov").val(),

"KorisnikID": @Context.Request.Cookies["kid"],

"GrupaID": $("#GrupaID").val(),

"Tekst": $("#Tekst .ql-editor").html()

}),

success: function (message) {

var elements = message.split("-");

if (elements[0] == "success") {

window.location.href = '/Clanak?ID' + elements[1];

}

else {

alert(message);

}

},

error: function (xhr, status, error) {

alert(xhr + " " + status + " " + error);

}

});

Method is entered but all parameters are null.

Also when i change it to GET it works (but i need post since i have problem with length of string)

General Discussions

answered on 25 Jun 2019

2 answers

180 views

User Input Data Manipulation

Here's the scenario: I have a complex work request form. On this form the user needs to identify how to break out the postage. The postage may use various mailing methods (first class, second class....) and mail carriers (USPS, UPS....). So for each postage information, I need to capture the number of pieces, the cost per piece, the mailing method, mail carrier and the total cost. This information is not to be saved until the user saves the rest of the request form. Normally I would use javascript and a table to display the data and to be able to add and remove rows until the user hits the "save" button to actually save the information. Then I would go back to server side and update the database.

How do I accomplish this using Telerik controls without using a web service to go back to the database each time I add/update/remove a row? There is no need to go back to the server until the user clicks the "save" button.

thanks on any help you can give me on this.

General Discussions

answered on 25 Jun 2019

2 answers

434 views

Updating Telerik version

Hi,

I am updating my project from VS 202 to 2017 and also updating the Telerik version from 2012 to 2019

Also updating the .net Framework from 2.0 to 4.5. I have installed the Telerik version and added the reference but when I build I am getting the following error. I have also changed the web config with correct version name. What am I missing in the upgrade process?

'Could not load file or assembly 'Telerik.Web.UI, Version=2019.2.514.45, Culture=neutral, PublicKeyToken=xxxxxxxxxxxxxx' or one of its dependencies. Operation is not supported. (Exception from HRESULT: 0x80131515)'

Thanks

General Discussions

answered on 25 Jun 2019

2 answers

84 views

DataPager with RadListView

Hello, I'm having a problem where the DataPager won't work if my RadListView has more than approximate 1,800 records. Everything is fine with small record counts returned in sql. Is something wrong with my Panels or AjaxManager? Please advise.

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

<telerik:AjaxSetting AjaxControlID="ListViewPanel1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="RadDataPager1" />
</UpdatedControls>
</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadDataPager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelHeight="100%" />
</UpdatedControls>
</telerik:AjaxSetting>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="30"></telerik:RadAjaxLoadingPanel>
<div class="demo-container position-relative" style="height: 65%;"

<div id="demo" class="demo-container no-bg page-wrapper position-relative scroll_vertical height-55percent">
<asp:Panel ID="ListViewPanel1" runat="server" Width="100%" Height="50%" CssClass="position-relative height-100percent">
<telerik:RadListView
ID="RadListView1"
runat="server"
RenderMode="Lightweight"
ItemPlaceholderID="ProductsHolder"
OnItemDataBound="RadListView1_ItemDataBound"
DataKeyNames="ENTITY_ID,CLAIM_TRANSACTION_SUMMARY_ID,ACTIVITY_NOTES,AGE,COLLECTION_DAYS,LAST_ACTIVITY_DATE,INACTIVE_DATE,FORM_TYPE,FLCOLOR,INCOLOR"
AllowPaging="true"
AllowCustomPaging="true"
CssClass="position-relative height-100percent"
OnItemCommand="RadListView1_ItemCommand" Width="100%" Height="100%">
<LayoutTemplate>
<div class="RadListView position-relative height-100percent" style="height: 100%;">
<asp:Panel ID="ProductsHolder" runat="server" />
</div>
</LayoutTemplate>
<ItemTemplate>.....

</ItemTemplate>
<EmptyDataTemplate>
<fieldset class="noRecordsFieldset">
No records for available.
</fieldset>
</EmptyDataTemplate>
</telerik:RadListView>

</asp:Panel>
</div>

<div class="claims-pagination">
<fieldset style="border-width: 1px; border-color: #E6E6E6;">
<div>
<telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadListView1" PageSize="50">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev" />
<telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="5" />
<telerik:RadDataPagerButtonField FieldType="NextLast" />
<telerik:RadDataPagerPageSizeField PageSizeComboWidth="60" PageSizeText="Page size: " />
<telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go" />
<telerik:RadDataPagerTemplatePageField>
<PagerTemplate>
<div class="pager">
<b>Items<asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex + 1%>" />
to
<asp:Label runat="server" ID="TotalPagesLabel" Text="<%# If(Container.Owner.TotalRowCount > (Container.Owner.StartRowIndex + Container.Owner.PageSize), Container.Owner.StartRowIndex + Container.Owner.PageSize, Container.Owner.TotalRowCount) %>" />
of
<asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />
<br />
</b>
</div>
</PagerTemplate>
</telerik:RadDataPagerTemplatePageField>
</Fields>
</telerik:RadDataPager>
</div>
</fieldset>
</div>

Code behind:

Protected Sub RadListView1_NeedDataSource(source As Object, e As Telerik.Web.UI.RadListViewNeedDataSourceEventArgs) Handles RadListView1.NeedDataSource
Try
iMinRows = (RadListView1.CurrentPageIndex * RadListView1.PageSize)
iMaxRows = ((RadListView1.CurrentPageIndex + 1) * RadListView1.PageSize)

If Not IsNothing(dtClaims) Then
dtClaims.Clear()
End If

dtClaims = ucFilters.GetDataTablePage(iMinRows, iMaxRows)

RadListView1.DataSource = dtClaims
RadListView1.VirtualItemCount = ucFilters.RowCount
Catch ex As Exception
Throw ex
End Try
End Sub

DataPager

answered on 25 Jun 2019

3 answers

574 views

radeditor width 100%

Hi,
I set width=100%, because I want that my editor resizes every time I do the resize of my browser window, like responsive layout. (I would set a minimum width of 600px)
But it does not work: the editor does not resize and the scrollbars appear.how can I do? thanks

to be more clear: I want to act like when it opens in full screen mode!

<telerik:RadEditor