Hello Telerik,

I am using the Kendo Upload Control with Async AutoUpload set to "true".  In version 2023.3.1114, when using "Select File" to upload a document the control works perfectly.  Dragging and dropping a file onto the control also works perfectly. 

After upgrading to 2024.1.130 using "Select File" to upload a document does not work, but dragging and dropping a file does work to upload a document.

Can you please advise me as to what I am doing wrong.  I am using jQuery v3.7.0.

@(Html.Kendo().Upload()
		.Name("uplCtrl")
		.HtmlAttributes(new { aria_label = "files", title = "Select file to upload" })
		.Multiple(false)
		.Messages(m => m.Select("Select file...")
		.DropFilesHere("Drop file here to upload"))
		.ShowFileList(false)
		.Async(a => a
			.Save("UploadSave", "Vendors")
			.AutoUpload(true)                                        
		)
		.Validation(validation =>
		{
			validation.AllowedExtensions(new string[] { "pdf", "docx", "xlsx", "zip" });
			validation.MaxFileSize(52428800);
		})
		.Events(e => e
			.Error("onUploadError")
			.Complete("onUploadSuccess")
			.Upload("onUpload")
		)
	)

Hello ,

We use the method ToDataSourceResult ( Telerik UI  for Asp.net Core 2024.1) and EF Core (8.0) to perform a simple query on a table. The primary key of the table is a String type and is case-sensitive. There are two pieces of data in our database. Their primary key values only differ in case.

ID: DEHE061800005DTF, Name: First

ID: DEHE061800005DTf, Name: Second

When we filter based on the primary key, we always get two pieces of data, but they are actually the same piece of data. In other words, another piece of data was not returned. Such as:

ID: DEHE061800005DTF, Name: First

ID: DEHE061800005DTF, Name: First

It seems that some kind of operation is performed internally according to the primary key, but because the case is not taken into account, the same piece of data is used twice.

We wanted to know if we could somehow solve this problem.

Thanks!

I am working on a Net Core Mvc application for which I succesfully used Telerik UI. Everything was working fine, but after I added Mvc Areas and moved the views and controllers etc, the Telerik components stopped working.

I have found similar problems searching Google and the Telerik forum. For example:
https://www.telerik.com/forums/cannot-use-kendo-within-areas

However, that solution it not for ASP.NET Core. I was wondering what I have to do to make sure Telerik will work again in my Mvc Areas.

I am using the CDN to include the Kendo files.

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.3.1114/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.3.1114/js/kendo.aspnetmvc.min.js"></script>
<script src="~/js/kendo-ui-license.js"></script>

<script src="~/vendor/kendo/kendo.culture.nl-NL.min.js"></script>
<script src="~/vendor/kendo/kendo.messages.nl-NL.min.js"></script>
<script type="text/javascript">
    kendo.culture("nl-NL");
</script>

/View
columns.Bound(c => c.EmpTypes).Title("Type")
.Filterable(filterable => filterable
.Multi(true)
.ItemTemplate("typetemplate")
.DataSource(ds => ds.Read(r => r.Action("GetEmpTypes", "Report"))));

<script>
    function typetemplate(e) {
        return ({ Text, Value }) => `<span><label><span>${Text}</span><input type='checkbox' name='" + e.field + "' value='${Value}'/></label></span><br/>`
    }
</script>

//ReportController.cs
public JsonResult GetEmpTypes()
{
    var enumList = EnumToSelectList(typeof(EmpTypes)); // Convert the Enums to List<SelectListItem>
    return Json(enumList, JsonRequestBehavior.AllowGet);
}

public static List<SelectListItem> EnumToSelectList(Type enumType)
{
     return Enum
              .GetValues(enumType)
              .Cast<int>()
              .Select(i => new SelectListItem
              {
                  Value = i.ToString(),
                  Text = Enum.GetName(enumType, i),
              })
              .ToList();
}

I'm upgrading to Kendo 2024.1.130 and I've been able to get svg icons on a button or other places using this construct.

<div class="ara-footer">
    <button class="k-button k-button-icontext" onclick="cancelEdit(id)">
        <span id="ericIcon"></span>
        Back
    </button>
</div>
<script>
    kendo.ui.icon($("#ericIcon"), { icon: 'camera' });
</script>

That worked flawlessly.  Thank you for the great example.

Now I'm trying to add svg icons to a Custom command in a grid.  This is the code I have previously when using font-icons.

Html.Kendo()
.Grid<TemplateModel>()
.Name("GridApprovedTemplates")
.Columns(columns =>
{
  columns.Command(command =>
    {
      command.Edit().Text(" ").UpdateText(" ").CancelText(" ");
      command.Custom(" ").Text("<span class='k-icon k-i-info'></span> ").Click("refreshApprovedTemplateDetail");
    }).Width(150);

Telerik UI for asp.net core 2024.1.130

I am trying to implement a grid popup with dropdown list in asp.net core (tag helper) , would like to know how to make this work.

List associated with dropdownlist will be available via a web api call.

please use the following sample as a starter, where we have popup with Frieght, order date, shipName, shipCity 

https://netcorerepl.telerik.com/QoYdOJlL07aiiORy37

I would like to convert shipCity from text box to dropdown list, where i get the list of cities using a web api call.

Could you please help me with this implementation? (if there is already another sample which demonstrates this, that would be fine as well)

Hi There,

I have a complex model in view.  But, i sended simple example for subject.

Main View Model : 

public class ErpProductModel
{
    public string Title { get; set; }
    public string Code { get; set; }
    public string ShortCode { get; set; }
    public int MinStock { get; set; }
    public int ShelfLife { get; set; }
    public int CategoryId { get; set; }
    public int TaxCategoryId { get; set; }
    public decimal AmountInProduct { get; set; }
    public int MeasureWeightId { get; set; }
    public int CountryId { get; set; }
    public int StatusId { get; set; }
    public List<ErpProductPackageTypeModel>? PackageTypes { get; set; } = [];
}

PackageTypes Model : 

public record ErpProductPackageTypeModel 
{
    public int? ProductId { get; set; }
    public string Barcode { get; set; }
    public int Quantity { get; set; }
    public string? PackageType { get; set; }
    public int PackageTypeId { get; set; }

    public List<SelectListItem> AvailablePackageTypes { get; set; } = [];
}

View Source :

<script type="text/x-kendo-tmpl" id="packageTypeTemplate">
         <div class="card widget widget-info">
             <div class="card-body">
                 <div class="widget-info-container">
                     <div class="widget-info-image" style="background: url('@Url.Content("/Assets/Images/barcode_mock.png")')"></div>
                     <h5 class="widget-info-title">#=Barcode#</h5>
                     <p class="widget-info-text">#=PackageType# / #=Quantity# PCS</p>
                 </div>
             </div>
         </div>
</script>

@(Html.Kendo().ListView<ErpProductPackageTypeModel>()
            .Name("package-types")
            .BindTo((IEnumerable<ErpProductPackageTypeModel>)Model.PackageTypes)
            .TagName("div")
            .Bordered(false)
            .Layout("grid")
            .Grid(p=> p.Cols(4).Gutter(20))
            .ClientTemplateId("packageTypeTemplate")
            .HtmlAttributes(new { @class= "rubi-listview package-types" })
            .DataSource(dataSource => 
                dataSource.Ajax()
                .Batch(true)
                .ServerOperation(false))
            )

Controller Post Method :

[HttpPost]
public virtual async Task<IActionResult> EditAsync(ErpProductModel model)
{
    var erpProduct = await _erpProductService.GetErpProductAsync(model.Id);
    if (erpProduct == null)
        return RedirectToAction("List");
    erpProduct = model.ToEntity(erpProduct);

    await _erpProductService.UpdateErpProductAsync(erpProduct);

    return RedirectToAction("Edit", new { id = erpProduct.Id });
}

Hello,

I am surprised this is not asked about more in the forums on using JavaScript functions in view components.

I have a grid inside a view component and am having issues getting the datasource read Data function to work so I can pass parameters from the view component's backend .cs file to my API (it says grid_getReadParameters is undefiend even though it's defined in script tag at the bottom of the view component). I have read that view components can't really have javascript or something strange like that which makes no sense. I defined a script section in my view component and it was unable to find "grid_getReadParameters". How does one define this within the view component? I do not want to have to sprinkle this around on every page which uses my view component, that would defeat the purpose. Thanks in advance for your help.

See below example:

@(Html.Kendo()
    .Grid<ViewModels.MyViewModel>()
    .Name("grid_" + uniqueId)
    .Sortable()
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Filterable()
    .ToolBar(x =>
    {
        x.Create().Text("Add New");
        x.Save().SaveText("Save").CancelText("Cancel");
    })
    .Columns(columns =>
    {
        columns.Bound(c => c.Value)
        .Width(125)
        .Filterable(ftb => ftb.Multi(true).Search(true).CheckAll(true));
    })
    .DataSource(ds => ds
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Read(r => r.Url("/api/ControllerName?handler=MethodName").Data("grid_getReadParameters"))
            .Events(events => events.Error("grid_error"))
            .PageSize(100)
            .Model(m =>
            {
                m.Field(id => id.Value).Editable(true);
            })
    )
)

In the Grid for ASP.NET AJAX, it was possible to drag an entire row (see Telerik Web Forms Drag and Drop of Grid Items - RadGrid - Telerik UI for ASP.NET AJAX and Telerik Web UI Grid Items Drag-and-drop Demo | Telerik UI for ASP.NET AJAX).

In the Grid for ASP.NET Core however, it appears to be necessary to use a "drag handle" in a specific column to drag the row which some of my users are finding somewhat "clunky" and even I find difficult on occasion as I sometimes find that instead of dragging I am in fact highlighting page content instead.

Is it possible to drag an entire row in Grid for ASP.NET Core instead of having to use the drag handle?

In particular, I am looking to be able to drag between grids as well as being able to drag within grids.

Thanks.

I need to pass a parameter from dropdownlist selection to the ajax function that refreshes the grid. Using the following code to accomplish this using taghelper syntax, however the parameter is not getting passed to ajax api. Could you please help?