Questions on UI for ASP.NET Core Forum

1 answer

7 views

Get 2 cancel buttons thats one to manny!

Why do i have 3 buttons special the last Cancel ?

@(
Html.Kendo().Grid<IndexModel.CompanyFinancialVM>()
    .Name("gridCompanyFinancial")
    .Navigatable()
    .Height(590)
    .Sortable()
    .Editable(e => e.Mode(GridEditMode.InCell))
    .Scrollable()
    .ToolBar(t => { t.Save(); t.CancelEdit(); })
    .Columns(columns =>
    {
        columns.Bound(f => f.CompanyName).Title("Company").Width(150);
        columns.Bound(f => f.PeriodName).Title("Period").Width(120);
        columns.Bound(f => f.VariableName).Title("Variable").Width(150);
        columns.Bound(f => f.VariableTypeName).Title("Variable Type").Width(120);
        columns.Bound(f => f.Val).Title("Val")
            .Width(100)
            .Format("{0:n}") // Show 4 decimals and thousand separator
            .EditorTemplateName("Decimal");
        columns.Bound(f => f.ValCurr)
            .Title("Currency")
            .ClientTemplate("#= getCurrencyName(ValCurr) #")
            .EditorTemplateName("Currency")
            .Width(120);
        columns.Bound(f => f.QuantumFK)
            .Title("Quantum")
            .ClientTemplate("#= getQuantumName(QuantumFK) #")
            .EditorTemplateName("QuantumFK")
            .Width(120);
        columns.Bound(f => f.Priority).Title("Priority").Width(80);
        columns.Bound(f => f.SpecOrder).Title("Spec Order").Width(100);
        columns.Bound(f => f.Rem).Title("Remarks").EditorTemplateName("Rem");
    })
    .DataSource(ds => ds.Ajax()
        .Read(r => r.Url(Url.Content("~/CompanyFinancial/Index?handler=Read")).Data("getGridRequestData"))
        .Update(u => u.Url(Url.Content("~/CompanyFinancial/Index?handler=Update")).Data("forgeryToken"))
        .Batch(true)
        .Model(m =>
        {
            m.Id(f => f.Nr);
            m.Field(f => f.CompanyName);
            m.Field(f => f.PeriodName);
            m.Field(f => f.VariableName);
            m.Field(f => f.VariableTypeName);
            m.Field(f => f.Priority);
            m.Field(f => f.SpecOrder);
            m.Field(f => f.Val);
            m.Field(f => f.ValCurr);
            m.Field(f => f.QuantumFK);
            m.Field(f => f.Rem);
        })
        .Sort(s => s.Add(f => f.SpecOrder).Ascending())
        .PageSize(20)
    )
    .Pageable()

I have disabled all script on the page, except the simpel lookups for foreginkeys in dataset...

Button

DropDownList

Editor

Grid

Template

Toolbar

answered on 07 Jul 2025

2 answers

426 views

Getting Cascading Dropdownlist working with RazorPages

I can't seem to get the Cascading DropdownList functionality to return the selected value from the parent. I will list what I have and if someone can point out my problem I would appreciate it. The parent loads the selected items correctly, and it calls the child dropdownlist event when a new select is made, but the parameter that should have the selected id is always null.

.cshtml page

html.cs

public JsonResult OnGetCLINTaskTypes(int? ddlCLIN)
{
TaskTypes tt = new TaskTypes(SQLWrapper);
DataSet ds = new DataSet();


if(ddlCLIN == null)
{
ddlCLIN = 0;
}
ds = tt.SelectRecordsForDropDown("TITLE", Int32.Parse(HttpContext.Session.GetInt32(Globals.SessionName.Org.ToString()).ToString()), ddlCLIN);

List<Projects> list = new List<Projects>();

foreach (DataRow dr in ds.Tables[0].Rows)
{
list.Add(new Projects(SQLWrapper)
{
ProjectID = Convert.ToInt32(dr["TYPE_ID"].ToString()),
Title = dr["TITLE"].ToString(),

});
}

var dsResult = list;//.ToDataSourceResult(request);
return new JsonResult(dsResult);


}
public JsonResult OnGetCLINS()
{
Projects Projdb = new Projects(SQLWrapper);
DataSet ds = new DataSet();
ds = Projdb.SelectRecordsForDropDown("TITLE", Int32.Parse(HttpContext.Session.GetInt32(Globals.SessionName.Org.ToString()).ToString()));

List<Projects> list = new List<Projects>();

foreach (DataRow dr in ds.Tables[0].Rows)
{
list.Add(new Projects(SQLWrapper)
{
ProjectID = Convert.ToInt32(dr["PROJECT_ID"].ToString()),
Title = dr["TITLE"].ToString(),


});
}

var dsResult = list;//.ToDataSourceResult(request);
return new JsonResult(dsResult);
}

DropDownList

updated answer on 02 Jan 2025

0 answers

138 views

Dropdownlist - CSS class values cause razor NullReferenceException with v2024.4.1112

I have upgraded our libraries to version 2024.4.1112 and we are experiencing a NullReferenceException when we do this:

<kendo-dropdownlist for="Id" datatextfield="Name" datavaluefield="Id" auto-width="true" class="form-control w-75" required>

If I remove the class declaration and the required tag, page renders just fine.

Stack Trace: NullReferenceException: Object reference not set to an instance of an object. on Microsoft.AspNetCore.Razor.Language.TagHelperMatchingConventions.TryGetFirstBoundAttributeMatch

The breaking change listed on the release notes references a backward compatibility page but has no information specific to the dropdownlist control.

What am I missing?

DropDownList

Styling

updated question on 20 Nov 2024

1 answer

44 views

Calendar and Time Picker Showing Multiple Times on a Day and Choosing One

Hi,

I've looked for a good example to achieve this scenario. Cannot find one so I thought I would ask.

When a person creates a meeting they choose the date and the time of the meeting. Multiple meeting may happen on a single day just not at the same time. This part can be easily coded. The part that I'm having trouble with is when I'm trying to associate a document to one of those meetings that occurred on the same day.

Here's what I'm looking to do:

I click on the calendar control

On the calendar I click the 12th which had multiple meetings:

I select 8:00 am which fills my underlying control.

On the dates that only have one meeting then clicking on the date will just select that one meeting and it's time.

Any examples would be appreciated.

Calendar

Date/Time Pickers

DropDownList

answered on 13 Nov 2024

1 answer

301 views

DropDownListFor with Name getting cannot override component name when bound to a model expression error

I have a dropdownListFor in a View which is shared within the tabs in the Kendo Tabstrip. Due to cannot override component name when bound to a model expression error I have commented the Name configuration

My Dropdown:
@(Html.Kendo().DropDownListFor(m => m.Country)
//.Name("city-" + (int)Model.CityID) -- Commented to resolve the error
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCities", "Home", new { countryID = (int)Model.CountryID})Type(HttpVerbs.Post);
});
})
.OptionLabel("(Please Select))
.HtmlAttributes(new
{
data_bind = "value: cityValue, events: { change: selectedCityChanged }"
})
)

I have tab strip in which i don't have any issue with the first tab, but for other tabs, the control is not binded properly. Earlier i had the Name to prevent this bind issue.. Need help to fix this issue

I'm using Kendo 2024.3.806 version and ASP.NET Core MVC 8

First Tab:

Second Tab:

DropDownList

TabStrip

answered on 12 Oct 2024

1 answer

110 views

Dropdown filter Grid

Hi everyone, I am trying to implement the following functionalities with Grid and Server side filtering/paging:

For the "Subject" column, I would like a dropdown with the ability to choose between two static values: "NPF" and "PF".

columns.Bound(p => p.TipoSoggetto).Groupable(false).Filterable(ftb => ftb.UI("tipoSoggettoFilter"));
 
And the script -->
function tipoSoggettoFilter(element) {
            element.kendoDropDownList({
                dataSource: {
                    data: ["NPF", "PF"]
                }
            });
        }

For the "Operator" column, I would like to display a dropdown with values taken from a list item with value and text. I can see the dropdown and the filter works, but I don't see the corresponding text value in the grid; the cell simply remains empty (even though the filter works correctly).

var operatori = _ctx.Users.OrderBy(u => u.Email).Select(e => new SelectListItem
        {
            Text = e.NomeOperatore,
            Value = e.Id.ToString()
        }).ToList();
        ops.AddRange(operatori);
        ViewData["Operatori"] =  new SelectList(ops, "Value", "Text");
        ViewBag.Operatori = new SelectList(ops, "Value", "Text");

And in view:

@(Html.Kendo().Grid<AVR.Models.Output.GetAllAvr>()
            .Name("AVRgrid")
            //.ToolBar(t => t.Search())
            .Columns(columns =>
            {
               
                columns.Bound(p => p.DataInserimento).Format("{0:dd/MM/yyyy}").Groupable(false);
                columns.Bound(p => p.Subject).Groupable(false).Filterable(ftb => ftb.UI("tipoSoggettoFilter"));
                columns.ForeignKey(p => p.UserId, (System.Collections.IEnumerable)ViewData["Operatori"], "Text", "Text")
                    .Title("Operator").Width(200);
                columns.Command(command =>  command.Custom(" ").IconClass("fa-solid fa-eye").Click("showDetails")).Width(45);
            })
            .Pageable(p => { p.PageSizes(new[] { 10, 20, 30 }); })
            .Sortable()
            //.Scrollable()
            .Groupable()
            .Filterable(ftb => ftb.Mode(GridFilterMode.Row))

            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model =>
                {
                    model.Field(p => p.UserId).DefaultValue(1);
                })
                .PageSize(10)
                .Read(read => read.Action("GetAllFiltered", "AVR"))
            )
        )

What am I doing wrong in these two approaches? Is it possible to do this, or do I need additional jQuery support?

DropDownList

Grid

answered on 13 Sep 2024

0 answers

45 views

ToDataSourceResultAsync - Pivot Table Problem

Hello,

Im using angular 16 and .net core 7 version. When i send request to back-end, i can handle. But i have a problem.

Let's assume we have two tables: roles and users. In Angular, there's a grid where I display the roles. I'm having issues on the backend side when applying filtering in that grid.

 <kendo-grid-column [width]="300" title="Rol" [sortable]="cantFilterandSort" field="Roles">
            <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
                <kendo-multiselect [checkboxes]="true" [autoClose]="false" [tagMapper]="tagMapper"
                    [data]="this.roleList" textField="name" valueField="idx"
                    [valuePrimitive]="true"  (valueChange)="onRoleFilterChange($event)"></kendo-multiselect>
            </ng-template>
</kendo-grid-column>

onRoleFilterChange(selectedRoles: any[]): void {
    this.state.filter = {
      logic: 'and',
      filters: selectedRoles.map(role => ({
          field: 'Roles',
          operator: 'eq',
          value: role
      }))
  };
    this.getAllData();
  }

The request is reaching the back-end.

[HttpPost]
public async Task<IActionResult> GetAllUser([DataSourceRequest] DataSourceRequest filter)
{
    var result = await this.userService.GetAllUser(filter);
    return CreateActionResultInstance(result);
}

public async Task<DataSourceResult> GetAllUser(DataSourceRequest filter)
{

    var result = await entity
          .AsNoTracking()
          .IgnoreQueryFilters()
          .Include(y => y.Roles)
          .Select(x => new UserViewModel
          {
              Idx = x.Idx,
              Email = x.Email,
              Name = x.Name,
              Phone = x.Phone,
              Surname = x.Surname,
              UserName = x.UserName,
              Roles = x.Roles.Select(x => x.Idx)
          }).ToDataSourceResultAsync(filter);
    return result;}

What I need here is for the filtering to work when a role is selected as a filter in the user list on the screen. How can we use a many-to-many table in this case? I researched a lot but couldn't find anything online.

As a note, the IDs of the roles are of type GUID.

Thanks :)

Checkbox

DropDownList

Grid

asked on 20 Aug 2024

1 answer

95 views

Kendo Grid dropdown with fixed set of items

I am trying to create a grid with 4 columns: Field, Operator, Value and a Delete button

The Field column is selectable from a drop down when editing and this I have done using a Action call.

The second column, Operator has a fixed set of operators like '>', '<', '>='. I was hoping to create this list right inside this grid definition. So I chose the overload: columns.ForeignKey(memberName, SelectList) and I have created a SelectList in the second argument. But it does not work and the Operator column is not showing a drop down:

@(
Html.Kendo().Grid<formFilter>()
	.Name("gridFilter")
	.ToolBar(toolbar =>
	{
		toolbar.Create().Text("Add");
		toolbar.Save().Text("Save").CancelText("Cancel");
	})
	.Editable(editable => editable.Mode(GridEditMode.InCell))
	.Columns(columns =>
	{
	columns.ForeignKey(c => c.filterName, ds => ds.Read(r => r.Action("fieldNames", "View1", new { className = "View1" })), "filterName", "filterName").Title("Field").Width(200);
	columns.ForeignKey(c => c.filterEval, new SelectList(
		new List<SelectListItem>
			{
				new SelectListItem { Text = ">", Value = ">"},
				new SelectListItem { Text = "<", Value = "<"},
				new SelectListItem { Text = ">=", Value = ">="},
			}, "Value", "Text"))
		.Title("Operator").Width(200);
	columns.Bound(c => c.filterValue).Title("Value");
	columns.Command(c => c.Destroy()).Width(50);
	})
	.Pageable(pageable => pageable
	.Refresh(true)
	.PageSizes(true))
	.DataSource(dataSource => dataSource
		.Ajax()
		.PageSize(5)
		.Batch(true)
		.ServerOperation(false)
		.Events(events => events.Error("ErrorHandlerForFilterTable"))
		.Model(model =>
		{
			model.Id(p => new { p.filterId });
		})
		.Create("createFilter", "View1")
		.Read(read => read.Action("getFiltersTable", "View1", new { url = @Context.Request.Path }))                                                                                
		.Update("updateFilter", "View1")
		.Destroy(del => del.Action("deleteFilter", "View1"))                                        
	)
)

ComboBox

DropDownList

Grid

answered on 30 Apr 2024

1 answer

70 views

Kendo Grid and two columns.ForeignKey

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

DropDownList

Grid

answered on 26 Feb 2024

1 answer

320 views

Conditional Form Validation

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.

DropDownList

Form

answered on 16 Jan 2024