Questions on UI for ASP.NET Core Forum

1 answer

248 views

How to make grid edit functionality working with tab click

Hi

We are having a grid with editable field option which triggers when you click on the field.

I wanted to enable tab functionality so that if you are on any field and click tab it should make the next field enable/editable.

When I am clicking on any field to show like this. On tab press I wanted make Charlotte editable.

ANY help appreciated. Thanks!

Accessibility

DropDownList

Editor

answered on 22 Dec 2022

1 answer

203 views

Import Excel file to Kendo Grid using MVC Core - Razor

Hi,

I saw the question and answer about import excel file to kendo grid back in 2020. Do you have any update on the topic or do you have samples? I have the project that our customers want to import data from excel file to the database. They want to see data in the grid before save to table in database. Is it possible? Any advice. Thank you.

Grid

answered on 21 Dec 2022

0 answers

137 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.5K+ 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

99 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

163 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

157 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

87 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

227 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