Telerik Forums
UI for ASP.NET Core Forum
1 answer
11 views

I need to send a model to my controller action. I have created a Kendo grid:

Html.Kendo().Grid<XXXX.WebUI.Models.Employees.LocationsListViewModel>()
    .Name("EmployeeLocationsGrid")
    .Columns(columns => {
        columns.Select().Width(45);
        columns.Bound(c => c.UIDEmployee).Visible(false);
        columns.Bound(c => c.UIDEmployee_Location).Title("Id").Width(50);
        if (Model.LocationsEntities != null)
        {
            columns.ForeignKey(f => f.UIDLocation, Model.LocationsEntities?.Items, "UIDEntity", "Name")
                .Title("Location")
                .EditorTemplateName("FieldListLocations")
                .EditorViewData(new { locations = Model.LocationsEntities.Items })
                .Width(200);
        }
        if (Model.LocationsEntities != null)
        {
            columns.ForeignKey(f => f.UIDSublocation, Model.SublocationsEntities?.Items, "UIDEntity", "Name")
                    .Title("Sublocation")
                    .EditorTemplateName("FieldListSublocations")
                    .EditorViewData(new { sublocations = Model.SublocationsEntities.Items })
                    .Width(200);
        }
        columns.Bound(c => c.Main)
            .Title("Main")
            .EditorTemplateName("FieldCheckBox")
            .ClientTemplate("#= Main ? 'Yes' : 'No' #")
            .Width(100);
        columns.Bound(c => c.PercentageOfDedication)
            .Title("% Dedication")
            .EditorTemplateName("FieldNumericTextBox")
            .Format("{0} %")
            .Width(200);
        columns.Bound(c => c.StartDate)
            .Title("Start Date")
            .ClientTemplate("#= kendo.toString(kendo.parseDate(StartDate), 'dd/MM/yyyy') #")
            .EditorTemplateName("FieldDateOnlyPicker")
            .Width(200);
        columns.Bound(c => c.EndDate)
            .Title("End Date")
            .ClientTemplate("#= EndDate != null ? kendo.toString(kendo.parseDate(EndDate), 'dd/MM/yyyy') : '<strong>Currently</strong>' #")
            .EditorTemplateName("FieldDateOnlyPicker")
            .Width(200);
        columns.Bound(c => c.Comments)
            .Title("Comments")
            .EditorTemplateName("FieldTextArea")
            .Width(250);
        columns.Command(command => {
            command.Edit().Text(" ").UpdateText(" ").CancelText(" ").IconClass("bi bi-pencil-square").HtmlAttributes(new { @class = "btn btn-outline-primary", title = "Edit" });
            command.Custom("deleteLocation")
                .Click("function(e) { var dataItemLoc = this.dataItem($(e.target).closest('tr')); window.i3.OnDeleteEmployeeLocation(dataItemLoc); }")
                .Text(" ").IconClass("bi bi-trash3")
                .HtmlAttributes(new { @class = "btn btn-outline-primary", title = "Delete" });
        }).Title("Actions");
    })
    .NoRecords(s => s.Template("<span class='ms-3 mt-3'><i class='bi bi-people-fill me-2'></i><strong>This employee was not assigned to any location.</strong></span>"))
    .AutoBind(true)
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Sortable(sorting => sorting.Enabled(true))
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).DragToSelect(false))
    .Events(events => events
        .Sort("window.i3.OnColumnSorted").Save("window.i3.OnSaveLocation")
    )
    .DataSource(ds => ds
        .Ajax()
        .Model(gridModel =>
        {
            gridModel.Id(entity => entity.UIDEmployee_Location);
            gridModel.Field(p => p.UIDEmployee_Location).Editable(false);
            gridModel.Field(p => p.UIDEmployee).Editable(false).DefaultValue(Model.UIDEmployee);
            gridModel.Field(p => p.UIDLocation).Editable(true);
            gridModel.Field(p => p.UIDSublocation).Editable(true);
            gridModel.Field(p => p.UIDStatus).Editable(false);
            gridModel.Field(p => p.UIDPosition).Editable(false);
        })
        .Read(r => r.Action("GetAllEmployeeLocations", "Employees", new { EmployeeID = Model.UIDEmployee }))
        .Events(events => events
            .RequestEnd("window.i3.OnRequestEndLocation")
        )
        .PageSize(10)
    )
)

This data reaches me at this event where I process it:

public OnSaveLocation(e: kendo.ui.GridSaveEvent): void {
    e.preventDefault();

    const gridLocation = $("#EmployeeLocationsGrid").data("kendoGrid");
    const locationsItems: LocationsListViewModel[] = (gridLocation?.dataSource.data() as unknown) as LocationsListViewModel[];
    let newLocItem: LocationsListViewModel = (e.model as any) as LocationsListViewModel;

    // Fix Date
    let startLocationDateNew = new Date(newLocItem.StartDate);
    let endLocationDateNew = new Date(newLocItem.EndDate);
    let offsetLocationNew = startLocationDateNew.getTimezoneOffset();
    startLocationDateNew = new Date(startLocationDateNew.getTime() - (offsetLocationNew * 60 * 1000));
    endLocationDateNew = new Date(endLocationDateNew.getTime() - (offsetLocationNew * 60 * 1000));

    let newLocationItem: LocationsListViewModel = {
        UIDEmployee_Location: newLocItem.UIDEmployee_Location,
        UIDEmployee: newLocItem.UIDEmployee,
        UIDLocation: newLocItem.UIDLocation,
        UIDSublocation: newLocItem.UIDSublocation,
        UIDPosition: newLocItem.UIDPosition,
        Main: newLocItem.Main,
        PercentageOfDedication: newLocItem.PercentageOfDedication,
        StartDate: startLocationDateNew.toISOString().split('T')[0],
        EndDate: endLocationDateNew.toISOString().split('T')[0],
        UIDStatus: newLocItem.UIDStatus,
        Comments: newLocItem.Comments
    };
}

All the data is well collected except Sublocations is set to null. Where it should be an int ID. I share with you the Template and the model:

@using XXXX.Application.Application.Maintenances.DTOs;

@model int?

@(Html.Kendo().DropDownListFor(m => m)
    .DataTextField("Name")
    .DataValueField("UIDEntity")
    .OptionLabel("Select...")
    .BindTo((IEnumerable<GenericMaintenanceEntityDTO>)ViewData["sublocations"]!)
)
@using XXXX.Application.Application.Maintenances.DTOs;

@model int

@(Html.Kendo().DropDownListFor(m => m)
    .DataTextField("Name")
    .DataValueField("UIDEntity")
    .OptionLabel("Select...")
    .BindTo((IEnumerable<GenericMaintenanceEntityDTO>)ViewData["locations"]!)
)
interface LocationsListViewModel {
    UIDEmployee_Location: number;
    UIDEmployee: number;
    UIDLocation: number;
    UIDSublocation: number;
    UIDPosition: number;
    Main: boolean;
    PercentageOfDedication: string;
    StartDate: string;
    EndDate: string;
    UIDStatus: number;
    Comments: string;
}

I have been looking for the problem for quite some time but I can't find it. Can someone help me?

Thanks

Mihaela
Telerik team
 answered on 26 Feb 2024
1 answer
24 views
Hello,

I'm looking to see if its possible to have the validation on one item in a form be dependent on another inputs selection.


.
.
.
        @(Html.Kendo().Form<EquipmentViewModel>()
            .Name("EquipmentForm")
            .Layout("grid")
            .Items(items =>
            {
                items.AddGroup()
                    .Label("Registration Form")
                    .Items(i =>
                    {
                        i.Add()
                            .Field(f => f.EquipmentType)
                            .Label(l => l.Text("Equipment Type"))
                            .Editor(e =>
                            {
                                e.DropDownList()
                                    .DataTextField("ShortName")
                                    .DataValueField("EquipmentTypeID")
                                    .OptionLabel("Select")
                                    .DataSource(source =>
                                    {
                                        source
                                            .ServerFiltering(true)
                                            .Read(read => { read.Url("/Equipment/Index?handler=EquipmentTypesByEquipmentClassID").Data("EquipmentClassData"); });
                                    })
                                    .Enable(isControlEnabled)
                                    .Events(e => { e.Change("OnChangeEquipmentTypeChange").DataBound("OnChangeEquipmentTypeChange"); })
                                    .CascadeFrom("EquipmentClass");
                            });
                        i.Add()
                            .Field(f => f.EquipmentDesign)
                            .Label(l => l.Text("Equipment Design"))
                            .Editor(e =>
                            {
                                e.DropDownList()
                                    .DataTextField("ShortName")
                                    .DataValueField("EquipmentDesignID")
                                    .OptionLabel("Select")
                                    .DataSource(source =>
                                    {
                                        source
                                            .ServerFiltering(true)
                                            .Read(read => { read.Url("/Equipment/Index?handler=EquipmentDesignByEquipmentTypeID").Data("EquipmentTypeData"); });
                                    })
                                    .CascadeFrom("EquipmentType")
                                    .Enable(false)
                                    .Events(e => { e.Change("OnChangeEquipmentDesignChange").DataBound("OnChangeEquipmentDesignChange"); });
                            });
.
.
.

This scenario loads EquipmentDesigns based on the EquipmentType the user has selected. I would like EquipmentDesigns to be required ONLY if the selected equipment type has equipment designs. In other words, only when the call to get the EquipmentDesigns actually returns data.
Mihaela
Telerik team
 answered on 16 Jan 2024
1 answer
25 views

When I try to add a label to a DropDownList, it gives me a syntax error as if the property doesn't exist.  Thoughts?

CS1929
'DropDownListBuilder' does not contain a definition for 'Label' and the best extension method overload 'HtmlHelperLabelExtensions.Label(IHtmlHelper, string)' requires a receiver of type 'Microsoft.AspNetCore.Mvc.Rendering.IHtmlHelper'

                    @(Html.Kendo().DropDownList()
                        .Name("PrimaryAnalystId")
                        .Label(label => label.Content("Primary Analyst"))
                        .OptionLabel("[Select a person]")
                        .DataTextField("Person")
                        .DataValueField("PersonId")
                        .DataSource(s => s.Read(r =>
                            r.Action("GetPeople", "Utility", new { type = "analyst" })))
                        .HtmlAttributes(new { required = "required", validationmessage = "Primary analyst is required." }))


Brian
Top achievements
Rank 2
Iron
 updated answer on 16 Nov 2023
1 answer
26 views

Hi,

The following code snippet is passing validation incorrectly.  It is marked on the field and model as Required but is not being flagged as such when no option is selected.

HTML5 (form):

<div class="form-floating mb-3">
    @(Html.Kendo().DropDownListFor(m => m.PrimaryAnalystId).OptionLabel(new { Person = "[Select a person]", PersonId = 0 }).DataTextField("Person").DataValueField("PersonId").DataSource(s => s.Read(r => r.Action("GetPeople", "Utility", new { type = "analyst" }))).HtmlAttributes(new { @class = "form-select", required = "required" }))
    <label asp-for="PrimaryAnalystId">Primary Analyst</label>
</div>

C# (model):

[Required]
public int PrimaryAnalystId { get; set; }

TS/JS (validator):

const validator = $("#form1").kendoValidator({ validationSummary: { container: "#summary" } }).data("kendoValidator");

$(function () {
    $("#submit").on("click", function (event) {
        event.preventDefault();

        if (validator.validate()) {
            alert('valid');
        } else {
            alert('invalid');
        }
    });
});

Alexander
Telerik team
 answered on 15 Nov 2023
1 answer
35 views

I'm using DropDownList in grid as EditorTemplate. If no value is selected I get a message that says "The Id field is required". How to change the message or remove it completely?

Vasko
Telerik team
 answered on 02 Oct 2023
1 answer
25 views

Hi All,

We have a table for managing a business process that needs to display an item from the inventory tables. Therefore we need the column showing what Item a record will use to be a ForeignKey column. We have had various problems getting this to work, and our best solution so far is still not functional. The DropDownList just closes as soon as you click into it. It is bound with server filtering.

The column definition:

columns.ForeignKey(p => p.ItemMasterId, ds => ds.Read(r => r.Action("ItemMasters", "MasterMix")), "ItemId", "ItemName", true)
                                    .Title("Item Name").Width(500).EditorTemplateName("ItemMasterDropDownEditor");

The editor template:

@model object

@(Html.Kendo().DropDownListFor(model => model)
        .DataSource(source =>
        {
            source.Read("ItemMasters", "MasterMix").ServerFiltering();
        })
        .Filter(FilterType.Contains)
        .DataValueField("ItemId")
        .DataTextField("ItemName")
)

The server-side call:

public ActionResult ItemMasters(string text)
        {
            var itemMasters = string.IsNullOrEmpty(text) ? db.ItemMasters.OrderBy(o => o.ItemName).Select(p => new ItemMasterVM(p.Id, p.ItemName)).ToList()
                : db.ItemMasters.OrderBy(o => o.ItemName).Where(e => e.ItemName.ToLower().Contains(text.ToLower())).Select(p => new ItemMasterVM(p.Id, p.ItemName)).ToList();
            return Json(itemMasters);
        }

 

The list is working correctly showing all we need. We just can't get the dropdown to stay open and have the cursor in the filter search text box.

Thanks in advance... Bob Graham

 

Anton Mironov
Telerik team
 answered on 27 Sep 2023
0 answers
25 views
I guess this should be possible with jquery. How to do this?
kva
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 22 Sep 2023
1 answer
27 views

I need to find refresh values of DropDownList programmatically. That's what I tried:

		    let nameDropDownList = $('#Configs').getKendoDropDownList();
			console.log(nameDropDownList);
			console.log(nameDropDownList.datasource);
		    nameDropDownList.datasource.read();	
            nameDropDownList.value(currentConfigName);

When read is called, I get:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'read')

Log shows me, that datasource is undefined.

DropDownList definition:
            @(Html.Kendo().DropDownList()
                .Name("Configs")
                .DataTextField("Name")
                .DataValueField("Name")
                .Filter(FilterType.StartsWith)
                .DataSource(s =>
                {
                    s.Read(r => r.Action("Read", "FilteringTable"));
                }))
Read method simply returns all entities of type FilteringTable.
kva
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 22 Sep 2023
0 answers
27 views
I think it could be done from jquery. As a result, dropdownlist should show nothing in the UI.
kva
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 22 Sep 2023
1 answer
35 views

I use a DropDownList as an EditorTemplate in a Grid.

The problem is, that the DDL has to display several thousand entries (products).

I tried to set the PageSize of the DataSource and handle the Filter-Event. This works fine so far.  The DDL opens very fast and I can search (filter) and then select an entry, that is not visible in the list at the beginning.

This works fine for adding a new record.

But when I want to edit an existing record in the grid I get problems. When the editor opens and the value is not in the select list of the DDL, it is not selected (also not displayed) and the value of the DDL is set to null.

This behavior makes sense to me.

When I remove the PageSize from the DataSource everythings works fine. But it takes to long to open the DDL. That's why I need another solution.

I also tried the virtualization. But the problem stays the same.

Does anyone have an idea how I can solve this?

Maybe another control? Finally the user should be able to search and select a product on an easy way.

I am grateful for any idea.

CPS
Top achievements
Rank 1
Iron
Iron
 answered on 06 Sep 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?