Questions on UI for ASP.NET Core Forum

1 answer

249 views

I am using Kendo ASP.NET Core and have a grid which has popup editor using custom editor template. I am doing some password complexity validation.

I want the validator fire on keyup. It currently only fires on blur but this is not a good user experience. The user will think they have not succeeded unless they blur.

How can I achieve this? Here is my validator.

 $.extend(true, kendo.ui.validator, {
            rules: { // custom rules
                passwordcomplexity: function (input, params) {
                    if (input.is("[name='Password']") && input.val() != "") {
                        return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@@$%^&*-]).{6,}$/.test(input.val());
                    }
                     return true;
                },
                verifyPasswords: function(input){
                    if (input.is("[name='PasswordConfirmation']")) {
                        return input.val() === $("#Password").val();
                    }
                    return true;
                }       
            },
            messages:{
                 passwordcomplexity: function(input) {
                     return setPasswordComplexityMessage(input);
                 },
                 verifyPasswords: "Passwords do not match."
            }
        });

Grid

answered on 15 Dec 2022

1 answer

124 views

Dockerize CI/CD setup

is there a preferred method to install the .net core MVC controls when you are building and deploying through a Dockerized container? I haven't found a tutorial to bring the controls into the build easily.

.net6 (core)
Telerik core MVC controls
Docker Image - mcr.microsoft.com/dotnet/sdk:6.0 AS build-env

General Discussions

answered on 15 Dec 2022

1 answer

151 views

My grid remain blank using Ajax Read

I am using Telerik 2021.1.422

I get a successful response using my url /shuttlelocation/get

{"data":[{"accountId":933080580393897320,"routeLocationId":"26bcb4b3-0226-4de3-9e65-de878ade40e8","name":"Nelspruit","address1":"Address 1","address2":"Address 2","address3":"Address 3","address4":"Address 4","latitude":1000,"longitude":2000,"isActive":true,"createdOn":"2022-12-09T15:14:37.133289+02:00","userId":"972c57b3-2996-43f2-9336-890750dfa7f8","userName":"Anton Swanevelder"},{"accountId":933080580393897320,"routeLocationId":"0f9b89c2-4bcc-4744-a833-29a615e07417","name":"Potchefstroom","address1":"Potchefstroom","address2":"Bult","address3":"Shell Garage","address4":null,"latitude":1000.00,"longitude":2000.00,"isActive":true,"createdOn":"0001-01-01T00:00:00+00:00","userId":"972c57b3-2996-43f2-9336-890750dfa7f8","userName":"Anton Swanevelder"}],"total":2,"aggregateResults":null,"errors":null}

But my grid remain empty

There are no errors in the browser

Here is the Controller Get. The Repository returns an IQueryable

public JsonResult Get([DataSourceRequest] DataSourceRequest request)
    {
        var data = _routeLocations.GetLocationsBySearch(string.Empty);
        return this.Json(data.ToDataSourceResult(request));
    }

Here is the View

@(Html.Kendo().Grid<RouteLocationModel>()
        .Name("grid")
        .Columns(c => {
            c.Bound(p => p.Name);
            c.Bound(p => p.Address1);
            c.Bound(p => p.Latitude);
            c.Bound(p => p.IsActive);
            c.Command(c =>
            {
                c.Edit(); // The "edit" command will edit and update data items.
                c.Destroy(); // The "destroy" command removes data items.
            }).Title("Commands").Width(200);
        })
        .ToolBar(toolbar => toolbar.Create().Text("Add Location").HtmlAttributes(new { @class="" }))
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .DataSource(d => d
            .Ajax()
            .Read(r => r.Action("Get", "ShuttleLocation"))
            .PageSize(50)
            .Model(model => {
                model.Id(p => p.RouteLocationId);
            })
        )
        .Pageable()
        .Sortable()
        .Filterable()
    )

Grid

answered on 14 Dec 2022

1 answer

1.6K+ views

ASP.NET Core Grid with PopUp Editing using Form component for detail screen

I would like to implement the ASP.NET .NET Core Grid using the pop-up editor. The default UI produced by the popup is less than ideal though, as I have complex screens in certain cases. I would love to implement the Form control as part of the grid declaration (DevExpress does this, for example, here: https://demos.devexpress.com/ASPNetCore/Demo/DataGrid/PopupEditing/ - Is there something similar in the Telerik setup? If so, is there an example?

I know I can implement templates as part of the grid, but this functionality seems odd because I have to store 50+ partial screens in Shared/EditorTemplates folder. Is there a better approach? I am using Razor pages, not MVC.

Thank you,
Alex

Form

Grid

answered on 14 Dec 2022

1 answer

140 views

Split View Pane opens another web browser

We have a Python Flask app on another server that we would like to open in one of the panes in split view, is that possible?

Splitter

answered on 13 Dec 2022

1 answer

101 views

Cannot set all the Line Chart's categoryAxis.baseUnit with Javascript

Scenario:

I've got several Line Charts in my TabStrip,

and I set these Line Charts with same Class Name by .HtmlAttributes(new {@class = "MyClass"})

I'm trying to set these Charts categoryAxis.baseUnit with JavaScript.

Question:

I get all the Line Chart with ClassName

and used a for loop to get the KendoChart and set the categoryAxis.baseUnit.

There's no error poping out,

but there was only one chart been set,

the others remains the origin setting.

I'll leave my code below hope someone could give me some hint.

Code:

.cshtml line chart

//I only showed one of the Line Chart, incase the view gets messy
@(Html.Kendo().Chart(MyViewModel)
                .Name("Chart1")
                .Title("Displacement Time History")
                .Legend(legend => legend
                      .Position(ChartLegendPosition.Bottom)
                 )
                 .ChartArea(chartArea => chartArea
                      .Background("transparent")
                 )
                  .SeriesDefaults(seriesDefaults =>
                      seriesDefaults.Line().Style(ChartSeriesStyle.Smooth)
                 )
                 .Series(series => {
                      series.Line(model => model.ReadData).Name("Displacement").Markers(m => m.Visible(true));
                 })
                 .ValueAxis(axis => axis
                      .Numeric()//.Labels(labels => labels.Format("{0:n1}"))
                 )
                 .CategoryAxis(axis => axis
                      .Categories( m => m.ReadTime)
                      .Type(ChartCategoryAxisType.Date)
                      .BaseUnit(ChartAxisBaseUnit.Fit)
                      .Justify(true) 
                      .Labels(labels => labels.Rotation(-90).Step(10))
                      .Crosshair(c => c.Visible(true))
                      .MajorGridLines(c => c.Visible(false))
                      .AutoBaseUnitSteps(config => config.Seconds(10))
                 )
                 .Tooltip(tooltip => tooltip
                      .Visible(true) 
                      .Format("{0:n3}")
                 )
                 .HtmlAttributes(new {@class = "MyChartClassName"})  // Where I set the ClassName of Chart
   )

javascript

$( document ).ready(function() {
        
        var chartsEle = document.getElementsByClassName('MyChartClassName'); //Gets all the HtmlDocument by ClassName
        
        // for to loop through every Line Chart
        for(var i=0; i<chartsEle.length; i++){
            
            var chart = $('#'+chartsEle[0].id).data("kendoChart"); //gets the exact KendoChart with id 
            chart.options.categoryAxis.baseUnit  = "seconds";  // setting baseUnit
            chart.redraw();
        }
      
    });

Chart

answered on 13 Dec 2022

0 answers

117 views

Default FileManager (Core MVC) to Grid view only

Is there a way to configure the FileManager so it displays files in the grid view only? I do see how to remove the option to switch between views but if I use that it only displays files in the list view.

FileManager

asked on 12 Dec 2022

1 answer

155 views

Version Support

We have websites using different versions of ASP.NET Core. Where can I find which versions of ASP.NET Core are supported by each release of Telerik UI for ASP.NET Core?

Thanks

General Discussions

answered on 12 Dec 2022

1 answer

421 views

Asp.Net Core Razor Grid Single Select mode

I am having fits trying to figure this out...

I have a grid with a Select column. I have set the GridSelectionMode to single. Checkboxes show up on each row as expected. However, there is a checkbox in the Title row as well. So I tried to add a custom title in hopes of suppressing it, but it doesn't work. When the header checkbox is clicked, it selects the first data row, and unchecking deselects the first row.

The bigger problem, though, is that when clicking on any row, the row is selected as expected. But clicking on another row selects the new row, but the checkbox on the first clicked row remains checked. The expected behavior is that when the second checkbox is clicked, the first will no longer be clicked.

The questions:

How do I get single mode to appear to the user as actually single - as in there is only one row with a check at a time?

And how can I get rid of the checkbox in the Title row?

Grid

answered on 08 Dec 2022

1 answer

1.0K+ views

Forms throwing a JsonSerializationException

So I am trying to use forms for the first time, I have been working with grids previously, and whenever I include a form on a Razor page or partial view within a Razor page it throws the following error.

JsonSerializationException: Self referencing loop detected for property 'Module' with type 'System.Reflection.RuntimeModule'. Path 'PageContext.ActionDescriptor.HandlerMethods[0].MethodInfo.Module.Assembly.EntryPoint'.

I tested this on several projects using custom models and the identity model and got the same result.

I saw on some older posts to include the following to the AddNewtonsoftJson options => options.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore; but this did not work.

(also tried it with the recommended serialization on https://docs.telerik.com/aspnet-core/installation/json-serialization)

I do have grids setup without issue.

Any idea what could be causing this?

see the attached file for the call stack and raw exception details

Versions:
ASP.net core 6

Microsoft.AspNetCore.Mvc.NewtonsoftJson 6.0.11

Telerik.UI.for.AspNet.core 2022.3.1109

Form

answered on 08 Dec 2022