Telerik Forums
UI for ASP.NET MVC Forum
1 answer
129 views

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").

Anton Mironov
Telerik team
 answered on 06 Sep 2024
0 answers
48 views

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?

Daniel
Top achievements
Rank 1
 asked on 05 Sep 2024
1 answer
138 views

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.

 


Mihaela
Telerik team
 answered on 30 Aug 2024
0 answers
50 views

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 ?

Mozart
Top achievements
Rank 1
Iron
Veteran
 asked on 29 Aug 2024
1 answer
61 views
The excel generated is okay, the data coming is also okay. The only issue is when I try to open it, it Excel repairs it with the error  popup.
[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;
}

Anton Mironov
Telerik team
 answered on 28 Aug 2024
1 answer
98 views
I am currently using .NET Framework 4.5.1 in my ERP system, and we are using Kendo UI for ASP.NET MVC version 2019.1.220. I would like to upgrade to a newer version of Kendo UI, but I am unsure which versions beyond 2019.1.220 are compatible with .NET Framework 4.5.1. Could you please provide information on the latest compatible version?
Eyup
Telerik team
 answered on 27 Aug 2024
0 answers
99 views
Im trying to find a way to continue with upload of multiple files if one fails. I have a check on Save that if file names is longer then 100 chars, it will return a error. Upload will stop on that file, and will only continue when user click on X button to remove the file. I need for kendo upload to continue with the upload of other files without user having to click on X button for each file that files. 
Bexel Consulting
Top achievements
Rank 1
Iron
Iron
 asked on 07 Aug 2024
0 answers
75 views

After upgrading Kendo MVC from v2021.2.616 to v2024.2.514 (KendoUIProfessional), the dropdownlist "SeriesType" on the grid is not firing the onChange event anymore. I saw an error message in the browser console.

Can you guys suggest a migration solution for it? Thanks!

Browser console error:

cshtml

@(Html.Kendo().Grid<MySeriesModel>().Name("drpSeries")
              .Columns(column =>
              {
                  column.Bound(model => model.SeriesName).HtmlAttributes(new { style = "font-weight: bold" }).Title("No.").Width(40);
                  column.ForeignKey(c => c.SeriesType, (IEnumerable<SelectListItem>)ViewBag.LstSeriesType, "value", "text").HtmlAttributes(new { style = "text-align: left", onChange = "onChangeSeriesType('#=ID#'); setSerieXml();" }).Title("Series Type").MinScreenWidth(60);
                  column.Bound(model => model.SeriesTitle).Title("Series Title").HtmlAttributes(new { onChange = "setSerieXml();" }).MinScreenWidth(120).Encoded(false);
                  column.Bound(model => model.Axis).Title("Axis").ClientTemplate("#=getAxisActionLink(ID,Axis)#").MinScreenWidth(120);                  
                  column.ForeignKey(c => c.Y_Format, (IEnumerable<SelectListItem>)ViewBag.LstSeriesFormat, "value", "text").HtmlAttributes(new { style = "text-align: left", onChange = "onChangeFormat(this);" }).Title("Format").MinScreenWidth(150);
                  column.ForeignKey(c => c.Y_Axis, (IEnumerable<SelectListItem>)ViewBag.ListSerriesYAxis, "value", "text").HtmlAttributes(new { style = "text-align: left", onChange = "onChangeYAxis(this,'#=ID#');" }).Title("Y Axis Scale").Width(100);
                  column.Bound(x => x.ID).ClientTemplate("<button class= 'k-button' type='button' onclick=onRemoveSeries('#=ID#')>" + "Remove" + "</button>").HtmlAttributes(new { style = "text-align: center" }).Title("").Width(120);
              })
              .DataSource(dataSource => dataSource
                    .Ajax()
                    .ServerOperation(false)
                    .Model(model =>
                    {
                        model.Id(item => item.ID);
                        model.Field(item => item.ID).Editable(false);
                        model.Field(item => item.SeriesName).Editable(false);
                        model.Field(item => item.Axis).Editable(false);
                        model.Field(item => item.SeriesTitle).Editable(false);
                    })
                    .Read(read => read.Action("SeriesList_DataSource", "Dashboard").Data("getDataForDgdSeries_Read"))
               )
               .Events(e =>
               {
                   e.DataBound("onDataBoundDgdSeries");
               })
               .Resizable(x => x.Columns(true))
               .AutoBind(true)
               .Scrollable(x => x.Enabled(true))
               .Editable(editable => editable.Mode(GridEditMode.InCell))
               .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
               .HtmlAttributes(new { style = "overflow: auto; width:100%", @class = "form-group" })

)

JS

function onChangeSeriesType(id) {
    drpSeries = $('#drpSeries').data('kendoGrid');
    dataSource = drpSeries.dataSource;
    var lstSerieRow = dataSource.data();
    if (lstSerieRow[id - 1].Axis.length > 0) {
        lstSerieRow[id - 1].SeriesTitle = "";
        lstSerieRow[id - 1].Axis = "";
        dataSource.fetch();
    }
}

Model

public class MySeriesModel
{
    public string ID { get; set; }

    public string SeriesName { get; set; }
    public string AxisName { get; set; }
    public string Axis { get; set; }
    [AllowHtml]
    [UIHint("GridDropDownList")]
    public string SeriesType { get; set; }

    public string SeriesTitle { get; set; }

    public string X_Ordinate { get; set; }

    public string X_Format { get; set; }

    [AllowHtml]
    [UIHint("GridDropDownList")]
    public string Y_Format { get; set; }

    [AllowHtml]
    [UIHint("GridDropDownList")]
    public string Y_Ordinate { get; set; }
    [AllowHtml]
    [UIHint("GridDropDownList")]
    public string Y_OrdinateTo { get; set; }
    public string TOOLTIP_FORMAT { get; set; }

    [AllowHtml]
    [UIHint("GridDropDownList")]
    public string Y_Axis { get; set; }
}

controller


public ActionResult RenderSeriesConfig(string viewName)
{
    List<SelectListItem> seriesType = GetDashboadChartStyleTypeList();
    string arrSeriesType = "";
    for (int i = 0; i < seriesType.Count; i++)
    {
        arrSeriesType += seriesType[i].Text.ToString() + "," + seriesType[i].Value.ToString() + ";";
    }
    ViewBag.LstSeriesType = seriesType;
    ViewBag.ArrSeriesType = arrSeriesType;
    ViewBag.LstSeriesAxis_Ordinate = GetLstFieldNamesSelectListItem(viewName);
    ViewBag.LstSeriesFormat = GetFormatShortList();
    ViewBag.ListSerriesYAxis = GetYAxisSettingList();
    return PartialView("_ChartDetail_Series");
}

 

Ronan
Top achievements
Rank 1
 asked on 07 Aug 2024
1 answer
76 views

A bug has been introduced recently where the calendar icon for DatePicker does not display

I can duplicate this bug using your REPL

https://demos.telerik.com/aspnet-core/datepicker

From here I add after line 9

.HtmlAttributes(new { @style = "width: 150px;"})

As you can see this results in no calendar to pick the date

If you make it even wider some of the icon becomes visible

.HtmlAttributes(new { @style = "width: 200px;"})

And at 250 it is fully visible

.HtmlAttributes(new { @style = "width: 250px;"})

We do this across our app using an extension method and it was previously working.

        public static DatePickerBuilder Width(this DatePickerBuilder builder, int width)
        {
            builder.ToComponent().HtmlAttributes.Merge("style", "width:" + width.ToString() + "px");
            return builder;
        }
Ivan Danchev
Telerik team
 answered on 02 Aug 2024
1 answer
79 views

Hi,

I showing a grid where some columns has username information. when a user is inactive then the username has a strike trough styling by class

This column is a a ForeignKey with ClientTemplate for displaying and the EditorTemplateName to control the editing

what shows a dropdown with Template and ValueTemplate on the UIHint schtml.

And  event databound to add a class for the strike trough styling.

So my grid column and dropdwon during edit are all having styling for inactive users

But when I click the filter icon the dropdown has to do the same

Where do I do that?

I cannot find any template or something else to control the ForeignKey bound dropdown.

Can someone help me with this styling problem?

Thanks

Alexander
Telerik team
 answered on 30 Jul 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?