In my cshtml view, I have this kendo mvc grid control below.
@(Html.Kendo().Grid<MyModel>()
.Name("mygriddata")
.Columns(column =>
{
column.Bound(model => model.MyData).Title("No.").....
})
.Pageable(x => x.PageSizes(true).ButtonCount(3).Responsive(false))
.AutoBind(false)
.Filterable()
.Sortable(x => x.Enabled(true))
.Resizable(resizable => resizable.Columns(true))
.Scrollable(x => x.Height("auto"))
.PersistSelection()
.HtmlAttributes(new { style = "height: 50vh; margin-left:10px", @class = "form-group" })
.NoRecords()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Model(model =>
{
model.Id(item => item.ID);
})
.Read(read => read.Action("MyActionMethod", "MyController"))
)
)
In in my controller, I have this async task action method.
public async Task<JsonResult> MyActionMethod([DataSourceRequest] DataSourceRequest request)
{
var data = await _service.GetData();
var model = data.Select((item, index) => new MyModel
{
MyData = ......
});
return new JsonResult { Data = model.ToDataSourceResultAsync(request), MaxJsonLength = int.MaxValue, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
Then, when accessing the view, I got this error. How to set up the Kendo mvc grid control in this case?
Message: The asynchronous action method 'MyActionMethod' returns a Task, which cannot be executed synchronously.
I am trying to update my spreadsheet based on the jsonData i get from my controller.
Controller data:
public ActionResult GetDoubleCombinations(Telerik.Web.Spreadsheet.Workbook jsonData, int id) { foreach (var sheet in jsonData.Sheets) { var columnCount = sheet.Columns.Count; var rowCount = sheet.Rows.Count; for (int i = 2; i < columnCount; i++) { var expressionTop = expressionService.GetExpressionByName(sheet.Rows[1].Cells[i].Value.ToString(), id); var parameterTop = expressionTop.FK_ParameterID; for (int j = 2; j < rowCount; j++) { var expressionLeft = expressionService.GetExpressionByName(sheet.Rows[j].Cells[1].Value.ToString(), id); var parameterLeft = expressionLeft.FK_ParameterID; if (parameterTop == parameterLeft) { var position = sheet.Rows[i].Cells[j]; position.Enable = false; position.Background = "#d3d3d3"; } } } } return Json(new { success = true, data = jsonData }); }
this is what i get in my view:
function getDoubleCombinations() { var spreadsheet = $("#matrix").data("kendoSpreadsheet"); const urlParams = new URLSearchParams(window.location.search); const id = urlParams.get('analysisId'); $.ajax({ url: "@Url.Action("GetDoubleCombinations", "Matrix")", data: JSON.stringify({ jsonData: spreadsheet.toJSON(), id: id }), contentType: "application/json", type: "POST", success: function (response) { spreadsheet.fromJSON(response.data); }, error: function () { alert("Error loading data."); } }); }
I use "spreadsheet.fromJSON" to update my spreadsheet.
My spreadsheet:
@model Telerik.Web.Spreadsheet.Workbook @(Html.Kendo().Spreadsheet() .Name("matrix") .HtmlAttributes(new { style = "width:100%" }) .BindTo(Model) .Toolbar(t => { t.Home(h => { h.Clear(); h.ExportAs(); }); t.Data(false); t.Insert(false); }) )
My problem is, that the spreadsheet is not updated.
In the attachement i have a screenshot of my jsonData.
Hi,
After update from 2023.3.718 to 2024.1.319 I could no longer see icons. I understand that there has been a switch to svg icons.
I use icons like this in grid columns
columns.Bound(p => p.Id).ClientTemplate("" +
"<a href='" + @Url.Action("Details", "Orders", new { id = "#=Id#" }) + "'target='_blank' '><i title ='Show details' class='k-icon k-i-detail-section'></i></a>")
Could you please modify code above so I can understand how to use svg icons instead?
/Br. Anders
Is there a way to determine what kind of kind of control you have using JavaScript. For example , if you have a form with several different kendo controls
.data("kendoNumericTextBox")
.data("kendoComboBox")
.data("kendoButton")
I only have the name and id of the control. Is there a way to determine what kind of kendo control that is represented.
I have tried looking through the jquery selection but I do not see any thing that indicates whether the selection is a kendoNumericTextBox, kendoComboBox etc...
I have a Kendo tabstrip with partial views. When I click on the tab, the partial views are loaded. But I need to set the focus() and/or tabindex to a specific element in the partial view, for example the first text box. I tried setting the tabindex to 1 in the partial view. But that does Not seem to work.
There seems to be 2 TabStrip methods for loading a partial views ?
.LoadContentFrom("CustomerEdit"
... and .Content(@<text> @Html.Partial("OrdersEdit"
I think the LoadContentFrom is Ajax.
Using Content(@<text> @Html.Partial("OrdersEdit
"**... how can I set the focus to my first textbox on the the OrdersEdit.. I tried setting tabindex =1 and tried this:
$(document).ready(function () {
$('#firstTextBox').focus();
}
But does not work.
Hi! I have a Kendo UI Filter with a column bound with a DropDownList. Everything works fine, except the ExpressionPreview gives me "[object Object]". I read that I could use the PreviewFormat, but I have no clue about how that works if it's not for numeric values. Your documentation is very thin about the subject. Can you tell me how could I see the property set as DataTextField in the preview? Or at least the DataValueField.
My razor looks like :
@(Html.Kendo().Filter<OrderSearchBindingModel>()
.Name("filter")
.ApplyButton()
.ExpressionPreview()
.MainLogic(FilterCompositionLogicalOperator.Or).Fields(f =>
{
f.Add(x => x.Symbole).Label("My values list").Operators(c => c.String(x =>
x..Contains("Contient")).EditorTemplateHandler("getSymboleList")
}).DataSource("source"))
And the script containing the dropdown logic is like this :
.kendoDropDownList({
dataTextField: "SymboleDisplayName",
dataValueField: "Symbole",
dataSource: {
type: "json",
transport: {
read: "https://myodataurl.com/symbols/getSymbols"
},
schema: {
data: "value"
}
}
});
Note that my datasource is an OData query, so I defined a schema with data: "value" in my kendo.data.DataSource object as well as type: "json". The type is aslo specified in the transport.read preperties datatype: "json"
This is for ASP.NET MVC
I have a grid that on scrolling hits the controller and does true sql paging. So each time you scroll it hits the controller that calls sql and gets the next 100 rows of data. This was working fine until we upgraded from a 2019 version of Kendo to the 2024.1.130.545 version. It all still works but as you scroll it gets slower and slower with each group of 100, the sql calls are all still fast but loading the data on the screen slows down exponentially on each set of 100.
This is the grid code we have set.
.NoRecords(x => x.Template("<div class='empty-grid' style='height: 300px; padding-top: 50px'>There are no units that match your search criteria. <br /><br /> Please expand your search criteria and try again.</div>"))
.Sortable(sortable => sortable.Enabled(true).SortMode(GridSortMode.SingleColumn))
.ColumnMenu()
.Resizable(resize => resize.Columns(true))
.Filterable(filterable => filterable
.Mode(GridFilterMode.Row)
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains")
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
.DoesNotContain("Does Not Contain")
.EndsWith("Ends WIth")
.IsEmpty("Is Empty")
))
)
.Reorderable(reorder => reorder.Columns(true))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))
.Scrollable(scrollable => scrollable.Endless(false).Height(600))
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("UnitSearchExport.xlsx")
.Filterable(true)
.AllPages(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Functions"))
)
.DataSource(dataSource => dataSource
.Ajax()
.AutoSync(false)
.ServerOperation(false)
.Model(model =>
{
var Modelinfo = new Infinity.Vehicle.Inventory.Vehicles_Listing.VehicleListInfo();
var Stock_Number = Modelinfo.Stock_Number;
model.Id(p => Stock_Number);
}))
.Events(e => e
.Filter("UnitInventoryListInfiniteScrollGrid_OnFiltering")
.Sort("UnitInventoryListInfiniteScrollGrid_OnSorting")
.ExcelExport("UnitInventoryListInfiniteScrollGrid_OnExcelExport")
.DataBound("UnitInventoryListInfiniteScrollGrid_OnDataBound")
))
Then on Scroll it basically does this.
In rich text editor does kendo support the layout column selection same as we have option in word like this
does kendo mvc rich text editor support that if yes please let us know how ?
I have a Form widget on a cshtml file:
@(Html.Kendo().Form<EditEraViewModel>() .Name("formEditEra") .HtmlAttributes(new { @method = "post" }) .Orientation("horizontal") .Layout("grid") .ButtonsTemplateId("buttonsTemplate") .Grid(g => g.Cols(1).Gutter(20)) .FormData(Model.EraViewModel) .Validatable(v => { v.ValidateOnBlur(false); v.ValidationSummary(vs => vs.Enable(false)); }) .Items(items => { .... }); }) .Events(ev => ev.Submit("EditEra.OnTestSubmit"))
I'm adding the button as a template, like this:
<script id="buttonsTemplate" type="text/x-kendo-template"> <div class="myButtonsContainer"> @if (!isImpersonating) { @(Html.Kendo().Button() .Name(@Localizer["general.page.button.submit"].ToString()) .HtmlAttributes(new { @class = "k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-form-submit" }) .Content(@Localizer["general.page.button.submit"].ToString()) .Events(ev => ev.Click("EditEra.onFormSubmit")) .ToClientTemplate()) } @(Html.Kendo().Button() .Name(@Localizer["general.page.button.cancel"].ToString()) .HtmlAttributes(new { @class = "k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-form-cancel" }) .Content(@Localizer["general.page.button.cancel"].ToString()) .Events(ev => ev.Click("goToProviderInfo")) .ToClientTemplate() ) </div> </script>
When the submit button is clicked, the OnPost method on the cshtml.cs file is not being triggered. It looks like the form is never submitted.
The "EditEra.OnTestSubmit" function that is called on the Submit event is being called. But the for is not being submitted, and the onPost method on the .cs file is never being executed.
What do I need to do to make sure that the form is submitted when the submit button is clicked?
Thanks.
I do
Hello Telerik Community,
I'm encountering an issue with my Kendo Chart implementation where certain data points are not displaying on the line series, despite being present in the dataset. Here's a breakdown of the problem and my current setup:
- Some data points, specifically those corresponding to the dates November 27 and November 29, are not showing up on the line chart.
- However, these dates are appearing correctly in the category legend.
- I'm using Kendo Chart to visualize historical pool data.
- Data is fetched from a database and processed in the controller before being passed to the Razor view for rendering.
- Each manufacturer's data is plotted on the chart as separate line series, with the x-axis representing dates and the y-axis representing weight.
- Controller Code: I've provided the relevant controller code responsible for fetching and processing the data.
- Razor View Code: Similarly, I've included the Razor view code where the Kendo Chart is defined and configured.
- I expect the line chart to display all data points, including those for November 27 and November 29, for each manufacturer.
- I've checked the data in the controller, and it seems that all data points are correctly fetched from the database.
- I've inspected the generated HTML for the chart and confirmed that the missing data points are indeed not being rendered.
- Could you please review my setup and help me identify any potential issues causing the missing data points?
- Additionally, if you have any suggestions for troubleshooting or debugging this issue further, I would greatly appreciate it.
- Framework: ASP.NET MVC- Browser: Chrome, Edge
Thank you in advance for your assistance!
public ActionResult ChartTMS(DateTime? fromDate, DateTime? toDate, string unit = "gm")
{
fromDate = fromDate?.Date;
toDate = toDate.HasValue ? toDate.Value.Date.AddDays(1).AddTicks(-1) : DateTime.Today;
if (!fromDate.HasValue || !toDate.HasValue)
{
fromDate = DateTime.Today.AddDays(-6);
toDate = DateTime.Today;
}
var allMeasurements = (
from m in db.Target_Measurement_History.AsNoTracking()
where m.Measurement_Record_Date >= fromDate.Value && m.Measurement_Record_Date <= toDate.Value
&& m.Target_Lot_Profile != null
&& m.Target_Lot_Profile.Target_Item != null
&& m.Target_Lot_Profile.Target_Item.Target_Manufacturer != null
select new MeasurementDataViewModel
{
Measurement_Record_Date = m.Measurement_Record_Date,
Pt_Remaining_Gms = m.Pt_Remaining_Gms,
Ru_Remaining_Gms = m.Ru_Remaining_Gms,
Manufacturer = m.Target_Lot_Profile.Target_Item.Target_Manufacturer,
}).ToList();
var manufacturers = allMeasurements.Select(m => m.Manufacturer).Distinct();
var colorMap = new Dictionary<string, string>();
Random rand = new Random();
foreach (var manufacturer in manufacturers)
{
colorMap[manufacturer] = $"#{rand.Next(0x1000000):X6}";
}
var groupedData = allMeasurements
.GroupBy(m => new { m.Measurement_Record_Date.Date, m.Manufacturer })
.Select(group => new MeasurementDataViewModel
{
Measurement_Record_Date = group.Key.Date,
Pt_Remaining_Gms = group.Sum(item => item.Pt_Remaining_Gms),
Ru_Remaining_Gms = group.Sum(item => item.Ru_Remaining_Gms),
Manufacturer = group.Key.Manufacturer,
Color = colorMap[group.Key.Manufacturer]
})
.OrderBy(g => g.Measurement_Record_Date)
.ThenBy(g => g.Manufacturer)
.ToList();
const float gramsPerTroyOunce = 31.1035f;
if (unit == "t oz")
{
foreach (var item in groupedData)
{
if (item.Pt_Remaining_Gms.HasValue)
item.Pt_Remaining_Gms = item.Pt_Remaining_Gms.Value / gramsPerTroyOunce;
if (item.Ru_Remaining_Gms.HasValue)
item.Ru_Remaining_Gms = item.Ru_Remaining_Gms.Value / gramsPerTroyOunce;
}
}
ViewBag.fromDate = fromDate;
ViewBag.toDate = toDate;
ViewBag.Unit = unit;
return View(groupedData);
}
public class MeasurementDataViewModel
{
public DateTime Measurement_Record_Date { get; set; }
public float? Pt_Remaining_Gms { get; set; }
public float? Ru_Remaining_Gms { get; set; }
public string Manufacturer { get; set; }
public string Color { get; set; }
}
[
{
"Measurement_Record_Date": "/Date(1542823200000)/",
"Pt_Remaining_Gms": 4370,
"Ru_Remaining_Gms": 5621,
"Manufacturer": "JX Nippon"
},
{
"Measurement_Record_Date": "/Date(1542823200000)/",
"Pt_Remaining_Gms": 4571,
"Ru_Remaining_Gms": 4295,
"Manufacturer": "Kojundo/Mitsui"
},
{
"Measurement_Record_Date": "/Date(1543168800000)/",
"Pt_Remaining_Gms": 1785,
"Ru_Remaining_Gms": 7086,
"Manufacturer": "JX Nippon"
},
{
"Measurement_Record_Date": "/Date(1543255200000)/",
"Pt_Remaining_Gms": 36432,
"Ru_Remaining_Gms": 41800,
"Manufacturer": "Kurt J. Lesker"
},
{
"Measurement_Record_Date": "/Date(1543428000000)/",
"Pt_Remaining_Gms": 76360,
"Ru_Remaining_Gms": 74687,
"Manufacturer": "Kurt J. Lesker"
},
{
"Measurement_Record_Date": "/Date(1543428000000)/",
"Pt_Remaining_Gms": 11138,
"Ru_Remaining_Gms": 9686,
"Manufacturer": "Materion"
},
{
"Measurement_Record_Date": "/Date(1543428000000)/",
"Pt_Remaining_Gms": 1329,
"Ru_Remaining_Gms": 4796,
"Manufacturer": "Mitsubishi"
}
]
@using Kendo.Mvc.UI
@using System.Web.Mvc
@using System.Web.Mvc.Html
@using Kendo.Mvc.Extensions
@model IEnumerable<TMS_RND.Controllers.MeasurementDataViewModel>
@using System.Web.Helpers
@{
ViewBag.Title = "Chart";
Layout = "~/Views/Shared/_Layout.cshtml";
DateTime startDate = ViewBag.fromDate ?? DateTime.Today.AddDays(-6);
DateTime endDate = ViewBag.toDate ?? DateTime.Today;
string currentUnit = ViewBag.Unit ?? "gm";
var manufacturers = Model
.GroupBy(m => m.Manufacturer)
.Select(g => new
{
Manufacturer = g.Key,
Color = g.First().Color
})
.ToList();
}
<div class="demo-section wide">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
From: @(Html.Kendo().DatePicker().Name("fromDate").Value(startDate.ToString("yyyy-MM-dd")))
To: @(Html.Kendo().DatePicker().Name("toDate").Value(endDate.ToString("yyyy-MM-dd")))
<button id="refreshChart">Refresh Chart</button>
<button id="clearFilter">Clear</button>
<button id="toggleUnit">@(currentUnit == "gm" ? "Switch to Troy oz" : "Switch to gm")</button>
</div>
<div>
<button class="tab" id="totalPoolTab">Total Pool</button>
<button class="tab" id="tmsTab" style="background-color: lightblue;">TMS</button>
</div>
<div>
@foreach (var manufacturer in manufacturers)
{
<span style="color:@manufacturer.Color">@manufacturer.Manufacturer</span>
}
</div>
</div>
<div id="chartContainer">
@(Html.Kendo().Chart(Model)
.Name("chart")
.Title("Historical Pool Data")
.HtmlAttributes(new { style = "height: 400px;" })
.Legend(legend => legend.Position(ChartLegendPosition.Bottom))
.SeriesDefaults(seriesDefaults => seriesDefaults.Line().Stack(false))
.Series(series => {
foreach (var manufacturer in manufacturers)
{
var manufacturerData = Model.Where(m => m.Manufacturer == manufacturer.Manufacturer).ToList();
series.Line(manufacturerData.Select(m => m.Pt_Remaining_Gms))
.Name("Pt - " + manufacturer.Manufacturer)
.Color(manufacturer.Color)
.Visible(true)
.Labels(labels => labels.Visible(true).Format("{0:N2} " + currentUnit));
series.Line(manufacturerData.Select(m => m.Ru_Remaining_Gms))
.Name("Ru - " + manufacturer.Manufacturer)
.Color(manufacturer.Color)
.Visible(false)
.Labels(labels => labels.Visible(true).Format("{0:N2} " + currentUnit));
}
})
.CategoryAxis(axis => axis.Categories(Model.Select(m => m.Measurement_Record_Date.ToString("dd MMM yyyy")).Distinct()))
.ValueAxis(axis => axis.Numeric()
.Line(line => line.Visible(false))
.Title("Weight (" + currentUnit + ")"))
.Tooltip(tooltip => tooltip.Visible(true).Format("{0:N2} " + currentUnit))
)
</div>
</div>
<script>
$(document).ready(function () {
function toISOStringWithMidday(date) {
var localDate = new Date(date);
localDate.setHours(12, 0, 0, 0);
var offset = localDate.getTimezoneOffset() * 60000;
var localMidday = new Date(localDate.getTime() - offset);
return localMidday.toISOString();
}
$("#refreshChart").click(function () {
refreshChart();
});
$("#toggleUnit").click(function () {
var newUnit = '@currentUnit' == 'gm' ? 't oz' : 'gm';
refreshChart(newUnit);
});
$("#clearFilter").click(function () {
window.location.href = '@Url.Action("ChartTMS", "Target_Measurement_History")';
});
function refreshChart(newUnit) {
var selectedFromDate = $("#fromDate").data("kendoDatePicker").value();
var selectedToDate = $("#toDate").data("kendoDatePicker").value();
var unitParam = newUnit || '@currentUnit';
if (selectedFromDate && selectedToDate) {
var difference = Math.abs(selectedToDate.getTime() - selectedFromDate.getTime());
if (difference > 7 * 24 * 60 * 60 * 1000) {
alert("Please select a date range within 7 days.");
return;
}
var fromDateStr = toISOStringWithMidday(selectedFromDate);
var toDateStr = toISOStringWithMidday(selectedToDate);
window.location.href = '@Url.Action("ChartTMS", "Target_Measurement_History")' + '?fromDate=' + fromDateStr + '&toDate=' + toDateStr + '&unit=' + unitParam;
} else {
alert("Please select both from and to dates.");
}
}
$("#totalPoolTab").click(function() {
window.location.href = '@Url.Action("Chart", "Target_Measurement_History")';
});
$("#tmsTab").click(function() {
window.location.href = '@Url.Action("ChartTMS", "Target_Measurement_History")';
});
$("#tmsTab").css("background-color", "lightblue");
$(".tab").click(function() {
$(".tab").css("background-color", "");
$(this).css("background-color", "lightblue");
});
});
</script>