Questions on UI for ASP.NET AJAX Forum

1 answer

103 views

I am having an issue with telerik window. I have changed the styles to remove the border for the window but still it is appearing. The issue happens only in case if window is embedded in a usercontrol. I am unable to attach the project. Below is the source code. In this project there is a dropdown control. If you click on dropdown it will bring a new telerik window which I want to have the borders removed.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="FAUSControl.ascx.cs" Inherits="ATR.ePRiSM.Portal.UI.FAUS.FAUSControl" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<script>

function ShowFausSelector() {

//OpenRadWindow("FausSelector.aspx", 400, 500);

var w = document.all("tblFausDropDown").offsetWidth + 10;

var h = 300;

oWnd = radopen("about:blank", "RadWindowForFaus");

oWnd.setSize(w, h);

oWnd.set_modal(false);

oWnd.setUrl("http://www.google.com");

oWnd.set_visibleTitlebar(false);

oWnd.set_visibleStatusbar(false);

x = getAbsoluteLeft(document.all("tblFausDropDown")) - 12;

y = getAbsoluteTop(document.all("tblFausDropDown")) + 20;

oWnd.moveTo(x, y);

}

function getAbsoluteLeft(element) {

try {

var left = 0;

var objParent = element;

do {

left += objParent.offsetLeft;

objParent = objParent.offsetParent;

}

while (objParent != null);

return left;

}

catch (x) { }

}

/******************************************************************************

* Returns the absolute position of the top edge of the specified element.

*****************************************************************************/

function getAbsoluteTop(element) {

try {

var top = 0;

var objParent = element;

do {

top += objParent.offsetTop;

objParent = objParent.offsetParent;

}

while (objParent != null);

return top;

}

catch (x) { }

}

</script>

<style>

.RadWindow_Sunset .rwTopLeft,

.RadWindow_Sunset .rwTopCenter,

.RadWindow_Sunset .rwTopRight,

.RadWindow_Sunset .rwFooterLeft,

.RadWindow_Sunset .rwFooterRight,

.RadWindow_Sunset .rwFooterCenter,

.RadWindow_Sunset .rwBodyLeft,

.RadWindow_Sunset .rwBodyRight,

.RadWindow_Sunset .rwTitlebar,

.RadWindow_Sunset .rwNoTitlebar,

.RadWindow_Sunset .rwTopResize

{

background-image: none !important;

}

.RadWindow_Sunset .rwTitlebar,

.RadWindow_Sunset .rwNoTitlebar

{

display:none !important;

}

</style>

<TABLE style="WIDTH: 100%" border=0 id="tblFausDropDown"><TBODY>

<TR>

<TD onclick="ShowFausSelector()" style="WIDTH: 100%">

<DIV id=ReportCriteria_FausTree_divFaus style=

"BORDER-TOP: #808080 1px solid; HEIGHT: 21px; BORDER-RIGHT: #808080 1px solid; BORDER-BOTTOM: #808080 1px solid; BORDER-LEFT: #808080 1px solid; WIDTH: 100%; BACKGROUND-COLOR: white"

>

<label runat="server" id="lblFaus" style="FLOAT: left; PADDING-LEFT: 2px"></label>

<IMG style="FLOAT: right" alt="" src="../../images/drop-down-arrow-faus.png" width=17 height=21> </DIV></TD></TR></TBODY></TABLE>

<telerik:RadWindowManager ID="RadWindowManagerFaus" runat="server" Skin="Sunset" EnableAjaxSkinRendering="true" VisibleStatusbar="false" VisibleTitlebar="false">

<Windows>

<telerik:RadWindow ID="RadWindowForFaus" runat="server" Skin="Sunset">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

Above is the code from the ascx file,

Below is the code from page that has the embedded ascx file.

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

<%@ Register Src="~/FAUSControl.ascx" TagPrefix="uc1" TagName="FAUSControl" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>

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

<head runat="server">

<title></title>

</head>

<body>

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

<div>

<asp:ScriptManager ID="scriptProcedure" EnablePartialRendering="true" runat="server"></asp:ScriptManager>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">

<Windows>

<telerik:RadWindow ID="RadWindow1" runat="server" VisibleStatusbar="false" VisibleTitlebar="false" Skin="Vista">

</telerik:RadWindow>

<telerik:RadWindow ID="RadWindow2" runat="server" VisibleStatusbar="false" VisibleTitlebar="false" Skin="Vista">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

<uc1:FAUSControl runat="server" id="FAUSControl" />

</div>

</form>

</body>

</html>

Kindly advise.

Suraj

Window

answered on 04 Dec 2013

3 answers

153 views

Pressing Enter not working for me

I have a combobox that is filled with a datasource. It filters the dropdown as I type. When I press the enter key, it simply closes the combobox and does nothing. I tried using the onClientKeyPressing event and monitoring on the enter key, but that prevents the combobox from filtering the dropdown entries.

What I want to happen is to be able to type and the dropdown entries filter. When the I press the enter key, I want to execute some javascript code. I want to be able to execute javascript code when the user either selects an entry from the dropdown or presses the enter key.

Here is what I have that does not work.

<telerik:RadComboBox ID="CustomerSearch" runat="server" Width="180" Height="160"

MarkFirstMatch="true" AllowCustomText="true" CssClass="CustomerSearch" AutoPostBack="false"

OnClientKeyPressing="HandleKeyPress" EnableVirtualScrolling="true" ShowMoreResultsBox="true"

EmptyMessage="Enter last, first to search..." BackColor="White" Skin="Forest" />

<asp:SqlDataSource ID="dsCustomer" runat="server"

SelectCommand="CustomerSearchName" SelectCommandType="StoredProcedure"></asp:SqlDataSource>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function searchnav(sender, args) {

var iframe = document.getElementById('ctl00_iMainPages');

if (sender.get_value() != null && sender.get_value() != '') {

iframe.src = sender.get_value() + '&T=Client';

}

function HandleKeyPress(sender, args) {

if (e.get_domEvent().keyCode == 13) {

searchnav(sender, args);

}

</script>

</telerik:RadScriptBlock>

ComboBox

answered on 04 Dec 2013

1 answer

115 views

RadGrip Group Collapses Upon Entering Inline Edit Mode

Greetings,

I'm using the following RadGrip markup. By default the grid renders with all groups collapsed. When I expand a group, I see all items, but if I edit an item, I lose the expansion of the group and only see the item that I'm editing. Upon exiting edit mode, I am returned to a collapsed group, causing me to have to re-expand and search for the item that I was working with. How can I cause the group to remain expanded upon editing and/or exiting edit mode?

<telerik:RadGrid ID="rgProgramNotes" runat="server" AutoGenerateColumns="false" AllowSorting="true" ShowHeadersWhenNoRecords="true">
<ClientSettings EnableRowHoverStyle="true" AllowGroupExpandCollapse="True" AllowDragToGroup="False" Selecting-AllowRowSelect="true">
<Scrolling AllowScroll="false" UseStaticHeaders="true" />
</ClientSettings>
<MasterTableView TableLayout="Fixed" DataKeyNames="NoteId" GroupLoadMode="Client" GroupsDefaultExpanded="False">
<GroupByExpressions>
<telerik:GridGroupByExpression>
<SelectFields>
<telerik:GridGroupByField FieldName="ContactType" HeaderText=" " HeaderValueSeparator="" />
</SelectFields>
<GroupByFields>
<telerik:GridGroupByField FieldName="ContactType" />
</GroupByFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>
<ItemStyle Wrap="false" />
<AlternatingItemStyle Wrap="false" />
<Columns>
<telerik:GridButtonColumn ButtonType="LinkButton" ButtonCssClass="k-icon k-edit" HeaderStyle-Width="25px" CommandName="Edit" />
<telerik:GridButtonColumn ButtonType="LinkButton" ButtonCssClass="k-icon k-delete" HeaderStyle-Width="25px" CommandName="Delete" ConfirmText="Are you sure you want to delete this Note?" />
<telerik:GridBoundColumn DataField="ContactCompany" HeaderText="Contact Company" SortExpression="ContactCompany" HeaderStyle-Width="175px" HeaderStyle-HorizontalAlign="Left" AllowFiltering="false" />
<telerik:GridBoundColumn DataField="Date" HeaderText="Date" SortExpression="Date" DataFormatString="{0:MM/dd/yyyy}" HeaderStyle-Width="75px" HeaderStyle-HorizontalAlign="Left" AllowFiltering="false" />
<telerik:GridTemplateColumn HeaderText="Description" DataField="Description" HeaderStyle-Width="425px">
<ItemTemplate>
<%-- <%# Utilties.StringHtmlTagsAndCss(Eval("Description"))%>--%>
<asp:Label ID="lblDescription" runat="server"><%# Eval("Description") %></asp:Label>
<telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="lblDescription" RelativeTo="Mouse" Position="BottomCenter" AutoCloseDelay="0" RenderInPageRoot="true">
<%# Eval("Description") %>
</telerik:RadToolTip>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="ContactName" HeaderText="Contact" SortExpression="ContactName" HeaderStyle-Width="100px" HeaderStyle-HorizontalAlign="Left" AllowFiltering="false" />
<telerik:GridBoundColumn DataField="NoteType" HeaderText="Type" SortExpression="NoteType" HeaderStyle-Width="30px" HeaderStyle-HorizontalAlign="Left" AllowFiltering="false" />
<telerik:GridBoundColumn DataField="User" HeaderText="Who" SortExpression="User" HeaderStyle-Width="30px" HeaderStyle-HorizontalAlign="Left" AllowFiltering="false" />
</Columns>
<EditFormSettings EditFormType="WebUserControl" UserControlName="~/Legacy/Ui/NoteTemplate.ascx" />
</MasterTableView>
</telerik:RadGrid>

Grid

answered on 04 Dec 2013

1 answer

90 views

Getting error dropping grid row into scheduler

I have a RadGrid and have enabled the drag and drop functionality to allow the dropping of rows onto a Scheduler. The Scheduler itself is set to use a web service.

When I drop a row onto the Scheduler a new appointment is created on the client side but the web service method InsertAppointment is never called. After stepping through in a debugger it seems there is an error occurring in this bit of Telerik code:

_storeResources: function(h) {

var g = [];

var f = this;

h.forEach(function(i) {

Array.add(g, {Key: i.get_key(),Type: i.get_type(),Text: i.get_text(),EncodedKey: i._getInternalKey(),Available: i.get_available(),Attributes: f._storeAttributes(i.get_attributes())});

});

return g;

}

The variable i is null, so the methods like i.get_key() do not exist. Is anyone else seeing this error? I tried to set up the example code from another post but was unable to attach the database, so it's difficult at this point to tell if I'm doing something wrong or there's a bug.

Scheduler

answered on 04 Dec 2013

1 answer

236 views

(URGENT) Extending RadSearchBox to get Value field 2-way bound

Hi all,

I need to extend RadSearchBox because this concept with only Text value (that is not persisted) now is unusable.

Lets say I have a case when I need to set a City to a Person. I have foreign key of the City in the Person entity and I am editing it. Lets also say there are 5 cities of the same name so I need to set VALUE (eg. foreign key) and text is pretty much unusable at this point. I cannot have preset city (if I am editing existing Person that moved to another city) and also I can only get the value after the user selected it (in event) so I cannot have 2 way binding here because VALUE field is only available in Search event.

So my question here is how do I extend RadSearchBox to have VALUE field in 2 way binding scenario? I tried to extend RadSearchBox with 2 hidden fields and overried OnSearch event to store Text and Value in those fields but OnSearch is not overridable so I need some other way to make Value and Text fields persistent or use some other control (please advise which).

Here is my code that I tried which obviously does not work:

public class RadSearchBoxExtender : RadSearchBox, INamingContainer

{

#region Public properties.

public string Value

{

get

{

this.EnsureChildControls();

return this.valueField.Value;

}

set

{

this.EnsureChildControls();

this.valueField.Value = value;

}

public override string Text

{

get

{

this.EnsureChildControls();

return this.textField.Value;

}

set

{

this.EnsureChildControls();

this.textField.Value = value;

base.Text = value;

}

#endregion Public properties.

#region Private methods.

private HiddenField valueField;

private HiddenField textField;

private string valueFieldId

{

get

{

return this.ID + "_Value";

}

private string textFieldId

{

get

{

return this.ID + "_Text";

}

#endregion Private methods.

#region Overrides.

protected override void CreateChildControls()

{

this.valueField = new HiddenField();

this.valueField.ID = this.valueFieldId;

this.valueField.Value = null;

this.textField = new HiddenField();

this.textField.ID = this.valueFieldId;

this.textField.Value = null;

this.Controls.Add(this.valueField);

this.Controls.Add(this.textField);

base.CreateChildControls();

}

#endregion Overrides.

protected new void OnSearch(SearchBoxEventArgs e)

{

base.OnSearch(e);

this.EnsureChildControls();

this.valueField.Value = e.Value;

this.textField.Value = e.Text;

}

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

}

protected override void OnPreRender(EventArgs e)

{

base.OnPreRender(e);

}

protected override void Render(System.Web.UI.HtmlTextWriter writer)

{

base.Render(writer);

this.valueField.RenderControl(writer);

}

SearchBox

answered on 04 Dec 2013

2 answers

917 views

Adding Template columns dynamically in Radgrid

I am trying to add template columns dynamically to a grid which already has two columns

I used the code

Private Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init

Dim table As New DataTable()

table.Load(get data from database)

For rowCounter As Integer = 0 To table.Rows.Count - 1

For columnCounter As Integer = 0 To table.Columns.Count Step -1

Dim tc As New GridTemplateColumn

tc.HeaderText = "qty_1"

tc.UniqueName = "qty1" & columnCounter.ToString

tc.ItemTemplate = New MyTemplate(tc.UniqueName)

grdSchedule.MasterTableView.Columns.Add(tc)

next

End Sub

Private Class MyTemplate

Implements ITemplate

Protected textBox As TextBox

Private colname As String

Public Sub New(ByVal cName As String)

MyBase.New()

colname = cName

End Sub

Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) Implements ITemplate.InstantiateIn

textBox = New TextBox

textBox.ID = "abc"

container.Controls.Add(textBox)

End Sub

End Class

I am able to create columns in the page Init event. But I have a problem using that logic in Init event, as I need to get data which decides the number of columns that need to be created, from database. I want to use it in pageload event.

Can you please help me in this. I am not able to create columns dynamically in pageload event now.

I followed the below posts but all of them are talking about page init event.
http://www.telerik.com/community/forums/aspnet-ajax/grid/problem-creating-radgrid-gridtemplatecolumn-dynamically.aspx
http://www.telerik.com/help/aspnet-ajax/grid-programmatic-creation.html

Thanks,
Kaushik

Grid

answered on 04 Dec 2013

7 answers

161 views

RadImageEditor 2013.2.611.35 Not Saving Annotations With Large Image

Hi Guys,

Until this version of Telerik (2013.2.611.35), I was able to save annotations (i.e., pencil, circle, etc.) along with the image even if the image was, for example, 1200x1600 pixels, in size. This new version only saves the large image without any annotations.

Now, if I use an image say 300x300 pixels, the annotations save with the image fine.

I have tried setting the MaxJSONLength property to the maximum value, but that did not solve it either.

Bryan
:-(

ImageEditor

answered on 04 Dec 2013

1 answer

51 views

ClientEvents.OnCommand the 'DeleteSelected' command do not Pass this Event Why?

Grid

answered on 04 Dec 2013

3 answers

132 views

RadGrid Item Databound for ReadOnly grid

We are using RadGrid for ready only purpose and the item Databound event fires twice for GridDataItem & GridEditableItem.

Even though its read only it fires twice. Are there any settings we can restrict the unwanted events.

Grid

answered on 04 Dec 2013

3 answers

86 views

Rendering of button in table in dock

Hi,

When rendering a button inside a table that is in a raddock I get extra height applied to the button with the net reult in the button redering wrongly. I've stripped back to bare minimum , I've attached a copy of the generated page - problem in both IE and Chrome. Take away the table and the button renders fine . Buttons outside the dock render fine. This occurs on the default skin and the black skin, I haven't checked any others...

Any ideas?

Regards

Jon

Code for it is:

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

<head runat="server">

<title></title>

</head>

<body >

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

<telerik:RadScriptManager ID="uxRadScriptManager" runat="server"></telerik:RadScriptManager>

<telerik:RadStyleSheetManager ID="uxRadStyleSheetManager" Runat="server"></telerik:RadStyleSheetManager>

<telerik:RadButton ID="RadButton2" runat="server" Text="This button is OK" ></telerik:RadButton>

<br/>

<telerik:RadDockZone runat="server" ID="RadDockZone2" >

<telerik:RadDock ID="uxLogonPanel" runat="server" Title="Logon" style="overflow:hidden;"

EnableAnimation="false" AutoPostBack="false" Resizable="false" DefaultCommands="None"

EnableDrag="False" Index="-1" Pinned="True" Tag="" Width="296" >

<ContentTemplate>

<telerik:RadButton ID="RadButton1" runat="server" Text="Inside dock" ></telerik:RadButton>

<table id="uxLogonTable" Runat="server">

<tr>

<td >

<telerik:RadButton ID="uxLogonButton" runat="server" Text="Inside table in dock" ></telerik:RadButton>

</td>

</tr>

</table>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</form>

</body>

</html>

Button

answered on 04 Dec 2013