Questions on UI for ASP.NET AJAX Forum

2 answers

107 views

I'm getting some weird go-slows with the following script.

Most of the time, the filtering works in about 50ms. Other times, it takes upwards of 8000ms. When this happens firefox pops up them message that the script is taking too long to execute (continue stop etc).

I've put some timers in to try and find out where it's chugging, and it is on this line

var item = listItems.getItem(count);

as to why... well that's the million dollar question

the mark up is contained as follows

Master page > Page > RadPageView > UserControl

(all declared at design time ~ no dynamically loaded controls)

The Code

-------------

    //
    // Escapes RegEx character classes and shorthand characters
    //
    escapeRegExCharacters: function (text)
    {
        return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
    },

    //
    // filter items in a Rad List box
    //
    filterListBox: function (pSearchBoxClientID, pUsersClientID)
    {
        var textBox = $('#'+pSearchBoxClientID);
        var listBox = $find(pUsersClientID);

        if (textBox != null && listBox != null)
        {
            var filterText = Core.escapeRegExCharacters(textBox.val());
            var expression = new RegExp(filterText, "i");
            var listItems = listBox.get_items();

            for (var count = 0; count < listItems.get_count(); count++)
            {
                var item = listItems.getItem(count);
                item.set_visible(filterText == "" || item.get_text().match(expression));
            }
        }
    }

    <asp:TextBox id="txtSearchLinked" runat="server" CssClass="TextInput" Width="100%" />

            <telerik:RadListBox
                runat="server"
                ID="lstAccessInRole"
                SelectionMode="Multiple"
                Height="450px"
                width="600px"
                AllowTransfer="true"
                TransferToID="lstAccessNotInRole"
                AutoPostBack="false"
                AutoPostBackOnTransfer="false"
                >
                <ButtonSettings TransferButtons="TransferFrom,TransferTo" />
            </telerik:RadListBox>

        /// <summary>
        /// Sets the JQuery event on the search text box
        /// </summary>
        private void SetupFilterEvent()
        {
            txtSearchLinked.Attributes.Add("onkeyup", "javascript:Core.filterListBox('" + txtSearchLinked.ClientID + "', '" + lstAccessInRole.ClientID + "');");
        }

ListBox

answered on 17 Mar 2016

1 answer

185 views

how to add item in vb code?

looking at the demos but I cannot figure out how to manually add items to RadListView and also groupings.
so I think I create a group and add a few items to it and then add to listview.
is there some same API code?

ListView

answered on 17 Mar 2016

7 answers

774 views

Pie chart Questions

Hello,
I'm trying to add a databound pie chart to a page and have a few questions/problems (please let me know if you need me to create separate threads for each question).
All questions reference code or attachment below.

1. is there a quick/easy way to set the item with the highest value to exploded? Or do I have to iterate through the datatable?
2. alternatively to (1) I tried to manually set one of the items to exploded (see code), but that's giving me "index out of range" errors. When checking the contents of the "kpi" object in VS, the pieSeriesItems collection is empty - ???
3. How can I "omit" a specific color? The tooltips for the black color are black text on black background and are unreadable.
4. The pie chart for some reason doesn't have the "3D" effect as some of the samples do. Is the effect dependent on a certain size?
5. The chart has a lot of unnecessary white space. (see attached image) I'm only setting the width of the HTMLChart - if I set the height, the chart becomes smaller (i.e. the relative white space remains the same). Is there a way around this?
6. Suggestion: the HTMLChart control doesn't honor the RadFormDecorator settings (like RoundedCorners). It would be nice if it did that. In addition, a drop-shadow functionality would be nice to have too (IIRC, the MS Ajax Chart controls had that too).

Thx in advance for help and/or pointers !
Rgds - Marcus.

01.KPIMetricsChart.DataSource = ds.Tables[7];

02.KPIMetricsChart.DataBind();

03.PieSeries kpi = new PieSeries();

04.kpi.DataFieldY = "Cnt";

05.kpi.LabelsAppearance.Visible = false;

06.kpi.SeriesItems[4].Exploded = true; // <- DOES NOT WORK

07.kpi.TooltipsAppearance.ClientTemplate = "#=dataItem.Action#<br />#=dataItem.Cnt# Items, #= kendo.format(\\'{0:P}\\',percentage) #";

08.KPIMetricsChart.ChartTitle.Text = "Global Metrics";

09.KPIMetricsChart.PlotArea.Series.Add(kpi);

Chart (HTML5)

answered on 17 Mar 2016

0 answers

82 views

RadLiveTile - Unexpected token ERROR

Hi,

I'm having issues with RadLive capturing the value returned by my web service. I believe the web service is returning an xml while RadLiveTile is expecting a jason format. Can you please help me here?

WebService business logic:

[DataContract]

public class GarageMap

{

[DataMember]

public int OccupiedSpaces{set;get;}

public GarageMap() { }

public GarageMap(int propertyid)

{

loadMap(propertyid);

}

private void loadMap(int property_id)

{

DBTransaction Transaction = new DBTransaction();

DBTransactionParameter param = new DBTransactionParameter();

param.Type = SqlDbType.VarChar;

param.Name = "@PropertyID";

param.Value = "3";

List<DBTransactionParameter> plist = new List<DBTransactionParameter>();

plist.Add(param);

DataTable DT = Transaction.Select("sp_GetAllOccupiedSpacesCount", true, plist);

DataRow dr = DT.Rows[0];

OccupiedSpaces= Convert.ToInt32( dr["AllOccupiedSpaceCount"].ToString());

}

WebMethod:


[WebMethod]     
       [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet=false)] 
       //[ScriptMethod(UseHttpGet = true)]
       public GarageMap OccupiedSpaceCount()
       {
           //string j = "{'test': 1}";
           ////return j;
           return new GarageMap(3);   
 
       }

ASPX Page:

<div class="tilesWrapper">

<telerik:RadLiveTile ID="DellTile" NavigateUrl="http://finance.yahoo.com/q?s=FB&d=t" runat="server" UpdateInterval="3000" Value="FB">

<Title ImageUrl=""></Title>

</telerik:RadLiveTile>

<telerik:RadLiveTile ID="GoogleTile" NavigateUrl="http://finance.yahoo.com/q?s=GOOG&d=t" runat="server" UpdateInterval="4000" Value="GOOG">

<Title ImageUrl="../../images/LiveTiles/logo_Google.png"></Title>

</telerik:RadLiveTile>

<telerik:RadLiveTile ID="YahooTile" NavigateUrl="http://finance.yahoo.com/q?s=YHOO&d=t" runat="server" UpdateInterval="5000" Value="YHOO">

<Title ImageUrl="../../images/LiveTiles/logo_Yahoo.png"></Title>

</telerik:RadLiveTile>

<telerik:RadLiveTile ID="MicrosoftTile" NavigateUrl="http://finance.yahoo.com/q?s=MSFT&d=t" runat="server" UpdateInterval="6000" Value="MSFT">

<Title ImageUrl="../../images/LiveTiles/logo_Microsoft.png"></Title>

</telerik:RadLiveTile>

</div>

Code Behind:


protected void Page_Load(object sender, EventArgs e)
       {
           InitializeTile(DellTile);
           //InitializeTile(GoogleTile);
           //InitializeTile(YahooTile);
           //InitializeTile(MicrosoftTile);
       }
       private void InitializeTile(RadLiveTile tile)
       {
           tile.CssClass = "liveTile";
           tile.Target = "_blank";
 
           //The text between the #= # characters is replaced by the corresponding properties of the data item
           //returned on the web service response.
           tile.ClientTemplate = @"
               <div class=""tileClientTemplate"">
                   <div><strong>change:</strong> <img src=""../Assets/Icons/arrow_down.png"" alt="""" /> #= OccupiedSpaces #</div>
                   <div><strong>stock quote:</strong> #= OccupiedSpaces #</div>
                   <div><strong>updated:</strong> #=  OccupiedSpaces #</div>
               </div>
           ";
 
           //Configure the web service providing the live data.
           tile.WebServiceSettings.Path = "http://ws.smartparkllc.com/Dashboard.asmx";
           tile.WebServiceSettings.Method = "OccupiedSpaceCount";
 
           //Attach client side event handlers.
           tile.OnClientDataLoaded = "tileDataLoaded";
           tile.OnClientDataLoadingError = "tileDataLoadingError";
           tile.OnClientTemplateDataBound = "tileClientTemplateDataBound";
       }

Java Script File:


<script type="text/javascript">
             //alert("boom");
             function tileDataLoadingError (sender, args) {
            args.set_cancelErrorAlert(true);                                       
        }
 
        //The dataLoaded client side event occurs after the data request returns the data successfully.
             function tileDataLoaded(sender, args) {
                 //
            var data = args.get_data();
            //format the received date property
            //data.LastUpdated = data.LastUpdated.format("yyyy.MM.dd HH:mm:ss");
        }
 
        //The templateDataBound client-side event occurs after the client template is data bound.
            function tileClientTemplateDataBound(sender, args) {
                alert("boom");
                if (args.get_dataItem().Change >= 0) {
                     
                    args.set_html(args.get_html().replace("Assets/Icons/arrow_down.png", "Assets/Icons/arrow_up.png"));
                }
            }
         </script>

Browser Webservice call output:


<?xml version="1.0" encoding="utf-8"?>
<GarageMap xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
  <OccupiedSpaces>3</OccupiedSpaces>
</GarageMap>
 
 Browser Console Error:

Uncaught SyntaxError: Unexpected token <

TileList

asked on 17 Mar 2016

1 answer

98 views

Pushing Content to a Dock

Hello,

I'm wondering what the best way would be to push content to a dock control when the underlying information has been changed. I was considering trying to hook it up with SignalR but I'm hoping there may be a simpler solution.

Application Senerio:

I have several zones that can contain one or more dock controls. It is basically a scheduling system and the docks display information about an event. I want to be able to update all devices that are viewing the application if someone makes a change to an event. The zones are static but I'm dynamically creating the dock controls and adding them to the zones.

Any pointers or ideas of the best way to achieve this would be much appreciated.

Thanks,
Brian

Dock

answered on 16 Mar 2016

1 answer

113 views

Menu Over Window Zindexing

I have issue with Zindexing (i believe). I am opening a window using RadWindowManager control, i need this window on top of menu layer. What property i need to setting menu or window? Following is the code I am using to open window.

<telerik:RadWindowManager

ClientIDMode="Static"

ID="subWindow"

runat="server"

Width="560"

Height="530"

VisibleStatusbar="false"

Behaviors="Move"

DestroyOnClose="true"

Modal="true"

ShowContentDuringLoad="false"

ShowOnTopWhenMaximized ="true">

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

<script type="text/javascript">

function OpenWin() {

var manager = $find('subWindow');

manager.open('/URL', null);

return false;

}

</script>

</telerik:RadScriptBlock>

Code for generating menu is :

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

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

<head runat="server">

<title></title>

<style>

.demo-container {

border: 0;

}

.demo-container .RadMenu {

margin: 0 auto;

font-size: 16px;

}

html div.RadMenu_Glow .rmPopup {

}

html div.RadMenu_Glow .rmPopup {

background: none repeat scroll 0 0 rgba(104, 176, 237, .75);

}

html .demo-container .RadMenu_Glow .rmRootGroup {

position: relative;

width: 100%;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmGroup {

/*background-color : rgba(183, 209, 227, .75);*/

color: black;

font-size: 14px;

width: 200px;

padding-top:40px;

padding-bottom:40px;

padding-left:10px;

padding-right:10px;

}

html div.RadMenu_Glow .rmMultiColumn {

border: 0;

background: no-repeat scroll 0 0 rgb(133, 199, 254);

}

html div.RadMenu_Glow .rmItem .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-position:left center;

background-repeat: no-repeat;

padding-left: 190px;

}

html div.RadMenu_Glow .rmItem:nth-of-type(2) .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-image: url("one.jpg");

}

html div.RadMenu_Glow .rmItem:nth-of-type(3) .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-image: url("two.jpg");

}

html div.RadMenu_Glow .rmItem:nth-of-type(4) .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-image: url("three.png");

}

html div.RadMenu_Glow .rmPopup {

/*background: none repeat scroll 0 0 rgba(50, 82, 204, .75);*/

}

.demo-container .RadMenu .rmPopup {

width: 300px;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmLevel2 {

/* background-color: rgba(99, 158, 200, .75);*/

}

html .demo-container .RadMenu_Glow .rmHorizontal .rmItem {

position: static;

}

.demo-container .RadSiteMap .rsmColumnWrap {

margin-bottom: 0px;

}

.demo-container .RadSiteMap_Glow .rsmOneLevel .rsmLink,

.demo-container .RadSiteMap_Glow .rsmTwoLevels .rsmLevel1 .rsmLink,

.demo-container .RadSiteMap_Glow .rsmThreeLevels .rsmLevel2 .rsmLink,

.demo-container .RadSiteMap_Glow .rsmManyLevels .rsmLevel3 .rsmLink {

font-size: 11px;

color: white;

}

.demo-container .rmPopup .itemContent {

padding: 10px 0 40px 90px;

background-repeat: no-repeat;

background-position: 10px center;

}

.demo-container .africa {

background-position: 70px center;

}

.demo-container div.RadSiteMap .rsmItem {

color: #FFFFFF;

list-style-type: square;

margin-left: 5px;

}

.demo-container .rsmColumnWrap {

*display: none;

}

</style>

<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>

</head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeout="600"></telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" ClientIDMode="Static" runat="server" Skin="Simple"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel"></telerik:RadAjaxManager>

<div class="demo-container">

<telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Glow" ClickToOpen="false" zindex="8000">

<DefaultGroupSettings Height="270px" />

<Items>

<telerik:RadMenuItem Text="Home" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item A " ><Items >

<telerik:RadMenuItem Text="Menu Item A1" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item A2" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu A3" ></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B " >

<Items >

<telerik:RadMenuItem Text="Menu Item B1" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B2" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu B3" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B4" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B5" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu B6" ></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C " >

<Items >

<telerik:RadMenuItem Text="Menu Item C1" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C2" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C3" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C4" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C5" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C6" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C7" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C8" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C9" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C10" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C11" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C12" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C13" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C14" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C15" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C16" GroupSettings-Offsety ="145" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Add Menu C16 A" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C16 B"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C17" GroupSettings-Offsety ="175" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Add Menu C16 A" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C16 B"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C17 B"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18" GroupSettings-Offsety ="200" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Add Menu C18 A" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18 B"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18 c"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18 D"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

<DefaultGroupSettings RepeatColumns="3" RepeatDirection="Vertical" />

</telerik:RadMenu>

</div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>

</form>

</body>

</html>

Please see window coming now attached picture:

Window

answered on 16 Mar 2016

2 answers

566 views

[Solved] .js files for grid only

I would like to only use the kendo grid and none of the other kendo controls in my project. What is the minimum number/size of .js files that I need to include for it to work?

I tried just including the kendo.grid.js file, but that wasn't enough and while including the .all.js worked it wasn't clear what the minimum was.

Thanks

Grid

answered on 16 Mar 2016

3 answers

82 views

RadHTMLChart

We are looking at replacing HighCharts and are using Telerik components in other areas.

Due to the volume of data we only give HighCharts a subset of it. For instane if there are 50,000 points we provide an average of 1000.

When zooming is applied we get sever server side call to provide 1000 zoomed in points.

I am trying to implement this in RadHTMLCharts but struggling to an event to hook into Serverside.

All I have found is client side

http://feedback.telerik.com/Project/108/Feedback/Details/118371-add-client-side-events-for-drag-and-zoom-in-radhtmlchart

As the number of charts per page is dynamic I doing this all in Code Behind using a custom DataTable (no mark up)

Chart (HTML5)

answered on 16 Mar 2016

1 answer

237 views

Perform calculation inside textbox

Hi,

I'm wondering if anyone has come up with a way to perform calculations within a single TextBox or NumericTextBox?

For example, if I enter "3+5" as the text and then remove focus from the TextBox, I'd want the text value to update to "8". Similarly for other operations such as division or multiplication.

I've seen this behavior within other web applications ("You Need a Budget" comes to mind) and am wondering if a framework exists rather than building from scratch in javascript.

Thanks,

Jeff

General Discussions

answered on 16 Mar 2016

4 answers

347 views

Cannot paste content into Rad Editor when in design mode

I cannot paste content into the Rad Editor control when it is in design mode. I have tried both the command defined in the ToolsFile attribute and default windows command (CTRL + V). I am able to paste content when it is in HTML view. Here is my code:

<telerik:RadEditor ID="radMessageBody" runat="server" RenderMode="Lightweight" NewLineMode="Br" ToolsFile="~/xml/BasicTools.xml" ContentAreaCssFile="~/css/EditorContentArea.css" />

<root>

<tools name="MainToolbar" dockable="true" enabled="true">

<tool name="FindAndReplace" /><br> <tool separator="true"/><br> <tool name="Undo" /><br> <tool name="Redo" /><br> <tool separator="true"/><br> <tool name="Cut" /><br> <tool name="Copy" /><br> <tool name="Paste" shortcut="CTRL+!" /><br> </tools><br> <tools name="Formatting" enabled="true" dockable="true"><br> <tool name="Bold" /><br> <tool name="Italic" /><br> <tool name="Underline" /><br> <tool separator="true"/><br> <tool name="ForeColor" /><br> <tool name="BackColor"/><br> <tool separator="true"/><br> <tool name="FontName"/><br> <tool name="RealFontSize"/><br> </tools><br></root>

It does not work in either Chrome and IE.

Any ideas how to resolve this?

Editor

answered on 16 Mar 2016