Questions on UI for ASP.NET Core Forum

1 answer

89 views

How can I keep the popup of a FloatingActionButton open?

Hello

I'd like to keep the popup of a FloatingActionButton open after clicking one of the items.

The function preventDefault() is not available for the click event of the items.

Thanks and best regards,

Christine

FloatingActionButton

answered on 21 Oct 2021

1 answer

145 views

DateRangePicker selected time

Hello,
I'm starting a daterangepicker for filtering my datas,
as i select the time range,
say like selecting start time: 2021/10/18 to end time: 2021/10/19
while i checked the value it turns out to be 2021/10/18 12:00:00 to 2021/10/19 12:00:00.
The issue here is how can i change the selected value to 2021/10/18 00:00:00 to 2021/10/19 00:00:00?

DateRangePicker

answered on 21 Oct 2021

2 answers

152 views

Apply search field criteria to Grid

Hello,

I've created an Index screen with a Grid, but I want to be able to fill and submit some search criteria before the Read action occurs, then use those values in the Action method on the controller. I've set auto-bind="false" for the Grid.

My Grid has a data source:

    <kendo-datasource name="dataSource1" type="DataSourceTagHelperType.Ajax" server-operation="false" page-size="20">
        <transport>
            <read url="@Url.Action("TblPart_Read", "TblPart");" data="searchData" />
        </transport>
    </kendo-datasource>

    function searchData() {
        return {
            search: $("#txtSearch").val(),
            archived: $("#chArchived").prop('checked')
        };
    }

The searchData consists of textbox and checkbox values.

The controller action is as follows:

        public async Task<ActionResult> TblPart_Read([DataSourceRequest] DataSourceRequest request)
        {
            var service = new TblPartService(_context);
            // omitted, but this is where I will filter the result based on the searchData

            return Json(result);
        }

How do I:

Make the Grid display the filtered data when the form is submitted
Retrieve searchData in the controller action?

Many thanks,

Richard

Grid

answered on 21 Oct 2021

2 answers

905 views

errors after connecting kendo

I used to work in ASP MVC, now I switched to ASP.NET Core, I connected all libraries and all elements.But 2 errors appear on startup:

1) Could not load content for https://localhost:44395/lib/kendo/js/kendo.all.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Could not load content for https://localhost:44395/lib/kendo/js/kendo.aspnetmvc.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

2) kendo is not defined

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - service</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.bootstrap-v4.min.css" />

</head>

<body>
...................
<footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2021 - service - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    @*<script src="~/lib/jquery/dist/jquery.min.js"></script>*@
    <script src="~/lib/kendo/js/jquery.min.js"></script>
    <script src="~/lib/kendo/js/kendo.all.min.js"></script>
    <script src="~/lib/kendo/js/kendo.aspnetmvc.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script src="~/js/href.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>

Startup.cs:

public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<Context_new>(options =>
                options.UseSqlServer(
                    Configuration.GetConnectionString("DefaultConnection")));
            services.AddIdentity<LoginViewModel, IdentityRole>().AddEntityFrameworkStores<Context_new>();
            services.AddRazorPages();
            services.AddKendo();

            services.Configure<CookiePolicyOptions>(options =>
            {
                // This lambda determines whether user consent for non-essential cookies is needed for a given request.
                options.CheckConsentNeeded = context => true;
                options.MinimumSameSitePolicy = SameSiteMode.None;
            });

            services
                .AddMvc(options => options.EnableEndpointRouting = false).SetCompatibilityVersion(CompatibilityVersion.Version_3_0)
                .AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
        }

control.cshtml:

@using MvcModels.Contains
@using Kendo.Mvc.UI

<div class="container text-center">
    <div class="row">
        <h5>Панель администратора</h5>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-3">
            @(Html.Kendo().PanelBar()
                            .Name("MenuAdmin")
                            .ExpandMode(PanelBarExpandMode.Single)
                            .Items(panelBar =>
                            {
                                panelBar.Add()
                                .Text(MainPage.Users);
                                panelBar.Add()
                                .Text(MainPage.Category);
                                panelBar.Add()
                                .Text(MainPage.Parameters).Enabled(true);
                            })
            .Events(events => events.Select("menuSelectAdmin"))
            //.SecurityTrimming(true)
            )
        </div>

Accessibility

answered on 20 Oct 2021

1 answer

75 views

Get the field information on Filter UI function

I have a grid with a column that is a foreign key. I need to filter the column and to create a dropdown for it. Since the number of values is huge I need to use a dropdown with virtualization. Because of that I need to define a UI function. (I should mention that I have the columnmenu = true for the other case I know which field it is)

All of our javascript code must exist in a js file so the read function can not be set in it since the site can have variable url.

Is there a way to get to know for which field the function is called? I tried to look in the parent of the element sent but there is no information for which column the menu is created.

Grid

answered on 20 Oct 2021

1 answer

275 views

Kendo Editor ImageBrowser - undefined instead of names in the file list

Hi,

I am trying to integrate kendoEditor into my application. Everything works correctly, even the upload mechanism. The Read action works correctly and returns the list of files and folders, but in the file display the name is incorrect as well as the path. Only "undefined" is displayed under each icon. The wrong icon is also displayed, a clear sign that the JSON returned by the Read does not reach its "destination" correctly.

I have created a project to test how the editor works out of the context of my application, but I still have this problem. I have attached the project to this post, along with an image showing the error message.

Thanks!

Sebastiano

Editor

answered on 20 Oct 2021

1 answer

1.1K+ views

Razor Web Application, Date picker not displaying initial value

How do you get the date picker to display the initial value when it is in a wizard?

This code is from the demo and not inside a wizard so it works:

<div class="demo-section k-content">
        <h4>Show e-mails from:</h4>
        @(Html.Kendo().DatePicker()
              .Name("datepicker")
              .Value("10/10/2011")
              .HtmlAttributes(new { style = "width: 100%", title = "datepicker" })
        )  
</div>

In the following code it is in a wizard and it does not display the initial value.

s.Add<Contract>()
.Title("Email details")
.Form(f => f
.Validatable(v =>
{
v.ValidateOnBlur(true);
v.ValidationSummary(vs => vs.Enable(false));
})
.FormData(Model.Contractor.Contracts)
.Items(items =>
{
items.Add()
.Field(p => p.StartDate)
.Label(l => l.Text("Start Date"))
.Editor(e =>
{
e.DatePicker()
.Name("Startdatepicker")
.Value("10/20/2011")
.HtmlAttributes(new { style = "width: 100%", title = "datepicker" });
});
})
)
.Buttons(b =>
{
b.Previous();
b.Next();
});

Date/Time Pickers

answered on 18 Oct 2021

1 answer

3.9K+ views

Checkbox onclick event

I haven't been able to find and docs or samples on this.

I have a checkbox on an ASP.NET Core View page.

When checked it should set two button groups to unselected (may not be correct terminology) and hide two div classes that display text.

The div classes are displayed based on the two button selections.

Problem is I can't seem to find anything that shows how to capture an onclick event for the Kendo().Checkbox.

Is this possible?

TIA

Checkbox

answered on 18 Oct 2021

1 answer

576 views

Add filter by date to kendo grid with dynamic columns

Hello, I'm trying to add a date filter to a dynamic column but my filter it's not applied, always apply the default string filter.

This is my current code to create the grid:

And this is current result:

Is there any way to implement this(date filter in dynamic grid)?

BR, Miguel Machado

Date/Time Pickers

Filter

Grid

answered on 18 Oct 2021

1 answer

136 views

Remove Icon not showing in Kendo UI Upload control also duplicate files appear

Hi guys,

I am using Kendo UI Upload to upload files the upload works fine however there are two things I am facing... I am using Arabic RTL Version

Now here is the problem, when I upload the files it get duplicated however, I only upload it once only.

Secondly the remove icon is not showing but the functionality is there just the icon not appearing....

I use the following CDN links in my layout files.

    <link href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.aspnetmvc.min.js"></script>

Also, I want to know, How I can bind The ViewModel property name to Kendo UI Extension methods? like we do with normal html controls using asp-for="@Model.Student.Name"

  @(Html.Kendo().Upload()
                                      .Name("files")
                                      .HtmlAttributes(new { aria_label = "files" })
                                      .Validation(validation => validation.AllowedExtensions(new string[] { ".pdf" }))
                                      )

Anyone Can Help?

Upload

answered on 18 Oct 2021