Questions on UI for ASP.NET Core Forum

1 answer

113 views

In form table edit missing in Android browser

I have an ASP.Net Core web app running in Azure (MVVM pattern).
It works correctly on desktop/laptop computers. Most of it runs correctly on Android devices (tested on Android 9, 11 & 13 with Chrome & Edge), but there is one piece that doesn't work correctly.

When I try to execute an inform table (for lack of better description), it doesn't display the fields in Android browsers. Below is a description of the issue This is contained in a fieldset in the FormAddEdit view (.cshtml) and the controls are in a partial view.

It's working off of a kendo template defined in javascript in the FormAddEdit view. Other javascript functionality is working.

This is based on operation on a laptop.

Figure A

Clicking on the + button the following should be displayed, and the user can select the date/time, enter treatment

Figure B

Clicking outside the row, the following would be displayed

Figure C

This is based on operation on an android tablet. Figure A (as above) would be displayed

Click on + displays figure D

Figure D

The expected display is Figure B

If there was a treatment present, this is operation on android

Figure E

Clicking the pencil (edit) briefly displays something but returns to this display. It should display the data entry fields as shown in figure b, except showing the data. Clicking on the + (add new), displays what is shown in figure F

Figure F

Is there something that needs to be changed when running on an Android browser?

Grid

answered on 06 Oct 2022

1 answer

335 views

How to retain the currently selected tab in a tab strip when refreshing or navigating

I would like to retain the selected tab when refreshing the page, or when navigating back from another page. I have some code to capture the currently selected tab:

function onSelect(e) {
            console.log(e.item.innerText)
            
            $.ajax({
                type: "POST",
                url: "/Customers?handler=SelectTab&SelectedTab=" + e.item.innerText,
                beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
                }
            });
        }

And I am using the following when the page loads, in order to set the selected tab on page load, but it doesn't show the tab properly (being called from $(document).ready):

function selectTab(tab) {
            var tabStrip = $("#customer-tabstrip").data("kendoTabStrip");
            var t = $("li:contains('" + tab + "')");
            tabStrip.select(t);
            tabStrip.activate(t);
        }

The main tab is still selected, but with the tab I am programmatically selecting appended below the main tab. I am not sure what I am doing wrong...

TabStrip

answered on 06 Oct 2022

1 answer

148 views

Grid height 100% fixed columns

Hello,

I need a grid to fill 100% of the container. The grid is inside a view that has a header and footer layout. What I need is for the grid to have a vertical scroll but not to overflow the container so that the scroll is displayed in the grid and not in the browser window. Also 2 of the columns are fixed (the first 2 columns).

Thanks

Grid

ScrollView

answered on 06 Oct 2022

1 answer

172 views

Whitelist specific HTML tags

Hi!

Is there a way to have a very limited set of HTML tags allowed for the editor? Especially when pasting formatted text?

For example, I only want user to have Bold, Italic, Underline, bullets (ordered and list), and tables.

Any thing else should not be accepted when typed, command buttoned, or pasted.

Editor

answered on 05 Oct 2022

1 answer

438 views

Grid Local data binding by ViewBag data not working

Scenario:

I activates the javascript ajax request by clicking a button client side,

then the request will retreive data from server side and pass data to view by "ViewBag",

I've already checked that the data were passed into view successfully,

but the grid didn't show up,

However I haven't got any error message while debugging in Visual studio or Browser Dev tool.

To be mentioned, my ViewBag passed in a View Model,

which there are "IEnumearable<SubModel>" models in it.

So what actually would bind with grid is the data in sub models.

What I've tried:

1. Testing Grid without giving data => the grid showed up without data

2. Grid with data from ViewBag => ends up with entire grid not showing

(With the first test, I'm guessing it is the data binding error makes the entire grid not showing)

Code:

MyViewModel.cs

public class MyViewModel
    {   
        //What really binds to the grid，Ex: Model1
        public IEnumerable<MyModel1> Model1 { get; set; }
        public IEnumerable<MyModel2> Model2 { get; set; }
        public IEnumerable<MyModel3> Model3 { get; set; }
    }

MyCshtml.cshtml

@model IEnumerable<MyViewModel>

@{
    //ViewModel with sub Models in it passed into view by ViewBag
    var Datas = (MyViewModel)ViewBag.MyViewModel;
}

<head>
    <script src="~/QueryData/js/MyData.js"></script>
</head>

<body>
    @(Html.Kendo().Grid<MyModel1>(Datas.Model1)
                .Name("my-grid")
                .Columns(columns =>
                {
                    columns.Bound(c => c.Name).Title("Name").Width(30);
                    columns.Bound(c => c.ReadData).Title("Data").Width(30);
                })
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .HtmlAttributes(new { style = "height:500px;" })
                .DataSource(dataSource => dataSource        
                    .Ajax()
                    .PageSize(5)
                    .ServerOperation(false)        
                )
    )  
</body>

Reference: ASP.NET Core Local Data Binding

Grid

answered on 05 Oct 2022

1 answer

116 views

Scheduler TagHelper Resource DataSource

I am having trouble using a taghelper and setting the Schedulers Resource to a datasource rather than using bind-to:

<kendo-scheduler name="scheduler" height="600" date=DateTime.Today major-tick="60"  timezone="Etc/UTC">
    <views>
        <view type="day"></view>
        <view type="workWeek" ></view>
        <view type="week"></view>
        <view type="month"></view>
        <view type="year"></view>
        <view type="agenda"></view>
        <view type="timeline" selected="true">           
        </view>
    </views>
    <resources>
        <resource title="Resource" name="Resource" datacolorfield="" datatextfield="Name" datavaluefield="ResourceID" field="ResourceID">
            <datasource type="@DataSourceTagHelperType.Ajax">
                <transport>
                    <read url="/Booking/Index?handler=ReadResources" />
                </transport>
            </datasource>
        </resource>
    </resources>
    <scheduler-datasource type="@DataSourceTagHelperType.Ajax">
        <transport>
            <read url="/Booking/Index?handler=Read"  />       
        </transport>
        <schema data="Data" total="Total" errors="Errors">
            <scheduler-model id="EventID">
                <fields>
                    <field name="EventID" type="number"></field>
                    <field name="title" from="Title" type="string"></field>
                    <field name="start" from="Start" type="date"></field>
                    <field name="end" from="End" type="date"></field>
                    <field name="description" from="Description" type="string"></field>
                    <field name="recurrenceId" from="RecurrenceID" type="number" default-value=null></field>
                    <field name="recurrenceRule" from="RecurrenceRule" type="string"></field>
                    <field name="recurrenceException" from="RecurrenceException" type="string"></field>
                    <field name="ResourceID" type="number" default-value="1"></field>
                    <field name="startTimezone" from="StartTimezone" type="string"></field>
                    <field name="endTimezone" from="EndTimezone" type="string"></field>
                    <field name="isAllDay" from="IsAllDay" type="boolean"></field>
                </fields>
            </scheduler-model>
        </schema>
    </scheduler-datasource>
</kendo-scheduler>

Here is my HTMLHelper code which works well:

@(Html.Kendo().Scheduler<Models.Event>()
    .Name("scheduler1")
    .Date(DateTime.Today)
    //.StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
    .MajorTick(60)
    .Views(views =>
    {
        views.TimelineMonthView(timeline =>
        {
            timeline.StartTime(new DateTime(2013, 6, 13, 00, 00, 00));
            timeline.EndTime(new DateTime(2013, 6, 13, 00, 00, 00));
            timeline.MajorTick(1440);
            timeline.EventHeight(50);
        });
        views.TimelineView(timeline => timeline.EventHeight(50));
        views.TimelineWeekView(timeline => timeline.EventHeight(50));
        views.TimelineWorkWeekView(timeline => timeline.EventHeight(50));
    })
    //.Timezone("Etc/UTC")
    .Group(group => group.Resources("Resource").Orientation(SchedulerGroupOrientation.Vertical))
    .Resources(resource =>
    {
        resource.Add(m => m.ResourceID)
            .Title("Resource")
            .Name("Resource")
            .DataSource(d => d.Read(r => r.Url(Url.Page("./Index", "ReadResources")).Type(HttpVerbs.Post)))
            .DataTextField("Name")
            .DataValueField("ResourceID")
            .DataColorField("");
    })
    .DataSource(d => d
        .Model(m =>
        {
            m.Id(f => f.EventID);
            m.Field(f => f.Title).DefaultValue("No title");
            m.RecurrenceId(f => f.RecurrenceID);
        })
        .Read(r => r.Url(Url.Page("./Index", "Read")).Type(HttpVerbs.Post))
        .Create(r => r.Url(Url.Page("./Index", "Create")).Type(HttpVerbs.Post))
        .Update(r => r.Url(Url.Page("./Index", "Update")).Type(HttpVerbs.Post))
        .Destroy(r => r.Url(Url.Page("./Index", "Destroy")).Type(HttpVerbs.Post))
    )
)

Scheduler

answered on 05 Oct 2022

1 answer

284 views

TileLayout give Id to BodyTemplate

Hey i'd like to make a dashboard using the TileLayout Component in .Net Core. But I want to add different kinds of widgets from a List in the model. Each Container shall be added using one of many templates. I want the templates to render a partial view and have the views get their own data using the Id of the widget. But I don't know how to give the view the id of the container that is currently being created.

This is the code I have so far:

<div class="container-fluid">
@(Html.Kendo().TileLayout()
        .Name("dashboardLayout")
        .HtmlAttributes(new {style = "overflow:hidden;"})
        .Width(String.Format("{0}", (@customModel.ColumWidth * @customModel.ColumCount)))
        .Columns(@customModel.ColumCount)
        .RowsHeight(String.Format("{0}px", @customModel.RowHeight))
        .ColumnsWidth(String.Format("{0}px", @customModel.ColumWidth))
        .Gap(g => g.Columns(@customModel.VerticalGap).Rows(@customModel.HorizontalGap))
        .Reorderable(true)
        .Resizable(true)
        .Containers(c => {
            foreach(DashboardWidgetConfigurationModel widget in @customModel.Widgets) {
                c.Add().Header(h=>h.Text(@customModel.ColumWidth.ToString())).BodyTemplateId("single-value-circle-widget").ColSpan(5).RowSpan(2);
            }
        })
        .Events(e => e.Resize("onTileResize"))
    )
</div>

<script id="single-value-circle-widget" type="text/x-kendo-template">
    @await Html.PartialAsync("../Dashboard/SingleValueCircleWidget", #= widget #)  //the widget model contains the id
</script>

Long story short:

I want to access the current DashboardWidgetConfigurationModel from the foreach loop in the template.

TileLayout

answered on 05 Oct 2022

1 answer

330 views

Chunk Upload does not work well on protocol http/2

If I upload a 1GB file using http/1.1 protocol everything works fine. But if I switch my IIS web site to http/2.0 and upload it again, I often get a "Failed to upload files" message. Both scenarios attached.

Environments:

Firefox 105.0.1 (64-bit)
Windows 10
local IIS 10.0
Telerik UI for ASP.NET Core R3 2022, Assembly Kendo.Mvc, Version=2022.3.913.0 trial

I would like to prefer the latest http protocol in my application.

Upload

answered on 04 Oct 2022

1 answer

240 views

Export grid to PDF hide column menu indicator

Is there a way to suppress the column menu indicator ( the three dots stacked on top of each other) in the column heading when exporting a grid to a pdf?

Grid