Questions on UI for ASP.NET Core Forum

0 answers

202 views

Grid Column Menu Unstick Message is Null

In our UI for ASP.NET Core R3 2020 (2020.3.915) release, the Column menu message of unsticking a column is "null".

This bug will be resolved in our next official release.

In the meantime, as a workaround, manually set the Unstick Column menu message:

.ColumnMenu(c => c.Messages(m => m.Unstick("Unstick Column")))

Grid

asked on 16 Sep 2020

0 answers

1 view

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

asked on 01 Oct 2022

0 answers

1 view

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

asked on 30 Sep 2022

0 answers

1 view

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

updated question on 30 Sep 2022

0 answers

1 view

ComboBox Events (Change vs Select)

*please delete.

ComboBox

updated question on 30 Sep 2022

1 answer

3 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 view

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

0 answers

1 view

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

asked on 30 Sep 2022

0 answers

2 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

asked on 30 Sep 2022

1 answer

7 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