Questions on UI for ASP.NET Core Forum

0 answers

129 views

Combobox Server Filtering on select of item, the Text and Value is undefined

I want to get the value and create a link to redirect to based on the selected result.

But getting undefined.

ComboBox

asked on 21 Dec 2022

1 answer

1.4K+ views

pass parameter from java script to c# in razaor page

hi

i need pass Parameter myTicket_Id from java script to c# in razaor page .

my code is :

<script>
                        function onChange(e) {
                            var selectedRows = this.select();
                            var dataItem = this.dataItem(selectedRows[0]);

                            var myTicket_Id=dataItem.Ticket_Id

                            console.log(dataItem.Ticket_Id);

                        };
                    </script>
                    

                    @{

                        HttpContext.Session.Set("Ticket_Id", myTicket_Id);

                        Response.Redirect("/Ticket?id="  + myTicket_Id );
                    }

thanks

Grid

answered on 20 Dec 2022

1 answer

93 views

Find OnRowClicked Event In Razor Page

Hi

I Need Find Event Row click server side In asp.net core 6 , Razor page.

my code is :

                    @(Html.Kendo().Grid<MSG_UserTicketsList_ForFolderModel>
                        ().Name("grid")
                        .Scrollable()
                        .Selectable(selectable => selectable
                        .Mode(GridSelectionMode.Single)
                        .Type(GridSelectionType.Row))
                        .Events(events => events.Change("onChange"))
                        .Columns(columns =>
                        {
                            columns.Bound(e => e.TicketId).Title(" ").ClientTemplate(
                                "# if ( DoerTicketStatus    == 'False') { #" +
                            "<div class='UnreaedTicket'>" +
                            "# } else { #" +
                            "<div>" +
                            "# } #" +
                            "<div class='main-mail-item' >" +
                            "<div class='main-mail-star'>" +
                            "<i class='typcn typcn-star'></i>" +
                            "</div>" +
                            "<div class='main-img-user'>" +
                            "<img src='" + Url.Content("~/UserImage/") + "#:data.TicketCreatorId#.png' />" +
                            "</div>" +
                            " <div class='main-mail-body'>" +
                            " <div class='main-mail-from'>" +
                            "Ticket#: TicketId # &nbsp; &nbsp; #: MyName # (#: UserName #) " +
                            "</div>" +
                            "<div class='main-mail-subject'>" +
                            "<strong>#: Subject #</strong>" +
                        @*      "<div class='row'>&nbsp; #: Subject # &nbsp;</div>"+*@
                        "</div>" +
                        "</div>" +
                        "<div class='main-mail-date'>" +
                        "#: LastUpdateDate #" +
                        "</div>" +
                        "</div>" +
                            "</div>"
                                );
                        })

thanks

Grid

answered on 20 Dec 2022

1 answer

1.3K+ views

Validator Not Showing EmailAddress Attribute Error Message

I'm using the Kendo Validator on a Razor Page in a .NET 7 project. I've defined an error message for the EmailAddress attribute on the page model but the Kendo Validator is not using it. I'm using Telerik UI For ASP.NET Core UI version 2022.3.1109.

page model

[DisplayName("Email"), StringLength(256, ErrorMessage = "Email must be no larger than 256 characters"), DataType(DataType.EmailAddress), EmailAddress(ErrorMessage = "Please enter a valid email address")]
public string? EmailAddress { get; set; }

razor

<label asp-for="Input.EmailAddress"></label><br/>
<input asp-for="Input.EmailAddress" class="form-control-large input-rounded"/>
<span asp-validation-for="Input.EmailAddress" class="text-danger"></span>

javascript

var validator = $("#editLocationForm").kendoValidator().data("kendoValidator");

function validateSave() {
    if (validator.validate() || validator.errors().length === 0) {
        $('#editLocationForm').submit();
        $("#SaveConfirmationWindow").data("kendoWindow").close();
    } else {
        bootstrapWarningMessage("There was an error saving.  Please correct the errors and try again.");
    }
    window.scrollTo(0, 0);
    return true;
}

I would expect to see the error message from the attribute -> "Please enter a valid email address".

What I'm getting instead -> "Input.EmailAddress is not valid email".

Any idea how I can get this to display the error message from the attribute? I have Required and StringLength attributes that are properly displaying the attribute error message so maybe a bug with the EmailAddress attribute?

General Discussions

answered on 19 Dec 2022

1 answer

154 views

Turn of orgchart edit menu in taghelper

Using the taghelper for the orgchart. How do I turn off the edit functions (Edit, Create, Delete) using the default layout? Within the transport, I only have the read action defined. I don't really want to create a template if the default layout is adequate. Seems there is an option (editable) in Kendo UI for jQuery, but not the taghelper.

Using Telerik.UI.for.AspNet.Core 2022.3.1109

OrgChart

answered on 19 Dec 2022

1 answer

143 views

Use DateTime Value from Parentgrid as DefaultValue in ChildGrid Create

Hi,

I can use a ParentGrid Value in a Childgrid if I set the DefaultValue in the model to the TemplateField

.Model(model => {
model.Id(p => p.ALIASQLF);
model.Field(f=> f.ALIASQLF).DefaultValue("#=ALIASQLF#"); //is a field in the parentgrid and will be set at new row
})

But once I try to use a DateTime Value from the ParentGrid this approach does no longer work, as the Field expects a C# DateTime Value

Okay, just convert the Value to DateTime, right?

But the "#=FieldName#" Syntax does not seem to work as a parameter in a C# method

For Example, the following code will try to convert literally "#=ReplicationDateString#" instead of the datetime-string value:

.Model(model => {

model.Id(p => p.ReplicationDate);
model.Id(p=> p.VS_Jobnumber);
model.Field(f => f.ReplicationDate).DefaultValue(DateTime.ParseExact("#=ReplicationDateString#", "yyyy-MM-dd", CultureInfo.InvariantCulture));
})

Then just convert it within kendo, aight?

.Model(model => {

model.Id(p => p.ReplicationDate);
model.Id(p=> p.VS_Jobnumber);
model.Field(f => f.ReplicationDate).DefaultValue("#= kendo.parseDate("2022-02-02") #");
})

But the kendo.parseDate function always returns a string, so this did not work either, as it expects a C# DateTime.

Has anyone an Idea how to solve this problem? Is there a better approach?

Grid

answered on 16 Dec 2022

1 answer

83 views

GridRow no longer available in asp.net core package

Hi,

I'm currently migrating an MVC 5 project to .NET 6 and I'm having some issues with some of the extensions methods usedin MVC5 due to some classes being deprecated.

Previously we were setting someclasses on the row using a couple of extension methods:

C# Extension method

        public static void HighlightRows<T>(this GridRow<T> row, IEnumerable<Tuple<Func<T, bool>, string>> expressions)
            where T : VM
        {
            var classes = new List<string>();
            foreach (var expression in expressions)
            {
                if (expression.Item1(row.DataItem))
                {
                    if (!String.IsNullOrEmpty(expression.Item2) && classes.Count == 0)
                        classes.Add(expression.Item2);
                }
            }
            if (classes.Count > 0)
                row.HtmlAttributes["class"] = String.Join(" ", classes);
        }

And usage:

        @(Html.Kendo().Grid(Model.Entities)
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(c => c.Name);
                columns.Bound(c => c.Status);
            })
            .RowAction(r =>
            {
                r.HighlightRow(new[]
                {
// if status is complete then set row class to success(set background togreen) is status is error set background to red basically.
                    Tuple.Create<Func<MyVm, bool>, string, string>(m => m.Status == "Complete, "success class"),
                    Tuple.Create<Func<MyVm, bool>, string, string>(m => m.Status == "Error", "errorclass"),
                });
            })

The issue is GridRow seems to be deprecated in ASP NET Core. I've seen some sugestions to do it client side but I'd like to keep it server side(and extension methods) ifpossible.

Is there a migration guide from MVC5 to ASP.NET Core regarding the telerik packages or some list with what was deprecated? What's deprecated, what to use in the new version etc ?

Grid

answered on 15 Dec 2022

1 answer

212 views

Firing kendo.ui.validator on Keyup

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

94 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

133 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