Questions on UI for ASP.NET Core Forum

1 answer

212 views

CheckBoxGroup razor-page biding and get selected values back on post

Hello,

I have followed this help article, how to bind CheckBoxGroup to model on razor page. This article does not show how to get selected values back on post.

https://docs.telerik.com/aspnet-core/html-helpers/editors/checkboxgroup/razor-page

OnPost CheckBoxGroupModel models that is bind property, it's CheckBoxGroupValue property stays null when posted back. Only way to get values back is to read them from Request.Forms["checkboxgroup"].

CheckBoxGroup

answered on 20 Oct 2022

1 answer

967 views

How to add trash can button option against each option of dropdownlist

Hi,

I need to add a trash can against each option of the dynamic dropdown list.

example:

How can this be achieved?

What I have achieved so far:

Dynamically populating the list.

Thanks,

VM

Button

DropDownList

answered on 20 Oct 2022

1 answer

273 views

Kendo Grid column menu buttons do not work

The three dots buttons that open column menu settings work in the last three column but no in the others. On the other hand we use kendo windows, when we change the width of window; the column menu opener buttons work properly.

Button

DropDownButton

Grid

answered on 20 Oct 2022

1 answer

154 views

How to shade in a line chart series

I am using the below line chart.

Is there a way to have the green series area filled in with green?

I would like the green series fully colored in as green. But leave the red series as a line.

 <div class="demo-section wide">
    @(Html.Kendo().Chart()
        .Name("chart")
        .Title("Hybrid car mileage report")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Top)
        )
        .SeriesDefaults(seriesDefaults =>
            seriesDefaults.Line().Style(ChartSeriesStyle.Smooth)
        )
        .Series(series =>
        {
            series
                .Line(new double[] { 10, 40, 65, 55, 25 })
                .Name("mpg")
                .Color("red")
                .Axis("mpg");
            series
                .Line(new double[] { 1, 3, 6, 5, 2 })
                .Name("l/100 km")
                .Color("green")
                .Axis("l100km");
        })
        .CategoryAxis(axis => axis
            .Categories("Mon", "Tue", "Wed", "Thu", "Fri")
            // Align the first two value axes to the left
            // and the last two to the right.
            //
            // Right alignment is done by specifying a
            // crossing value greater than or equal to
            // the number of categories.
            .AxisCrossingValue(0, 0, 10, 10)
        )
        .ValueAxis(axis => axis
            .Numeric()
                .Title("miles")
                .Min(0).Max(100)
        )
        .ValueAxis(axis => axis
            .Numeric("km")
                .Title("km")
                .Min(0).Max(161).MajorUnit(32)
        )
        .ValueAxis(axis => axis
            .Numeric("mpg")
                .Title("miles per gallon")
                .Color("#ec5e0a")
        )
        .ValueAxis(axis => axis
            .Numeric("l100km")
                .Title("liters per 100km")
                .Color("#4e4141")
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
        )
    )
</div>
 

Chart

answered on 17 Oct 2022

1 answer

1.2K+ views

Form DateTime posted with Ajax has invalid format

Hello,

I have a Form with an Ajax POST method. One of the fields is a DateTime and when it is being posted, it uses some kind of long format with a mix of culture... It break the ASP Model and marks it as invalid as it's not recognised as a DateTime.

This is the payload from submiting the form, as you can see, the timezone is in french, while the date is in en-US. The client Kendo culture is also set as en-US.

DateRequete: Tue+Oct+11+2022+00:00:00+GMT-0400+(heure+d’été+de+l’Est)

This is the form submit function:

function onFormRequeteSubmit(ev) { //Fonction pour FormRequuete
    ev.preventDefault();
    var modelData = ev.model;
    $.ajax({
        type: 'POST',
        url: "/FormHandler/Requete",
        beforeSend: function (xhr) {
            xhr.setRequestHeader('X-XSRF-TOKEN', getCookie('XSRF-TOKEN'));
        },
        data: modelData,
        dataType: 'json',
        success: function (data) {
            //removed for clarity
        },
        error: function (data) {
            //removed for clarity
        }
    })

};

I"ve tried the following before the $.ajax call, and it does post the date in a valid ISO format, but it breaks the post and somehow posts the actual page instead of the ajax url...

modelData.DateRequete.value = modelDate.DateRequete.toJSON();

How can I convert the date to a valid format before posting it and/or why is my client culture not set properly? This is the content of my <head>:

<script src="https://cdn.kendostatic.com/2022.2.510/js/cultures/kendo.culture.en-US.min.js"></script>
<script>
    kendo.culture("en-US");
    var culture = kendo.culture();
    console.log(culture.name); // outputs "en-US"
</script>

Form

answered on 14 Oct 2022

1 answer

92 views

Error when attempting to select a grid row using JavaScript function

When I click my (test) button to select a row (with Id = 2) in my grid, I get the error:

"Uncaught TypeError: Cannot read properties of undefined (reading 'get') at selectRowById".

Here is my function:

function selectRowById(id) {
var grid = $("#grid").data("kendoGrid")
var dataItem = grid.dataSource.get(id);
var dataItemUID = dataItem.get("uid");
var tableRow = $("[data-uid='" + dataItemUID + "']");
grid.select(tableRow);
}

Here is my grid:

@(Html.Kendo().Grid<Document>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.DocumentId).Title("Doc Id").Filterable(false).Width(90);
columns.Bound(p => p.StorageContainer).Title("Container").Width(100);
columns.Bound(p => p.FileName).Width(350);
columns.Bound(p => p.DocStatus).Width(125);
columns.Bound(p => p.FileSize).Width(125).HtmlAttributes(new { @style = "text-align: right" });
columns.Bound(p => p.ClientDocumentId).Title("Client Doc Id").Width(200);
columns.Bound(p => p.CreateDate).Format("{0:MM/dd/yyyy}").Width(130);
columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(150);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Row))
.Pageable()
.Resizable(resize => resize.Columns(true))
.Pageable()
.Sortable()
.Scrollable()
.Reorderable(reorder => reorder.Columns(true))
.Filterable()
//.Groupable()
.HtmlAttributes(new { style = "height:650px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model =>
{
model.Id(p => p.DocumentId);
model.Field(p => p.DocumentId).Editable(false);
model.Field(p => p.CreateDate).Editable(false);
})

.Read(read => read.Action("Read", "Document").Data("getApplicationId"))
.Create(update => update.Action("Create", "Document"))
.Update(update => update.Action("Update", "Document"))
.Destroy(update => update.Action("Delete", "Document"))
)
)

Any help would be greatly appreciated. Thanks.

Mark

Grid

answered on 14 Oct 2022

1 answer

382 views

Kendo UI how to move grid command buttons

I have grid below. I did not like the way buttons are displayed. so would like to do 1 of these:

1) move buttons to the bottom of the row to eliminate 2 column, mainly for mobile friendly

2) or at very least get rid of "Edit" & "Delete" label on these buttons to reduce space. When I removed button text, buttons no longer response to events. Why?

I have attached a screenshot. Could someone suggest a solution please!

 @(Html.Kendo().Grid(Model)
        .Name("grid")
        .ToolBar(toolbar => {
            toolbar.Search(); 
            toolbar.Custom().Text("Add").IconClass("bi bi-plus-circle").HtmlAttributes(new { id = "AddButton", @class="floatRight" });
            toolbar.Pdf().Text("PDF");
            toolbar.Excel().Text("Excel");})
        .Search(search=> search.Field(c=>c.Caption))
        .Selectable(select => select.Mode(GridSelectionMode.Single))
        .Events(ev => ev.Change("onChange"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(false)
         )
 
        .Pageable()
        .Sortable()
        .Columns(columns =>
        {
            columns.Bound(f => f.Id).Visible(false);  
            columns.Bound(f => f.Odometer).Title("Equipment List").ClientTemplate("<p><strong>#=Caption#</strong></p> <ul><li>Odometer: #=Odometer #</li><li>Engine Hour: #=EngineHour #</li><li>Created date: #= CreateDateString #</li><li>Last maintenance: #= LastMaintenance?.Description # on #= LastMaintenance?.CreateDateString #</li></ul>");
            columns.Command(command => { 
                command.Custom("Edit").IconClass("bi bi-pencil-square").Click("Update");
                command.Custom("Del").IconClass("bi bi-trash").Click("Archive");
            }).Title("Actions").Width(80);
        
        })
    )

Grid

answered on 13 Oct 2022

0 answers

366 views

An invalid form control with name='' is not focusable...

I'm dealing with a situation specified here in the jQuery world: https://docs.telerik.com/kendo-ui/knowledge-base/combobox-invalid-form-control-is-not-focusable

I'm having a similar issue but am using a combination of tag-helpers and Html extension methods to render controls. Kendo Text boxes are getting client-validated properly, but DropDowns are not, and also some textboxes that are initially hidden are also facing the same issue.

DropDownList

asked on 13 Oct 2022

1 answer

394 views

Render DropDownLists in a for loop with data filtering

I have a view setup the following way:

@for (var i = 0; i < Model.ApprovingRoles.Count; i++)
{
    <div class="col-lg-6">
        @(Html.Kendo().DropDownListFor(m => m.ApprovingRoles[i])
              .Size(ComponentSize.Medium)
              .Rounded(Rounded.Medium)
              .FillMode(FillMode.Outline)
              .OptionLabel("Select " + Model.ApprovingRoles[i].Name)
              .HtmlAttributes(new { style = "width: 100%", required = "required", validationmessage = "Value required" })
              .DataTextField(nameof(SystemUserModel.EmployeeName))
              .DataValueField(nameof(SystemUserModel.Id))
              .Filter(FilterType.Contains)
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                    read.Action("GetUsersByRoleId", "Api").Data(Model.ApprovingRoles[i].Id.ToString());
                  }).ServerFiltering(true);
              })
              .Height(500)
            )
    </div>
}

Is this the correct way to display the drop-downs in a loop?
Each dropdown needs to apply a filter to the GetUsersByRoleId API, and the value is in m.ApprovingRoles[i].Id
Did I set up the read.Action().Data() correctly?

Currently:

Four dropdowns appear which is correct
They have the correct Option label
They have no data, which should not be the case
I have a breakpoint on the GetUsersByRoleId, and I'm just receiving a 0 for my int roleId parameter.

DropDownList

answered on 12 Oct 2022

1 answer

139 views

CRUD Create Update Delete from database. (I have seen the demo but I need a little help)

Hello this is my Controller in my code I am trying to update or delete from the database. 
I get a 200 status which says its succesful but it never gets updated or deleted.
I can read and create fine but updating is a little challenging.
this is the response i get from the debbuger when i edit a row:
Microsoft.AspNetCore.Hosting.Diagnostics: Information: Request finished HTTP/1.1 POST https://localhost:57770/Grid/ClientsEdit/14416 application/x-www-form-urlencoded;+charset=UTF-8 176 - 200 - application/json;+charset=utf-8 683.0242ms
public ActionResult ClientsEdit(int id, ClientDatum clientDatum, [DataSourceRequest] DataSourceRequest request)
        {
            PrincipalContext pc = new PrincipalContext(ContextType.Domain, "WIX");
            UserPrincipal up = UserPrincipal.FindByIdentity(pc, User.Identity.Name);
            GroupPrincipal ad = GroupPrincipal.FindByIdentity(pc, "Administrators");
            GroupPrincipal gr = GroupPrincipal.FindByIdentity(pc, "Gr");
            clientDatum = _clientContext.ClientData.Find(id);
            var clients = _clientContext.ClientData.ToList();
            var dsClient = cleints.ToDataSourceResult(request);
         
            if (id == null)
            {
                return BadRequest();
            }
            else if (gangDatum == null)
            {
                return NotFound();
            }
            else if (User.Identity.IsAuthenticated && (up.IsMemberOf(ad) || up.IsMemberOf(gr)))
            {
                if (ModelState.IsValid)
                { 
                    _clientContext.ClientData.Update(clientDatum);
                    _clientContext.Entry(clientDatum).State = EntityState.Modified;
                    _clientContext.SaveChanges();
                }
                return Json(clients);
            }
            else
            {
                string msg = "You need to authenticate to create a user";
                return Json(msg);
            }
        }

<div class="row">
    <div class="col-12">
        @(Html.Kendo().Grid <TelerikGangsApp.Models.ClientDatum>()
                            .Name("grid")
                            .Columns(columns =>
                            {   
                                //columns.Bound(p => p.Id);
                                columns.Bound(p => p.FirstName);
                                columns.Bound(p => p.MiddleName);
                                columns.Command(command => command.Edit()).Width(150);
                                columns.Command(command => command.Destroy()).Width(150);
                            })
                            .ToolBar(toolbar => 
                            {
                                toolbar.Create();
                                //toolbar.Save();
                                toolbar.Pdf();
                                toolbar.Search();
                            })
                            .Pdf(pdf => pdf
                            //.AllPages()
                            .AvoidLinks()
                            .PaperSize("A1")
                            .Margin("2cm", "1cm", "1cm", "1cm")
                            .Landscape()
                            .RepeatHeaders()
                            .TemplateId("page-template")
                            .FileName("Gangs.pdf")
                            .ProxyURL(Url.Action("PdfExport", "Grid"))
                            )
                            .Editable(editable => editable.Mode(GridEditMode.InLine))
                            .Pageable()
                            .Sortable()
                            .Scrollable()
                            .Filterable()
                            .Groupable()
                            .HtmlAttributes(new { style = "height:550px;" })
                            .DataSource(dataSource => dataSource
                                .WebApi()
                                .Batch(false)
                                .PageSize(20)
                                .ServerOperation(false)
                                .Model(model => {
                                    model.Id(client => client.Id);
                                    model.Field(client => client.Id).Editable(false);
                                })
                                .Read(read => read.Action("ClientRead", "Grid").Type(HttpVerbs.Get))
                                .Create(create => create.Action("ClientCreate", "Grid").Type(HttpVerbs.Post))
                                .Update(update => update.Action("ClientsEdit", "Grid", new {id = "{0}"}).Type(HttpVerbs.Post))
                                .Destroy(destroy => destroy.Action("ClientDelete", "Grid", new {id = "{0}"}).Type(HttpVerbs.Post))
                            )
        )
    </div>
</div>

Grid

answered on 10 Oct 2022