Telerik Forums
UI for ASP.NET MVC Forum
7 answers
481 views
I've been fidleing around and can't seem to find exemple of how to customize Marker Shape base on Data Type with Remote Data.

I does work fine with Hard Coded Markers but it seems like we Only can Bind Location and Title with Remote Data.

Is there Any way to do this or will I have to do this the dirty way, with a foreach loop with the model collection n razor view?
Jonathan
Top achievements
Rank 1
 answered on 22 Jul 2016
2 answers
2.1K+ views

Hello, 

I have a problem  with validation message for DatePicker in UI for ASP.NET MVC. 

Property in model:

[DataType(DataType.Date, ErrorMessage = "Please enter a valid date. - TEST")]
public DateTime FromDateTime { get; set; }

Part of my cshtml file:

@(Html.Kendo().DatePickerFor(model => model.Filter.FromDateTime)
.Name("Filter.FromDateTime")
.Format(DateTimeFormats.DateTimeFormat)
.ParseFormats(DateTimeFormats.ParseFormat)                         
.HtmlAttributes(new {@class = "form-control", style = "width: 100%"})
)
@Html.ValidationMessageFor(model => model.Filter.FromDateTime, "", new { @class = "text-danger" })

This is part of the html page which is generated from the cshtml file:

<input name="Filter.FromDateTime" class="form-control k-input input-validation-error" id="Filter_FromDateTime" role="combobox" aria-disabled="false" aria-expanded="false" aria-invalid="true" aria-required="true" aria-describedby="Filter_FromDateTime-error" aria-owns="Filter_FromDateTime_dateview" style="width: 100%;" type="text" value="20. 4. 2016" data-val-required="Toto datum musí být vyplněno." data-val-date="The field FromDateTime must be a date." data-val="true" data-role="datepicker">

Image of the part of the html page from webbrowser is in file "datepickerError.png".

The problem is in the content of the validation message. Message in my model is "Please enter a valid date. - TEST" but message in html is "The field FromDateTime must be a date." 

I want to create localization of this message and change its content. How can I do it?

Thank you for your advice.

 

 

 

 

 

Jiri
Top achievements
Rank 1
 answered on 22 Jul 2016
4 answers
197 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
126 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
390 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
270 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
368 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
77 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
97 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
311 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?