Questions on UI for ASP.NET Core Forum

1 answer

140 views

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

84 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

365 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

314 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

350 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

127 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

4.8K+ 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

180 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

1 answer

9.5K+ views

Cannot insert explicit value for identity column in table 'TABLE' when IDENTITY_INSERT is set to OFF.

Hello Telerik Developers. I am new to Progress Telerik but I am catching up faster than I ever thought.

I was looking to add a new item into my database. While adding I get the error above.

The Primarykey in this case is set to autogenerate in the database and I have it specified in its Context Class:

entity.Property(e => e.Id).ValueGeneratedOnAdd().HasColumnName("id");

Is there any option to adding without setting the IDENTITY_INSERT TABLE ON?

I am looking to have the Id incremented on Add without having to enter it on my own. I was looking at a solution here, but that is not what I am looking for.

Any help is appreciated.

Thank you.

General Discussions

Grid

updated answer on 06 Oct 2022