I need to allow the user to select an item from the TreeList then go to its detail. I don't believe there is a double-click event. So then, I assume I'll need to put a "Details" button on the Grid. Do you have an example how I do this? I assume we do something like this (doesn't work):
@(Html.Kendo().TreeList<
GsiPortal.Models.Group
>()
.Name("treelist")
.Columns(columns =>
{
columns.Add().Command(c => { c.Custom().Text("Detail");}).HtmlAttributes(new { style = "text-align: center;" });
columns.Add().Field(e => e.Name).Width(220).TemplateId("icon-template");
columns.Add().Field(e => e.Description);
columns.Add().Field(e => e.CurrentStatus.Name).Title(nameof(Group.Status));
columns.Add().Field(e => e.AddTimestamp).Width(220).Title("Timestamp").Format("{0:MMMM d, yyyy}");
columns.Add().Command(c => { c.CreateChild().Text("Add"); }).HtmlAttributes(new { style = "text-align: center;" });
columns.Add().Command(c => { c.Edit(); }).HtmlAttributes(new { style = "text-align: center;" });
columns.Add().Command(c => { c.Destroy(); }).HtmlAttributes(new { style = "text-align: center;" });
})
.Editable(e => e.Mode(TreeListEditMode.PopUp).TemplateName("GroupEdit"))
.Selectable(selectable => selectable.Mode(TreeListSelectionMode.Single))
.DataSource(dataSource => dataSource
.ServerOperation(false)
.Create(create => create.Action("CreateJson", "Groups"))
.Read(read => read.Action("AllJson", "Groups").Data("groupsRead"))
.Update(update => update.Action("UpdateJson", "Groups"))
.Destroy(delete => delete.Action("DestroyJson", "Groups"))
.Model(m =>
{
m.Id(f => f.Id);
m.ParentId(f => f.ParentId);
m.Expanded(true);
m.Field(f => f.Name);
m.Field(f => f.Description);
m.Field(f => f.AddTimestamp).Editable(false);
})
.Events(events =>
{
events.Error("onError");
})
))
I have a Group object that has an [int Status] property. I get a list of Status values from a Lookup object that has a Name and an EnumIndex value. The Status value needs to be set from the selected Lookup object's EnumIndex value. Form & Drop down definition:
Groups are defined in TreeList:
@(Html.Kendo().TreeList<
GsiPortal.Models.Group
>()
.Name("treelist")
.Columns(columns =>
{
columns.Add().Field(e => e.Name).Width(220).TemplateId("icon-template");
columns.Add().Field(e => e.Description);
columns.Add().Field(e => e.AddTimestamp).Width(220).Title("Timestamp").Format("{0:MMMM d, yyyy}");
columns.Add().Command(c => { c.CreateChild().Text("Add"); }).HtmlAttributes(new {style = "text-align: center;"});
columns.Add().Command(c => { c.Edit(); }).HtmlAttributes(new { style = "text-align: center;" });
columns.Add().Command(c => { c.Destroy(); }).HtmlAttributes(new { style = "text-align: center;" });
})
.Editable(e => e.Mode(TreeListEditMode.PopUp).TemplateName("GroupEdit"))
.Selectable(selectable => selectable.Mode(TreeListSelectionMode.Single))
.DataSource(dataSource => dataSource
.ServerOperation(false)
.Create(create => create.Action("CreateJson", "Groups"))
.Read(read => read.Action("AllJson", "Groups")
.Data("groupsRead"))
.Update(update => update.Action("UpdateJson", "Groups"))
.Destroy(delete => delete.Action("DestroyJson", "Groups"))
.Model(m =>
{
m.Id(f => f.Id);
m.ParentId(f => f.ParentId);
m.Expanded(true);
m.Field(f => f.Name);
m.Field(f => f.Description);
m.Field(f => f.AddTimestamp).Editable(false);
})
))
<
script
>
var groupId = Number(@(ViewBag.GroupId));
function groupsRead() {
return { id: groupId };
}
</
script
>
Editing is done in this PopUp:
@model GsiPortal.Models.Group
<div class="container-fluid">
<div class="col-xs-offset-1">
<h4>Group</h4>
<form class="form-horizontal" asp-action="Edit" asp-controller="Groups">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Id" />
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Description" class="control-label"></label>
<input asp-for="Description" class="form-control" />
<span asp-validation-for="Description" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ImageUrl" class="control-label"></label>
<input asp-for="ImageUrl" class="form-control" />
<span asp-validation-for="ImageUrl" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Status" class="control-label"></label>
@(Html.Kendo().DropDownListFor(x => x.Status)
.DataTextField("Name")
.DataValueField("EnumIndex")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetStatus", "Groups");
});
})
.HtmlAttributes(new { style = "width: 75%" })
)
</div>
</form>
</div>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Controller Method:
/// <summary>
///
/// </summary>
/// <param name="request"></param>
/// <param name="grp">DO NOT RENAME THIS PARAM TO "group" as it will cause the control to not submit</param>
/// <returns></returns>
[AcceptVerbs(
"Post"
)]
public
async Task<JsonResult> UpdateJson(
[DataSourceRequest] DataSourceRequest request,
Group grp)
{
if
(ModelState.IsValid)
{
customerDbContext.Update(grp);
await customerDbContext.SaveChangesAsync();
}
return
Json(await
new
[] { grp }.ToTreeDataSourceResultAsync(request, ModelState));
}
The drop down looks good with the list of Status values but my problem is, the Group's Status value does not change. What did I miss?
Thanks, Joel
I have an incremental search using a Kendo UI DropdownList working in an ASP.NET Core application. I would like to have multiple columns in the display or at least to group the results. So that I could nicely format it showing products they are searching for grouped by category with a category image.
Sort of like :
<image> Category 1
Selection 1
Selection 2
<image> Category 2
Selection 1
Selection 2
etc.
Are there any demos demonstrating this?
Thanks
Do you have Demos that point at Core 2.2? If not, what is their ETA? I'm no longer able to run the Visual Studio Demo code.
Thanks, Joel.
All of your examples don't show me how to load the TreeList with data from a specified ParentId. Correct me if I'm wrong, but I believe this is the load order (MVC):
My read definition looks like this:
.Read(read => read.Action("AllJson", "Groups"))
My problem is I don't see where it lets me specify which root node I want it to initialize the Read from. If I have 200 Hierarchies and I want #134 loaded into the TreeList how do I specify that?
Also, I must load a Hierarchy based on a person's authorization. That may mean that they are only able to see a branch from a Hierarchy. How do I accomplish this?
It would make sense to pass the index of a parent node something like this (not real):
Read(read => read.Action("AllJson", "Groups", ViewBag.ParentId))
Thanks in advance for your help,
Joel
Hi,
Using UI for .net core.
I have a requirement to show multi days events in week view,
e.g Start 27/12/18 10:00 AM - End 29/12/18 13:00 PM. (2 days and 3 hours)
So the event should span on those multi days in the week view table part (but not as all day events in the scheduler top row)
The default scheduler week view behavior prevent this by making the event into an all day event.
According to this link :
https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/custom-views/custom-view
I can create a custome view but i cant seem to find an example on how to
create custom view that inherits from week view and that can show events that span for multi days.
I checked out other related forum questions but I cant seem to find an answer, for example:
https://www.telerik.com/forums/show-all-day-event-in-the-main-part-of-week-view
Looking forward for your answers.
Thank you.
Hello,
I'm trying to integrate the sortable component into a grid that is a ClientDetailTemplateId. Is it possible to do that ? Here is my code so far (this grid is the client detail, a grid within a grid)
<script>
@(Html.Kendo().Grid<PointVerificationViewModel>()
.Name("pointGrid_#=Id#")
.Columns(col =>
{
col.Bound(p => p.Libelle);
col.Bound(p => p.EstBloquant)
.ClientTemplate("\\#: data && data.EstBloquant ? 'OUI' : 'NON' \\#");
col.Command(cmd =>
{
cmd.Edit().Text(" ").UpdateText(" ").CancelText(" ").IconClass("fa fa-pencil-alt").UpdateIconClass("fa fa-check").CancelIconClass("fa fa-ban");
cmd.Destroy().Text(" ").IconClass("fa fa-times");
});
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.ToolBar(toolbar =>
{
toolbar.Create().IconClass("fa fa-plus").Text("Créer un point de vérification");
})
.DataSource(ds => ds
.Ajax()
.ServerOperation(false)
.Model(m =>
{
m.Id(p => p.Id);
})
.Read(a => a.Action("Read", "PointVerification", new { familleId = "#=Id#" }).Type(HttpVerbs.Get))
.Create(a => a.Action("Create", "PointVerification", new { familleId = "#=Id#" }).Type(HttpVerbs.Post))
.Update(a => a.Action("Update", "PointVerification").Type(HttpVerbs.Put))
.Destroy(a => a.Action("Delete", "PointVerification").Type(HttpVerbs.Delete))
)
.Sortable()
.ToClientTemplate()
)
@(Html.Kendo().Sortable()
.For("#pointGrid_#=Id#")
.Filter("table > tbody > tr")
.Cursor("move")
.HintHandler("noHint")
.PlaceholderHandler("placeholder")
.ContainerSelector("#pointGrid_#=Id# tbody")
.Events(events => events.Change("onChange"))
)
</script>
i've got an invalide template error with that code.
Thanks a lot.
Hi,
I want to add subtext to my charts. Lets say I have this bar chart with a title legend etc.
This is the main code:
@model Model1
<
div
class
=
"demo-section k-content wide"
>
@(Html.Kendo().Chart<
App.Models.Model2
>()
.title ()
.datasource()
.series()
.catAxis()
.valAxis()
.valaxis()
)
How can I add a span properly with the data from Model2?
Hello,
I'm working with scatter plot.
I'm able to set the color of the series of data points plotted and fill them in.
How do I get the data-point-color in the bottom legend to match the color of the data-points?
Or more simply, how do I set the color of the data-point-color in the x-axis legend?
The cshtml code:
<div class="demo-section k-content wide">
@(Html.Kendo().Chart<Injectsense.Models.ChartScatterPlotPoint>(Model.DataPointList)
.Name("pressureDataChart")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom))
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Scatter().Labels(labels => labels.Visible(false)).Markers(markers => markers.Size(6))
)
.DataSource(dataSource => dataSource
.Group(group => group.Add(model => model.Name))
)
.Series(series =>
{
series.Scatter(model => model.X, model => model.Y).ColorHandler("getPointColor").Markers(markers => markers.Background("getPointColor"));
})
.XAxis(x => x
.Title(title => title.Text("Date"))
.Date()
)
.YAxis(y => y
.Numeric()
.Title(title => title.Text("Pressure [mmHg]"))
)
.Zoomable()
.Pannable()
)
</div>
The data point:
public class ChartScatterPlotPoint
{
public DateTime X { get; set; }
public double Y { get; set; }
public string Name { get; set; }
public string Color { get; set; }
public ChartScatterPlotPoint(DateTime dateTime, double value, string name, string color)
{
this.X = dateTime;
this.Y = value;
this.Name = name;
this.Color = color;
}
}
The image is attached showing the area of concern.
Thank you for your help on this.
-jim