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.
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>
Hi
My req is to save the documents in database in blob format. When user submits the form, the form will be saved in database and then with saved formid as reference key uploaded documents will be saved in documents table.
When user edits submitted form, I need to display already attached forms on the page. User may delete or attach new forms in edit screen.
When user viewing the form in read only mode, user should be able to download the form. How can i achieve this?
below code is working for uploading...
<div class="row col-md-12">
<div class="col-md-10">
<div class="form-group">
@Html.LabelFor(model => model.files, htmlAttributes: new { @class = "control-label col-md-4" })
<div class="col-md-8">
@(Html.Kendo().Upload()
.Name("files")
.Validation(validation => validation
.AllowedExtensions(new string[] { ".pdf", ".txt", ".xlsx", ".xls", ".doc", ".docx" })
.MaxFileSize(15728640)
.MinFileSize(3000))
.ShowFileList(true)
.HtmlAttributes(new { aria_label = "files" })
)
@Html.ValidationMessageFor(model => model.files, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
viewmodel class
[Display(Name = "Upload relevant documents")]
public IEnumerable<HttpPostedFileBase> files { get; set; }
foreach (var file in vm.files)
{
byte[] document = new byte[file.ContentLength];
file.InputStream.Read(document, 0, file.ContentLength);
RLADOCUMENT rd = new RLADOCUMENT
{
RLAFORMID = (int)entity.ID,
DOCUMENTNAME = file.FileName,
CONTENTTYPE = file.ContentType,
DOCUMENTSIZE = document.Length,
DOCUMENTDATA = document,
CREATEDBY = Environment.UserName,
CREATEDDATE = DateTime.Now,
EXTENSION = Path.GetExtension(file.FileName)
};
_context.RLADOCUMENTS.Add(rd);
_context.SaveChanges();
}
Can someone help me how to display already attached files in Edit Mode with remove and upload option and download the attached reports.
Hello,
I can't get the Destroy method to work, I often get a 415 error with the GetListUsersDto object as parameters.
@(Html.Kendo().Grid<GetListUsersDto>().Name("GetListUsersGrid")
.Groupable()
.Sortable()
.Editable()
.Scrollable()
.ToolBar(x => x.Create())
.Columns(columns =>
{
columns.Bound(c => c.ID).Title(@Localizer["Tab_User_Id"].Value);
columns.Bound(c => c.Surname).Title(@Localizer["Editing_User_Surname"].Value);
columns.Bound(c => c.Firstname).Title(@Localizer["Editing_User_Firstname"].Value);
columns.Bound(c => c.RoleName).Title(@Localizer["Editing_User_Role"].Value);
columns.Bound(c => c.DateDebActif).Title(@Localizer["Editing_User_Start_Date"].Value).Format("{0:M/d/yyyy HH:mm:ss}"); ;
columns.Bound(c => c.DateFinActif).Title(@Localizer["Editing_User_End_Date"].Value).Format("{0:M/d/yyyy HH:mm:ss}"); ;
columns.Command(c =>
{
c.Edit();
c.Destroy();
});
}).DataSource(dataSource => dataSource.Ajax()
.Read(r => r.Action("getusers", "admin"))
.Create(r => r.Action("createuser", "admin"))
.Destroy(r => r.Action("deleteuser", "admin"))
.Model(model =>
{
model.Id(m => m.ID);
model.Field(f => f.ID).DefaultValue(Guid.NewGuid());
}
)).Pageable())
[HttpPost]
[Authorize(PolicyEnum.Administrateur)]
[Route("deleteuser")]
public string DeleteUser([DataSourceRequest] DataSourceRequest request, GetListUsersDto dto)
{
//var result = adminService.DeleteUser(dto.ID);
return JsonConvert.SerializeObject(new {/* error = result.IsError, message = localizer[result.IdMessage].Value + result.Message */});
}
public class GetListUsersDto
{
public Guid ID { get; set; }
public string Surname { get; set; }
public string Firstname { get; set; }
public string Username { get; set; }
public bool IsActif { get; set; }
public int RoleId { get; set; }
public string RoleName { get; set; }
public int LangId { get; set; }
public string LangName { get; set; }
public DateTime DateDebActif { get; set; }
public DateTime DateFinActif { get; set; }
}
If I change my GetListUsersDto method to Guid ID, the method works but the Guid is empty.
[HttpPost]
[Authorize(PolicyEnum.Administrateur)]
[Route("deleteuser")]
public string DeleteUser([DataSourceRequest] DataSourceRequest request, Guid Id)
{
//var result = adminService.DeleteUser(Guid.Parse(ID));
return JsonConvert.SerializeObject(new {/* error = result.IsError, message = localizer[result.IdMessage].Value + result.Message */});
}
If I only set a DataSourceRequest request, the method works, but doesn't return a usable object for my service.
[HttpPost]
[Authorize(PolicyEnum.Administrateur)]
[Route("deleteuser")]
public string DeleteUser([DataSourceRequest] DataSourceRequest request)
{
//var result = adminService.DeleteUser();
return JsonConvert.SerializeObject(new {/* error = result.IsError, message = localizer[result.IdMessage].Value + result.Message */});
}
I don't know what to do. Does anyone have a solution or idea?
Thank you,
Hi all,
I have a grid with multiple cascading dropdown columns, each dropdown gets filtered calling a method in my controller.
What I want now it is simply populate a non editable text column based on the value from one of my previous dropdowns calling a filter method on my controller.
Thank you
LnZ
Hi,
I am getting extra characters like þÿPDF Check in metadata of the exported PDF from Kendo grid. That reflects into the title of the PDF in chrome browser.
Is there any way to remove that extra characters from the metadata using jQuery?
I am attaching screenshot of the PDF file.
Hi there! I'm not a developer but working with one to try and get a fix for my web application. This specific issue is not happening on any desktop computer but appears to be happening on my MacBook Pro when using Safari (not Chrome) and my 5th Gen iPad in both Safari and Chrome. When access a specific section of the program it begins to 'tab' through every field on that page endlessly. When I check the network log it states 'PerformValidationActions' appears to be in a loop cycling through 'text1_enter' 'text1_leave' 'text2_enter' 'text2_leave' 'text3_enter' 'text3_leave' etc. It EVENTUALLY ends but then when you try to log out you get the error Object reference not set to an instance of an object.
Any help would be GREATLY appreciated!
Hello,
I'm encountering an issue with the autocomplete functionality in Kendo UI Grid. While the data selected through autocomplete is correctly added to hidden fields, it does not appear in the Grid.
Specifically, after using the autocomplete functionality, I checked whether the correct data was added to the respective hidden fields and found that the values I expected were indeed present in those fields. However, I noticed that these values were not visible in the Grid. This implies that the data selected by users is not being properly reflected within the Grid.
In summary, I am unable to display the data received through the autocomplete functionality within the Grid. I would appreciate any suggestions to resolve this issue.
The code structure related to the problem I mentioned above is as follows.
@(Html.Kendo().Grid(Model.Lines)Thank you in advance for your support.
I had a request to change the filtering of a certain column from "Starts With" to use a multi-select checkbox type filter to facilitate selecting 5-10 random items. Then of course some other users prefer the "Starts With" type of filtering. My solution is to have dual columns for that particular field, one with each filter type.
Since my grids save user preferences in local storage between sessions, the users can hide whichever column has the filtering they don't prefer and just use the other one. When they reload the page, their choice of column persists and their filtering is how they like it.
Darron