Telerik Forums
UI for ASP.NET Core Forum
1 answer
10 views
I see in the examples for Cards that they scroll horizontally .. but can they scroll vertically?  If so .. how do I do that?
Mihaela
Telerik team
 answered on 25 Aug 2021
1 answer
14 views

In my project asp .Net 5.0 Core, I have the next problem when my page load.

unable to resolve service for type 'kendo.mvc.rendering.kendo html generator'

  • Microsoft.Extensions.DependencyInjection.ActivatorUtilities.GetService(IServiceProvider sp, Type type, Type requiredBy, bool isDefaultParameterRequired)

  • lambda_method29(Closure , IServiceProvider , object[] )

  • Microsoft.AspNetCore.Mvc.Infrastructure.TypeActivatorCache.CreateInstance<TInstance>(IServiceProvider serviceProvider, Type implementationType)

  • Microsoft.AspNetCore.Mvc.Razor.Infrastructure.DefaultTagHelperActivator.Create<TTagHelper>(ViewContext context)

  • Microsoft.AspNetCore.Mvc.Razor.DefaultTagHelperFactory.CreateTagHelper<TTagHelper>(ViewContext context)

  • Microsoft.AspNetCore.Mvc.Razor.RazorPageBase.CreateTagHelper<TTagHelper>()

  • AspNetCore.Views_AlmacenProductosServicios_Index.ExecuteAsync() in Index.cshtml

    1. ViewData["Title"] = "Listado de productos y servicios";
  • Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)

  • Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, bool invokeViewStarts)

  • Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)

  • Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode)

  • Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode)

  • Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ActionContext actionContext, IView view, ViewDataDictionary viewData, ITempDataDictionary tempData, string contentType, Nullable<int> statusCode)

  • Microsoft.AspNetCore.Mvc.ViewFeatures.ViewResultExecutor.ExecuteAsync(ActionContext context, ViewResult result)

  • Microsoft.AspNetCore.Mvc.ViewResult.ExecuteResultAsync(ActionContext context)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|29_0<TFilter, TFilterAsync>(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext<TFilter, TFilterAsync>(ref State next, ref Scope scope, ref object state, ref bool isCompleted)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|24_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)

  • Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)

  • Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)

  • Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

 

I used the telerik package telerik.ui.for.aspnet.core.2021.2.616

In _ViewImports

@using WASys

@using WASys.Models

@using Kendo.Mvc.UI

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@addTagHelper *, Kendo.Mvc

My Page

 

<kendo-grid name="grid" height="550">

  <columns>

    <column field="ID" title="Order ID">

      <filterable enabled="false"></filterable>

    </column>

    <column field="CodigoInterno" title="Codigo" />

    <column field="NombreLargo" title="Nombre Producto/Servicio" />

    <column field="PrecioCosto" title="Precio Costo" />

  </columns>

  <scrollable enabled="true" />

  <sortable enabled="true" />

  <pageable enabled="true" />

  <filterable enabled="true" />

  <datasource type="DataSourceTagHelperType.Ajax" page-size="20">

    <transport>

      <read url="@Url.Action("Orders_Read", "AlmacenProductosServicios")" />

    </transport>

  </datasource>

</kendo-grid>

Mihaela
Telerik team
 answered on 25 Aug 2021
1 answer
14 views
 The item data is not transferred via the hash syntax to the custom template ("tooltip-tamplate") for the tooltip. But it works for other templates "task-templat" and "column-template". Please help me to find out the solution. Below is my code in View:

            <!--Style progress bar-->
            <script id="task-template" type="text/x-kendo-template">
                <div class="template" style="background-color: #= Color #;">
                    <a href="#= Link #">
                        <h5 style="font-family: "Open Sans",sans-serif;">#= title #<\h5>
                    </a>
                </div>
            </script>

            <!--Style columns-->
            <script id="column-template" type="text/x-kendo-template">
                @*<i class="tio-bookmark-outlined tio-lg text-primary"></i>*@
                <span>#= ProjectGenre #</span>
            </script>

            <!--Style ToolTip-->
            <script id="tooltip-tamplate" type="text/x-kendo-template">
                <div style="padding: 1rem;">
                    <p>Genre: #= ProjectGenre # </p>
                </div>
            </script>

@(Html.Kendo().Gantt<TaskViewModel, DependencyViewModel>((IEnumerable<TaskViewModel>)ViewData["tasks"], (IEnumerable<DependencyViewModel>)ViewData["dependencies"])
                            .Name("gantt")
                            .Columns(columns =>
                            {
                                columns.Bound(c => c.Studio).Title("Студія").Width(200).Sortable(true);
                                columns.Bound(c => c.ProjectGenre).Title("Жанр").Width(300).Sortable(true).TemplateId("column-template");
                            })
                            .Views(views =>
                            {
                                views.YearView(yearView => yearView.Selected(true));
                            })
                            .ShowWorkHours(false)
                            .ShowWorkDays(false)
                            .Editable(false)
                            .Height(600)
                            .TaskTemplateId("task-template")
                            .DataSource(d => d
                                .Model(m =>
                                {
                                    m.Id(f => f.TaskID);
                                    m.ParentId(f => f.ParentID);
                                    m.Field(f => f.Expanded).DefaultValue(true);
                                    m.Field(f => f.Start).ToString();
                                    m.Field(f => f.End).ToString();
                                })
                            )
                            .Tooltip(t =>
                            {
                                t.Visible(true);
                                t.TemplateId("tooltip-tamplate");
                            })
                            .DependenciesDataSource(d => d
                                .Model(m =>
                                {
                                    m.Id(f => f.DependencyID);
                                    m.PredecessorId(f => f.PredecessorID);
                                    m.SuccessorId(f => f.SuccessorID);
                                })
                            )
                    )
Aleksandar
Telerik team
 answered on 20 Aug 2021
1 answer
17 views

I am using the FileManager in ASP.net CORE 5 using the Tag Helpers.  I created a partial view for the FileManager and created a controller to handle the Read, Upload, Destroy, Create.... Currently the read and upload functions work as expected, but when I try to delete a file I Am getting 415 Error using this Tag:

<destroy url="/FileManagerData/Destroy" type="POST"  />

Here is the response:

{"type":"https://tools.ietf.org/html/rfc7231#section-6.5.13","title":"Unsupported Media Type","status":415,"traceId":"00-cd48a67e3165574bb55f025789ec2570-d50282d662ca804c-00"}

After some research the it appears the 415 and Unsupported Media Type is caused by not passing in the Content Type, so I changed the Tag to this:

<destroy url="/FileManagerData/Destroy" type="POST" content-type="multipart/form-data" />

This produced a 400 error with a response of:

{"errors":{"":["Failed to read the request form. Missing content-type boundary."]},"type":"https://tools.ietf.org/html/rfc7231#section-6.5.1","title":"One or more validation errors occurred.","status":400,"traceId":"00-c95edcb44f53ca4aa80654e8ac3f4d6b-80784c169952f14a-00"}

According to you docs the content-type is application/x-www-form-urlencoded which gives me the 415 error.

 

Here is the Destroy Method from the Controller:

 

[HttpPost("Destroy")]
        public virtual ActionResult Destroy(FileManagerEntry entry)
        {
            var path = NormalizePath(entry.Path);


            if (!string.IsNullOrEmpty(path))
            {
                if (entry.IsDirectory)
                {
                    DeleteDirectory(path);
                }
                else
                {
                    DeleteFile(path);
                }

                return new JsonResult(new object[0]);
            }
            throw new Exception("File Not Found");
        }

 

What am I missing here to get this to work?

 

[UPDATE]

 

I Change the Destroy Method in the controller to this:

 public virtual ActionResult Destroy([FromForm] FileManagerEntry entry)

Added [FromForm] Which now produces the following validation errors:

 

{"errors":{"Created":["The value 'Mon Aug 16 2021 10:06:38 GMT-0500 (Colombia Standard Time)' is not valid for Created."],"Modified":["The value 'Mon Aug 16 2021 10:06:38 GMT-0500 (Colombia Standard Time)' is not valid for Modified."],"CreatedUtc":["The value 'Mon Aug 16 2021 10:06:38 GMT-0500 (Colombia Standard Time)' is not valid for CreatedUtc."],"ModifiedUtc":["The value 'Mon Aug 16 2021 10:06:38 GMT-0500 (Colombia Standard Time)' is not valid for ModifiedUtc."]},"type":"https://tools.ietf.org/html/rfc7231#section-6.5.1","title":"One or more validation errors occurred.","status":400,"traceId":"00-5bc6f05eed3360458a9c5f37a37c8f11-27e6c765b081e642-00"}

[UPDATE 1]

I Created my own Model to replace the FileManagerEntry but set all the DateTime Fields to Strings:

       

public class FileDataJTE
    {

        public string Name { get; set; }
        public string Path { get; set; }
        public string Extension { get; set; }
        public bool IsDirectory { get; set; }
        public bool HasDirectories { get; set; }
        public string Created { get; set; }
        public string CreatedUtc { get; set; }
        public string Modified { get; set; }
        public string ModifiedUtc { get; set; }


    }

Then I Had to pass that in to the Method and convert and string ie Create, back to DateTime:

[HttpPost("Destroy")]
        public virtual ActionResult Destroy([FromForm] FileDataJTE entry)
        {
            string timeZone;

            if (TimeZoneInfo.Local.IsDaylightSavingTime(DateTime.Now))
            {

                timeZone = TimeZoneInfo.Local.DaylightName;

            }
            else
            {

                timeZone = TimeZoneInfo.Local.StandardName;

            }

            var created = DateTime.ParseExact(entry.Created, "ddd MMM dd yyyy HH:mm:ss 'GMT'K '(" + timeZone + ")'", CultureInfo.InvariantCulture);

 

Why does this not work with the FileManagerEntry on a Controller?

Any ideas on this or am I even on the right track to get this working?

Thanks

 

--R

 

Patrick
Telerik team
 answered on 18 Aug 2021
1 answer
24 views

Hey guys,

I'm actually new to WebApi and I have a Kendo Grid with the WebApi() option activated:

@(Html.Kendo().Grid<OfferType>()
              .Name("grid")
              .Columns(columns =>
              {
                  columns.Bound(p => p.Name);
                  columns.Command(command => { command.Edit(); });
              })
              .DataSource(dataSource =>
                  dataSource
                    .WebApi()
                    .Model(model =>
                    {
                        model.Id(p => p.ID);
                    })
                    .Events(events => events.Error("error_handler"))
                    .Read(read => read.Url("https://localhost:44362/api/OfferType"))
                    .Update(update => update.Url("https://localhost:44362/api/OfferType/{0}"))
              )
              .Pageable()
              .Sortable()
	)

 

In your demo für .NET Core you're using the view inside a webapi-project. This is not my case. I'm using the grid in a project which has to be connected to a webapi outside the project/solution. Therefore I have to use "read => read.Url("xyz")" (I think) to get connection to my outside hosted webapi. Because via "read.Action(x,y)" I can't refer to other projects/solutions and urls.

The controller of my webapi is looking like that:

    [Route("api/[controller]")]
    [ApiController]
    public class OfferTypeController : ControllerBase
    {
        private readonly FrueheHilfenContext _context;

        public OfferTypeController(FrueheHilfenContext context)
        {
            _context = context;
        }



        [HttpGet]
        [EnableCors("AllowLocal")]
        public DataSourceResult Get([DataSourceRequest] DataSourceRequest request)
        {
            List<OfferType> returnList = new List<OfferType>();
            using (_context)
            {
                returnList = _context.OfferTypes.ToList();
            }
            
            return returnList.ToDataSourceResult(request);
        }

        // PUT api/<OfferTypeController>/5
        [HttpPut("{id}")]
        [EnableCors("AllowLocal")]
        public IActionResult Put(int id, OfferType offerType)
        {
            if (ModelState.IsValid && id == offerType.ID)
            {
                try
                {
                    using (_context)
                    {
                        _context.Entry(offerType).State = EntityState.Modified;
                        _context.SaveChanges();
                    }
                }
                catch (DbUpdateConcurrencyException)
                {
                    return new NotFoundResult();
                }

                return new StatusCodeResult(200);
            }
            else
            {
                return BadRequest(ModelState.Values.SelectMany(v => v.Errors).Select(error => error.ErrorMessage));
            }
        }
    }

 

Getting data is working like expected. But I have problems to update my data via put. The console is giving me the errorcode 415 "unsupported media type". When debugging my webapi project the put actions is never been called. So I think there is something wrong with my setup of the grid.

Edit: I know why I'm getting the 415 error (see my answer in the comments). I found out that when I expect a datasourcerequest as an argument in the put-action (so a "[DataSourceRequest] DataSourceRequest offerType" instead of a "OfferType offerType") the action is successfully called without errors. But with the datasourcerequest there aren't any infos about my updated object in the grid. So my grid isn't sending the updated object but the metadata of the grid.

Is anybody seeing my mistake?

Stoyan
Telerik team
 answered on 16 Aug 2021
1 answer
15 views

Hi,

I use EditorTemplates in Grids to change entries in cells. By pressing the check-icon a function is called.

It works fine as long as the grid has set:

.Selectable(selectable => selectable
                    .Mode(GridSelectionMode.Multiple))

If the MultiSelect-Mode is not set, the click event on the span is not detected. How can I implement this for Single-Selection Mode?

And is it possible to generate a generic EditorTemplate to be used on different grids?

Thanks
Christine

--------------------------------------

Here the sources:

The grid:

<script id="suppress-text-template" type="text/x-kendo-template">
    <div id="suppress-text-container" style="height:100%;width:100%;">
       @(Html.Kendo().Grid<collact.admin.Models.Ticket.TextItemModel>()
            .Name("SuppressTextGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.EntryId).Editable("returnFalse");
                columns.Bound(p => p.Entry).Title("Texteintrag").EditorTemplateName("Ticket/GridSuppressEdit");
            })
            .HtmlAttributes(new { style = "height: 100%;" })
            .Sortable()
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Events(e => e.Edit("sigGridSuppress_edit"))
            .Scrollable(scr => scr.Height(430))
            .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.EntryId))
            .Read(read => read.Action("ReadListData", "Ticket"))
                )
            .Filterable()
            .Selectable(selectable => selectable
                    .Mode(GridSelectionMode.Multiple))
            .PersistSelection(true)
            .Resizable(resize => resize.Columns(true))
            .ToClientTemplate()
        )
    </div>
</script>

 

The script setting the text of the Textbox in the EditorTemplate:

function sigGridSuppress_edit(e) {
        var editForm = e.container;
        var model = e.model;

        editForm.find("#EntryId_entryid_edit").val(model.EntryId);
        editForm.find("#Entry_entrysuppress_edit").val(model.Entry);
    }

 

The EditorTemplate:

<table>
    <tr>
        <td>
            @(Html.Kendo().TextBox().Name("entrysuppress_edit"))

            <div style="display:none">
                @(Html.Kendo().TextBox().Name("entryid_edit"))
            </div>
        </td>
        <td style="border:none;padding:4px;width:36px">
            <span class='k-icon k-i-check-outline k-icon-36' style="float:left;display:block;display:inline-block" onClick="editSuppressText()" />
        </td>
    </tr>
</table>
Stoyan
Telerik team
 answered on 16 Aug 2021
2 answers
16 views

Hello,

we're evaluating Kendo UI and we are planning to convert an existing application which creates every form it uses from a configuration info in a database.

Doing this in a razor file creates a unreadable code. So the plan is to create the form elements in code behind. I figured out an idea, but I'm not sure if this is the best (or correct) way to do it.

The markup:

@page
@model MyModel
@{
    ViewData["Title"] = "BuildSomethingWonderfulInCodeBehind";
}

...

    @(Model.Build(Html))

And the code behind:

... public class MyModel: PageModel { public IHtmlContent Build(IHtmlHelper<MyModel> html) { StringBuilder result = new(); GetDataSourceWithFormsInfo().ForEach(r => { result.Append( html.Kendo() .TextArea() .Name(r.Name) .MaxLength(r.Length) .ToHtmlString()); }); return html.Raw(result.ToString()); } public void OnGet() { }

// in real world the configuration commes from the db

private static List<TextAreaConfig> GetDataSourceWithFormsInfo() => new() { new TextAreaConfig("name", 20), new TextAreaConfig("surname", 30), new TextAreaConfig("street", 40), new TextAreaConfig("town", 50), }; privateclassTextAreaConfig { public readonly int Length; public readonly string Name; public TextAreaConfig(string name, int length) { Name = name; Length = length; } } } ....

This is a working test fragment just to show the principle. It creates 4 textareas. So it looks that this is a possible path to port the existing app to Kendo UI.

But is the correct way to solve this requirement?

 

Peter
Top achievements
Rank 1
Iron
 answered on 13 Aug 2021
1 answer
26 views
I wanted to pass the variable value as querystring to the LoadContentFrom of the tabstrips

@(Html.Kendo().TabStrip()
        .Name("employee-details")
        .Items(tab =>
            {
                 tab.Add().LoadContentFrom("Index","Employee", new {id: ${employeeID} }).Text("BioData)
            }
         )
)


<script>
var mvvm = kendo.observable({
       employeeID: 1234
});
</script>



How to achieve this?
Mihaela
Telerik team
 answered on 13 Aug 2021
1 answer
13 views
I have a parent grid and when you expand a row, it opens up additional child grids with data related to that specific record. I have 2 child grids that I want to be able to edit. We currently are able to edit the parent grid and we have a button users push to take all the changes and save them to the database at the same time (using a function that finds dirty rows). However, I am unsure how to include changes from the child grids or how to even "know" that a change occurred in the child grid.
function saveChanges() {
    var items = [];
    var someGrid = $("#somegrid").data("kendoGrid");
    //Getting all Dirty Rows
    var data = someGrid.dataSource.data();
    var selectedElements = $.grep(data, function (item) {
        return item.dirty
    });
    //
    var dataText = $("#Facility").data("kendoDropDownList").text();
    var facility = dataText.split('-');
    var _facilityDesc = $.trim(facility[1]);
    var _facilityCode = $.trim(facility[0]);

    for (var j = 0; j < selectedElements.length; j++) {
        var item = selectedElements[j];

        items.push({
            'Facility': _facilityCode,
            'FacilityDescription': _facilityDesc,
            //additional columns from someGrid
 });
    }

Aleksandar
Telerik team
 answered on 13 Aug 2021
1 answer
14 views

Hello, I have a page with a Kendo Grid where every row has a custom button to open a Kendo Window.

Like this:

 

 

When user click exit button opens this Kendo Window:

 

 

This is my current code:

 

 

And this is button click:

 

I want to allow user to click multiple times in exit button and open different kendo windows but when user click in exit button I open a new windows with same id and replace previous one.

Is there any way to implement this behaviour(allow multi kendo windows)?

BR, Miguel Machado


 

Aleksandar
Telerik team
 answered on 13 Aug 2021
Top users last month
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Liu
Top achievements
Rank 1
Iron
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
George C.
Top achievements
Rank 2
Iron
Veteran