Questions on UI for ASP.NET MVC Forum

0 answers

165 views

EditorTemplate (Scheduler) does not work with ViewData

Hi everyone,

I'm in the process of developing an ASP.NET MVC application that should provide the ability to record the time worked by an employee with a chart.
I use the Telerik UI Scheduler for this. The integration and use in general works perfectly, but the EditorTemplate gives me problems. (see code)
As you can see, I'm trying to open data from a database in a DropDown using "ViewData" within the EditorTemplate. In the index function (ActionResult) in the controller I have declared the "ViewData", which gets the data from the database via a service.

Now the problem: If I want to use the "ViewData", the EditorTemplate can no longer be built. (See error in browser console -> pic in attachement)
If I use this ViewData in a PartialView it works without problems.
However, if I comment out this part in the controller (from "var projects..." to "...ToList();") and leave the EditorTemplate the same, everything works again and I can open the EditorTemplate via double-click on the scheduler. But I still can't get the data.

What do I have to do so that I can use the data from the "ViewData" in the EditorTemplate?
I hope someone can help me.

Controller: (TimeTrackingController.cs)

public async Task<ActionResult> Index() //TODO: ActionResult
        {
            // ignore this below ----------------------------------------------
            var overview = new ActivityOverviewModel();

            overview.PaList = new List<PA>
            {
                new PA
                {
                    Id = 1,
                    Number = 201885445,
                    PaName = "Inbetriebnahme",
                    OrderNumber = 201745965,
                    OrderName = "Ein sehr schwieriger Auftrag",
                    ProjectNumber = 2019788458,
                    ProjectName = "Laser für Gießerei programmieren",
                    CompanyName = "Constellium Rolled Products",
                    PlannedHours = 70,
                    CurrentHours = 80,
                    PaLeft = false,
                    TechnicallyReady = true,
                    Favorite = false
                },
                new PA
                {
                    Id = 1,
                    Number = 201888874,
                    PaName = "Lösungsfindung",
                    OrderNumber = 2197811144,
                    OrderName = "Ein sehr schwieriger zweiter Auftrag",
                    ProjectNumber = 2019788458,
                    ProjectName = "Laser für Eingang programmieren",
                    CompanyName = "S&K Anlagentechnik",
                    PlannedHours = 70,
                    CurrentHours = 45,
                    PaLeft = false,
                    TechnicallyReady = false,
                    Favorite = false
                }
            };
            // ignore this above ----------------------------------------------

            var projects = await _projectService.GetProjectsForTimelineCreateAsync();

            ViewData["ActiveProjects"] = projects.Select(p => new TimelineCreateProjectModel
            {
                ProjectId = p.ProjectId,
                ProjectInfo = $"{p.ProjectNumber} - {p.ProjectName}"
            }).OrderByDescending(p => p.ProjectInfo).ToList();

            return View(overview);
        }

Index.cshtml:

<div id="right">
        @(Html.Kendo().Scheduler<ActivityModel>()
                    .Name("ActivityScheduler")
                    .Editable(e => e.TemplateName("EditActivity"))
                    //.StartTime(new DateTime(2022, 01, 1, 5, 00, 00)) // scheduler starts at 5 am
                    .DataSource(d => d
                    .Read(r => r.Action("ActivityCalendarRead", "TimeTracking", new { area = "Sktcrm" }))
                    .ServerOperation(true))
                    .Views(v =>
                    {
                        v.DayView();
                        v.WeekView(view => view.Selected(true));
                        v.MonthView();
                    })
                    .Events(ev =>
                    {
                        ev.Edit("tripChanged");
                        ev.Add("tripChanged");
                        ev.DataBound("checkHolidays");
                        ev.DataBinding("navigate");
                    })
                    .Editable(e => e.Window(w => w.Title("Aktivität bearbeiten")))
        )

    </div>

EditorTemplate: (EditActivity.cshtml)

<div>
            @(Html.Kendo().DropDownList()
                .Name("project")
                /*.BindTo(new List<string>()
                {
                    "Test ",
                    "Projekt 123",
                    "Leer",
                    "Test 2"
                })*/
                .ValuePrimitive(true)
                .OptionLabel("Projekt wählen...")
                .DataValueField("ProjectId")
                .DataTextField("ProjectInfo")
                .BindTo((IEnumerable) ViewData["ActiveProjects"]) // TODO: doesnt work!!!
                .Filter(FilterType.Contains)
                .HtmlAttributes(new {@class = "kendoSelectMain"}))
        </div>

Thanks in advance
Lars

DropDownList

Editor

Scheduler

asked on 28 Mar 2022

1 answer

1.0K+ views

Grouped grid with checkbox - select all by group and get selected

Hi all,

I've struggled a couple of days with this - pretty much every example I've found just doesn't work for me or is for React/Angular etc.

I have a grid that is grouped and has a checkbox on one of them (actually it isn't grouped by default)

@(Html.Kendo().Grid<MyProject.Models.Schedule.StoredProcResults.EventSchedule>()
    .Name("schedule")
    .Columns(columns =>
    {
        columns.Select().Width(50);
        columns.Bound(s => s.Store);
        columns.Bound(s => s.State);
        columns.Bound(p => p.Region).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.District).Filterable(ftb => ftb.Multi(true));
        //columns.Bound(p => p.VehicleTypeName).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.SupplierNumber).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.OrderGroup).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.SupplierName).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.OrderSupplier).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.DeliverySupplier).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.OrdersWithPattern).Filterable(ftb => ftb.Multi(true));
        columns.Bound(p => p.DeliversWithPattern).Filterable(ftb => ftb.Multi(true)).ClientGroupHeaderColumnTemplate(
            " <input type='checkbox' class='checkbox select-group'></input> Delivery Pattern"
            );
    })
    .Sortable()
    .PersistSelection()
    .Scrollable(s => s.Height("465px"))
    .Groupable()
    .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Multiple)
        )
    .Filterable()
    .HtmlAttributes(new { style = "height:600px;" })
    .Resizable(r => r.Columns(true))
    .DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("GetEventSchedule", "Schedule"))
    .Group(groups => groups.Add(p => p.VehicleTypeName))
    )
)

When the checkbox on DeliveryPattern is checked, I'd like all items grouped under it, to be checked. When it's unchecked, uncheck all in the group.

Also, if someone can give me the syntax for grouping two fields by default, that'd be helpful

Finally, I'd like to add a button that goes to the next part of my page, and that would tell me every selected checkbox in the grid.

Can someone help me with this please?

Grid

answered on 28 Mar 2022

1 answer

130 views

Gantt MVC Issues

How can I disable the users ability to "delete" a task? I still want them to be able to edit times/and properties but I simply don't want them to be able to delete items.

Gantt

answered on 25 Mar 2022

0 answers

1.3K+ views

How to resolve Absence of Anti-csrf Token alert in Kendo.all.min.js ?

While Security testing of application through OWASP Zap tool, Medium risk level issue as 'Absence of Anti-csrf Token' in kendo.all.min.js is popping up

Even I tried to upgrade kendo.all.min.js from 2021 to 2022 latest version

are there any ways to resolve it ?

Security

asked on 24 Mar 2022

1 answer

758 views

Is the UI for ASP>NET version 2022.1.301 Compatible with Bootstrap v5.1

I created a new Telerik Application Project for ASP.NET MVC. I choose one of the Bootstrap Themes. It appears to have installed Bootstrap v4.1.3.

If I upgrade to Bootstrap 5.1 will I have issues with the GridView, the Menu Extension and other HTML Extensions?

Grid

Menu

answered on 23 Mar 2022

3 answers

2.3K+ views

Design time error in cshtml: Cannot convert lambda expression to type 'string' because it is not a delegate type

I am getting no intellisense and design time errors when using the Bound method to declare columns. When I run the site it works fine, but isn't the whole point of using the lambda instead of magic strings so I can get accurate design time errors?

In the following code, I get design time errors for each of the lambdas in the columns.Bound declarations. Am I doing something wrong?

@(Html.Kendo().Grid<KBMaxLive.Domain.KBUser>()
    .Name("grid")
    .Columns(columns => {
        columns.Bound(u => u.Email).ClientTemplate("<a>#: Email #</a>");
        columns.Bound(u => u.IDUserRole);
        columns.Bound(u => u.FirstName);
        columns.Bound(u => u.LastName);
        columns.Bound(u => u.IsOnLine);
    })
    .Pageable(paging => paging.Enabled(true).PageSizes(new int[]{5, 10, 20, 50}))
    .Sortable()
    .Filterable()
    .Groupable()
    .Selectable(select => select.Type(GridSelectionType.Row).Mode(GridSelectionMode.Multiple))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Users_Read", "Users"))
        .PageSize(20))
    
  )

Grid

answered on 23 Mar 2022

1 answer

627 views

Dropdown grouping

Hi,

I'm grouping a dropdown and I'm a little puzzled by the display.

My groups are either "Permanent" or "Temporary"

Temporary shows up quite neatly in corner, Permanent appears as an option that can't be selected and is confusing my users. Can it show the same for both?

        @(Html.Kendo().DropDownList()
            .Name("addevent-type-dropdown")
            .OptionLabel("Select event type...")
            .DataTextField("EventTypeName")
            .DataValueField("EventTypeId")
            .DataSource(source => source
              .Custom()
              .Group(g => g.Add("ChangeType", typeof(string)))
              .Transport(transport => transport
                .Read(read =>
                {
                    read.Action("GetEventTypesDropDown", "Schedule");
                })))
            .HtmlAttributes(new
            {
                style = "width: 600px",
                data_toggle = "tooltip",
                title = "Select event type"
            })
            .Events(e => e.Change("eventTypeChange"))
        )

Thanks

DropDownList

answered on 21 Mar 2022

0 answers

189 views

Grid Issues after using SetOptions

I'm formatting a grid using the setOptions method. I'm setting the three following properties:

pageSizes
pageSize
height

I'm doing it by calling the setOptions method from the window.load method, like this:

grid.setOptions({
    groupable: true
    , pageable: {
        pageSizes: selPageSizes,
        pageSize: selDefaultPageSize
    }
    , dataSource: { pageSize: selDefaultPageSize }
    , height: selGridHeight
    height: selGridHeight
    groupable: true
});

When the grid data is loaded from the beginning, everything works fine, but if the grid is loaded after the page is loaded, I'm getting and error in the console, that I believe is related with the kendo code, not my code. Then, the data is never loaded into the grid, and the format is lost. This is the error that I'm getting:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at Function.grep (scripts?v=AVz3fyQ7ZO52UNjzde7myJ8QPQ5jc3JcuS7NoqRhdVw1:1:128089)
at vh (scripts?v=AVz3fyQ7ZO52UNjzde7myJ8QPQ5jc3JcuS7NoqRhdVw1:1:1624055)
at init._createHeaderCells (scripts?v=AVz3fyQ7ZO52UNjzde7myJ8QPQ5jc3JcuS7NoqRhdVw1:1:1745497)
at init._thead (scripts?v=AVz3fyQ7ZO52UNjzde7myJ8QPQ5jc3JcuS7NoqRhdVw1:1:1749404)
at init._continueInit (scripts?v=AVz3fyQ7ZO52UNjzde7myJ8QPQ5jc3JcuS7NoqRhdVw1:1:1637952)
at init (scripts?v=AVz3fyQ7ZO52UNjzde7myJ8QPQ5jc3JcuS7NoqRhdVw1:1:1637851)
at init.setOptions (scripts?v=AVz3fyQ7ZO52UNjzde7myJ8QPQ5jc3JcuS7NoqRhdVw1:1:1643697)
at HTMLDivElement.<anonymous> (scripts?v=AVz3fyQ7ZO52UNjzde7myJ8QPQ5jc3JcuS7NoqRhdVw1:1:17624)
at Function.each (scripts?v=AVz3fyQ7ZO52UNjzde7myJ8QPQ5jc3JcuS7NoqRhdVw1:1:127618)
at i.fn.init.each (scripts?v=AVz3fyQ7ZO52UNjzde7myJ8QPQ5jc3JcuS7NoqRhdVw1:1:125575)

And this is the pieace of code where the error is happening:

Grid

asked on 21 Mar 2022

1 answer

547 views

Toolbar both at top and bottom of the grid.

Hi,

I have kendo mvc grid in my application and I am using toolbar to save the changes in the grid, Toolbar is coming on the top of the kendo grid. I want to add Toolbar at both top and bottom of the grid, please suggest me to achieve it.

Grid

Toolbar

answered on 21 Mar 2022

0 answers

198 views

'Grid' is ambiguous because multiple kinds of members with this name exist in class 'Kendo.Mvc.UI.Fluent.WidgetFactory'

Hi,

We are upgrading Telerik UI ASP.NET MVC from 2017.2.504.545 to 2022.1.301.545. We installed the latest DLL from MSI file and manually replaced the scripts and CSS files in the solution as well as referenced the 2022 Kendo.MVC.dll in the solution. Build success. When we try to access the page that use Teleric controls, I get the exception 'Grid' is ambiguous because multiple kinds of members with this name exist in class 'Kendo.Mvc.UI.Fluent.WidgetFactory' . If I change the dll version back to 2017, error is gone and page loads just fine. How can I resolve this? Is there anything missing in the upgrade steps I did?

Thanks,

A

General Discussions

Grid

asked on 18 Mar 2022