Questions on UI for ASP.NET AJAX Forum

3 answers

83 views

I'm having trouble exporting larger PNG files of my diagram using Internet Explorer 11. The width of the file's dimensions seems to be limited to 4096 pixels. After that point, the image just cuts off. Not sure if there are any height limitations as the diagrams I'm producing are generally much wider than they are tall. I'm basically using the same client-side code that was provided in one of the demos:

function exportImage() {

var diagram = $find("<%=TreeDiagram.ClientID %>").get_kendoWidget();

diagram.exportImage().done(function (data) {

kendo.saveAs({

dataURI: data,

fileName: "diagram.png"

});

}

I've tried the same exports using Chrome with no issues. Unfortunately... I'm required to get the export feature working in IE 11, so I would appreciate any help in being pointed in the right direction.

Diagram

answered on 30 Sep 2015

5 answers

897 views

How to make wizard step height 100%

Hi,

I have a wizard contained in a splitter + pane, the splitter and all it's parents have heights set to 100% and all is good. Now the problem comes with RadWizardStep because I cannot see how to set the height to 100% for the step, this means that any controls contained by the step cannot have 100% height because the parent (RadWizardStep) does not have a height set.

eg. if one of my steps has a radgrid then I need to set a specific px height for the grid and this is bad for me.

Wizard

answered on 30 Sep 2015

1 answer

141 views

Issue with RadGrid drag-and-drop nested within RadTreeList

So I seem to have run into an interesting issue with drag-and-drop in a RadGrid within a RadTreeList.

My scenario is this: I have a RadTreeList where each item in the list contains a RadGrid in the DetailTemplate. The RadTreeList uses drag-and-drop to nest the items in its list. Each RadGrid in the DetailTemplate (there is 1 grid per template) also used drag-and-drop for re-ordering the items in that grid.

I am still building this, but right now I can drag the RadTreeList items without any issues. However, when I go to drag any of the items in the RadGrids, I see 2 rows as if I was dragging multiple items. If I start to drag a RadTreeListItem first and then immediately stop, and then go to drag a RadGrid item, I see the RadGrid row behind the RadTreeListItem row. Very strange. Also, both controls are designed to use a TreeListDragDropColumn/GridDragDropColumn for dragging. If I remove the DragDropColumn from EITHER one of them, I do not see the duplicate row when dragging a RadGrid item. If I remove the DragDropColumn from BOTH of them, it will still display the duplicate.

I would like to have the drag columns visible for both, but for right now it doesn't seem like I can do that.

I've attached screenshots to help explain what I am talking about. In order they are: 1. The RadTreeList with RadGrids before any dragging, 2. Dragging from the RadGrid, 3. Dragging from the RadTreeList, 4. Dragging from the RadGrid after dragging from the RadTreeList

Essentially, here's my markup:

<telerik:RadTreeList ID="TreeList" runat="server" Skin="Silk" AutoGenerateColumns="false" AllowSorting="true" GridLines="None" ShowTreeLines="false"
ParentDataKeyNames="ParentId" DataKeyNames="Id" AllowPaging="false" EditMode="InPlace" ValidationSettings-ValidationGroup="Edit"
OnItemDrop="TreeList_ItemDrop"
OnNeedDataSource="TreeList_NeedDataSource" OnItemCommand="TreeList_ItemCreated" OnItemCreated="TreeList_ItemCreated" OnItemDataBound="TreeList_ItemDataBound">
<ClientSettings AllowItemsDragDrop="true">
<Selecting AllowItemSelection="True"></Selecting>
</ClientSettings>
<Columns>
<telerik:TreeListEditCommandColumn ButtonType="ImageButton" ItemStyle-Width="25px" ItemStyle-VerticalAlign="Middle" ShowAddButton="false" UniqueName="EditCommandColumn"></telerik:TreeListEditCommandColumn>
<telerik:TreeListTemplateColumn DataField="Name" UniqueName="Name" HeaderText="Name" ItemStyle-Wrap="false" ItemStyle-Width="720px">
<ItemTemplate>
<asp:Label ID="Name" runat="server" Text='<%# Eval("Name") %>'></asp:Label><telerik:RadToolTip ID="ToolTip" runat="server" AutoCloseDelay="0" TargetControlID="Name" RelativeTo="Element" Animation="Slide" AnimationDuration="100" Position="BottomCenter" RenderInPageRoot="true" Width="460"></telerik:RadToolTip>
<br /><asp:Label ID="Description" runat="server" Text='<%# Eval("Description") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="NameEdit" runat="server" MaxLength="50" Text='<%# Eval("Name") %>' ValidationGroup="Edit" Width="100%"></asp:TextBox>
<asp:RequiredFieldValidator ID="NameEditRFV" runat="server" CssClass="alert" ControlToValidate="NameEdit" ErrorMessage="Please enter a Folder Name" ValidationGroup="Edit"></asp:RequiredFieldValidator>
<br /><asp:TextBox ID="DescriptionEdit" runat="server" MaxLength="100" style="width: 100%;" Text='<%# Eval("Description") %>' ValidationGroup="Edit"></asp:TextBox>
</EditItemTemplate>
</telerik:TreeListTemplateColumn>
</Columns>
<DetailTemplate>
<telerik:RadGrid ID="DetailGrid" runat="server" Skin="Silk" Width="100%" AutoGenerateColumns="False" GridLines="None" AllowPaging="false" AllowSorting="false" ShowHeader="false"
OnNeedDataSource="DetailGrid_NeedDataSource" OnItemCommand="DetailGrid_ItemCommand" OnItemDataBound="DetailGrid_ItemDataBound" OnRowDrop="DetailGrid_RowDrop">
<ClientSettings AllowRowsDragDrop="true">
<ClientEvents OnPopUpShowing="popUpShowing" OnRowDropping="rowDropping" />
<Selecting AllowRowSelect="true" />
</ClientSettings>
<MasterTableView DataKeyNames="DetailId" Name="Details" EditMode="PopUp">
<Columns>
<telerik:GridDragDropColumn HeaderStyle-Width="18px"></telerik:GridDragDropColumn>
<telerik:GridEditCommandColumn ButtonType="ImageButton" ItemStyle-Width="25px" ItemStyle-VerticalAlign="Middle" UniqueName="EditCommandColumn"></telerik:GridEditCommandColumn>
<telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name" />
</Columns>
<NoRecordsTemplate>
There are no details.
</NoRecordsTemplate>
</MasterTableView>
</telerik:RadGrid>
</DetailTemplate>
</telerik:RadTreeList>

Grid

answered on 30 Sep 2015

6 answers

131 views

RadSplitter strange resize

I have a strange behaviour of a splitter with two panes. The structure of my master page is:

<telerik:RadPane ID="RadPaneMenu" runat="server" MinWidth="0" MaxWidth="250" Width="250" Scrolling="X">

<wpc:wpcMenu ID="Menu" runat="server" />

</div>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBarMain" runat="server" CollapseMode="Forward">

</telerik:RadSplitBar>

<telerik:RadPane ID="RadPaneContent" runat="server" ShowContentDuringLoad="false" Width="100%" Height="100%">

<div>

<asp:ContentPlaceHolder ID="MainContent" runat="server">

</asp:ContentPlaceHolder>

</div>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

When the page load, I have the right part of the splitter, the RadPaneContent for main content, that is visualized for an instant very little, with the scroll bar visible and the page sizes that is not maximized, but it's very little both in width and heigth.

After one second the size of the pane is rendering good, but for an instant I saw the pane that is not opened and it's very small, with the scroll bars visibile, close to the splitt bar.

Is this behaviour due to the risizemode or some other attribute that I have to set on the splitter / Pane controls ?

In the Master page I have also an header over and a Footer under the main div.

Please let me Know it is possibile to fix this problem. I'm not able to fix this problem of rendering. This happens in all browser.

Kind Regards.

Vittorio Morellini

Splitter

answered on 30 Sep 2015

1 answer

110 views

pasteHtml not working correctly

We have a button on our toolbar that should simply surround selected content with a <div> tag.

Telerik.Web.UI.Editor.CommandList["Test"] = function (commandName, editor, args) {

if (editor.getSelectionHtml() !== "") {

var content = editor.getSelectionHtml();

editor.pasteHtml("<div>" + content + "</div>");

args.set_cancel(true);

}

else {

alert("Please, select some text!");

args.set_cancel(true);

}

};

But when this is applied to anything that starts with an HTML tag, specifically <em>, <strong>, or <sup>, then it applies the <div> tag, but then surrounds the entire div with whatever the starting HTML tag is.

For Example,

<em>gnomes</em>: imaginary creatures

should become:

<div><em>gnomes</em>: imaginary creatures</div>

but instead becomes:

<em>
<div><em>gnomes</em>: imaginary creatures
</div>
</em>

We really don't want the entire phrase in italics. This is especially annoying with superscripts since it places everything in a superscript.

We are using the latest version of the tools. This happens consistently across Firefox, Chrome, and Opera.

How can we just surround the selected text with a <div> without surrounding the entire thing with additional HTML tags?

Editor

answered on 30 Sep 2015

9 answers

411 views

custom CSS after telerik CSS in HEAD section

Hi,

Is it possible to determine where the CSS is placed in the HEAD section? Now, all telerik CSS webresources are always placed after my custom css files. I would like to switch this, so that my css files are places after the telerik webresources.

Thanks in advance.

General Discussions

answered on 30 Sep 2015

12 answers

192 views

Custom Skin - Wrong path to command buttons

I created a custom skin via copying the Default skin. Before I edited the skin at all, I ran into a problem with the row command buttons not showing up. (Edit, Delete, Save, etc). The paging buttons show up fine, and the skin is being applied. (I changed some font sizes to make sure the skin was being applied) I also double-checked that I had the button images in the Grid folder of my skin.

The grid is in a UserControl which is in a folder similar to this: ~/UserControls/TheUserControl.ascx
When I view source of the page, it is looking for the images in the same directory as the usercontrol, (ex: UserControls/Edit.gif) which it should be looking in the skin folder ( Skins/MySkin/Grid/Edit.gif)

Any idea what I could be doing wrong? Do you have to specify the location of these buttons in the markup when using a custom skin?

I'm using 2009 Q3.

Thanks,
Justin

Grid

answered on 30 Sep 2015

1 answer

152 views

RadToolTip Not Showing RadDatePicker dropDown

When i call tooltip show, on the RadDatePicker click the calendar drop down go to the tooltip backgrouns

ToolTip

answered on 30 Sep 2015

1 answer

134 views

RadGrid Tab Direction Down

Hi,

Does anyone know how to set the tab direction to down? For example after edit the user will press Enter Key. I need the next cell selected to be down instead of right.

Thanks,
Jerry

Grid

answered on 30 Sep 2015

1 answer

152 views

Scheduler Appointment BackColor - Agenda View

I have a Scheduler control that implements a custom appointment BackColor for each specific user. The color works fine when in Day view or Week view, but when I switch to Agenda view the color doesn't show up. I'm using the Metro skin. I can't seem to find anything in the .rsAgendaView style that seems to be preventing the BackColor from working. When I test with ForeColor it works fine.



Protected Sub rsMeetings_AppointmentDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.SchedulerEventArgs) Handles rsMeetings.AppointmentDataBound
 
    Dim dc As String
 
    If e.Appointment.Attributes.Item("StaffEmployeeID").ToString <> Nothing Then
        dc = GetAppointmentColor(e.Appointment.Attributes.Item("StaffEmployeeID").ToString)
        e.Appointment.BackColor = System.Drawing.Color.FromName(dc)
        'e.Appointment.ForeColor = System.Drawing.Color.FromName(dc)
    End If
 
End Sub

Scheduler

answered on 30 Sep 2015