Questions on UI for ASP.NET Core Forum

2 answers

110 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

110 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

105 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

71 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

601 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

148 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

173 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

176 views

[Solved] 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

answered on 29 May 2019

2 answers

196 views

Namespace Kendo not found

Hello,

I am updating my project from 2019.1.220 to 2019.2.514. (Telerik UI for ASP.NET Core)

After updating the nuget-package, the namespace Kendo could not be found.

I have the same issue with the example project, comming with the msi installer.

What am I missing?

Thanks

Michael

General Discussions

answered on 29 May 2019

1 answer

489 views

How to set all Kendo components within a Div to readonly

I have a div that has 7 different elements that I want to make readonly. Right now I have the following script that is setting all non kendo items to readonly

$("#GroupBox").find('input, label').attr("readonly", true)

I have 4 dropdownlists, 2 sliders, and 1 datepicker that I also want to make readonly. I know that I can set each of them individually, but is there an easier way? something similar to what I can do for non kendo component?

General Discussions

answered on 28 May 2019