We want to use the DatePicker like this:
<div class="row">
<div class="col">
<div class="form-group">
@Html.LabelFor(model => model.TESTDATUM, htmlAttributes: new { @class = "control-label" })
<div>
@Html.Kendo().DatePickerFor(model => model.TESTDATUM)
@Html.ValidationMessageFor(model => model.TESTDATUM, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
But this renders the control like this:
We're currently using the following workaround to trim the overlapping part, which feels kind of 'hacky':
<div style="width: 17.5em">
@Html.Kendo().DatePickerFor(model => model.TESTDATUM)
</div>
How to make the Kendo Panel Bar children as right indented.
For example I have PanelBar called Interest Rates and 3 children. I want the 3 children as below right indented.
Interest Rates
Default Rates
Negative Carry
Cash FTP
Thanks
Abdul Ashad
Hello,
we have some dropdown fields (List<SelectListItem>) for which we would like to show the SelectListItem-Text (instead of Value) in the grid.
The grid is NOT in edit mode.
The column renders as 'undefined':
(Info: if we switch to edit-mode in the grid, the dropdown is working correctly, it's just the display of the Text in the cell that's not working.)
How do we need to configure this?
This ist the List<SelectListItem>:
public class Dropdowns
{
public static List<SelectListItem> Status
{
get
{
return new List<SelectListItem>()
{
new SelectListItem()
{
Text = Resource.ACTIVE,
Value = "Aktiv"
},
new SelectListItem()
{
Text = Resource.DELETED,
Value = "Gelöscht"
},
new SelectListItem()
{
Text = Resource.EXPIRED,
Value = "Ausgelaufen"
}
};
}
}
}
This is the field in the model:
[Required]
[UIHint("STATUSEditor")]
[Display(Name = "STATUS", ResourceType = typeof(Resource))]
public string STATUS { get; set; }
This is the editor template:
@using Kendo.Mvc.UI
@model Models.IDTB_CHARGE
@(
Html.Kendo().DropDownListFor(m => m.STATUS)
.Name("STATUS")
.DataValueField("Value")
.DataTextField("Text")
.ValuePrimitive(true)
.BindTo(Areas.Chargen.Helper.Dropdowns.Status)
)
This is the column in the grid:
columns.Bound(c => c.STATUS).ClientTemplate("#=STATUS.Text#").Width(130);
This is the situation: In have a grid, that is set up with server side paging, sorting and filtering. One of the columns displays the name of a related object. It should be possible to filter this column. Besides the name of the related object also an id is known (but not shown).
The filter should be with a dropdown list, presenting the possible choices to the user.
Currently the filter is set up as follows:
@(Html.Kendo().Grid<ReportEOSViewModel>()
.Name("EOSreports")
.Filterable(cfg => cfg.Extra(false))
.Columns(columns =>
{
columns.Bound(p => p.Well.WellNumber).Filterable(flt => flt.UI("reos_well_filter")
.Operators(op => op.ForString(fs => fs.Clear().IsEqualTo("Is equal to")))
.Multi(false).Extra(false));
// More columns...
})
.Pageable()
.Events(e => e.Filter("reos_filter"))
.Scrollable()
.DataSource(ds => ds
.Ajax()
.Batch(true)
.PageSize(50)
.Read(rd => rd.Action("GetList", "ReportEOS", new { id = Model }))
)
)
With the supporting script:
function reos_well_filter(element) {
element.kendoDropDownList({
dataSource: {
transport: {
read: "@Url.Action("DropDownList", "Well")"
}
},
autoWidth: true,
dataTextField: "Value",
dataValueField: "Id",
optionLabel: "--select well--",
filter: "startswith"
});
}
function reos_filter(e) {
if (e.field === "Well.WellNumber") {
let flt = this.dataSource.filter();
if (flt !== undefined && flt !== null) {
for (let i = flt.filters.length - 1; i >= 0; i--) {
if (flt.filters[i].field === "WellRefFK")
flt.filters.splice(i, 1)
}
}
if (e.filter !== null) {
e.filter.filters[0].field = "WellRefFK";
}
else {
this.dataSource.filter(flt);
e.preventDefault();
}
}
}
So basically the column has a .UI() call set up to reos_well_filter() that creates the drop down list, showing the names and returning the id as filter value. Also in the Filter event, there is special processing being done in case this particular column is being filtered on. Basically the name of the field in the filter is changed from "Well.WellNumber" to "WellRefFK". This, however, has some unwanted side effects, because the grid now basically doesn't recognize the filter as a filter for that specific column any more.
For starters, when filtering on a second item, the filter is not replaced, but added to. That's why the old filter is first removed. Also the clear filter function does not work any more, so that's why the case where e.filter === null is also processed. The last side effect that I noticed and have not been able to solve is that the filter button in the header does not show the column is being filtered on.
So my question is: Is there another way to let the grid know that the filter should be triggered on another field, so that everything keeps working as intended?
Bonus: Is it possible to hide the filter variant dropdown box, as there is only one choice now ("Is equal to").
Hi,
I updated kendo from version 2020 to 2024.1.319 and noticed that the Grid is not adding the `data-field` attribute to the <td> elements as before.
Is this an error?
I have a Kendo UI Grid that is being used to filter, group, and display aggregates. This data is then exported to Excel via the toolbar. It works very well and we like the way that the default Export looks.
However the number of rows can be quite large, in some cases climbing above 150,000. This causes the page to become unresponsive, but only with grouping (sometimes two groups can be nested) and aggregates involved. If the columns are not grouped then the performance is acceptable.
Is there a way to improve the performance of the Excel export when it is using group headers and aggregates?
We would like to avoid using the server-side export as an alternative because the export's appearance can vary based on the user's interaction with the grid and will be unpredictable unless the grid options can somehow be parsed at the controller and be used to build the Excel sheet the way it does on the client side.
As per document : ASP.NET MVC jQuery Support - Telerik UI for ASP.NET MVC
It says the MVC 2023.1.117.0 support JQuery 3.6.1, but when i tried to use JQuery 3.6.1 on MVC Example demo , the page won't load the component.
Do i need to setting another thing to upgrade jquery ?
[HttpPost]
public ActionResult ExportMultipleGridsFile(List<GridExportData<dynamic>> grids)
{
try
{
var exportStream = new MemoryStream();
using (IWorkbookExporter workbookExporter = SpreadExporter.CreateWorkbookExporter(SpreadDocumentFormat.Xlsx, exportStream, SpreadExportMode.Create))
{
foreach (var grid in grids)
{
var columnsData = JsonConvert.DeserializeObject<IList<ExportColumnSettings>>(HttpUtility.UrlDecode(grid.Model));
var removableColumns = new List<ExportColumnSettings>();
// Remove columns with invalid width or field
foreach (var column in columnsData)
{
if (column.Width == null || column.Width.Equals(new Unit()))
{
column.Width = new Unit("100px"); // Default width
}
if (string.IsNullOrWhiteSpace(column.Field))
removableColumns.Add(column);
}
columnsData = columnsData.Except(removableColumns).ToList();
dynamic options = JsonConvert.DeserializeObject(HttpUtility.UrlDecode(grid.Option));
var worksheetName = options.title.ToString();
if (worksheetName.Length > 31)
{
worksheetName = worksheetName.Substring(0, 31);
}
worksheetName = Regex.Replace(worksheetName, @"[:\/\\\?\*\[\]]", "_");
using (IWorksheetExporter worksheetExporter = workbookExporter.CreateWorksheetExporter(worksheetName))
{
// Attempt to deserialize the data
var data = Retrieve();
//var data = JsonConvert.DeserializeObject<List<IntakeReport>>(HttpUtility.UrlDecode(grid.Data));
// Check if data is null or empty
if (data == null || !data.Any())
{
// Log or handle the issue as necessary
throw new InvalidOperationException("Data is null or empty after deserialization.");
}
// Add headers with validation
using (IRowExporter headerRow = worksheetExporter.CreateRowExporter())
{
foreach (var column in columnsData)
{
if (!string.IsNullOrEmpty(column.Title))
{
using (var cellExporter = headerRow.CreateCellExporter())
{
cellExporter.SetValue(column.Title);
}
}
}
}
// Add rows with validation
foreach (var item in data)
{
using (IRowExporter row = worksheetExporter.CreateRowExporter())
{
foreach (var column in columnsData)
{
var cellValue = GetCellValue(item, column.Field);
using (var cellExporter = row.CreateCellExporter())
{
if (cellValue != null)
{
// Remove newline characters
var cleanedValue = cellValue.ToString().Replace("\n", " ").Replace("\r", " ");
cellExporter.SetValue(cleanedValue);
}
else
{
// Optionally handle null values
cellExporter.SetValue("string Empty");
}
}
}
}
}
}
}
workbookExporter.Dispose();
}
// Reset the stream position before sending it
exportStream.Seek(0, SeekOrigin.Begin);
// Return the file with the correct MIME type and filename
return File(exportStream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "CombinedExport.xlsx");
}
catch (Exception ex)
{
// Log the exception message (if logging is configured)
// Example: _logger.LogError(ex, "Export failed");
// Rethrow the exception to handle it further up the call stack
throw;
}
}
private object GetCellValue(dynamic item, string fieldName)
{
// Check if the item is a dictionary, which is common in dynamic objects like ExpandoObject or JSON objects
if (item is IDictionary<string, object> dictionary)
{
// Try to get the value from the dictionary
return dictionary.TryGetValue(fieldName, out var value) ? value : null;
}
// If not a dictionary, use reflection to get the property
var property = item.GetType().GetProperty(fieldName);
// Ensure the property exists and return its value; otherwise return null
return property != null ? property.GetValue(item, null) : null;
}