Questions on UI for ASP.NET Core Forum

1 answer

923 views

Initially hidden window causes flickering

I have a window in my _Layout.cshtml which I have initially set to visible="false". When I load or refresh the main page, I get a flickering, such that you can momentarily see the window text and button. I'm using a tag helper if that makes any difference.

The following is the _Layout.cshml file. The rest of the solution is just the standard Telerik ASP.Net Core template using ASP.Net Core 2019.2.514 controls on .Net Core 2.2.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>@ViewData["Title"] - WindowFlickerTest</title>

<link href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jszip.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.aspnetmvc.min.js"></script>

<environment names="Development">

<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />

<link rel="stylesheet" href="~/css/site.css" />

</environment>

<environment names="Staging,Production">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"

asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

</environment>

</head>

<body class="k-content">

<kendo-window name="windowChangeUser"

title="Change User"

draggable="true"

resizable="false"

width="250"

height="200"

modal="true"

visible="false"

>

<content>

<div style="font-size: 13px; padding-top: 20px;">

<p>

Enter a username to switch to

</p>

<p style="padding-top: 20px;">

<input type="text" class="k-textbox" id="userName" />

</p>

</div>

<div style="padding-top: 20px; text-align: center">

<kendo-button name="buttonChangeUserOk"

type="submit"

on-click="windowClose"

>

<content>OK</content>

</kendo-button>

</div>

</content>

</kendo-window>

<nav class="navbar navbar-inverse navbar-fixed-top p-3">

<div class="container p-0 p-sm-3">

<kendo-button id="buttonOpenWindow" on-click="openWindow">

<content>Show me the window!</content>

</kendo-button>

<div class="navbar-header">

<kendo-button name="configure" tag="button" icon="menu" class="k-rpanel-toggle k-primary btn-toggle"></kendo-button>

<a asp-controller="Home" asp-action="Index" class="navbar-brand">Your .NET Core Application</a>

</div>

<div id="responsive-panel" class="navbar-left">

<kendo-responsivepanel name="responsive-panel" auto-close="false" breakpoint="768" orientation="top">

@(Html.Kendo().Menu()

.Name("Menu")

.Items(items =>

{

items.Add().Text("Home").Action("Index", "Home", new { area = "" });

items.Add().Text("About").Action("About", "Home", new { area = "" });

items.Add().Text("Contact").Action("Contact", "Home", new { area = "" });

})

)

</kendo-responsivepanel>

</div>

</nav>

<main>

<div class="container">

@RenderBody()

</div>

</main>

<footer class="footer text-center d-flex align-items-center">

<div class="container pb-0">

<hr />

<p class="text-muted">

Copyright © @DateTime.Now.Year Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.

</p>

</div>

</footer>

<environment names="Development">

<script src="~/lib/bootstrap/js/bootstrap.js"></script>

</environment>

<environment names="Staging,Production">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"

asp-fallback-src="~/lib/bootstrap/js/bootstrap.min.js"

asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"></script>

</environment>

@RenderSection("scripts", required: false)

</body>

</html>

<script type="text/javascript">

function openWindow() {

var window = $("#windowChangeUser").data("kendoWindow");

window.center();

window.open();

}

function windowClose() {

var window = $("#windowChangeUser").data("kendoWindow");

window.close();

}

</script>

Window

answered on 05 Jun 2019

2 answers

85 views

Update cell based on changes on another cell

Hi

I have Grid with 4 columns. When I edit a row, enter number in cell 2, I want to update cell 4 with the result of cell 2 - cell 3.

Can anyone advice how I can do this urgently? Thanks in Advance

Below is the code of my grid

@(Html.Kendo().Grid<TransactionCoBroker>()

.Name("GridCommExCoBroker")

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

.Columns(columns =>

{

columns.Command(c => c.Edit());

columns.Bound(u => u.Name).Title("Name");

columns.Bound(u => u.FNet).Title("Net"));

columns.Bound(u => u.FTax).Title("Tax"));

columns.Bound(u => u.FGross).Title("Amount"));

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(id => id.ICobrokerId);

model.Field(p => p.UName).Editable(false);

model.Field(p => p.FNet).Editable(true);

model.Field(p => p.FTax).Editable(true);

model.Field(p => p.FGross).Editable(false);

})

.Events(e => e.Error("onError").RequestEnd("onRequestEnd"))

.ServerOperation(true)

.Read(r => r.Url("?handler=GetExCoBrokerComm").Data("GetTransID"))

.Update(r => r.Url("?handler=SaveBrokerComm").Data("GetTransID"))))

Grid

answered on 05 Jun 2019

1 answer

91 views

Selectable

.Columns(columns =>
{
columns.Select().Width(50).Locked(true);

....

}

.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Cell))

error

Grid

answered on 04 Jun 2019

1 answer

85 views

ColumnMenu

// .ColumnMenu(columnmenu => columnmenu.Columns(true).Filterable(true).Sortable(true))
.Filterable(filterable =>
{
filterable.Mode(GridFilterMode.Menu);
filterable.Extra(false);
})

display error

.ColumnMenu(columnmenu => columnmenu.Columns(true).Filterable(true).Sortable(true))
.Filterable(filterable =>
{
filterable.Mode(GridFilterMode.Menu);
filterable.Extra(false);
})

display ok

Grid

answered on 04 Jun 2019

1 answer

58 views

ColumnMenu

.Filterable(filterable =>
{
filterable.Mode(GridFilterMode.Menu);
filterable.Extra(false);
})

display error

.ColumnMenu(columnmenu => columnmenu.Columns(true).Filterable(true).Sortable(true))
.Filterable(filterable =>
{
filterable.Mode(GridFilterMode.Menu);
filterable.Extra(false);
})

display ok

Grid

answered on 04 Jun 2019

1 answer

568 views

Grid Background color

Currently my grid background is the light gray, and the rows alternate between light and dark. Is it possible to get the unused portion of the grid to be a different color, while leaving the row alternating colors alone?

Grid

answered on 31 May 2019

7 answers

116 views

Multi editor popup

Hello,

I have a grid with derived objects and I would like to open different edit popup for each type of child object.

I'll give a simplified example:

Models:

public class Product

{

public string Label { get; set; }

}

public class TypeA: Product

{

public string PropA { get; set; }

}

public class TypeB: Product

{

public int PropB { get; set; }

}

public class Order

{

public int Id {get;set;}

public virtual ICollection<Product> Products { get; set; }

}

Controller:

public async Task<Order> GetById(int id)

{

Order order = await webApi.GetById(id); // webApi is a private service who calls a json converter to return a strongly typed list with derived class

return order ;

}

At this point, the object order have a Products property which is a collection of TypeA, TypeB and Product

Views:

@model Order

<div>

@(Html.Kendo().Grid<Product>(Model.Products).Name("grid")

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

.Columns(columns =>

{

columns.Bound(p => p.Label);

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

})

)

</div>

I also create templates in Views\Shared\EditorTemplates

@model Product

<div>

<h1>Product</h1>

</div>

-------------------------

@model TypeA

<div>

<h1>TypeA</h1>

</div>

-------------------------

@model TypeB

<div>

<h1>TypeB</h1>

</div>

Only the Product template pops up. I guess it's because of Grid<Product> declaration.

How can I strongly typed each row and/or have different editor template? I don't want to show PropA and PropB in my grid but I want to allow to edit them in the popup.

Thanks

Grid

answered on 31 May 2019

5 answers

149 views

Poblem Displaying The Grid

Sir,

I have an asp.net core 2.2 project, and I wanted to use Telerik grid to display data from the MS SQL Server database.

the model

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.ComponentModel.DataAnnotations.Schema;

namespace SUCOCoreControl.Models.RazorBudget

{

public partial class Header

{

public Header()

{

SubHeader = new HashSet<SubHeader>();

}

[StringLength(6)]

public string ProjectID { get; set; }

[StringLength(30)]

public string HeaderID { get; set; }

[StringLength(60)]

public string HeaderENG { get; set; }

[StringLength(60)]

public string HeaderARB { get; set; }

[ForeignKey("ProjectID")]

[InverseProperty("Header")]

public virtual Project Project { get; set; }

[InverseProperty("Header")]

public virtual ICollection<SubHeader> SubHeader { get; set; }

}

The controller

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.Rendering;

using Microsoft.EntityFrameworkCore;

using SUCOCoreControl.Models.RazorBudget;

using Kendo.Mvc.UI;

using Kendo.Mvc.Extensions;

using SUCOCoreControl.Data;

namespace SUCOCoreControl.Controllers

{

public class HeadersController : Controller

{

private readonly SUCODbContext _context;

public HeadersController(SUCODbContext context)

{

_context = context;

}

public IActionResult Index([DataSourceRequest] DataSourceRequest request)

{

return Json(_context.Header.ToDataSourceResult(request));

}

public IActionResult Error()

{

return View();

}

The view

@using SUCOCoreControl.Models.RazorBudget

@{

ViewData["Title"] = "Headers";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<div class="page-wrapper">

<div class="container-fluid">

<div class="row page-titles">

<div class="col-md-5 align-self-center">

<h4 class="text-themecolor"><a> @ViewBag.Title</a></h4>

</div>

<div class="row">

<div class="col-12">

<div class="card">

<div class="card-body">

<div class="col-md-6 col-xs-12">

<div class="form-inline well well-lg">

@(Html.Kendo().Grid<Header>()

.Name("Header")

.Columns(columns =>

{

columns.Bound(p => p.ProjectID);

columns.Bound(p => p.HeaderID);

columns.Bound(p => p.HeaderENG);

columns.Bound(p => p.HeaderARB);

columns.Command(command => command.Edit());

})

.Pageable()

.Sortable()

.Filterable()

.Groupable()

.Editable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Read(read => read.Action("Index", "Headers"))

)

</div>

The page is not loading, and the grid of course is not.

I attached the result in the browser.

What I am doing wrong???

Grid

answered on 30 May 2019

4 answers

146 views

checked sign in grid

Hi,

I want to put the checked sign <i class='fa fa-check' aria-hidden='true'></i> to replace "true" in the grid column.

I put below code:

@{ var freshnessTemplate = "# if (checkFreshness) { # <i class='fa fa-check' aria-hidden='true'></i> # } #";}

then

columns.Bound(p => p.checkFreshness).Title("Check Fresh").Width(150).ClientTemplate(freshnessTemplate).HtmlAttributes(new { style = "text-align: center" });

but it doesn't show the checked sign.

Grid