Questions on UI for ASP.NET Core Forum

1 answer

72 views

What is the standard setup for a grid in a tag helper form

I was able to add a grid to the form, but when clicking save the grid data does not submit with the rest of the form.

I was wondering if there are any articles on this situation or if I have to write custom JavaScript to handle it in on-submit of the form.

this is roughly my setup.

<kendo-form name="bid-form" form-data="@Model" layout="grid" asp-controller="" asp-action="" method="post">

... other items

<form-item field="@(nameof(Bid.ObjectList))" editor-handler="gridAsEditor"></form-item>
</form-items>
</kendo-form>

Form

Grid

answered on 31 Oct 2024

1 answer

59 views

Dynamic binding of Datasource shows [object object] before k-list-content

I have an editor template where i have added this list View as component while rendering on grid edit/add why am i seeing this [object object]. I'm not sure what mistake I've making here.
Editor Template:

@(Html.Kendo().Template()
    .AddHtml("<div class=\"k-edit-label\">")
    .AddHtml(Html.LabelFor(m => m.WeekDays).ToHtmlString())
    .AddHtml("</div>")
    .AddHtml("<div class=\"k-edit-field\">")
    .AddComponent(c => c.ListView<CheckboxList>()
        .Name("weekDays")
        .TagName("div")
        .ClientTemplateHandler("weekDaysTemplateHandler")
        .HtmlAttributes(new { data_bind = "source: daysDataSource"})
    )
    .AddHtml("</div>")
)

my kendo observable and template handler:

function weekDaysTemplateHandler(data){
 
    var result = '<div style="width: 33%;">';
    result += `<input class="weekDays" data-name="${kendo.htmlEncode(data.Name)}" data-id="${kendo.htmlEncode(data.ID)}" name="weekDays" type="checkbox" style="vertical-align: -2px" data-bind="checked:weekDays[${kendo.htmlEncode(data.ID)}].Selected" />`;
    result += ` <span>${kendo.htmlEncode(data.Name)}</span>`;
    result += "</div>"
    return result;
}var viewmodel = new kendo.observable({
    dataSource: [],
    weekDaysDataSource: new kendo.data.DataSource({
        data: []
    }),
    OnEdit: function(e){
         this.weekDaysDataSource.data(e.model.WeekDays);
    }
});

My data looks lik this:

WeekDays: [
    {
          ID: 1,
          Name: "Monday",
          Selected: false
    },
    {
         ID: 2,
        Name: "Tuesday",
        Selected: false
   },
   .... <rest of the days>
];

In UI it looks like this:

DOM Element:

Editor

Grid

ListView

answered on 29 Oct 2024

1 answer

45 views

PDF Template headers are removed when using exportPDF

Using the example from this page: https://docs.telerik.com/kendo-ui/framework/pdf/page-templates

My goal is to produce a PDF from the webpage with a header and footer as shown on the page above, and to be able to save the PDF to a location.

When using this method, the template header and footer display correctly.

 kendo.drawing.drawDOM("#grid", {
                  paperSize: "A4",
                  margin: "3cm",
                  template: $("#page-template").html()     //WORKS
              }).then(function(group){
                  kendo.drawing.pdf.saveAs(group, "filename.pdf");
              });

However, when using this method, the "template" is ignored. I have tried placing the properties in the "saveAs" object, but this didn't work either.

kendo.drawing.drawDOM("#grid", {
              }).then(function(group){
		return kendo.drawing.exportPDF(group, {
                        paperSize: "A4",
                        margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
                        template: $("#page-template").html()   //IGNORED
                    });
              })
                .done(function (data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "filename.pdf",
                        //proxyURL: "myurl/Test/"
                    });
                });

How can I get the template to show the header and footers with the 2nd method?

Or does the "kendo.drawing.pdf.saveAs" have a "proxyURL" property?

Template

answered on 29 Oct 2024

0 answers

53 views

Clienttemplate plus excel not working

.ToolBar(toolbar =>{

toolbar .ClientTemplate(

"<text>" +

"<a class=\"k-primary" href=\””+@Url.Action ("CreateId", "Home") + "\">" "Create New Person" +

"</a>" +

"</text>");

toolbar .Excel().Text("Excel");

})

Excel(excel => excel

FileName("Tabledata.xlsx")

Filterable(true))

I am trying to add excel buuton the existing client template but, the excel is not coming only the create new preson button is only coming. If i write the excel individually then it is working. I want the create new person button next to it the excel button.

can some one plz look into this.

Thanks.

Toolbar

asked on 25 Oct 2024

0 answers

57 views

Excel button not display after upgrading to .net 8

Events(e=>e.ExcelExport("excelExportHelper"). DataBound("datagridrows"))

with this line the excel button is working but after upgrading the button is not showing. Can someone plz help with the issue

Thanks

Toolbar

asked on 25 Oct 2024

0 answers

78 views

Create, edit and delete on client side and Read via dataSource

Hi!

I am programming a kendo grid. The idea is that the client can add new records through a small popup form. But not save them on the server until I hit a general save button.

The only request it will make to the server will be to save everything and when it loads the page to get the grid data.

Kendo Grid:

@(Html.Kendo().Grid<ParteMovimientoLineaVM>()
    .Name("listadoMovimientosLinea")
    .Mobile()
    .Columns(columns =>
    {
        columns.Bound(model => model.ParteMovimientoLineaID).Hidden();
        columns.Bound(model => model.Cantidad).Title("Cantidad").Width("10%");
        columns.Bound(model => model.TipoMovimiento).Title("Movimiento");
        columns.Bound(model => model.MedioAuxiliar).Title("Medio / Maquinaria");
        columns.Bound(model => model.TipoEstado).Title("Estado / Ret. Completa");
        columns.Command(command => { 
            command.Destroy().Text(" ").IconClass("bi bi-trash");
            command.Edit().Text(" ").IconClass("bi bi-pencil-square");
        });
    })
    .ToolBar(t =>
    {
        t.Custom().Text("Añadir").HtmlAttributes(new { id = "addLineBtn" });
    })
    .Editable(editable =>
    {
        editable.Mode(GridEditMode.PopUp).TemplateName("_FormMovimientoLinea");
    })
    .BindTo(Model.Lineas) // This is a test, it should be a dataSource with the Read Action
)

Template _FormMovimientoLinea:

@model MyPath.Models.Movimientos.ParteMovimientoLineaVM

<fieldset class="k-edit-form-container d-flex flex-column gap-4">
    <div class="k-form-field">
        @(Html.Kendo().NumericTextBoxFor(m => m.Cantidad)
            .Min(1)
            .Step(1)
            .Value(1)
            .Format("n0")
            .Spinners(true)
            .Label(l => l.Content("Cantidad")))
    </div>
    <div class="k-form-field">
        @(Html.Kendo().DropDownListFor(m => m.TipoMovimiento)
            .BindTo(new List<string> { "Movimiento 1", "Movimiento 2", "Movimiento 3" })  // Datos de prueba
            .OptionLabel("Selecciona un movimiento")
            .Label(l => l.Content("Tipo de movimiento"))
        )
    </div>
    <div class="k-form-field">
        @(Html.Kendo().DropDownListFor(m => m.MedioAuxiliar)
            .BindTo(new List<string> { "Medio 1", "Medio 2", "Medio 3" })  // Datos de prueba
            .OptionLabel("Selecciona un medio")
            .Label(l => l.Content("Medio Axuiliar"))
        )
    </div>
    <div class="k-form-field">
        @(Html.Kendo().DropDownListFor(m => m.TipoEstado)
            .Label(l => l.Content("Estado / Ret. Completa"))
            .DataTextField("Text")
            .DataValueField("Value")
            .OptionLabel("Selecciona un estado")
            .DataSource(source =>
            {
                source.ServerFiltering(true);
                source.Read(read => read.Action("GetMantenimientosDropDown", "MantenimientosSimples", routeValues: new { entidad = EMantenimientoGenericoEntidad.TipoEstado }));
            }))
    </div>
</fieldset>

My TypeScript:

AddEventos(): void {
    if (this.grid) {
        this.grid.bind("save", (e: kendo.ui.GridSaveEvent) => {
            if (e.model?.isNew()) {
                console.log("New row save:", e.model);
            }

            e.model!.dirty = false;
            this.grid?.refresh();
        });

        this.grid.bind("remove", (e: kendo.ui.GridRemoveEvent) => {
            console.log("Row delete:", e.model);

            this.grid?.dataSource.remove(e.model!);

            this.grid?.refresh();
        });
    }
}

AddCustomButtonEvent(): void {
    $("#addLineBtn").on("click", () => {
        if (this.grid) {
            this.grid.addRow();
        }
    });
}

The problem I am encountering is in the PopUp buttons, the cancel button deletes the row and the X to close the popup too.

If you could guide me a little how I could solve this problem. Thanks :)

Grid

asked on 24 Oct 2024

1 answer

133 views

ToDataSourceResultAsync is not actually Async

In the example below products is actually DbSet<Product>

public async Task<ActionResult> Products_Read([DataSourceRequest]DataSourceRequest request)
{
    using (var northwind = new SampleEntities())
    {
        IQueryable<Product> products = northwind.Products;
        DataSourceResult result = await products.ToDataSourceResultAsync(request);
        return Json(result);
    }
}

Under the hood the ToDataSourceResultAsync call is executed inside Task.Run

And that Task.Run is calling sync methods of IQueryable which means EntityframeworkCore queries are not taking place with async I/O

I came up with something like below. But couldnt figured out how to support groups and aggregates.

It works with filters, sorts and paging.

        public static Task<AsDataSourceResult<TResult>> ToAsDataSourceResult<TModel, TResult>(this IQueryable<TModel> enumerable, DataSourceRequest request, Func<TModel, TResult> selector)
        {
            return enumerable.AsCreateDataSourceResultAsync(request, selector);
        }

        private static async Task<AsDataSourceResult<TResult>> AsCreateDataSourceResultAsync<TModel, TResult>(this IQueryable<TModel> queryable, DataSourceRequest request, Func<TModel, TResult> selector)
        {
            var result = new AsDataSourceResult<TResult>();

            var data = queryable;

            if (request.Filters.Count > 0)
                data = (IQueryable<TModel>)data.Where(request.Filters);

            result.Total = await data.CountAsync();

            var sort = new List<SortDescriptor>();

            if (request.Sorts != null)
                sort.AddRange(request.Sorts);

            if (sort.Count == 0 && queryable.Provider.IsEntityFrameworkProvider())
            {
                // The Entity Framework provider demands OrderBy before calling Skip.
                var sortDescriptor = new SortDescriptor
                {
                    Member = queryable.ElementType.FirstSortableProperty()
                };
                sort.Add(sortDescriptor);
            }

            if (sort.Count > 0)
                data = (IQueryable<TModel>)data.Sort(sort);

            data = data.Page(request.Page - 1, request.PageSize);

            var list = new List<TResult>();

a

            result.Data = list;

            return result;
        }

        private static IQueryable<TResult> Page<TResult>(this IQueryable<TResult> source, int pageIndex, int pageSize)
        {
            var query = source;

            query = query.Skip(pageIndex * pageSize);

            if (pageSize > 0)
                query = query.Take(pageSize);

            return query;
        }

        private static string FirstSortableProperty(this Type type)
        {
            var firstSortableProperty = type.GetProperties().FirstOrDefault(property => property.PropertyType.IsPredefinedType()) ?? throw new NotSupportedException("Exceptions.CannotFindPropertyToSortBy");
            return firstSortableProperty.Name;
        }

        private static bool IsEntityFrameworkProvider(this IQueryProvider provider)
        {
            var name = provider.GetType().FullName;
            return name == "System.Data.Objects.ELinq.ObjectQueryProvider" ||
                    name == "System.Data.Entity.Core.Objects.ELinq.ObjectQueryProvider" ||
                    name.StartsWith("LinqKit.ExpandableQueryProvider") ||
                    name.StartsWith("Microsoft.Data.Entity.Query.EntityQueryProvider") ||
                    name.StartsWith("System.Data.Entity.Internal.Linq");
        }

AsDataSourceResult<TResult> is wrapper for typed access to DataSourceResult

How do i support all operations which ToDataSourceResult (sync) one supports.

Grid

answered on 21 Oct 2024

1 answer

73 views

Load content of the Tabstrip using ControllerAction method and not Partial View

I have list of tabs in my model like

var model = new List<TabModel>(){
new TabModel(){
Name = "Users",
ControllerName = "Home",
ActionName = "SearchUserData",
RequestValues = new {
area = "Admin",
userId = 12
}
},
new TabModel(){
Name = "Location",
ControllerName = "Home",
ActionName = "SearchUserLocation",
RequestValues = new {
area = "Admin",
userId = 12
}
},
new TabModel(){
Name = "Cities",
ControllerName = "Home",
ActionName = "SearchUserCity",
RequestValues = new {
area = "Admin",
userId = 12,
countryId = 1
}
},
};

In cshtml: my Tabstrip looks like this

Html.Kendo().TabStrip()
.Name("admin-tab-strip")
.Items(s =>
{

foreach (var item in Model)
{
if (item.ControllerName == "SearchUserData")
{
s.Add().Text(item.Name)
.Content(@Html.Action(item.ActionName, item.ControllerName, item.RequestValues).ToString())
.Selected(item.IsSelected);
}
else
{
s.Add().Text(item.Name)
.LoadContentFrom(item.ActionName, item.ControllerName, item.RequestValues)
.Selected(item.IsSelected);
}
}
}))

Since Html.Action is no longer works in .net 8. Need suggestion to overcome this issue.
Now, I'm unable to navigate to the page which has this tabstrip due to Html.Action issue

TabStrip

answered on 18 Oct 2024

1 answer

46 views

How do I style a notification's content differently on mobile versus desktop?

I have a notification element that I want to position with some margin on the right side of the screen on desktop, so it doesn’t sit too close to the edge. Using .Position(p => p.Right(80)) achieves this, but on mobile, the notification overflows off the left side of the screen. Is there a way to conditionally apply the right positioning based on screen width?

Additionally, on mobile, I’d like to set the width to something like 80% of the screen and center the notification. On desktop, I want it to maintain its default width. Is this possible?

P.S. This is for Telerik ASPNet Core UI.

Notification

answered on 17 Oct 2024

1 answer

95 views

Grid Template Column and Strict CSP

I have a grid with the following template columns:

columns.Template("<input type='checkbox' />");
columns.Template("<input type='hidden' value='#=Ssid#' />");

Html.Kendo().Template().AddHtml() cannot be used because it does not return a string.

How can I rewrite the code to be compatible with a strict content security policy (e.g. without using unsafe-inline)?

Thank you

Grid

answered on 13 Oct 2024