Questions on UI for ASP.NET MVC Forum

1 answer

266 views

I've read the examples, and I've followed along as best as I can, but I'm still having an issue getting a simple dropdown into my grid (ASP.NET MVC)

I have a model called Supplier, and a model called VehicleType

        public class Supplier
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        [Display(Name = "Id")]
        public int SupplierId { get; set; }

        [Display(Name = "Supplier Number")]
        public int SupplierNumber { get; set; }

        [Display(Name = "Name")]
        public string SupplierName { get; set; }

        [Display(Name = "Vehicle Type Id")]
        public int VehicleTypeId { get; set; }

        [Display(Name = "Status Id")]
        public int StatusId { get; set; }
        // I added this
        [NotMapped]
        [UIHint("VehicleType")]
        public VehicleType VehicleType { get; set; }

    } 
    public class VehicleType
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int VehicleTypeId { get; set; }
        public string VehicleTypeName { get; set; }
    }

My Grid is as follows:

@(Html.Kendo().Grid<MyProject.Models.Schedule.Supplier>
    ()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Select().Width(50);
        columns.Bound(p => p.SupplierNumber).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.SupplierName).Groupable(true).Filterable(ftb => ftb.Multi(true));
        //columns.Bound(p => p.VehicleTypeId).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.VehicleType).ClientTemplate("#=VehicleType.VehicleTypeName#").Sortable(false);

    })
    .Pageable()
    .Sortable()
    .ToolBar(toolBar =>
    {
        toolBar.Create();
        toolBar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .PersistSelection()
    .Scrollable()
    .Groupable()
    .Filterable()
    .HtmlAttributes(new { style = "height:600px;" })
    .Resizable(r => r.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.SupplierId))
        .PageSize(100)
        .Events(events => events.Error("error_handler"))
        .Read(read => read.Action("GetSuppliers", "Schedule"))
        .Update(update => update.Action("EditSupplier", "Schedule"))
        .Create(create => create.Action("CreateSupplier", "Schedule"))
    )
    )

My controller looks like this:

        // View for the page
        public ActionResult Supplier()
        {
            ViewData["vehicleTypes"] = new Models.MyContext()
                .vehicleTypes
                .Select(v => new VehicleType
                {
                    VehicleTypeId = v.VehicleTypeId,
                    VehicleTypeName = v.VehicleTypeName
                })
                .OrderBy(v => v.VehicleTypeName);

            return View();
        }

        // Using this to get the data for the grid
        public ActionResult GetSuppliers([DataSourceRequest] DataSourceRequest request)
        {
            List<Models.Schedule.Supplier> result = MyLogic.suppliers();
            return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }

And finally I created an EditorTemplate called VehicleType.cshtml

@(Html.Kendo().DropDownList()
        .Name("VehicleType") 
        .DataValueField("VehicleTypeId")
        .DataTextField("VehicleTypeName")
        .BindTo((System.Collections.IEnumerable)ViewData["vehicleTypes"])
    )

When I try to view the grid I get this error:

The entity or complex type 'MyProject.Models.VehicleType' cannot be constructed in a LINQ to Entities query.

After some googling, I changed my ViewData lookup in my controller to this:

Which displays my grid (empty though there should be 31 rows) and the console has the following error:

Uncaught TypeError: Cannot read properties of null (reading 'VehicleTypeName')
    at eval (eval at compile (kendo.all.js:241:30), <anonymous>:3:3673)
    at init._rowsHtml (kendo.all.js:74650:37)
    at init._renderContent (kendo.all.js:75513:34)
    at init.refresh (kendo.all.js:75329:22)
    at init.d (jquery.min.js:2:3873)
    at init.trigger (kendo.all.js:171:37)
    at init._process (kendo.all.js:8341:22)
    at init.success (kendo.all.js:8037:22)
    at success (kendo.all.js:7928:42)
    at Object.n.success (kendo.all.js:6762:25)

Can someone point me in the right direction here?

Without trying to add the dropdown, it all works as expected, but I'd rather not have to type in the id values when editing/creating a row

I've been bashing my head against the wall for it for a couple of hours now, so any kind of help would be greatly appreciated.

Thanks

DropDownList

Grid

answered on 22 Feb 2022

2 answers

162 views

Migration Telerik ASP.NET MVC from 2016.3.1028.545 to 2022.1.119.545

Hi,

in our company we are testing migration Migration Telerik ASP.NET MVC from 2016.3.1028.545 to 2022.1.119.545.

Our app now is working with .NET 4.8.

We have upgrade all microsoft asp.net mvc references to make compatibles with new teleric dll.

We have migrated dll through upgrade wizard (Api Analyzer didnt work, when we have select all selection it began to run and swicht off)

We have changed all scripts, styles manually.

We have changed file kendo-ui.d.ts for kendo.all.d.ts manually

then when we have compiled app we get an error :

Error	TS2339	(TS) Property '_decorateMessageContainer' does not exist on type 'Validator'.

It seems that in kendo.all.d.ts , in Validator doesnt exists property '_decorateMessageContainer' anymore, so our function doesn't work:

function addValidationEvent() {
    var oDecorateMessageContainer = kendo.ui.Validator.fn._decorateMessageContainer;
    kendo.ui.Validator.fn._decorateMessageContainer = function () {
        $('[name="' + arguments[1] + '"]').trigger("validation-error");
        return oDecorateMessageContainer.apply(this, arguments);
    };

    var oValidateInput = kendo.ui.Validator.fn.validateInput;
    kendo.ui.Validator.fn.validateInput = function () {
        arguments[0].trigger("validation-check");

        return oValidateInput.apply(this, arguments);
    };
}

Id like to know :

1º) Can we upgrade directly from 2016 Telerik version to 2022 or we have to upgrade first to another version.

2º) Is version 2022 the better version for our app or is better another earlier one ?

3º) How can i fix the error explained below?

Thanks in advance.

General Discussions

answered on 22 Feb 2022

3 answers

194 views

Restore 2019.3.917 package

again >>
I can't restore the kendo on mu new laptop,

I mapped my project and it required to restore the kendo , but it appear this message !
any help ?

Application

answered on 20 Feb 2022

1 answer

140 views

Breadcrumbs With Multiple Folders

I'm trying to use the Kendo UI Breadcrumb component. I have it set up like so:

@(Html.Kendo().Breadcrumb()
.Name("breadcrumb")
.BindToLocation(true)
.Navigational(true)
)

This works fine, except when routing to a page multiple levels down in my web app. For example, my project structure is:

Pages/Index.cshtml
Pages/Core/Page2.cshtml

So Pages/Index.cshtml shows just the Home icon. Great.

But pages/Core/Page2.cshtml shows this in the breadcrumbs: HomeIcon > > Page2 instead of HomeIcon > Page2

How do I make the breadcrumb not display that blank space where a folder isas part of the path? I don't want to hard code the breadcrumbs -- that sort of defeats the purpose.

Breadcrumb

answered on 18 Feb 2022

0 answers

144 views

Kendo datePicker fails to validate for culture pattern on server

We're using Telerik.UI.for.AspNet.Mvc5.2021.2.511 to input 2 dates.

var culture = System.Globalization.CultureInfo.CurrentCulture.ToString();
<script src="~/Scripts/kendo/2021.2.511/cultures/kendo.culture.@(culture).min.js"></script>
kendo.culture("@culture");

<div class="form-group">
              @Html.LabelFor(m => m.StartDate, new { @class = "col-md-2 control-label" })
             <div class="col-md-10 k-content">
                  @(Html.Kendo().DatePicker()
                        .Name("StartDate")
                       //.Min(DateTime.Today)
                       .Max(new DateTime(2030, 12, 31))
                       .Value(DateTime.Today.AddDays(1))
                      .Events(e => e.Change("startChange"))
                       .Culture(culture)
                  .HtmlAttributes(new { @data_val = "false", validationMessage = @DisplayText.Get("InvalidDateWarning") })
                  )
                </div>
              </div>

             <div class="form-group">
                 @Html.LabelFor(m => m.EndDate, new { @class = "col-md-2 control-label" })
                   <div class="col-md-10 k-content">
                      @(Html.Kendo().DatePicker()
                        .Name("EndDate")
                         .Min(DateTime.Today)
                         .Max(new DateTime(2030, 12, 31))
                        .Value(DateTime.Today.AddDays(1))
                        .Events(e => e.Change("endChange"))
                        .Culture(culture)
                         .HtmlAttributes(new { @data_val = "false", validationMessage = @DisplayText.Get("InvalidDateWarning") })
                   )
                 </div>
              </div>

When this is run locally in VS it works as expected, but once it's published to the server it complains of an invalid date. Using the debug tools in the browser it shows the attached. The Kendo cultures are correct and the input culture is correct and the date value is correct, so I'm at a loss as to what's going wrong.

Originally we were using the suggested Validation framework, but the same scenario was happening, it worked locally but not once published. This happens in both Chrome and Edge.

Has anyone ever experienced this before?

I've tried the same code now against different languages and it seems to be specific to Czech, so far.

It's the spaces.

Telerik, Is this a bug?

DatePicker

updated question on 16 Feb 2022

1 answer

333 views

Provided expression should have string type (Parameter 'stringExpression')

I'm using Kendo UI for aspnet core MVC. And whenever I use the search with a numeric value I get an exception:

Provided expression should have string type (Parameter 'stringExpression')

It works however great with strings. So for example: "test" works but 5 throws an exception.

My search in my grid is configured like this

.Search(s => { 
                    s.Field(c => c.IncidentEvent, "contains"); 
                    s.Field(c => c.CourseNumber, "contains"); 
                    s.Field(c => c.CourseCode, "contains");
                    s.Field(c => c.ActivityType, "contains");
                    s.Field(c => c.SeverityType, "contains");

All my fields are of string type. However I expect kendo grid to be able to parse integers as well when doing a search.

Is there a way around this? How can I get my search to work with numbers as well?

Grid

answered on 15 Feb 2022

1 answer

223 views

Grid custom command with template doesn't trigger event

I'm trying to use the custom command functionality in the grid component. When giving my custom command a template, the click event isn't triggered. the template is basically just a span so I can use my icon.

If I don't give an onclick event to the span, the click event is never triggered. But if I do give an onclick event it is triggered but I cannot access the dataItem object. So I am not able to retrieve the row data.

Grid

answered on 11 Feb 2022

1 answer

244 views

Font Size textbox

I am having trouble with font sizing with the UI for Telerik. I posted before about setting font sizes for the datepicker and dropdowns which now work great.

Now I am having trouble setting the font size for the textbox control with floating label.

<div class="demo-section k-content">
    <h4>Set value</h4>
    @(Html.Kendo().TextBox()
        .Name("textbox")
        .Placeholder("Name")
        .Label(label => label
            .Content("Name")
            .Floating(true)
        )
        .HtmlAttributes(new { style = "width: 100%" })
    )

    <style>
        .k-floating-label-container {
            width: 100%;
        }
    </style>
</div>

I have modified CSS but the floating label looks incorrect when font size is adjusted through CSS. I would like size 14px font for both the input text and the floating label. How can I achieve this? Currently increasing the font size of the floating label makes the label not "float" far enough to the top, and obscures the textbox. Any help is appreciated.

Here is some examples of the extremely small text occuring on all UI inputs...

Textbox with filtering:

Datepicker:

This is really becoming a problem.

I still need a fix for the floating textbox, but I am wondering if there is a more universal fix that can be applied in the universal CSS. Please help, this is my only complaint with the UI so far.

I am losing time trying to adjust font sizes.

TextBox

answered on 10 Feb 2022

7 answers

465 views

Change Event Editor title

I need to know how to change the Event Editor title, for example if I am using the scheduler to set appointments not events so I need to change the title of Editor from Event to Appointment, is there a way to perform that?

Scheduler

answered on 10 Feb 2022

1 answer

158 views

Kendo Grid auto populate textbox using MVC .Filter event calling multiple time on key press

How to restrict multiple key press events while entering characters in kendo grid auto populate text box
eg. If enter 3 characters in auto populate textbox its is hitting 3 times action method. How to avoid multiple
server action calls. Please find the pseudo code as below :

@(Html.Kendo().Grid<Model>().Name("Grid")
.AutoBind(Model.AutoPopulateResults)
.Columns(columns =>
{
columns.Bound(theMember => theMember.LastName).Width(30).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").ShowOperators(false).MinLength(3).SuggestionOperator(FilterType.Contains)));
}
.DataSource(dataBinding => dataBinding.Ajax()
.Read(read => read.Action("ActionMethod", "Controller").Data("SearchParameters"))
.Events(events => events.Error("handleAjaxErrorFromGrid"))
.ServerOperation(true)
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Events(events => events.Change("GridRowSelected")
.Filter("GridRowonFiltering"))

Grid

answered on 09 Feb 2022