Questions on UI for ASP.NET Core Forum

1 answer

59 views

ExpansionPanel with nested component (TreeView)

Hello,

I need to display multiple ExpansionPanels with nested TreeViews, however I don't find examples of this, and this code is failing with exception:

@(Html.Kendo().ExpansionPanel()
				.Title(group.Text)
				.Content(@<text>
					@(Html.Kendo().TreeView()
					.Name("tree" + group.Id)
					.CheckboxTemplateId("checkbox-template")
					.Checkboxes(true)
					.BindTo(group.Items))
				</text>)
)

Fails with:

fail: Microsoft.AspNetCore.Server.Kestrel[13]
      Connection id "0HN9NPOSEKJS4", Request id "0HN9NPOSEKJS4:00000002": An unhandled exception was thrown by the application.
      System.NullReferenceException: Object reference not set to an instance of an object.
         at Kendo.Mvc.UI.WidgetBase.VerifySettings()
         at Kendo.Mvc.UI.WidgetBase.WriteHtml(TextWriter writer)
         at Kendo.Mvc.UI.ExpansionPanel.WriteHtml(TextWriter writer)
         at Kendo.Mvc.UI.WidgetBase.RenderHtml(TextWriter writer)
         at Kendo.Mvc.UI.WidgetBase.ToHtmlString()
         at Kendo.Mvc.UI.Fluent.WidgetBuilderBase`2.ToHtmlString()
         at Kendo.Mvc.UI.Fluent.WidgetBuilderBase`2.WriteTo(TextWriter writer, HtmlEncoder encoder)
         at Microsoft.AspNetCore.Mvc.ViewFeatures.Buffers.ViewBuffer.WriteToAsync(TextWriter writer, HtmlEncoder encoder)
         at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderLayoutAsync(ViewContext context, ViewBufferTextWriter bodyWriter)
         at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderLayoutAsync(ViewContext context, ViewBufferTextWriter bodyWriter)
         at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)
         at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
         at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
         at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ActionContext actionContext, IView view, ViewDataDictionary viewData, ITempDataDictionary tempData, String contentType, Nullable`1 statusCode)
         at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewResultExecutor.ExecuteAsync(ActionContext context, ViewResult result)
         at Microsoft.AspNetCore.Mvc.ViewResult.ExecuteResultAsync(ActionContext context)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|30_0[TFilter,TFilterAsync](ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext[TFilter,TFilterAsync](State& next, Scope& scope, Object& state, Boolean& isCompleted)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()
      --- End of stack trace from previous location ---
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|25_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
      --- End of stack trace from previous location ---
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
         at Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|7_0(Endpoint endpoint, Task requestTask, ILogger logger)
         at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
         at Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)
         at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)
         at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)
         at Microsoft.WebTools.BrowserLink.Net.BrowserLinkMiddleware.InvokeAsync(HttpContext context)
         at Microsoft.AspNetCore.Watch.BrowserRefresh.BrowserRefreshMiddleware.InvokeAsync(HttpContext context)
         at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequests[TContext](IHttpApplication`1 application)

Treeview works in itself and if I wrap it in ExpansionPanel raw HTML.

Is there anyway around it?

Thank you.

ExpansionPanel

Template

TreeView

answered on 18 Jan 2025

3 answers

544 views

Failed to retrieve information about 'Telerik.UI.for.AspNet.Core' from remote source

Hey,

All our pipelines have broken due to the sunsetting of the V2 endpoint, my attempt at fixing these have stopped with this error

##[error]The nuget command failed with exit code(1) and error(NU1301: Failed to retrieve information about 'Telerik.UI.for.AspNet.Core' from remote source 'https://nuget.telerik.com/v3/nuget/FindPackagesById()?id='Telerik.UI.for.AspNet.Core'&semVerLevel=2.0.0'.

this is happening in an azure devops pipeline using the latest nuget version

we are using a nuget.config file in the same folder as our .sln

and this is what the file looks like (minus the real credentials)

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<packageSources>
<add key="nuget.org" value="https://api.nuget.org/v3/index.json" protocolVersion="3" />
<add key="nuget.telerik.com" value="https://nuget.telerik.com/v3/nuget" />
</packageSources>

<packageSourceMapping>
<packageSource key="nuget.telerik.com">
<package pattern="Telerik.UI.for.AspNet.Core" />
</packageSource>
<packageSource key="nuget.org">
<package pattern="*" />
</packageSource>
</packageSourceMapping>

<packageSourceCredentials>
<telerik>
<add key="Username" value="user" />
<add key="ClearTextPassword" value="pass" />
</telerik>
</packageSourceCredentials>

<packageRestore>
<add key="enabled" value="True" />
<add key="automatic" value="True" />
</packageRestore>
<bindingRedirects>
<add key="skip" value="False" />
</bindingRedirects>
<packageManagement>
<add key="format" value="0" />
<add key="disabled" value="False" />
</packageManagement>
</configuration>

any ideas? we would really like to deploy again...

Also, this works perfectly fine on our local machines.

VS Code Extension

answered on 16 Jan 2025

1 answer

27 views

grid-row-template with javascript code

Hi,

the following template is partially working when used in a grid-row-template.

                <grid-row-template>
                    <div>${data.Name}</div>
                    #if(data.HasLastName){#
                          <div>${data.LastName}</div>
                    #} else {#
                          <div>some other stuff</div>
                    #}#
                </grid-row-template>

values inside ${ } are properly replaced, however the code inside # # is not executed, it is rendered as text.

What is the proper way to include conditionals in this case?

regards

Grid

answered on 15 Jan 2025

1 answer

33 views

Issue with Formulas Not Reflecting in Upload and Download Sheets

Hi Team,

I am facing an issue where formulas in the spreadsheet are not properly reflecting when importing or downloading sheets in my application. Specifically, the formulas are not retained during the upload process or included correctly during the export/download operation.

Below are the reference codes for upload and download functionality:

Upload Code:
using (var package = new ExcelPackage(stream))
{
var workbook = package.Workbook;
var worksheet = workbook.Worksheets[0];

var rows = new List<dynamic>();
for (int row = 1; row <= worksheet.Dimension.End.Row; row++)
{
var rowData = new List<string>();
for (int col = 1; col <= worksheet.Dimension.End.Column; col++)
{
rowData.Add(worksheet.Cells[row, col].Text);
}
rows.Add(new { cells = rowData.Select(val => new { value = val }).ToArray() });
}

var sheetData = new
{
name = worksheet.Name,
rows = rows.ToArray()
};

return Json(new { success = true, data = sheetData });
}

Download Code:
using (var package = new ExcelPackage())
{
var sheet = spreadsheetData.sheets.FirstOrDefault();
if (sheet != null)
{
var worksheet = package.Workbook.Worksheets.Add(sheet.name);

foreach (var row in sheet.rows)
{
foreach (var cell in row.cells)
{
var excelCell = worksheet.Cells[row.index + 1, cell.index + 1];

// Set font properties
excelCell.Style.Font.Size = cell.fontSize > 0 ? cell.fontSize : sheet.defaultCellStyle.fontSize;
excelCell.Style.Font.Bold = cell.bold;

// Set background color
if (!string.IsNullOrEmpty(cell.background))
{
excelCell.Style.Fill.PatternType = ExcelFillStyle.Solid;
excelCell.Style.Fill.BackgroundColor.SetColor(ColorTranslator.FromHtml(cell.background));
}

// Set font color
if (!string.IsNullOrEmpty(cell.color))
{
excelCell.Style.Font.Color.SetColor(ColorTranslator.FromHtml(cell.color));
}

// Set text alignment
excelCell.Style.HorizontalAlignment = cell.textAlign switch
{
"center" => ExcelHorizontalAlignment.Center,
"right" => ExcelHorizontalAlignment.Right,
_ => ExcelHorizontalAlignment.Left,
};

// Set number format
if (!string.IsNullOrEmpty(cell.format))
{
excelCell.Style.Numberformat.Format = cell.format;
}

// Set formula if available
excelCell.Formula = cell.formula;

// Set cell value
excelCell.Value = cell.value;
}
}
}

fileStream = new MemoryStream(package.GetAsByteArray());
}

Could you please guide me on resolving this issue to ensure formulas are preserved and processed accurately?

Thank you for your assistance!

Spreadsheet

answered on 14 Jan 2025

2 answers

60 views

Dynamic TabStrip and nested Grids

I need to be able to render a tabstrip with a dynamic number of tabs, and then within each tab a griid to display records that relate to the tab.

Basically it is grouping sets of data into tabs, and then displaying the records from that group in the grid.

The underlying source of the grids is all the same, albeit each one would be showing a different subset of records.

The number of tabs/grids required would be unknown until the data is loaded.

Is this even possible? I have searched but can't find an example doing exactly what I need.

Thanks

Grid

TabStrip

updated answer on 10 Jan 2025

0 answers

55 views

Dockmanager save and restore layout

Hi,

How to save the layout of the dockmanager ? I need to restore panels in the right place.

Best regards

DockManager

asked on 09 Jan 2025

2 answers

419 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

1 answer

74 views

Not able to see clear button in Aspnet core Textbox control

I am not able to see clear button aspnet core text box control. I have added clear-button="true" to textbox tag helper code and still not able to see the clear button when the data is entered in the text box.

TextBox

answered on 25 Dec 2024

2 answers

42 views

Formatting data bound menu

Hi

I have a data bound menu component where I would like to override the styles of individual items - namely at the moment I would like to make some bold.

What I actually want to do is to render a separator, then a bold header, and then a normal weight list of options - something like :

-----------------------------
Recent Customers
Customer 1
Customer 2
Customer 3
-----------------------------

I do not want them to be a sub menu ideally. I am struggling to work out how to set the class/style of individual menu items.

This is my code for rendering the menu currently, I will add another property to item/subitem as a flag to denote requiring to be bold :

            @(
            Html.Kendo().Menu()
            .Name("mainMenu")                
            .BindTo(Model.Menus.Where(s => s.ParentMenuId == 0), mappings =>
            {
                mappings.For<Welcomm_CRM.Core.Application.Menu>(binding => binding // Define the first level of the Menu.
                .ItemDataBound((item, type) => // Define the mapping between the Menu item properties and the model properties.
                {
                    item.Text = type.MenuTitle;   
                    if (type.MenuSource == 999999)
                    {
                        item.LinkHtmlAttributes.Add(type.ControllerName, type.ActionName);
                    }
                    else if (type.MenuSource == 999998)
                    {
                        item.Separator = true;
                    }
                    else if (type.MenuSource == 0)
                    {
                        item.Url = @Html.Encode(type.Url);
                    }
                }
                )
                .Children(type => Model.Menus.Where(s => s.ParentMenuId == type.MenuId)));
                mappings.For<Welcomm_CRM.Core.Application.Menu>(binding => binding
                .ItemDataBound((item, subtype) =>
                {
                    item.Text = subtype.MenuTitle;                        
                    if (subtype.MenuSource == 999999)
                    {
                        item.LinkHtmlAttributes.Add(subtype.ControllerName, subtype.ActionName);
                    }
                    else if (subtype.MenuSource == 999998)
                    {
                        item.Separator = true;
                    }
                    else
                    {
                        item.Url = @Html.Encode(subtype.Url);
                    }
                })
                );
            })
            )

Menu

answered on 18 Dec 2024

1 answer

40 views

Grid - right justify keeps text left

We have been using the grid control for quite some time and we just now noticed the logic we use to right-justify the header text appears to not be styling as intended. I have attached a screen shot to show the odd display. The text is right-justified but the header text is still on the left of the column. I should note it is common practice, especially for reports, to right justify both the text and the header when showing numeric values so the decimals align.

<column field="CurrentOverCount" title="Over<br />Employee Count" width="70"
        header-html-attributes='new Dictionary<string,object> { ["class"]="text-end" }' html-attributes='new Dictionary<string,object> { ["class"]="text-end" }' />

I have also tried using pure CSS for the header with the same result:

<column field="CurrentOverCount" title="Over<br />Employee Count" width="70"
        header-html-attributes='new Dictionary<string,object> { ["style"]="text-align:right;" }' html-attributes='new Dictionary<string,object> { ["class"]="text-end" }' />

Grid

Styling

answered on 18 Dec 2024