Telerik Forums
UI for ASP.NET MVC Forum
4 answers
200 views

Hello.

I have the following DataTable (dataTable.JPG attached file), I want to generate a chart that looks similar to the attached file (Chart.png)

It has up to 3 levels of grouping as you can see in the chart, how can I accomplish this in charts for ASP.NET MVC?

Thank you.

 

 

Misho
Telerik team
 answered on 22 Jul 2016
1 answer
134 views

Hi,

I'm having a problem with the aggregates on my server-bound grid. Here's my code:

@(Html.Kendo().Grid(Model[j].BusinessUnitTimesheets)
    .Name("BU_Time" + j)
        .DataSource(d => d
            .Server()
            .Aggregates(ag =>
            {
                ag.Add(a => a.Amount).Sum();
                ag.Add(a => a.Hours).Sum();
            })
        )
    .Columns(columns =>
    {
        columns.Bound(c => c.BusinessUnitId)
            .Hidden();
        columns.Bound(c => c.BusinessUnitCodeAndName)
            .Title("Business Unit")
            .ClientFooterTemplate("Total");
        columns.Bound(c => c.Hours)
            .Format("{0:N2}")
            .HtmlAttributes(new { style = "text-align:right;" })
            .ClientFooterTemplate("#=sum#")
            .FooterHtmlAttributes(new { style = "text-align:right;" });
        columns.Bound(c => c.Amount)
            .Width(100).Format("{0:N2}")
            .HtmlAttributes(new { style = "text-align:right;" })
            .ClientFooterTemplate("#=kendo.toString(sum,'N2')#")
            .FooterHtmlAttributes(new { style = "text-align:right;" });
    })
    .DetailTemplate(
        @<text>
        @(Html.Kendo().Grid(item.UserTime)
            .Name(string.Format("BU_U_Time{0}_{1}", j, item.BusinessUnitId))
            .DataSource(d => d
                .Server()
                .Aggregates(ag =>
                {
                    ag.Add(a => a.Hours).Sum();
                    ag.Add(a => a.Amount).Sum();
                })
            )
            .Events(e => e.DataBinding("splitBound"))
            .Columns(columns =>
            {
                columns.Bound(c => c.UserName)
                    .Title("User");
                columns.Bound(c => c.Hours)
                    .Format("{0:N2}")
                    .HtmlAttributes(new { style = "text-align:right;" })
                    .ClientFooterTemplate("#=sum#")
                    .FooterHtmlAttributes(new { style = "text-align:right;" });
                columns.Bound(c => c.Amount)
                    .Width(100)
                    .Format("{0:N2}")
                    .HtmlAttributes(new { style = "text-align:right;" })
                    .ClientFooterTemplate("#=kendo.toString(sum,'N2')#")
                    .FooterHtmlAttributes(new { style = "text-align:right;" });
            })
        )
        </text>
    )
)

 

I've attached a screenshot of the rendered grid. The totals are in the wrong columns for the parent grid, and both parent and child have sums that are zero.

 

Thanks

Pavlina
Telerik team
 answered on 21 Jul 2016
3 answers
394 views

Hi, what am I doing wrong here?  I can get the data out properly, but it won't sort.  It seems to work the same in both MVC (razor) and in javascript.
It should have all the names (Resource) in alpha order... but it seems to be sorting by the PriorityColorString

MVC

@(Html.Kendo().Chart<Model>()
              .Name("Resources")
              .Title("Resource")
                .Legend(leg => leg.Visible(false))
              .DataSource(ds => ds.Read(
                      read => read.Action("GetAlertResources", "Hierarchy"))
                          .Group(grp =>
                          {
                              grp.Add(x => x.AlertTypeCount);
                          }
                        ).Sort(x => x.Add(srt => srt.Resource)))
                        //)
              .ChartArea(chart => chart
                  .Width(600).Height(600))
              .SeriesDefaults(seriesDefaults =>
                seriesDefaults
                .Bar().Gap(0)
                .Stack(true))
              .Series(series =>
              {
                  series.Bar(x => x.AlertTypeCount)
                      .Labels(lab => lab.Position(ChartBarLabelsPosition.Center).Opacity(0).Visible(true))
                      .Field("AlertTypeCount")
                      .CategoryField("Resource")
                      .ColorField("ColorField");
              })
                .CategoryAxis(ct => ct.MajorGridLines(maj => maj.Visible(false)))
              .Tooltip(tooltip => tooltip
                  .Visible(true)
                      .Template("<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Priority Color:</span> #= dataItem.ColorText #</p>" +
                                "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Resource:</span> #= dataItem.Resource #</p>" +
                                  "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Number of Records:</span> #= value #")
      ))

javascript:

var data =
[
{ AlertTypeCount:1,ColorField:"#D62728",ColorText:"1=High",PriorityColorString:"1",Resource:Albert },
{ AlertTypeCount:6,ColorField:"#BCBD22",ColorText:"2=Medium",PriorityColorString:"2",Resource:Simon },
{ AlertTypeCount:12,ColorField:"#FF7F0E",ColorText:"4=Other",PriorityColorString:"4",Resource:Theodore },
{ AlertTypeCount:9,ColorField:"#BCBD22",ColorText:"3=Low",PriorityColorString:"3",Resource:Albert },
{ AlertTypeCount:30,ColorField:"#D62728",ColorText:"1=High",PriorityColorString:"1",Resource:Albert },
{ AlertTypeCount:10,ColorField:"#D62728",ColorText:"1=High",PriorityColorString:"1",Resource:Theodore },
{ AlertTypeCount:3,ColorField:"#1F77B4",ColorText:"2=Low",PriorityColorString:"3",Resource:Simon },
{ AlertTypeCount:1,ColorField:"#1F77B4",ColorText:"3=Low",PriorityColorString:"3",Resource:Pedro },
{ AlertTypeCount:4,ColorField:"#BCBD22",ColorText:"2=Medium",PriorityColorString:"2",Resource:Marvin }
]
 
$("#chart").kendoChart({
            dataSource: {
                transport: {
                    read: {
                        url: "/Hierarchy/GetAlertResources",
                        dataType: "json"
                    }
                },
                group:
                [
                    { field: "AlertTypeCount" }
                ],
                sort:
                [
                    { field: "Resource", dir: "asc" },
                ]
            },
            chartArea: {
                width: 600,
                height: 600
            },
            title: {
                align: "left",
                text: "Resources"
            },
            legend: {
                visible: false
            },
            seriesDefaults: {
                type: "bar",
                gap: 0.1,
                stack: true
            },
            series: [{
                field: "PriorityColorString",
                categoryField: "Resource",
                colorField: "ColorField",
                labels: {
                    visible: true,
                    opacity: 0,
                    position: "center"
                }
            }],
            categoryAxis: {
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Priority Color:</span> #= dataItem.ColorText #</p>" +
                        "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Resource:</span> #= dataItem.Resource #</p>" +
                        "<p style='width: 200px; text-align: left;'><span style='display: inline-block; font-weight: bold;'>Number of Records:</span> #= value #"
            }
        });

GenXisT
Top achievements
Rank 1
 answered on 21 Jul 2016
6 answers
278 views

Hello,

We are currently developing with the Diagram control.

I have a question, how do we customize the ribbon's toolbar above it? (see screenshot)

I am reading conflicting tutorials about this, some say it is a WIDGET, but then i read toolbar in some places.

Is there an example somewhere how to, for example add a button with an customized onclick?

Gr from John

Niko
Telerik team
 answered on 21 Jul 2016
3 answers
376 views

Hello!I have a problem, where I try to insert color picker in grid

 

.CSHTML:

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id).Title(Resources.Resource.Id);
        columns.Bound(p => p.Name).Title(Resources.Resource.Name);
        columns.Bound(p => p.Text).Title(Resources.Resource.Text);
        columns.Bound(p => p.Color).Title(Resources.Resource.Color)
                                   .ClientTemplate("<div style='background-color: #: Color#;padding:10px;  border: 1px solid black;'></div>")
                                   .EditorTemplateName("Color");
        columns.Bound(p => p.Description).Title(Resources.Resource.Description);
        columns.Command(command => { command.Edit(); });
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(m => m.Id);
            model.Field(m => m.Id).Editable(false);
            model.Field(m => m.Name).Editable(false);
        })
    .Read(read => read.Action("Read", "OrderStatus"))
    .Update(update => update.Action("Update", "OrderStatus"))
    )
)

Color Editor Template:

@model string
@(Html.Kendo().ColorPickerFor(

m => m))

As a result i get any nonsence (1.jpg)

I want to get this(2.png)

Please, help me.

any nonsense
Danail Vasilev
Telerik team
 answered on 21 Jul 2016
2 answers
80 views

My grid shows only 1 page of data until I apply a filter and then clear it. Having done that, it instantly shows all 28 pages.

 

1. does anyone have any idea what might be causing this?

 

2. is there any way to get it to recalculate the page list at the bottom of the grid after loading using a javascript command?

 

Here is the grid:

 

    @(Html.Kendo().Grid<tpnconnect.com.AdminService.DeviceDataEdit>()
        .Name("deviceGrid")
        .Columns(columns =>
        {
            columns.Bound(d => d.DepotNumber).Width(60);
            columns.Bound(d => d.DeviceName).Width(150);
            columns.Bound(d => d.DeviceAlias).Width(150);
            columns.Bound(d => d.AutoMode).Width(100).Title("Auto Mode").EditorTemplateName("AutoMode").ClientTemplate("#:AutoModeDisplay#");
            columns.Bound(d => d.CreatedDate).Title("Created").Format("{0:dd-MMM-yy HH:mm}").Width(80);
            columns.Bound(d => d.Active).Width(40).Filterable(true);
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable()
        .Sortable()
        .Filterable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(d => d.DeviceID))
            .PageSize(20)
            .ServerOperation(false)
            .Events(events => events.Error("error_handler"))
            .Create(update => update.Action("AddDevice", "Printer"))
            .Read(read => read.Action("GetAllDevicesForEdit", "Printer"))
            .Update(update => update.Action("UpdateDevice", "Printer"))
            .Destroy(update => update.Action("DeleteDevice", "Printer"))
        )
    )

Graham
Top achievements
Rank 2
Iron
Iron
 answered on 21 Jul 2016
1 answer
102 views

Hi,

I have a chart,

Purpose of the chart will say total of male & female, based on the country & nationality wise. Successfully generate the chart
Here is the fiddle, i created.
jsFiddle example

  For the reference
How to categories the series label.

I am trying to position the series name similar like this (Capture.JPG)..

Suggest me how can i generate

 

@(Html.Kendo().Chart()
    .Name("chart")
    .Title("Gender Summay based on the total")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .Series(series =>
    {
        series.Column(new double[] { 54, 5 }).Name("2010 Bah")
         .Labels(labels =>
        labels.Template("#= series.name #")          
        .Background("transparent")
        .Visible(true));
        series.Column(new double[] { 24, 21 }).Name("2010 Non Bah").Labels(labels =>
       labels.Template("#= series.name #")
       .Background("transparent")
       .Visible(true));
 
        series.Column(new double[] { 54, 5 }).Name("2011 Bah").Labels(labels =>
       labels.Template("#= series.name #")
       .Background("transparent")
       .Visible(true));
 
        series.Column(new double[] { 24, 21 }).Name("2011 Non Bah")
         .Labels(labels =>
        labels.Template("#= series.name #")           
        .Background("transparent")
        .Visible(true));
 
        series.Column(new double[] { 10, 52 }).Name("2012 Bah")
        .Labels(labels =>
       labels.Template("#= series.name #")
       .Background("transparent")
       .Visible(true));
 
        series.Column(new double[] { 12, 65 }).Name("2012 Non Bah")
        .Labels(labels =>
        labels.Template("#= series.name #")
        .Background("transparent")
        .Visible(true));
    })
    .CategoryAxis(axis => axis
        .Categories("Male", "FeMale")
 
        .Justify(true)
    )
 
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0}")
        .Template("#= series.name # : #= value #")
    )
    )

Iliana Dyankova
Telerik team
 answered on 21 Jul 2016
1 answer
320 views

I have a requirement where the user needs to be able to Clone or Add & Clone lots and lots of records from within the modal Kendo window. Currently, there are only two buttons at the bottom of the window: Update and Cancel. I've looked all over the web and the support area here, but cannot find any example or docs on how to accomplish adding custom actions and buttons within the modal Kendo window.

  • The user wants to be able to fill out a new form, click Add & Clone, update the current form that has nearly identical values, then click Add & Clone again, etc. etc.
  • The user wants to be able to open an existing form, click Clone, update the current form that has nearly identical values, then click Add & Clone again, etc. etc.

As you can see, the basic scenario is pretty straightforward and very handy for working with lots of similar data. The form should NOT close, but stay open after the submit occurs.

How can I achieve this functionality within a modal Kendo window control (using the toolbar)?

Thanks.

Danail Vasilev
Telerik team
 answered on 20 Jul 2016
4 answers
238 views

Hello,

I created a custom editor for my Scheduler, and I now need to add some custom validation.
My goal is to ensure that:

1) The start and end date must be in the same day (cannot spawn multiple days)
2) The smaller possible unit is 15 min. So the valid hours are xx:00, xx:15, xx:30 and xx:45.

A valid Input would for example be:
from 01.01.2000 11:15
to 01.01.2000 22:45

Invalid examples would be:
from 01.01.2000 11:15
to 02.01.2000 08:45 (not the same day)

from 01.01.2000 11:23 (not multiple of 15min)
to 01.01.2000 14:30

How can I achieve this behavior?
Cheers

AKROS
Top achievements
Rank 1
 answered on 20 Jul 2016
1 answer
100 views

Hi there,

Were using a custom filter for statuses.

Its working fine when were only using this in the grid properties:

 

1.//Column code in grid
2. 
3.columns.Bound(la => la.StatusName)
4..Filterable(s => s.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetStatuses", "Status").Data("{ field: 'StatusName' }"))))
5. 
6.//Grid propert
7..Filterable(ftb => ftb.Mode(GridFilterMode.Menu))

 

but when i add the .ColumnMenu() property to the grid the filtering on the status column doesnt show at all. I need the show/hide column functions in the columnmenu but cant sacrifice the custom status filter.

 

The serverside code for the datasource looks like this:

 

01.public ActionResult GetStatuses(string field)
02.{
03.    var statuses = Context.GetAll<Status>(false);
04. 
05.    var viewModels = (from s in statuses
06.                      select new StatusVm() { StatusName = s.Key })
07.        .ToList();
08. 
09.    return Json(viewModels, JsonRequestBehavior.AllowGet);
10.}

 

Am i missing something obvious here?

 

Thankful for any input.

 

 

Konstantin Dikov
Telerik team
 answered on 20 Jul 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?