Questions on UI for ASP.NET Core Forum

1 answer

483 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

129 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

305 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

370 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

258 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

242 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

88 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

1 answer

432 views

UI for ASP.NET Core: How to call code from "Save" toolbar button?

I added a toolbar to my grid, with new, save and cancel buttons. On my page, I configure the datasource to use the save routine in my controller. However, any breakpoints set in my Save (update) routine are never hit, even after editing and saving the grid. Is there an event I should be capturing? Like all of my issues, this is after following an example on the Telerik site. My read method is working perfectly.

Index.cshtml

    <form class="form-inline">
        <div class="form-group mb-2">
            <label for="SievePack" class="sr-only">Choose a Sieve Set</label>

            <kendo-grid name="SievePack"
                        detail-template-id="template"
                        navigatable="true">
                <columns>
                    <column field="SieveSetId" title="Set ID" />
                    <column field="SieveSetName" title="Name" />
                </columns>
                <toolbar>
                    <toolbar-button name="create" ></toolbar-button>
                    <toolbar-button name="save"></toolbar-button>
                    <toolbar-button name="cancel"></toolbar-button>
                </toolbar>
                <datasource page="0" type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="6" batch="true" >
                    <schema data="Data" total="Total" errors="Errors">
                    </schema>
                    <transport>
                        <read url="@Url.Action("ReadSieveSets", "SievePack")" datatype="json" />
                        <update url="@Url.Action("Sievesets_Update", "SievePack")" />
                        <create url="@Url.Action("Sievesets_Create", "SievePack")" />
                    </transport>
                </datasource>

                <editable mode="incell" />
            </kendo-grid>
        </div>

    </form>

and the controller:

        [HttpPost]
        public ActionResult Sievesets_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<SieveSet> sets)
        {
            // Will keep the updated entities here. Used to return the result later.
            var entities = new List<SieveSet>();
            if (ModelState.IsValid)
            {
                using (_context)
                {
                    foreach (var set in sets)
                    {
                        // Create a new Product entity and set its properties from the posted ProductViewModel.
                        var entity = new SieveSet
                        {
                            SieveSetName = set.SieveSetName,
                            SieveSetId = set.SieveSetId
                        };
                        // Store the entity for later use.
                        entities.Add(entity);
                        // Attach the entity.
                        _context.Attach(entity);
                        // Change its state to Modified so Entity Framework can update the existing product instead of creating a new one.
                        _context.Entry(entity).State = EntityState.Modified;
                    }
                    // Update the entities in the database.
                    _context.SaveChanges();
                }
            }
            // Return the updated entities. Also return any validation errors.
            return Json(entities.ToDataSourceResult(request, ModelState, set => new SieveSet
            {
                SieveSetName = set.SieveSetName,
                SieveSetId = set.SieveSetId
            }));
        }

Grid

answered on 29 Sep 2022