Telerik Forums
UI for ASP.NET Core Forum
1 answer
157 views

Hi Team,

After upgraded kendo components and using bootstrap 5 as shown below:

"@progress/kendo-theme-bootstrap": "^8.0.1",
"@progress/kendo-ui": "^2024.2.514",
"@types/esprima": "^4.0.5",
"@types/he": "^1.2.2",
"@types/kendo-ui": "^2023.2.5",
  "bootstrap": "^5.2.1",

The export Excel in kendo TreeList triggering an error:

TypeError: data.slice is not a function
    at init.success (kendo.data.js:3858:1)
    at success (kendo.data.js:3748:1)
    at options.success (kendo.data.js:2219:1)
    at fire (jquery.js:3496:1)
    at Object.fireWith [as resolveWith] (jquery.js:3626:1)
    at done (jquery.js:9786:1)
    at XMLHttpRequest.<anonymous> (jquery.js:10047:1)

Here is the code I am using, the exporting Excel is not working, could someone please help ?

@(
Html.Kendo().TreeList<DevelopmentEmployeeDirectoryRemoteModel>()
    .Name("development-tree-list-basic")
    .DataSource(dataSource => dataSource
    .Read(read => read.Url($"{Url.Content("~")}/Development?handler=KendoTreeListDataSourceRead").Data("forgeryToken"))
    .Model(m =>
    {
        m.Id(f => f.EmployeeId);
        m.ParentId(f => f.ReportsTo).Nullable(true);
        m.Field(f => f.FirstName);
        m.Field(f => f.LastName);
        m.Field(f => f.ReportsTo);

    })
    .ServerOperation(false))
    .Columns(columns =>
        {
            columns.Add().Field(f => f.FirstName).Width(250);
            columns.Add().Field(e => e.LastName);
            columns.Add().Field(e => e.Position);
            columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}");
        })
    .Toolbar(tools => {                                            
        tools.Pdf();
        tools.Excel();
        tools.Spacer();
        tools.Search();
    })    
    .Excel(excel => excel.FileName("Kendo UI TreeList Export.xlsx").ProxyURL(Url.Action("Excel_Export_Save", "Development")))
    .Pdf(pdf => pdf.FileName("Kendo UI TreeList Export.pdf")
               .AllPages()               
               .PaperSize("A4")
               .Margin("2cm", "1cm", "1cm", "1cm")
               .Landscape(true))
    //.ColumnMenu()
    .Filterable()    
    .Selectable(true)
    .Scrollable(false)
    .Sortable()
    .Resizable(true)
    .Reorderable(true)
    .Deferred(true)
)


 

Anton Mironov
Telerik team
 answered on 28 Aug 2024
1 answer
47 views

Hi there,

is there any way to dowload and try trial version of Kedno.UI Core for Asp.Net core 3.1? The newest version does not support .net core 3.1.

Alexander
Telerik team
 answered on 28 Aug 2024
1 answer
61 views

I've got a vexing problem with this inherited code base.

The application has dozens of reports. Each report has two datepickers, StartDate and EndDate. 

As part of a company-wide migration, we're upgrading all of our projects to the latest frameworks and nuget packages. I did that with this application. I'm now using Telerik UI for ASPNET Core 2024.2.514. The previous version was 2020.1.114. 

While in test, the users are reporting that numbers are off from what's in production. Before, if they entered an end date of 7/1/2024, the Value that got passed into the query was inclusive of everything that happened on 7/1. In the current version, it looks like the Value is non-inclusive, so end date is 7/1/2024 00:00:00. 

The only thing I've done to the application is upgrade these packages, and the only thing that affects these date ranges was upgrading the Telerik UI.

So - first things first - does a datepicker (not datetimepicker) ALWAYS default to 00:00:00 as the time portion? Across these versions?

Thanks for any info. Let me know if there's any other info I can provide. 

Anton Mironov
Telerik team
 answered on 27 Aug 2024
1 answer
147 views

This might be a slightly strange layout request - for my page to make sense I want to put a couple of grids half way up which means that I would need to embed the grids within the form component itself. Is this possible to do so?

Ideally also for ease / tidiness of coding I'd like to have the grids within partial views - can this be done?

Mihaela
Telerik team
 answered on 22 Aug 2024
1 answer
71 views

I was tasked at my company with implementing custom parameter editors in order to dynamically hide parameter depending on whether they should be available for use or not. I first followed this tutorial to create the custom parameter editors and the corresponding HTML5 Widget. Once I did that, I tried integrating the custom parameter edtiors into a HMTL5 Report Viewer using the ASP.NET Core 8 tutorial (links here, here, here) but after building both the REST service project and the HTML5 viewer, whenever I run the app, I simply land on a blank localhost page leading to Microsoft Tutorials on building NET Core apps. I have tried all available troubleshooting & looked at documentation but I have no idea how to move forward. I have double checked that I followed the tutorials correctly and still no progress. I am using Telerik Report Desginer R3 2020, Visual Studio 2022, .Net 8. Attached below is the code for the program.cs, appsettings.json, reportscontroller.cs, and index.html


AppSettings.json (Rest Project)

{
    "Logging": {
        "LogLevel": {
            "Default": "Information",
            "Microsoft.AspNetCore": "Warning"
        }
    },
    "AllowedHosts": "*",
    "ConnectionStrings": {
        "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": "Data Source =.\\SQLEXPRESS; Initial Catalog=AdventureWorks; Intgrated Security = true"
    }
    
}

 



namespace TopLevelStatements.Controllers
{
    using System.Net;
    using System.Net.Mail;
    using Microsoft.AspNetCore.Mvc;
    using Telerik.Reporting.Services;
    using Telerik.Reporting.Services.AspNetCore;

    [Route("api/[controller]")]
    [ApiController]
    public class ReportsController : ReportsControllerBase
    {
        public ReportsController(IReportServiceConfiguration reportServiceConfiguration)
        : base(reportServiceConfiguration)
        {
        }

        protected override HttpStatusCode SendMailMessage(MailMessage mailMessage)
        {
            throw new System.NotImplementedException("This method should be implemented in order to send mail messages");

            // using (var smtpClient = new SmtpClient("smtp01.mycompany.com", 25))
            // {
            //     smtpClient.DeliveryMethod = SmtpDeliveryMethod.Network;
            //     smtpClient.EnableSsl = false;
            //     smtpClient.Send(mailMessage);
            // }
            // return HttpStatusCode.OK;
        }
    }
}


using Microsoft.Extensions.DependencyInjection.Extensions;
using Telerik.Reporting.Services;
using Telerik.Reporting.Cache.File;


var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddControllers().AddNewtonsoftJson();

// Configure dependencies for ReportsController.
builder.Services.TryAddSingleton<IReportServiceConfiguration>(sp =>
    new ReportServiceConfiguration
    {
        // The default ReportingEngineConfiguration will be initialized from appsettings.json or appsettings.{EnvironmentName}.json:
        ReportingEngineConfiguration = sp.GetService<IConfiguration>(),
        // In case the ReportingEngineConfiguration needs to be loaded from a specific configuration file, use the approach below:
        //ReportingEngineConfiguration = ResolveSpecificReportingConfiguration(sp.GetService<IWebHostEnvironment>()),
        HostAppId = "ReportingNet6",
        Storage = new FileStorage(),
        ReportSourceResolver = new UriReportSourceResolver(System.IO.Path.Combine(sp.GetService<IWebHostEnvironment>().ContentRootPath, "Reports"))
    });

builder.Services.AddCors(corsOption => corsOption.AddPolicy(
    "ReportingRestPolicy",
    corsBuilder =>
    {
        corsBuilder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader();
    }
));


var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseEndpoints(endpoints =>
{
    endpoints.MapRazorPages();
    endpoints.MapControllers();
    //...
});

app.UseStaticFiles();

app.UseAuthorization();

app.MapRazorPages();

app.UseCors("ReportingRestPolicy");

app.Run();


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Telerik HTML5 Report Viewer Demo in ASP.NET Core in .NET 5</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale-1, maximum-scale=1" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.blueopal.min.css" rel="stylesheet" />
    <script src="https://localhost:44320/api/reports/resources/is/telerikReportViewer"></script>
    <style>
        #reportViewer1 {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 50px;
            bottom: 5px;
            overflow: hidden;
            font-family: verdana, Arial;
    </style>
</head>
<body>
    <div id="reportViewer1">
        loading...
    </div>
    <script>
        $(document).ready(function () {
            $("#reportViewer1")
                .telerik_ReportViewer({
                    serviceurl: "https://localhost:44320/api/reports/", reportSource: {
                    },
                    report: "Barcodes Report.trdp", parameters: {}
viewMode: telerikReportViewer.ViewModes.INTERACTIVE, scaleMode: telerikReportViewer.ScaleModes.SPECIFIC, scale: 1.0,
                    enableAccessibility: false,
                    sendEmail: enabled: true }
});
});</script>
</body>
</html>

Dimitar
Telerik team
 answered on 21 Aug 2024
1 answer
81 views

I've tried

$("#lockAspectRatio").data('kendoCheckBox').value(false);

and while it does uncheck the box, the aspect ratio is still locked in the background. Seems like there's a trigger/event that's firing when someone manually checks/unchecks the box and that event does not get fired when the check is set programmatically.

How do I programmatically "uncheck" the lockAspectRatio checkbox in the ImageEditor Crop toolbar?

Ivaylo
Telerik team
 answered on 20 Aug 2024
0 answers
44 views

Hello,

Im using angular 16 and .net core 7 version. When i send request to back-end, i can handle. But i have a problem.

Let's assume we have two tables: roles and users. In Angular, there's a grid where I display the roles. I'm having issues on the backend side when applying filtering in that grid.

 <kendo-grid-column [width]="300" title="Rol" [sortable]="cantFilterandSort" field="Roles">
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                <kendo-multiselect [checkboxes]="true" [autoClose]="false" [tagMapper]="tagMapper"
                    [data]="this.roleList" textField="name" valueField="idx"
                    [valuePrimitive]="true"  (valueChange)="onRoleFilterChange($event)"></kendo-multiselect>
            </ng-template>
        </kendo-grid-column>

onRoleFilterChange(selectedRoles: any[]): void {
    this.state.filter = {
      logic: 'and',
      filters: selectedRoles.map(role => ({
          field: 'Roles',
          operator: 'eq',
          value: role
      }))
  };
    this.getAllData();
  }

The request is reaching the back-end.

[HttpPost]
public async Task<IActionResult> GetAllUser([DataSourceRequest] DataSourceRequest filter)
{
    var result = await this.userService.GetAllUser(filter);
    return CreateActionResultInstance(result);
}


public async Task<DataSourceResult> GetAllUser(DataSourceRequest filter)
{

    var result = await entity
          .AsNoTracking()
          .IgnoreQueryFilters()
          .Include(y => y.Roles)
          .Select(x => new UserViewModel
          {
              Idx = x.Idx,
              Email = x.Email,
              Name = x.Name,
              Phone = x.Phone,
              Surname = x.Surname,
              UserName = x.UserName,
              Roles = x.Roles.Select(x => x.Idx)
          }).ToDataSourceResultAsync(filter);
    return result;}

What I need here is for the filtering to work when a role is selected as a filter in the user list on the screen. How can we use a many-to-many table in this case? I researched a lot but couldn't find anything online.

As a note, the IDs of the roles are of type GUID.

Thanks :)



Ingenico
Top achievements
Rank 1
 asked on 20 Aug 2024
1 answer
165 views

I added a content security policy and wanted to remove unsafe-inline so I'm deferring components globally.

@Html.Kendo().DeferredScripts()

The problem is that I have other JavaScript code which references components in the jQuery document ready function which now don't work. I think  it's because the components haven't been initialized yet.

When deferring components globally how do you execute JavaScript code after the components have been initialized?

Thank you

Tsvetomila
Telerik team
 answered on 16 Aug 2024
1 answer
74 views
I have a grid for EditOrderLineDto which has a child element of EditOrderLineProductDto:

public class EditOrderLineDto
{
    public long Id { get; set; }
    public long OrderId { get; set; }
    public int Quantity { get; set; }

    public EditOrderLineProductDto Product { get; set; }

    public EditOrderLineDto()
    {
        Product = new EditOrderLineProductDto();
    }

    public EditOrderLineDto(long id, long orderId, string productId, string productName,
         int quantity)
    {
        Id = id;
        OrderId = orderId;
        Quantity = quantity;
        Product = new EditOrderLineProductDto(productId, productName);
    }
}

public class EditOrderLineProductDto
{
    public string ProductId { get; set; }
    public string Name { get; set; }

    public EditOrderLineProductDto()
    {
        ProductId = string.Empty;
        Name = string.Empty;
    }

    public EditOrderLineProductDto(string productId, string name)
    {
        ProductId = productId;
        Name = name;
    }
}

I would like the grid to display the data from the child element in separate columns while being able to edit all of these values through an editor for EditOrderLineProductDto. Is this possible?
Current grid setup is below.
Html.Kendo().Grid<EditOrderLineDto>()
    .Name("orderLines")
    .ToolBar(t =>
    {
        t.Create();
        t.Save();
    })
    .Columns(c =>
    {
        c.Bound(x => x.Id).Hidden(true);
        c.Bound(x => x.OrderId).Hidden(true);
        c.Group(g =>
            g.Title("Product").Columns(p =>
            {
                p.Bound(x => x.Product.Name);
                p.Bound(x => x.Product.ProductId);
            })
        );
        c.Bound(x => x.Quantity);

        c.Command(x => x.Edit());
        c.Command(x => x.Destroy());
    })
    .Editable(x => x.Mode(GridEditMode.InLine))
    .DataSource(d =>
    {
        d.Ajax()
        .Batch(false)
        .Model(m =>
        {
            m.Id(x => x.Id);
            m.Field(x => x.Id).DefaultValue(0);
            m.Field(x => x.OrderId).DefaultValue(Model.Id);
            m.Field(x => x.Product).DefaultValue(new EditOrderLineProductDto()).Editable(true);
            m.Field(x => x.Quantity);
        })
        .Create(c => c.Action("CreateOrderLine", "Orders"))
        .Read(r => r.Action("EditOrderOrderLines", "Orders", new { orderId = Model.Id }))
        .Update(u => u.Action("EditOrderLine", "Orders"))
        .Destroy(d => d.Action("DestroyOrderLine", "Orders"))
        .Events(e => e.Error("onError"));
    })
    .Events(e => e.Save("onGridSave"))


Ivaylo
Telerik team
 answered on 16 Aug 2024
1 answer
55 views

Hi, 

I have been trying to implement the multiSelect with no avail. 

I have been trying to implement the multiselect and although in the pop up is working, meaning I am able to see the possible values as well as I am able to select the values, when I press save. The model that is used to create the whole object contains null instead of the selected values.

When I check in the WebApp the payload the MultiSelect looks like this:

ActivitiesUuids[0].Disabled: false

ActivitiesUuids[0].Group:

ActivitiesUuids[0].Selected: false

ActivitiesUuids[0].Text: name of the activity (I have changed the name for security)

ActivitiesUuids[0].Value: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx (I have changed the Guid number into x, the value is actually a proper Guid)

 

My Models:

    public class CourseContentViewModel
    {public List<Guid>? RelatedCourseContensUuids { get; set; }  //contains a list of values that has been/should be chosen from the multiselec}

    public class CombinedCourseContentViewModel
    {public SelectList RelatedCourseContens { get; set; }  //contains a list of the values that multiSelect has to choose from}

 

Controller:

This is inside the Index and List methods.

           ICollection<CourseContentResponseDTO> responseDTOs = await _akdService.CourseContentsAllAsync();

           combinedCourseContentViewModel.RelatedCourseContentViewModel = new SelectList(responseDTOs, "Uuid", "Name");

 

Grid implementation:

@(Html.Kendo().Grid<WebApp.Models.CourseContentViewModel>().Name("grid")
    .Columns(columns =>
    {
        columns.Bound(n => n.Name).Filterable(false).Title("Username").Width(250);
        columns.Command(command => { command.Edit().Text("Edit"); command.Destroy().Text("Delete"); }).Width(200);
    })
    .ToolBar(toolBar =>
    {
        toolBar.Create().Text("Create");
    })
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CourseContentCreateUpdate"))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(30)
    .Model(model =>
    {
        model.Id(p => p.Uuid);
    })
    .Read(read => read.Action("List", "CourseContent"))
    .Update("Update", "CourseContent")
    .Create(create => create.Action("Create", "CourseContent"))
    .Destroy(destroy => destroy.Action("Delete", "CourseContent"))
    )
    )


This is my pop-up template multiselect (other components likes comboBoxes are working fine):

            <label class="Headings">Related Course Content</label>
            <kendo-multiselect for="RelatedCourseContensUuids"
                               name="RelatedCourseContensUuids"
                               datatextfield="Text"
                               datavaluefield="Value"
                               placeholder="No items selected..."
                               bind-to="combinedCourseContentViewModel.RelatedCourseContentViewModel">
            </kendo-multiselect>

My implementation of comboBoxes is almost the same except difference in naming of the tag helpers.

Hope you can help! 

Juste

Ivaylo
Telerik team
 answered on 15 Aug 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?