Telerik Forums
UI for ASP.NET AJAX Forum
4 answers
1.3K+ views

I am attempting to create my first HTML Chart. This will be a simple pie chart based on a SQL query.

 The query returns five rows with two columns of data: (1) language (English/French/etc) and (2) a count of each.

 The intention is to display a pie chart showing the relative distribution of the top five languages used in my application.

I have copied an example and also looked at the data binding documentation but have not been able to connect my data with the pie slices.

 I presume I need to add some type of template that is unique to a pie chart. All the examples I found refer to other chart types.

When I add this markup to my page I get no results unless I add a few series items directly. I see that Intellisense includes an item "db" (markup snippet for data-bind attribute).  I don't know what to do from there, it appears to be non-functional or expecting me to do something unknown to me.

 

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" DataSourceID="Language_Chart_Data">
    <PlotArea>
        <Series>
            <telerik:PieSeries StartAngle="90" DataFieldY="count" NameField="language">
                <SeriesItems >  
                    <telerik:PieSeriesItem BackgroundColor="#666666" Exploded="false" Name="Safari" Y="4.5"></telerik:PieSeriesItem>
                    <telerik:PieSeriesItem BackgroundColor="#333333" Exploded="false" Name="Opera" Y="2.3"></telerik:PieSeriesItem>
                 </SeriesItems>
                <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %" />
                <TooltipsAppearance DataFormatString="{0} %" />
            </telerik:PieSeries>
   
        </Series>
 
    </PlotArea>
    <ChartTitle Text="Top Five Languages">
    </ChartTitle>
</telerik:RadHtmlChart>

Tomica
Top achievements
Rank 2
 answered on 30 Sep 2015
6 answers
704 views
Hello,

I have a RadDateTimePicker control that I would like to validate.  Right now if I enter junk into the field (like 'asdfasdf'), the control will alert me that there is an issue by displaying a warning image and changing the color to red.  This works great - however, I am still allowed to do a postback on the form.  I want to prevent a postback from occuring and force the user to correct their input before continuing.  I have tried setting the 'DateInput-CausesValidation' to true but this had no affect.  I've also tried adding a .NET comparison validator to the field but I get an error about setting focus when doing this.  Is it possible to prevent the postback when the input is not correct?

Thank you!
Richard
Jim Davis-Northrup
Top achievements
Rank 1
 answered on 30 Sep 2015
3 answers
264 views
Is it possible to add extra column to Radscheduler Agenda View?
Nencho
Telerik team
 answered on 30 Sep 2015
2 answers
53 views

A user reported (and we confirmed) that, using Firefox on Mac, if you select some text in the editor and press Command-C, the text is deleted rather than copied to the clipboard. No problem in Safari, and no problem in any browser on Windows.

Sounds like a browser problem, but I though I would pass it along just in case there is something you need to look at.

Using Mac 10.9.4 and Firefox 41

Dan Ehrmann
Top achievements
Rank 1
 answered on 30 Sep 2015
11 answers
196 views
Hi

 

As shown in attachments:

1. Filter window:  As we have column in pivot table row fields (Restaurant name), we need with space only in the menu items of Filter Window (Needed : restaurant Name ,Currently showing is without space : restaurantname)

2. In Label Filter/Value Filter headers also we need same thing.

3. In Summarize by settings window header also we need same thing.

 

Currently its showing the name as in database column name
Viktor Tachev
Telerik team
 answered on 30 Sep 2015
0 answers
117 views

Hi, I want to change style of values on the chart - value should be in frame in same series color. 

I added ClientTemplate to LabelsAppearance and it works until i add DIV on it.

 

<telerik:LineSeries DataFieldY="SHO_ProductivityGrowth" Name="Miesięczny">
    <LabelsAppearance DataFormatString="{0:p1}" Position="Left">
        <ClientTemplate>
            <div> #= kendo.format(\'{0:P1}\', value) # </div>
        </ClientTemplate>
    </LabelsAppearance>
    <TooltipsAppearance DataFormatString="{0:p2}" />
</telerik:LineSeries>
Karol
Top achievements
Rank 1
 asked on 30 Sep 2015
4 answers
492 views
I tried to change border width to 30px with round-corner image. I don't need titlebar and status bar. I created a customized window's skin and WindowVerticalSprites gif file. No matter what value I set width for rwBodyLeft and rwBodyRight. The border of window won't changed at all. It seems fixed width size. Please help. Thanks in advance.
Gayathri
Top achievements
Rank 1
 answered on 30 Sep 2015
3 answers
78 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.

Vessy
Telerik team
 answered on 30 Sep 2015
5 answers
845 views

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.

Vessy
Telerik team
 answered on 30 Sep 2015
1 answer
125 views

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>​

Maria Ilieva
Telerik team
 answered on 30 Sep 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Andrey
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Andrey
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?