Questions on UI for ASP.NET AJAX Forum

5 answers

92 views

I am not able to display a loading image while clicking on my tabstrip, please help

aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestLoadingPanel.aspx.vb" Inherits="Controls_Products_TestLoadingPanel" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadAjaxManager runat="server" DefaultLoadingPanelID="LoadingPanel1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" LoadingPanelID="LoadingPanel1" UpdatePanelCssClass="" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<div>
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
<div class="panelContainer">
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1" HorizontalAlign="NotSet">
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0" Skin="Windows7">
<Tabs>
<telerik:RadTab runat="server" Text="Root RadTab1" Selected="True">

</telerik:RadTab>
<telerik:RadTab runat="server" Text="Root RadTab2">

</telerik:RadTab>
<telerik:RadTab runat="server" Text="Root RadTab3">

</telerik:RadTab>
<telerik:RadTab runat="server" Text="Root RadTab4">

</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server">
<telerik:RadPageView ID="RadPageView1" runat="server">
1
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server">
2
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView3" runat="server">
3
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView4" runat="server">
4
</telerik:RadPageView>
</telerik:RadMultiPage>
<asp:Panel ID="Panel1" runat="server" Style="font: normal 12px Arial, Verdana, Sans-serif;
color: #a6a896;">
</asp:Panel>
</div>
</div>
<div class="controlsContainer">
</div>
</telerik:RadAjaxPanel>

<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server">
<img src="../../Images/loading.gif" alt="Loading" />
</telerik:RadAjaxLoadingPanel>


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

code behind:

Imports System
Imports System.Data
Imports System.Web.UI
Partial Class Controls_Products_TestLoadingPanel
Inherits System.Web.UI.Page

End Class

Ajax

answered on 17 Dec 2013

1 answer

159 views

Cell/Row as ReadOnly on RadGrid EditMode ="Batch"

Hello everybody,

I need block/set as readonly a complete row on a RadGrid in EditMode = "Batch",

Could you please support me with that?

Thanks in advance,

Grid

answered on 17 Dec 2013

3 answers

121 views

Drill Up on the parent node

Hi,

In the orgchart how can i have the drill up button. Meaning when i want the ability to go up one level from the parent node.
lets say the starting point of a chart is A who has reportees B and C and C in turn has E and F as reprotees. Currently the default mature of the orgchart is to show the drill down icon on C and when i drill down to C it has two icons go to parent and go to root. Can i have these go to parent icon on node A. Meaning if A has a manager he can Drill Up.

OrgChart

answered on 17 Dec 2013

1 answer

88 views

Select row after PageIndexChanged

Hello
I have a problem. I can select one specific row in first page,so the color of this row will become orange for example.
when I change the page index , I can select row but the color of row will NOT become orange ,I don't know what should I do.
my grid is in Update panel.
can anybody help me?
below is my code :

protected void grdAuthorization_PageIndexChanged(object sender, Telerik.Web.UI.GridPageChangedEventArgs e)

{

List<Entity.TimeSheetAuthorizationView1> list = (List<Entity.TimeSheetAuthorizationView1>)Session[ConstantStrings.AuthorizationList];

if (grdAuthorization.DataSource == null)

{

grdAuthorization.DataSource = list;

grdAuthorization.DataBind();

}

grdAuthorization.CurrentPageIndex = e.NewPageIndex;

grdAuthorization.DataBind();

ViewState[ConstantStrings.SelectedAuthorizationId] = null;

grdAuthorization.SelectedIndexes.Clear();

if (list != null && list.Count > default(int))

{

grdAuthorization.SelectedIndexes.Add(default(int));

int id = (int)grdAuthorization.SelectedItems[0].OwnerTableView.DataKeyValues[grdAuthorization.SelectedItems[0].ItemIndex]["Id"];

ViewState[ConstantStrings.SelectedAuthorizationId] = id;

}

Grid

answered on 17 Dec 2013

15 answers

456 views

RadComboBox on modalPopupExtender - z-index issue

Hi,

I'm having a strange issue with a radcombobox that is part of a custom control that sits on a modalpopupextender. The combo displays and can be used correctly but it is possible to select items that sit under the popup. For example, if the popup is displayed over a radgrid, it is possible to select the rows of the grid clicking on the combobox. Hovering the mouse over the combobox will also highlight the rows of the grid directly underneath. You can also select the the page size drop down if it happens to line up with the combobox.

This issue only happens in internet explorer 8 (note: you must use a real ie8 install not compatibility mode). Unfortunately our client uses ie8.
I've tried setting the z-index of the combo to a very high number with no success.
Any suggestions you have would be appreciated.

Thanks.

<telerik:RadComboBox runat="server" ID="ComboBox"

CausesValidation="true" AppendDataBoundItems="False"

OnSelectedIndexChanged="OnSelectedIndexChanged" AutoPostBack="True"

Filter="Contains" CssClass="combo" EnableTextSelection="True" Width="75%" HighlightTemplatedItems="True" Height="200px"

DropDownCssClass="select" OnDataBound="OnDataBound" OnItemDataBound="OnItemDataBound" OnClientBlur="OnclientBlurComboBoxHandler"

OnItemCreated="OnItemCreated" OnClientLoad="ThrottleComboBoxAutoComplete" OnItemsRequested="OnItemsRequested"

OnClientItemsRequesting="comboboxOnItemsRequesting" OnClientDropDownOpening="comboboxOnDropDownOpening" OnClientKeyPressing="comboBoxOnClientKeyPressing" Style="z-index: 10000001">

<ItemTemplate>

<div style="width: 100%">

<asp:Label ID="Label1" runat="server" Font-Size="10" Text='<%# DataBinder.Eval(Container, DataValueProperty).ToString() == "0" ?

DataBinder.Eval(Container, "Text") : string.Empty %>' />

<table width="100%" style='display: <%# DataBinder.Eval(Container, "Value").ToString() != "0" ? "table" : "none" %>'>

<tr>

<td id="ComboSearchTableCellID" runat="server" style="width: 10%">

<asp:Label ID="Label2" runat="server" Text='<%# Eval(DataIDProperty) %>' />

</td>

<td>

<asp:Label ID="Label3" runat="server" Text='<%# Container.DataItem == null ?

DataBinder.Eval(Container, "Text") : DataBinder.Eval(Container.DataItem, DataTextProperty) %>' />

</td>

</tr>

</table>

</div>

</ItemTemplate>

</telerik:RadComboBox

>




function comboboxOnItemsRequesting(combo, eventArgs) 
{
    if (combo.watingforClientInput == 1) {
        combo._filterText = "";
        eventArgs.get_context()["Text"] = "";
    } else {
        combo._filterText = combo.get_text();
        eventArgs.get_context()["Text"] = combo.get_text();
    }
}
 
function comboboxOnDropDownOpening(combo, eventArgs) {
   if (combo.get_enableLoadOnDemand()) {
        combo.watingforClientInput = 1;
        if (combo.get_items().get_count() > 0)
            combo.requestItems(combo.get_text(), false);
    }
}
 
function comboBoxOnClientKeyPressing(combo, eventArgs) {
 
    if (combo.get_enableLoadOnDemand())
    if (combo.watingforClientInput == 1) {
        combo.watingforClientInput = 0;
    }
}
 
function RadComboBoxOnClientBlurHandler(sender, eventArgs) {
    var checkedItems = sender.get_checkedItems();
    switch (checkedItems.length) {
        case 0:
            sender.set_text("");
            break;
        case 1:
            sender.set_text(sender.get_text());
            break;
        default:
            sender.set_text(checkedItems.length + " items checked");
            break;
    }
}

ComboBox

answered on 17 Dec 2013

2 answers

312 views

RadGrid doesnt fit in the page(overflows) inside radpane.

I have previously set the height of the RadGrid(radgrid1 and radgrid2) height by 100%. But the radgrid still overflows and the pager cannot be seen unless the browser is zoomed which is not a good option. Any workaround on this?

Thanks in advance!

<div id="ParentDivElement" runat="server">

<telerik:RadSplitter ID="MainSplitter" runat="server" Width="100%" Orientation="Horizontal"

Skin="WebBlue">

<telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">

<telerik:RadSplitter ID="NestedSplitter" runat="server" LiveResize="True" Skin="WebBlue">

<telerik:RadPane ID="LeftPane" runat="server" MaxWidth="250" MinWidth="250" Scrolling="None"

Width="250">

<center>

</center>

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="WebBlue" Width="100%">

<Items>

<telerik:RadPanelItem runat="server" Enabled="True" Expanded="True" PostBack="False">

<HeaderTemplate>

<table cellpadding="0" cellspacing="0" width="100%">

<tr>

<td align="left" valign="top">

<asp:Label ID="lblGreeting" runat="server" Font-Names="Trebuchet MS" SkinID="labelSkin1"

Text="Hi User!"></asp:Label>

</td>

<td align="right" valign="top">

</td>

</tr>

</table>

</HeaderTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</telerik:RadPane>

<telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward"

LiveResize="true" />

<telerik:RadPane ID="ContentPane" runat="server" BackColor="#cbd5df"

Scrolling="None">

<asp:Panel ID="Panel2" runat="server">

<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True" AllowPaging="true"

AllowRowResize="False" AllowSorting="True" BorderStyle="None" GridLines="None"

ShowFooter="True" ShowGroupPanel="false" Skin="WebBlue" Visible="False" >

<ClientSettings AllowDragToGroup="true" EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" >

<Selecting AllowRowSelect="True" />

<ClientEvents OnRowSelected="RowSelected2" />

</ClientSettings>

<MasterTableView AutoGenerateColumns="False" ClientDataKeyNames="Code" CommandItemDisplay="Top"

EnableHeaderContextMenu="True">

<CommandItemTemplate>

<div align="left" style="padding-left: 5px; padding-top: 2px">

<asp:ImageButton ID="ImageButton1" CommandName="SaveSettings" ToolTip="Save Gridview Settings"

runat="server" ImageUrl="~/Images/save-gridview-settings_24x24.png" />

<asp:ImageButton ID="ImageButton2" CommandName="DefaultSettings" ToolTip="Reset Gridview Settings"

runat="server" ImageUrl="~/Images/restore-default-settings_24x24.png" /></div>

</CommandItemTemplate>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn AllowFiltering="False" CurrentFilterFunction="Custom"

DataField="" DefaultInsertValue="" Groupable="true" Reorderable="False" HeaderText=""

ReadOnly="True" SortExpression="" UniqueName="">

<ItemTemplate>

<asp:Image ID="Image1" runat="server" ImageUrl='<%# "~\Images\DocTypes\" + Eval("Doc").ToString + ".png" %> ' /></ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Decision" DefaultInsertValue="" HeaderText="Decision"

SortExpression="Decision" UniqueName="Decision" FilterListOptions="VaryByDataType"

DataType="System.String">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Subj" DefaultInsertValue="" HeaderText="Subj"

SortExpression="Subj" UniqueName="Subj" DataType="System.String" FilterListOptions="VaryByDataType">

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn DefaultInsertValue="" DataField="Date" HeaderText="Date"

SortExpression="Date" PickerType="DatePicker" EnableRangeFiltering="true"

DataFormatString="{0:MMMM d, yyyy}" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="right"

FooterStyle-HorizontalAlign="Left">

</telerik:GridDateTimeColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView><ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True">

<Resizing AllowColumnResize="true" />

</ClientSettings>

<PagerStyle Mode="NextPrevNumericAndAdvanced" />

<FilterMenu EnableImageSprites="False">

</FilterMenu>

</telerik:RadGrid>

<telerik:RadGrid ID="RadGrid2" runat="server" AllowFilteringByColumn="True"

AllowPaging="true" AllowRowResize="False" AllowSorting="True" BorderStyle="None"

GridLines="None" PageSize="10" ShowFooter="False" ShowGroupPanel="False" Skin="WebBlue"

Visible="False">

<ClientSettings AllowDragToGroup="true" EnablePostBackOnRowClick="true" EnableRowHoverStyle="true">

<Selecting AllowRowSelect="True" />

<ClientEvents OnRowSelected="RowSelected2" />

</ClientSettings>

<MasterTableView AutoGenerateColumns="False" ClientDataKeyNames="Code" CommandItemDisplay="Top"

EnableHeaderContextMenu="True">

<CommandItemTemplate>

<div align="left" style="padding-left: 5px; padding-top: 2px">

<asp:ImageButton ID="ImageButton1" runat="server" CommandName="SaveSettings" ImageUrl="~/Images/save-gridview-settings_24x24.png"

ToolTip="Save Gridview Settings" />

<asp:ImageButton ID="ImageButton2" runat="server" CommandName="DefaultSettings" ImageUrl="~/Images/restore-default-settings_24x24.png"

ToolTip="Reset Gridview Settings" /></div>

</CommandItemTemplate>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn AllowFiltering="False" CurrentFilterFunction="Custom"

DataField="" DefaultInsertValue="" Groupable="true" HeaderText="" ReadOnly="True"

SortExpression="" UniqueName="">

<ItemTemplate>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Map" DataType="System.String" DefaultInsertValue=""

FilterListOptions="VaryByDataType" HeaderText="Map" SortExpression="Map"

UniqueName="Map">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Location" DataType="System.String" DefaultInsertValue=""

FilterListOptions="VaryByDataType" HeaderText="Location" SortExpression="Location"

UniqueName="Location">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Longitude" DataType="System.Double" DefaultInsertValue=""

FilterListOptions="VaryByDataType" HeaderText="Longitude" SortExpression="Longitude"

UniqueName="Longitude">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Latitude" DataType="System.Double" DefaultInsertValue=""

FilterListOptions="VaryByDataType" HeaderText="Latitude" SortExpression="Latitude"

UniqueName="Latitude">

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView><ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True">

<Resizing AllowColumnResize="true"></Resizing>

</ClientSettings>

<PagerStyle Mode="NextPrevNumericAndAdvanced" />

<FilterMenu EnableImageSprites="False">

</FilterMenu>

</telerik:RadGrid>

</asp:Panel>

</telerik:RadGrid>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Backward" LiveResize="true" />

<telerik:RadPane ID="RightPane" runat="server" MinWidth="300" Width="850px" Scrolling="None">

</telerik:RadPane>

</telerik:RadSplitter></telerik:RadPane>

</telerik:RadSplitter>

</div>

Grid

answered on 17 Dec 2013

7 answers

242 views

Page navigation (Pager Position)

Hi, i'm trying to set only the position of pager text. What i'm trying to do is this: i want the page navigation in the bottom of the page, and the pager text in the top of the page. Is that possible?

Grid

answered on 17 Dec 2013

4 answers

360 views

Large Image

Hi,

im trying to use a "large" Image in my RadImageEditor (using Q3 2012). The Image is a 8.17MB .jpg and is 7069px x 4907px. I can load it in the editor but cant use any feature after that. Either the browser (Chrome 31) crashes or the control event never gets launched (and code just hangs). What are the image size/high-resolution limitations with the control?

UPDATE: Im now trying with a smaller jpg image which is 408KB and 1600px x 900px. Now I can do some image operation on it like crop, rotate,etc. but the OnImageSaving event never get launched when I want to call my custom save function.

Note that everything works perfectly with this jpg image which is 244KB and 800px x 600px.

here is my code:

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" Width="680" Height="450" OnImageLoading="RadImageEditor1_ImageLoading" OnImageSaving="RadImageEditor1_ImageSaving" OnClientSaved="OnClientSaved" OnClientCommandExecuting="OnClientCommandExecuting" ExternalDialogsPath="~/ImageEditorDialogs">

<Tools>

<telerik:ImageEditorToolGroup>

<telerik:ImageEditorToolStrip CommandName="Undo" />

<telerik:ImageEditorToolStrip CommandName="Redo" />

<telerik:ImageEditorTool CommandName="Reset" />

<telerik:ImageEditorTool CommandName="Save" ToolTip="Save Image" />

<telerik:ImageEditorTool CommandName="Crop" IsToggleButton="true" />

<telerik:ImageEditorTool CommandName="Resize" IsToggleButton="true" />

<telerik:ImageEditorTool CommandName="Zoom" />

<telerik:ImageEditorTool CommandName="ZoomIn" />

<telerik:ImageEditorTool CommandName="ZoomOut" />

<telerik:ImageEditorTool CommandName="Opacity" IsToggleButton="true" />

<telerik:ImageEditorTool CommandName="Rotate" IsToggleButton="true" />

<telerik:ImageEditorTool CommandName="RotateRight" />

<telerik:ImageEditorTool CommandName="RotateLeft" />

<telerik:ImageEditorTool CommandName="Flip" IsToggleButton="true" />

<telerik:ImageEditorTool CommandName="FlipVertical" />

<telerik:ImageEditorTool CommandName="FlipHorizontal" />

<telerik:ImageEditorTool CommandName="AddText" IsToggleButton="true" />

<telerik:ImageEditorTool CommandName="InsertImage" IsToggleButton="true" />

<telerik:ImageEditorTool CommandName="Print" />

</telerik:ImageEditorToolGroup>

</Tools>

</telerik:RadImageEditor>

<telerik:RadCodeBlock ID="codeblock1" runat="server">

<script type="text/javascript">

function OnClientCommandExecuting(imEditor, eventArgs) {

if (eventArgs.get_commandName() == 'Save') {

imEditor.saveImageOnServer('', true);

//Prevent the buil-in Save dialog to pop up

imEditor.setToggleState('Save', false);

eventArgs.set_cancel(true);

}

</script>

</telerik:RadCodeBlock>

protected void RadImageEditor1_ImageSaving(object sender, Telerik.Web.UI.ImageEditorSavingEventArgs args)

{

/...

}

TIA

ImageEditor

answered on 17 Dec 2013

1 answer

37 views

Customize Editor's item / option Text

Hi. am using Telerik 2011 version. I want to change the editor's item text like Design as Picture, Word as group, Characters as Spell.
Can you please provide the code / option, how to change those items text of 5 items.
Please check the attached Image for more idea.

Thanks in advance.

Editor

answered on 17 Dec 2013

7 answers

114 views

Display RadAjaxLoadingPanel on more than asp:panel on the same page

Is it possible to display the RadAjaxLoadingPanel on more than one control on the same page?

In my project, I have an asp:panel called pnlContent and the html code is:

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlContent" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnVerifyUser">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlContent" LoadingPanelID="RadAjaxLoading" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnAssignUserToGroup">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlContent" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnProcessExcel">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlExcelProcess" LoadingPanelID="RadAjaxLoading" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnVerifyExcelRecords">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlExcelProcess" LoadingPanelID="RadAjaxLoading" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

I can see the LoadingPanel in pnlContent, when btnAssignUserToGroup is clicked, but I can't see it in pnlExcelProcess.

How can I see the LoadingPanel when btnVerifyExcelRecords or btnProcessExcel is clicked?

Ajax

answered on 17 Dec 2013