Telerik Forums
UI for ASP.NET MVC Forum
3 answers
151 views

Is there any way to toggle tooltips for different tasks in the Gantt based on a field set in the model? We have some tasks that require tooltips, and I made a template for them that displays some model fields. When a top-level (i.e., summary) task does not contain children, I've added a task that displays No Tasks as its title (per user requirements). It is for these 'No Tasks' tasks that I would like to completely toggle off tooltips. Any suggestions?

Bozhidar
Telerik team
 answered on 25 Jul 2016
1 answer
122 views

So I've got a grid that I believe is all set up correctly. I've confirmed that the data is coming through, and I've even checked that the AJAX call returns a success with the "ToDataSourceResult" JSON data.

 

Unfortunately, the only problem is that the data doesn't display. This seems to only be an issue on read, as update, create and delete all work. Just can't retrieve the list of all items afterwards.

 

My controller action looks like this: 

public IActionResult Blog_Read([DataSourceRequest] DataSourceRequest request)
        {
            var blogs = _blogService.GetPosts().Select(post => new BlogPostModel
            {
                Id = post.Id,
                Title = post.Title,
                Author = post.Author,
                ShortDescription = post.ShortDescription,
                Contents = post.Contents,
                LastSaved = post.LastSaved,
                Published = post.Published,
                PublishedOn = post.PublishedOn
            });
            var result = blogs.ToDataSourceResult(request);
            return Json(result);
        }

 

And my Grid View looks like this:

@(Html.Kendo().Grid<BlogPostModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.Title);
                columns.Bound(p => p.Author).Width(120);
                columns.Bound(p => p.LastSaved).Width(120);
                columns.Bound(p => p.Published).Width(120);
                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
            })
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable.Mode(GridEditMode.PopUp))
            .Pageable()
            .Sortable()
            .Scrollable()
            .HtmlAttributes(new { style= "height:600px;"})
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(p => p.Id))
                .Create(update => update.Action("Blog_Create", "BlogAdmin"))
                .Read(read => read.Action("Blog_Read", "BlogAdmin"))
                .Update(update => update.Action("Blog_Update", "BlogAdmin"))
                .Destroy(update => update.Action("Blog_Delete", "BlogAdmin"))
            )
            .Deferred()
        ) 

 

The correct JSON is returned, no javascript errors in the console, so I'm a little confused as to what this could be. Any help would be greatly appreciated.

 

Adam
Top achievements
Rank 1
 answered on 24 Jul 2016
1 answer
523 views

The View is rendered empty as if there is an exception when Editor is generated.
The DropDownList is not populated in the Editor.
If the Bind is commented in the Editor, the view is rendered and the Editor display the dropdownlist of course with no content.
So The problem comes from the Bind.
Any Help will be appreciated

My Model
  public partial class TA_SITE_SIT
    {
    public TA_SITE_SIT()
      {
      TA_BUILDING_BUI = new HashSet<TA_BUILDING_BUI>();
      }
    [Key]
     public Guid GUID_SIT { get; set; }
    public string NAME_SIT { get; set; }
    [InverseProperty("GUID_SITNavigation")]
    public virtual ICollection<TA_BUILDING_BUI> TA_BUILDING_BUI { get; set; }
    }
  public partial class TA_BUILDING_BUI
    {
    [Key]
    public Guid GUID_BUI { get; set; }
    public Guid? GUID_SIT { get; set; }
    public string NAME_BUI { get; set; }
    [ForeignKey("GUID_SIT")]
    [InverseProperty("TA_BUILDING_BUI")]
    public virtual TA_SITE_SIT GUID_SITNavigation { get; set; }
    }

My Controller
    public async Task<IActionResult> Index()
      {
      ViewData["arSites"] = new SelectList(_context.TA_SITE_SIT, "GUID_SIT", "NAME_SIT");
      return View(await _context.TA_BUILDING_BUI.ToListAsync());
      }

My View
@(Html.Kendo().Grid<TA_BUILDING_BUI>(Model)
    .Name("Buildings")
    .Columns(columns =>
    {
        columns.Bound(model => model.NAME_BUI);
        columns.Command(command =>
        {
            command.Edit();
        });
    })
    .Editable(editable =>
    {
        editable.Mode(GridEditMode.PopUp);
        editable.TemplateName("BuildingEditor");
    })
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => model.Id(m => m.GUID_BUI))
    .Update(update => update.Action("Update", "Building"))
    .Destroy(destroy => destroy.Action("Destroy", "Building"))
    )
)
My Editor Template
@model TelAcces3.Models.TA_BUILDING_BUI
@(Html.Kendo().DropDownList()
          .Name("DropDownList")
          .DataTextField("NAME_SIT")
          .DataValueField("GUID_SIT")
          .BindTo(ViewBag.arSites)
)


Viktor Tachev
Telerik team
 answered on 22 Jul 2016
7 answers
512 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.2K+ 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
210 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
148 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
406 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
291 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
387 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
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
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
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
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?