Hi!
My problem is, that I have a custom class with 3*2 fileds (DateTime and an integer value for 3 different things, so I want to see 3 series in my charts):
My viewmodel:
public class RiportViewModels
{
private DateTime _firstDate;
private DateTime _secondDate;
private DateTime _thirdDate;
public DateTime FirstDate
{
get => _firstDate;
set
{
if (value.Year < 1950) value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
_firstDate = new DateTime(value.Year, value.Month, 1);
}
}
public int FirstAmount { get; set; }
public DateTime SecondDate
{
get => _secondDate;
set
{
if (value.Year < 1950) value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
_secondDate = new DateTime(value.Year, value.Month, 1);
}
}
public int SecondAmount { get; set; }
public DateTime ThirdDate
{
get => _thirdDate;
set
{
if (value.Year < 1950) value = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
_thirdDate = new DateTime(value.Year, value.Month, 1);
}
}
public int ThirdAmount { get; set; }
}
My controller:
public class RiportController:Controller
{
[HttpGet]
public ActionResult Show()
{
return View();
}
[HttpPost]
public async Task<ActionResult> Show([DataSourceRequest] DataSourceRequest request)
{
List<RiportViewModels> result = new List<RiportViewModels>();
//here I fill up this list
return Json(result, JsonRequestBehavior.AllowGet);
}
}
And the Chart is empty:
@(Html.Kendo().Chart<RiportViewModels>()
.Name("chart")
.Title("My results")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.DataSource(x => x
.Read(read => read.Action("Show", "Riport"))
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Line().Style(ChartLineStyle.Smooth)
)
.Series(series =>
{
series.Line(model => model.FirstAmount, category => category.FirstDate).Name("My first amount");
series.Line(model => model.SecondAmount, category => category.SecondDate).Name("My second amount");
series.Line(model => model.ThirdAmount, category => category.ThirdDate).Name("My third amount");
})
.CategoryAxis(axis => axis
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0}"))
.Line(line => line.Visible(false))
.Max(30000)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
)
)
I would like to see 3 lines, on the X axis the dates showing only the year and the month, on the Y axis the amount field.
Can you please help me, why my chart is totally empty?
Many thanks
I am no longer able to resize columns in Google Chrome. I've noticed this issue in the past but it seemed to resolve itself. After updating to the latest release, it looks like the issue is back. I don't know if this has to do with the update, but it is a crucial feature that I need.
I don't think this is something on my end, as it looks to be broken in the demo while in chrome:
http://demos.telerik.com/aspnet-mvc/grid/column-resizing
Okey I have been breaking my head over this for hours now and using google but I can not seem to find the right solution
I have a chart that uses a data source and some javascript to send aditional data.
But the DateTime is always null in my controller how do I fix this
View code
@(Html.Kendo().DatePicker().Name("startField")
.Events(e => e.Change("startChanged"))
//.Format("dd-MM-yyyy")
.Value(DateTime.Now.Date.AddDays(-6))
)
@(Html.Kendo().Chart<
ECOnX.Web.Modules.Containers.Mvc.Models.Container.ContainerDataChartViewModel
>()
.Name("dataChart")
.Title(Html.Resource("Week"))
.ChartArea(chartArea => chartArea.Background("transparent"))
.DataSource(ds => ds.Read(read => read.Action("ChartContainerData_Read", "ContainerController").Data("containerReadData")))
...
.Tooltip(tooltip => tooltip.Visible(true).Shared(true))
)
<script>
$(document).ready(function () {
//change event
$("#btnRefresh").click(function () {
var startPicker = $("#startField").data("kendoDatePicker");
var converted = '"\\\/Date(' + startPicker.value().getTime() + ')\\\/"';
alert(converted)
var grid = $("#dataChart").data("kendoChart");
grid.dataSource.read();
});
});
function containerReadData() {
var startPicker = $("#startField").data("kendoDatePicker");
var converted = '"\\\/Date(' + startPicker.value().getTime() + ')\\\/"';
return {
id: $('#chartidfield').val(),
startDateTest: converted
};
}
function startChanged() {
var grid = $("#dataChart").data("kendoChart");
grid.dataSource.read();
}
</script>
And the controller
public ActionResult ChartContainerData_Read(string id, DateTime? startDateTest)
{
using (DataContext context = new DataContext())
{
DateTime startDate = DateTime.Now.Date.AddDays(-6);
DateTime endDate = DateTime.Now.Date.AddDays(7);
..
var json = Json(query.ToList(), JsonRequestBehavior.AllowGet);
return json;
}
}
When the field Changed is a certain field ("WelderStencil"). I want to get the value of the field and got the server to retrieve additional data. I want to then plug the data into the next cell in the grid "WelderName". Then tab to the next cell where the user is going to do some data entry. This is proving extremely complex for some reason. I was using the selectedDataItems but then realized that when adding a new row nothing is selected.
1) How do I get to the modified data on the DataSource Change Event
2) After Making a call to the Server and returning the data needed. How do I plug it into the datasource and have it refresh immediately
3) Then how do I tab or set focus to the 3rd column.
Thanks
Lee
Hello all,
So, as the title states I am having an issue where my grid's CRUD operations all perform GET requests instead of POST, PUT, and DELETE.
Here is my grid and datasource:
@model ERMgtProgram.Models.ProductViewModels.GradeGroupViewModel
@{
ViewBag.Title = "Grade Group";
}
<
h2
>@ViewBag.Title</
h2
>
@(Html.Kendo().Grid<
ERMgtProgram.Models.ProductViewModels.GradeGroupViewModel
>()
.Name("gradeGroupGrid")
.Columns(columns =>
{
columns.Bound(c => c.GradeGroups).Width(140);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
})
.ToolBar(toolbar =>
{
toolbar.Create();
})
.HtmlAttributes(new { style = "height: 700px;" })
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(new int[] { 10, 20, 50, 100, 250, 1000 })
.ButtonCount(5)).Navigatable()
.Selectable(selectable =>
{
selectable.Mode(GridSelectionMode.Multiple);
selectable.Type(GridSelectionType.Row);
})
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn);
})
.Filterable()
.Scrollable()
.DataSource(dataSource => dataSource
.Custom()
.Batch(true)
.PageSize(50)
.Schema(schema => schema.Model(m => m.Id(p => p.GradeID)))
.Transport(transport =>
{
transport.Read(read =>
read.Url("http://localhost:62664/api/gradegroup")
.DataType("jsonp")
.Type(HttpVerbs.Get)
);
transport.Create(create =>
create.Url("http://localhost:62664/api/gradegroup/create")
.DataType("jsonp")
.Type(HttpVerbs.Post)
);
transport.Update(update =>
update.Url("")
.DataType("jsonp")
.Type(HttpVerbs.Put)
);
transport.Destroy(destroy =>
destroy.Url("")
.DataType("jsonp")
.Type(HttpVerbs.Delete)
);
})
)
)
<
script
>
$(function() {
var grid = $("#gradeGroupGrid").data("kendoGrid");
grid.dataSource.transport.options.update.url = function (data) {
return "http://localhost:62664/api/gradegroup/update/" + data.models[0].GradeID;
}
grid.dataSource.transport.options.destroy.url = function(data) {
return "http://localhost:62664/api/gradegroup/delete/" + data.models[0].GradeID;
}
});
</
script
>
My datasource is making calls to a remote WebAPI. The read method works, and the data popluates the grid just fine; but, for my create, update, and destroy methods the datasource sends GET requests even after I specify the "Type" on the various transport methods. I have been at this for some time, and it seems like it should work, but it just doesn't change my request types.
I attached a screenshot of the response.
Any help would be greatly appreciated.
Ruben
Hi,
I am using a grid that initially only pulls the most commonly used data fields for each record in the grid (what I call level 1). Optionally, the user can expand a given row, in which case additional details are displayed in a nested grid, which I call level2. This works fine when a single row is expanded.
I have a method for the user to expand all of the rows currently displayed in the level1 grid. When this occurs, a call is made to the server for each row that is being expanded in order to pull the additional details for the level2 grid for each row. This is a very slow operation when I am displaying a large number of rows in the level1 grid (for example, 100 rows).
I am wondering if it is possible to query the data for all of the rows to be expanded in a single call to the server and then use the resulting data set to populate all of the level2 grids without having to make n round trips to the server for one record at a time. Querying and returning the data for all rows is not a problem. But since each level2 grid is a separate object, I am not sure how to point them all to the appropriate data on the client side, or if it is even possible.
Or is there a better approach to populating multiple level2 grids that would perform well?
Thanks!
I'm trying to get a decimal value into the Kendo numeric textbox from a viewmodel (MVC)
The value for the numeric textbox stays empty in Chrome but not in IE.
Besides that I notice a difference in de HTML output between IE and Chrome:
IE
<input name="Value" class="k-input" id="Value" role="spinbutton" aria-disabled="false" aria-readonly="false" aria-valuenow="125,1" style="display: none;" type="text" value="125,100" data-val-required="The Value field is required." data-val="true" data-role="numerictextbox" data-val-number="The field Value must be a number.">
CHROME
<input data-val="true" data-val-number="The field Value must be a number." data-val-required="The Value field is required." id="Value" name="Value" type="text" value="125,100" data-role="numerictextbox" role="spinbutton" style="display: none;" class="k-input" aria-valuenow="" aria-disabled="false" aria-readonly="false">
The initial value of the aria-valuenow is empty in Chrome where IE provides the actual value from the (view)model.
Probably I am doing something wrong and hopefully a simple fix - I am seeing the up triangle sprite overlaid on all sprite images when using a custom theme. As seen here.
I had gone through the process of creating a custom theme based off of material through here. In the generated kendo.custom.css file, I replaced all references to images (url('none/sprite.png'); with the proper path on my web server.
Everything looks fine with standard material theme:
<link href=
"https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css"
rel=
"stylesheet"
type=
"text/css"
/>
<link href=
"https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.material.min.css"
rel=
"stylesheet"
type=
"text/css"
/>
But the sprites become overlaid after I specify my custom theme:
<
link
href
=
"https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common-material.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"../../Content/kendo.custom.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
Hi there,
I'm having a problem with a DropDownListFor inside a modal popup when i have the filter option active.
Basically i have this piece of code.
@(Html.Kendo().DropDownListFor(c => c.StopId)
.DataTextField("Name")
.DataValueField("Id").OptionLabel(" ")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("ReadStop", "MasterData");
});
}).Filter(FilterType.Contains)
)
If i remove the Filter(FilterType.Contains) it works well, and if its outside of the modal (with the filter) it will work ok also.
Any sugestion? did anyone had the same problem?
Thanks!
M. Macias