Hello,
In my grid, i have a nested object and i would like to add the filterable feature on it (so it doesn't display [] object). I followed this tutorial:
- https://demos.telerik.com/aspnet-core/grid/filter-multi-checkboxes
The call to the web API is done, but I keep having a javascript error after the call
Uncaught TypeError: e.slice is not a
function
How can i fix this ? Thank you very much
Here is my code so far:
@(Html.Kendo().Grid<EnginViewModel>()
.Name(
"enginGrid"
)
.Columns(col =>
{
col.Bound(c => c.Famille) //EnginViewModel.Famille
.Title(
"Famille"
)
.Filterable(ftb => ftb.Multi(
true
).Search(
true
)
.DataSource(d => d.Read(r => r.Action(
"Familles"
,
"EditorTemplate"
).Data(
"{ field: 'Nom'}"
))))
.EditorTemplateName(
"Famille"
)
.ClientTemplate(
"#= data ? data.FamilleDesignation : \"\" #"
);
})
.ToolBar(toolbar =>
{
toolbar.Create().IconClass(
"fa fa-plus"
).Text(
" Créer un engin"
);
})
.Sortable(
true
)
.Filterable(f =>
{
f.Mode(GridFilterMode.Menu);
})
.DataSource(ds => ds.Ajax()
.ServerOperation(
true
)
.Model(m =>
{
m.Id(f => f.Id);
})
.Events(evt => evt.Error(
"onGridDatasourceError"
))
.Read(a => a.Action(
"Read"
,
"Engins"
).Type(HttpVerbs.Get))
.Create(a => a.Action(
"Create"
,
"Engins"
).Type(HttpVerbs.Post))
.Update(a => a.Action(
"Update"
,
"Engins"
).Type(HttpVerbs.Put))
.Destroy(a => a.Action(
"Delete"
,
"Engins"
).Type(HttpVerbs.Delete)))
)
Hello,
I'm able to set the color of the points on the chart (red and blue). I'm unable to get rid of the black-center of the points by setting the background color.
How do I set both color of points and background color (center of point) to same color?
Thanks.
js code:
----------
<script>
function getPointColor(point)
{
if (point.dataItem.Name === "Left Eye Sensor")
{
return "#af3d3c";
}
else
{
return "#3f48cc";
}
}
</script>
@(Html.Kendo().Chart<KendoScatterChart.Models.ChartScatterPlotPoint>(Model)
.Name("pressureDataChart")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Scatter().Labels(labels => labels.Visible(true)).Markers(markers => markers.Size(8))
)
.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
.Date()
.Title(title => title.Text("Date"))
)
.YAxis(y => y
.Numeric()
.Title(title => title.Text("Pressure [mmHg]"))
)
.Zoomable()
.Pannable()
)
C# code:
------------
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 v, string name, string color)
{
this.X = dateTime;
this.Y = v;
this.Name = name;
this.Color = color;
}
}
public class TempModel : ModelBase
{
// For KendoUI plotting.
public List<ChartScatterPlotPoint> DataPointList { get; set; }
public List<string> DateList { get; set; }
public string Name { get; set; }
public TempModel()
{
// for demo - color set by js-method.
DataPointList = new List<ChartScatterPlotPoint>(){
new ChartScatterPlotPoint(DateTime.Parse("12/18/2018"), 1, "Left Eye Sensor", "blue"),
new ChartScatterPlotPoint(DateTime.Parse("12/19/2018"), 2, "Left Eye Sensor", "blue"),
new ChartScatterPlotPoint(DateTime.Parse("12/20/2018"), 3, "Left Eye Sensor", "blue"),
new ChartScatterPlotPoint(DateTime.Parse("12/18/2018"), 1.5, "Right Eye Sensor", "green"),
new ChartScatterPlotPoint(DateTime.Parse("12/19/2018"), 2.5, "Right Eye Sensor", "green"),
new ChartScatterPlotPoint(DateTime.Parse("12/20/2018"), 3.5, "Right Eye Sensor", "green")
};
}
}
I just started using the controls and started with the test app to learn. I can't find out how to set the row height. The row height from the test app is way to large. How do I adjust the row height?
<
div
class
=
"row"
>
<
div
class
=
"col-xs-5 col-md-12"
>
@(Html.Kendo().Grid<
TelerikAspNetCoreApp1.Models.OrderViewModel
>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false);
columns.Bound(p => p.Freight);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:450px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
</
div
>
</
div
>
Hi,
I Using Kendo Chart,Previously worked without problems
But Now Chart is not Displayed,Only the contents are displayed in text
This Is My Code:
<div class="chart-wrapper">
@(Html.Kendo().Chart()
.Name("chart")
.Title("Site Visitors Stats /thousands/")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.SeriesDefaults(seriesDefaults => seriesDefaults
.Column().Stack(true)
)
.Series(series =>
{
series.Column(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
series.Column(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
})
.CategoryAxis(axis => axis
.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Line(line => line.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
)
)
</div>
Please Help Me.
Do you have any documentation on how the .Filterable mechanism works on a column in the TreeList? I had some success with this feature on a Grid but this control doesn't seem to require the same parameters.
Eg. columns.Add().Field(e => e.Description).Filterable(ftb => ftp...
How do you color a task to represent the percent completion?
The demo's at https://demos.telerik.com/aspnet-core/gantt/task-template and https://demos.telerik.com/aspnet-core/gantt/api show it but I couldn't tell how it was being done. I am looking to do something like these demo's do.
Thanks
Ken
Hello,
I have a nested grid which implements the sortable components. After reordering the rows, i would like to send the reordered grid to my controller so i can update the data in it. I'm not sure i'm using the right approach, but i'm trying to do this with a custom command from the toolbar. My question is simple, how can i send all my grid to my controller after i reordered the rows ? The goal is to change the property "Ordre" if my model. Thank you very much.
Here is my code so far:
//nested grid
<script id=
"questionsTemplate"
type=
"text/x-kendo-tmpl"
>
@(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.Bound(p => p.Ordre);
col.Command(cmd =>
{
cmd.Edit().Text(
" "
);
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"
);
toolbar.Custom().IconClass(
"fas fa-save"
).Text(
"Sauvegarder l'ordre"
).HtmlAttributes(
new
{ data_role =
"saveOrder"
});
//the custom button i'm trying to use to send my grid
})
.Events(e => e.Change(
"onChange"
))
.DataSource(ds => ds
.Ajax()
.ServerOperation(
false
)
.PageSize(16)
.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"
))
.ToClientTemplate()
)
</script>
<script>
var noHint = $.noop;
function placeholder(element) {
return
element.clone().addClass(
"k-state-hover"
).css(
"opacity"
, 0.65);
}
function onChange(e) {
var id = e.sender.element[0].id;
var grid = $(
"#"
+ id).data(
"kendoGrid"
);
skip = grid.dataSource.skip();
oldIndex = e.oldIndex + skip;
newIndex = e.newIndex + skip;
data = grid.dataSource.data();
dataItem = grid.dataSource.getByUid(e.item.data(
"uid"
));
grid.dataSource.remove(dataItem);
grid.dataSource.insert(newIndex, dataItem);
}
// I'm trying to send my grid to my controller with this method, but it keeps calling the delete method.
function onFamilleGridDetailExpand(e) {
e.detailRow.find(
"[data-role=saveOrder]"
).click(function () {
var grid = e.detailRow.find(
"[data-role=grid]"
).data(
"kendoGrid"
).saveChanges();
});
}
</script>
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");
})
))