Questions on UI for ASP.NET Core Forum

1 answer

178 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

456 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

118 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

294 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

340 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

246 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

answered on 04 Oct 2022

1 answer

226 views

How to set Monday as the first day of week in the gantt week view?

I know that if set ShowWorkDays(true) only workdays will be shown and I can set WorkWeekStart and WorkWeekEnd.

But what if I want to keep showing the weekends and still have monday as first day of the week?

Gantt

answered on 03 Oct 2022

1 answer

85 views

Pager change the breakpoints

I am using the grid with a pager and I saw that the pager does not behave correct regarding the visibility of the controls. (I am using the bootstrap theme and have every control: buttons, numbers, input, sizes, info and refresh)

I saw on the page for the pager responsive https://docs.telerik.com/aspnet-core/html-helpers/data-management/pager/responsive

that you are using the values 600, 480 and 360.

Is there a way to modify them to use the bootstrap breaking points or some other custom ones.

Grid

Pager

answered on 30 Sep 2022

1 answer

1.5K+ views

Filter Kendo DataSource before read

I have a kendo grid with an ajax data source. Before the read operation fires, I would like to apply filters dynamically to the data source. I tried to make this work with the RequestStart event of the data source. Specifically, I used e.sender._filter = filters; here to avoid multiple requests. The problem is that on the server, request.Filters is empty. I assume the reason is that_filter is read-only.

@(Html.Kendo().Grid<DataModel>()
   .Name("grid") 
   .Columns(columns =>
   {
       columns.Bound(p => p.Id);
       columns.Bound(p => p.Name);        
   })
   .DataSource(dataSource => dataSource
       .Ajax()
       .Events(o => o.RequestStart("addFilters"))
       .Read(read => read.Url("/data?handler=ReadData")
    )
)

function addFilters(e) {
   var filters = getGridFilters();
   e.sender._filter = filters; //e.sender.filter(filters) works, but would result in an additional request and an infinite loop
}

function getGridFilters() {
    var filters = { logic: "and", filters: [{ field: "Name", operator: "contains", value: "xyz"}]};
    return filters;
}

public JsonResult OnPostReadData([DataSourceRequest] DataSourceRequest request) //request.Filters is empty
{}

Grid

answered on 30 Sep 2022

1 answer

2.0K+ views

Get cell value in a selected row in Grid with clicking a button

Scenario:

I had a grid with datas,
and in the last cell of each row there is a command custom button with click event,
which the click event will leads to a javascript function,
I would like to access the specific cell value of the selected row.

Tried:

I've noticed that Telerik UI for jQuery has the "select" method Telerik UI for jQuery Select method,
and I got the row with instructions,
but how can I get the cell value?
got no idea since I am new with jQuery,
I'll show what I've tried below

MyView.cshtml

<div>
        @(Html.Kendo().Grid<MyViewModel>()
        .Name("my-kendogrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ItemName).Title("Moniter").Width(75);
            columns.Bound(c => c.EqStartTime).Title("StartTime").Width(50).Format("{0:yyyy-MM-dd HH:mm:ss}");
            columns.Bound(c => c.EqEndTime).Title("EndTime").Width(50).Format("{0:yyyy-MM-dd HH:mm:ss}");
            columns.Command(c => c.Custom("MyForm").Click("getRowValue")).Title("Datas").Width(30);
        })
        .Pageable()
        .Scrollable()
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("GetData", "QueryData", new { ID = instId, startTime = startTime, endTime = endTime }))
            .Model(m => {
                m.Id(id => id.id);
                m.Field(f => f.id).Editable(false);
            })
        )
        )
</div>

MyJavascript.js

function getRowValue() {
    
    // What I've tried so far
    var grid = $("#my-kendogrid").data("kendoGrid")
    var rows = grid.select();

    //get seleted Row while clicking the inline button

    //get cell value in the row
}

Grid

answered on 29 Sep 2022