Telerik Forums
UI for ASP.NET AJAX Forum
1 answer
89 views

I'm evaluating the Kendo UI Gantt chart to see if it fits our project requirements.One particular requirement is to display a status column which would be a drop down in edit mode and has three statusesRed 2. Green 3. Yellow, along with an image indicator something like what is shown in the image1 below

 

I am able to achieve the above effect when i edit a cell after using a custom editor for the drop down

 

function statusDropDownEditor(container, options) {
        $('<input data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataTextField: "Status",
                dataValueField: "StatusId",
                valueTemplate: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>',
                template: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>',
                dataSource: {
                    transport: {
                        read: function (e) {
                            // on success
                            e.success([{ Status: 'Not Started', StatusId: '0', Url: 'Image/red.png' }, { Status: 'Red', StatusId: '1', Url: 'Image/red.png' }, { Status: 'Green', StatusId: '2', Url: 'Image/red.png' }, { Status: 'Yellow', StatusId: '3', Url: 'Image/red.png' }]);
                            // on failure
                            //e.error("XHR response", "status code", "error message");
                        }
                    }
                }
            })
    }

 

The Gantt Column for Status looks like the below snippet

 

{ field: "status", title: "Status", editable: true, width: 150, editor: statusDropDownEditor, template: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>' }

 

However when done with selecting a particular item from drop down and on exiting the edit mode this is how the cell looks like(image2)

 

Seems like the default cell template in read only mode does not render html and the invokes the toString of the object bound to the cell, is there a way to fix this in the kendo UI Gantt

Nencho
Telerik team
 answered on 26 May 2015
3 answers
741 views

I am needing to set the code behind TooltipAppearance DataFormatString. 

I have not had much success with the documentation, I am hoping someone else has had a similar issue.

 

 

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Height="400px" Width="480px" CssClass="fb-sized" OnPreRender="RadHtmlChart1_PreRender">
 
               <PlotArea>
                   <Series>
                       <telerik:PieSeries DataFieldY="TypeCount" ExplodeField="IsExploded" NameField="Area">
                           <LabelsAppearance DataFormatString="{0}">
                           </LabelsAppearance>
                           <TooltipsAppearance Color="White">
                               <ClientTemplate>
                               #=dataItem.Area#<br />#=dataItem.TypeCount#
                               </ClientTemplate>
                           </TooltipsAppearance>
 
                       </telerik:PieSeries>
                   </Series>
               </PlotArea>
 
           </telerik:RadHtmlChart>

 

public void buildChart()
   {
       PieSeries pieSeries1 = new PieSeries();
       pieSeries1.Name = "Chart";
       
       pieSeries1.LabelsAppearance.Visible = false;
       pieSeries1.TooltipsAppearance.Color = System.Drawing.Color.White;
       pieSeries1.TooltipsAppearance.DataFormatString = "???????????";
       // What I need in the template is the series name and then the value  somethin like this:  #=dataItem.Name#<br />#=dataItem.Valu#
       
       pieSeries1.SeriesItems.Add(10, Color.Yellow, "Student");
       pieSeries1.SeriesItems[0].Visible = false;
       pieSeries1.SeriesItems.Add(20, Color.Red, "Staff");
       pieSeries1.SeriesItems.Add(50, Color.Green, "Room");
       pieSeries1.SeriesItems.Add(20, Color.Purple, "Transfer");
 
       RadHtmlChart1.PlotArea.Series.Add(pieSeries1);
       
 
      
   }
   protected void Page_Load(object sender, EventArgs e)
   {
       buildChart();
  }

Danail Vasilev
Telerik team
 answered on 26 May 2015
21 answers
1.8K+ views
Hi, All:

I am using RadGrid.  I want to hide the entire column in normail mode.  But in Edit mode, I want to display this column for editting.

here is my codes:

<

rad:GridTemplateColumn HeaderText="Billed">
<EditItemTemplate>
<asp:TextBox ID="tbBilled" runat="server" Text='<%# Bind("Billed", "{0:MM/dd/yyyy}") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblBilled" runat="server" Text='<%# Bind("Billed", "{0:MM/dd/yyyy}") %>'></asp:Label>
</ItemTemplate>
</rad:GridTemplateColumn>

Please give some detail on the implementation. 
Thanks.

Stanley

Angel Petrov
Telerik team
 answered on 26 May 2015
9 answers
1.1K+ views
I'm getting a performance issue when I try to export my grid to Excel.  The data source has about 67,000 records and the filtered result set has about 12,000 records.  Is it normal for the Excel export to run for 20 minutes without showing any results when there are that many records?  Is there anything in my code that I could tweak to avoid this issue?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PinList.aspx.cs" Inherits="PinList" 
    MasterPageFile="~/Admin/Masterpages/AdminPageWithMenu.master" Theme="MillenniumAdmin" 
    Title="PIN List" %> 
 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">  
 
    <script type="text/javascript">  
        function OpenRadWindowCreateNewPins()  
        {  
             var oWindow = radopen("Popups/NewPIN.aspx", null);  
             oWindow.op  
             oWindow.SetSize(600, 520);  
        }  
         
       //Reloads PIN Grid   
       function OnClientClose(radWindow)  
       {  
            location.reload();  
       }  
    </script> 
 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="PageTitle" runat="Server">  
    PIN List  
</asp:Content> 
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">  
    <telerik:RadWindowManager ID="winMgr" Skin="Outlook" Behaviors="Close, Move, Resize" 
        Modal="true" VisibleStatusbar="false" runat="server" Width="520px" Height="450px" 
        OnClientClose="OnClientClose">  
    </telerik:RadWindowManager> 
    <asp:Label ID="Message" runat="server" EnableViewState="false"></asp:Label> 
    <telerik:RadGrid ID="PinGrid" runat="server" AutoGenerateColumns="false" AllowAutomaticDeletes="false" 
        AllowAutomaticInserts="false" AllowAutomaticUpdates="false" ShowStatusBar="true" 
        AllowMultiRowSelection="false" AllowPaging="true" PageSize="30" OnNeedDataSource="PinGrid_NeedDataSource" 
        OnItemCreated="PinGrid_ItemCreated" AllowFilteringByColumn="true" OnPreRender="PinGrid_PreRender" 
        OnItemCommand="PinGrid_ItemCommand" Width="90%">  
        <ExportSettings> 
            <Excel Format="ExcelML" /> 
        </ExportSettings> 
        <MasterTableView AllowNaturalSort="false" CommandItemDisplay="Top" DataKeyNames="PINID" 
            AutoGenerateColumns="false" AllowSorting="true">  
            <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle> 
            <CommandItemTemplate> 
                <asp:LinkButton ID="lnlRebind" runat="server" OnClientClick="javascript:location.reload()" 
                    CommandName="RebindGrid" Visible='true'><img class="middle" alt="" src="../Images/Telerik/Refresh.gif" /> Refresh</asp:LinkButton>&nbsp;&nbsp;  
                <asp:HyperLink NavigateUrl="#" ID="GenerateNewPins" runat="server" Visible='<%# NewMillennium.Authorization.UserHasPermission(NewMillennium.FunctionalityName.CreateEditReps) %>' 
                    onclick="OpenRadWindowCreateNewPins();return false;"><img class="middle" alt="" src="../Images/Telerik/new.gif" /> 
                        Generate New PINs</asp:HyperLink>&nbsp;&nbsp;  
                <asp:LinkButton ID="lnlExportToExcel" runat="server" OnClick="ExportToExcelClick" 
                    Visible='true'><img class="middle" alt="" src="../Images/Telerik/excel.gif" /> Export</asp:LinkButton>&nbsp;&nbsp;  
                &nbsp;  
            </CommandItemTemplate> 
            <Columns> 
                <telerik:GridBoundColumn HeaderText="PinID" DataField="PINID" UniqueName="PINID" 
                    SortExpression="PINID" ReadOnly="true" Visible="false">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn DataField="DateCreated" HeaderText="Date Generated" SortExpression="DateCreated" 
                    CurrentFilterFunction="Between" AutoPostBackOnFilter="true" UniqueName="DateCreated" 
                    DataFormatString="{0:M/d/yyyy}" AllowFiltering="false">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn HeaderText="PIN" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" 
                    DataField="PIN" UniqueName="PIN" SortExpression="PIN" ReadOnly="true" Visible="true">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn HeaderText="Program" CurrentFilterFunction="StartsWith" 
                    AutoPostBackOnFilter="true" DataField="ProjectName" UniqueName="ProjectName" 
                    SortExpression="ProjectName" DataType="System.String" ReadOnly="true" Visible="true">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn HeaderText="Rep First Name" CurrentFilterFunction="StartsWith" 
                    AutoPostBackOnFilter="true" DataField="RepFirstName" UniqueName="RepFirstName" 
                    SortExpression="RepFirstName" DataType="System.String" ReadOnly="true" Visible="true">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn HeaderText="Rep Last Name" CurrentFilterFunction="StartsWith" 
                    AutoPostBackOnFilter="true" DataField="RepLastName" UniqueName="RepLastName" 
                    SortExpression="RepLastName" DataType="System.String" ReadOnly="true" Visible="true">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn HeaderText="Territory Name" CurrentFilterFunction="StartsWith" 
                    AutoPostBackOnFilter="true" DataField="TerritoryName" UniqueName="TerritoryName" 
                    SortExpression="TerritoryName" ReadOnly="true" Visible="true">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn HeaderText="Used" AutoPostBackOnFilter="true" DataField="UsedString" 
                    UniqueName="Used" SortExpression="UsedString" ReadOnly="true" Visible="true">  
                </telerik:GridBoundColumn> 
                <telerik:GridBoundColumn DataField="OrderDate" HeaderText="Date Used" SortExpression="OrderDate" 
                    CurrentFilterFunction="Between" AutoPostBackOnFilter="true" UniqueName="OrderDate" 
                    DataFormatString="{0:M/d/yyyy}" AllowFiltering="false">  
                </telerik:GridBoundColumn> 
            </Columns> 
        </MasterTableView> 
    </telerik:RadGrid> 
</asp:Content> 
 

using System;  
using System.Collections;  
using System.Collections.Generic;  
using System.Configuration;  
using System.Data;  
using System.Data.SqlClient;  
using System.Web;  
using System.Web.Security;  
using System.Web.UI;  
using System.Web.UI.HtmlControls;  
using System.Web.UI.WebControls;  
using NewMillennium;  
using Telerik.Web.UI;  
 
public partial class PinList : MillenniumPage  
{  
    protected void Page_Load(object sender, EventArgs e)  
    {  
        if (!Authorization.UserHasPermission(FunctionalityName.ViewRepList)) FormsAuthentication.RedirectToLoginPage();  
        Common.SetGridSkin(PinGrid);  
    }  
    protected void PinGrid_PreRender(object sender, EventArgs e)  
    {  
 
    }  
    /// <summary>  
    ///  
    /// </summary>  
    protected void PinGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)  
    {  
        PinGrid.DataSource = PinData.GetPinList();  
        Common.HideExtraFilterOptions(PinGrid);  
    }  
 
    protected void PinGrid_ItemCreated(object sender, GridItemEventArgs e)  
    {  
        Common.HideFilterButtonsForNewVersion(PinGrid, e.Item);  
    }  
 
    protected void ExportToExcelClick(object sender, EventArgs e)  
    {  
        string filename = "PinExport-" + DateTime.Now.ToLongDateString().Trim().Replace(" ""-").Replace(",""");  
 
        this.PinGrid.ExportSettings.FileName = filename;  
        this.PinGrid.ExportSettings.OpenInNewWindow = true;  
        this.PinGrid.ExportSettings.ExportOnlyData = true;  
        this.PinGrid.ExportSettings.IgnorePaging = true;  
 
        foreach (GridItem commandItem in this.PinGrid.MasterTableView.GetItems(GridItemType.CommandItem))  
        {  
            commandItem.Visible = false;  
        }  
 
        this.PinGrid.MasterTableView.ExportToExcel();  
    }  
    protected void PinGrid_ItemCommand(object sender, GridCommandEventArgs e)  
    {  
        if (e.CommandName == RadGrid.FilterCommandName && e.Item is GridFilteringItem)  
        {  
        }  
    }  
    protected void DisplayMessage(string message, string cssClass)  
    {  
        Message.Text = message;  
        Message.CssClass = cssClass;  
    }  
}  
 
 


Kostadin
Telerik team
 answered on 26 May 2015
1 answer
111 views

Hi,

I have the following function inserted in my RichText Commands.js file:

RadEditorCommandList["InsertAccordion"] = function (commandName, editor, args) {
    var selectedHtml = editor.getSelectionHtml();
    var newHtml = "<div class=\"accordion-rte\">" + selectedHtml + "</div>";   

    editor.pasteHtml(newHtml);

};

It should wrap the selected content in a <div> with the css class "accordion-rte".
Simply enough I thought... But when I have a text like:

<h2>Heading 2</h2>
<p>Some text</p>
<p>Heading 2.1</p>
<p>put some text here for paragraph 2.1</p>
<p>Heading 2.2</p>
<p>put some text here for paragraph 2.2</p>
<p>Some other text</p>
<p>&nbsp;</p>

 and I select in design mode the text from "Heading 2.1" to "put some text here for paragraph 2.2" and then exucute my script the result is:

<h2>Heading 2</h2>
<p>Some text</p>
<p>Heading 2.1</p>
<p>put some text here for paragraph 2.1</p>
<p>Heading 2.2</p>
<p>put some text here for paragraph 2.2</p>
<p>
<div class="accordion-rte">&nbsp;</div>
</p>
<p>Some other text</p>
<p>&nbsp;</p>

 while debugging I see the newHtml variable is containing the right value. It got messed up somewhere in the pasteHtml function.

Does anyone has a clue what's going wrong? and how I can get it to work?

Much appreciated,

Peter

Ianko
Telerik team
 answered on 26 May 2015
1 answer
173 views

Hi

 I'm trying to bind a RadMap to some JSON returned from an ASPX page.

 

<script>
    function TestGetMap()
    {
        var shapeData = "";
        $.ajax({
             type: "GET",
            url: "/Data/GetJsonTrip.aspx",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                shapeData = JSON.stringify(msg);
                var ds = new kendo.data.DataSource(shapeData);
                var kendoMap = $telerik.$("#<%=tripMap.ClientID %>").data("kendoMap");
                kendoMap.layers[1].dataSource = ds;
            }
        });
    }
</script>

I've tried setting the datasource to msg instead of the string version, tried different layers, etc.

My map looks like this

<telerik:RadMap runat="server" ID="tripMap">
    <LayersCollection>
        <telerik:MapLayer></telerik:MapLayer>
        <telerik:MapLayer Type="Shape"  Opacity="0.7">                   
            <StyleSettings>
                <StrokeSettings Color="#ffffff" Width="10" />
            </StyleSettings>
        </telerik:MapLayer>
    </LayersCollection>
    <CenterSettings  Latitude="-32.962926"  Longitude="151.699727"/>
</telerik:RadMap>

 I'm setting the first map layer in code to bing

MapLayer mapLayer = tripMap.LayersCollection[0];
mapLayer.Type = Telerik.Web.UI.Map.LayerType.Bing;
mapLayer.ImagerySet = "AerialWithLabels";

I confirmed that I'm getting back valid geojson from the aspx page.

I'm not getting any javascript errors in the console.

What I don't understand is: How in a click event in javascript can I set the dataource for a shapes layer of a radmap?

 

Thanks
Matt

 

 

 

 

 

 

 

 

 

Ianko
Telerik team
 answered on 26 May 2015
2 answers
77 views

Hi, I'm testing the diagram component for my app, I'm porting a desktop app that uses Dataweb's diagramming library.

 How do I retrieve an existing connection object since it does not have an element ID?

 

This is what I need:

var connection = diagram.getConnection(params);

Thanks!

David

David
Top achievements
Rank 1
 answered on 25 May 2015
14 answers
344 views
Hi.

I'm trying to figure out which value has been selected in a drop down, but I'm getting nowhere...

My toolbar looks something like this:

<telerik:RadToolBar ID="Toolbar" runat="server" OnButtonClick="ToolBar_ButtonClick"
    <Items> 
        <telerik:RadToolBarDropDown Text="Z" ToolTip="Z"> 
            <Buttons> 
                <telerik:RadToolBarButton Value="A" Text="A" /> 
                <telerik:RadToolBarButton Value="B" Text="B" /> 
                <telerik:RadToolBarButton Value="C" Text="C" /> 
            </Buttons> 
        </telerik:RadToolBarDropDown> 
        <telerik:RadToolBarDropDown Text="Y" ToolTip="Y"
            <Buttons> 
                ... 
            </Buttons> 
        </telerik:RadToolBarDropDown> 
        <telerik:RadToolBarDropDown Text="X" ToolTip="X"
            <Buttons> 
                ... 
            </Buttons> 
        </telerik:RadToolBarDropDown>
</telerik:RadToolBar>

Getting at the dropdown was hard enough, the only method I found was the Toolbar.FindItemByText("Z") method, which uses a rather volatile property, Text, which is prone to change and/or be internationalized and stop working. Regardless, I got my hands on the RadToolbarDropDown. But then I was stuck. I could not find any "SelectedValue" (or relevant method on the DropDown. And, if iterating through its buttons, I couldn't find any indication on them which one is the selected one. So... what do I do?
Rumen
Telerik team
 answered on 25 May 2015
3 answers
649 views
In previous releases of the UI for ASP.NET AJAX Forum the OnSelectedDateChanged event on the RadDatePicker would fire even if the associated DateInput control was marked as disabled (to prevent users typing in date value and force use of calendar flyout).  However, I upgraded to build 2015.1.401.45 recently and this behavior is not working anymore - I have to enable the DateInput control for the event to fire and for the DateInput to reflect the selected date from the calendar.  Was this by design and should I be using some other attribute to prevent direct user date inputs or is this a bug?
Viktor Tachev
Telerik team
 answered on 25 May 2015
4 answers
109 views
The size of the wizard can't be fixed, and some control (like convert to template and some type of columns) at the bottom that can't be used.

here is the link of the picture. I am using vs 2010, and it's the same as vs 2012

http://i.imgur.com/25kWKBH.png
Vasil
Telerik team
 answered on 25 May 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?