Questions on UI for ASP.NET Core Forum

1 answer

277 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

159 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.3K+ 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

95 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

385 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

375 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

399 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

141 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

2 answers

5.0K+ views

Edit and delete rows in Kendo Grid

In my .net core app, I have a kendo grid in which I am trying to add buttons to edit /update& delete the rows. Basically what I am trying to do is get the objectid from the parameter in the row and redirect to an update or delete view.

<div class="clearfix">

@(Html.Kendo().Grid<M20_AEK.Models.ContractSettlement>()

.Name("ContractSettlementGrid")

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable(pageable => pageable.Input(true).Numeric(false))

.Scrollable()

.Sortable()

.Filterable()

.ColumnMenu()

.Groupable()

.Columns(columns =>

{

columns.Bound(c => c.OBJECTID).Title("ID").Hidden();

columns.Bound(c => c.OPERATOR_OBJECTID).Title("Operator").Width("100px");

columns.Bound(c => c.Year).Title("Year").Width("100px");

columns.Bound(c => c.Month).Title("Month").Width("100px");

columns.Bound(c => c.SETTLEMENT_OBJECTID).Title("Settlement").Width("100px");

columns.Bound(c => c.TECHNOLOGY_OBJECTID).Title("Technology").Width("100px");

columns.Bound(c => c.UPLOAD_SPEED_CLASS_OBJECTID).Title("Upload").Width("100px");

columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_OBJECTID).Title("Download").Width("100px");

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Events(events => events.Error("error_handler"))

.Model(model => model.Id(p => p.OBJECTID))

.Read(read => read.Action("LoadSettlementContracts_Read", "SettlementContract"))

.Update(update => update.Action("Save", "SettlementContract"))

.Destroy(update => update.Action("Delete", "SettlementContract"))

)

</div>

I tried to map the command.Edit() & the command.Destroy() commands to use my corresponding methods my controller. When I click the Update button, I get an error in console:

Failed to load resource :44326/SettlementContract/Save:1 the server responded with a status of 400 ()

Can I map the buttons the way I am trying to? It's not even calling the corresponding methods, it's not hitting my breakpoints. Maybe it can't be done like this?

Grid

answered on 07 Oct 2022

1 answer

215 views

Telerik controls for QR code scanning (not de/encoding)

Writing an ASP.NET Core application (c#) and I'm wondering if Telerik has any controls that would work for a web camera control.

We need to scan QR codes and would like to be able to do on assigned tablets and also have sales people scan with their phones. I know there are some open source projects out there, but hoping Telerik also has a useable camera control.

Thanks

QRCode

answered on 07 Oct 2022