Questions on UI for ASP.NET Core Forum

1 answer

89 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

59 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

579 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

121 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

153 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

152 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

answered on 29 May 2019

2 answers

175 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

448 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

4 answers

1.4K+ views

Grid Filtering with A Custom Filter Button

Hi,

I have got a form that contains 1 multiselect, 2 dropdown list, 1 button for filtering and 1 grid controls. Every control is required for filter parameters.

For example;

When user click Filter button I will get Multiselect control's selected values, dropdown list control's values and send them to my Action Result method that filling my grid control and in this method my linq query will build and refresh the Grid's datasource.

But i dont know how to get selected values to and then send it to Action Method for re-build my linq query and refresh grid.

Here is my Grid at Razor Page.

@(Html.Kendo().Grid<TelerikAspNetCoreDroppedCalls.Models.CallcentQueuecalls>()

.Name("grid")

.Columns(columns =>

{

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

columns.Bound(p => p.TimeStart).Format("{0:dd/MM/yyyy hh:ss}");

columns.Bound(p => p.TimeEnd).Format("{0:dd/MM/yyyy hh:ss}");

})

.Pageable()

.Sortable()

.Scrollable()

.HtmlAttributes(new { style = "height:550px;" })

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.PageSize(20)

.Read(read => read.Action("CallQueues_Read", "Grid")

)

Here is my Action Method for filling Grid.

public async Task<ActionResult> CallQueues_Read([DataSourceRequest]DataSourceRequest request)

{

var query = from r in _db.CallcentQueuecalls

where !(r.ReasonNoanswercode == 0 && r.ReasonFailcode == 0 &&

r.ToDn != null && r.TsServicing != null)

&& (r.TimeStart >= DateTime.Today.AddDays(-3)) && r.QNum=="0010"

select r;

var dsResult = await query.ToDataSourceResultAsync(request);

return Json(dsResult);

}

Grid

answered on 27 May 2019

1 answer

166 views

Some components doens't work/show

So I've been trying out kendo core components and cannot get it to work with the sample codes from core.
Some components such as Autocomplete and Datepicker does work but when trying out for example a pie chart the component does not show for some reason.

Any suggestions on what the problem could be?

I've added pngs for the code below.

This works:

<div class="cards" style="height: 60%; flex-direction: row">

<div class="card mb-3 shadow card-theme" style="width: 35%; max-height: 100%; margin-right:20px;">

<div class="card-body" style="flex-direction:row">

<div id="phoenixPieChart" style="width:100%; height:50%;">

@(Html.Kendo().DatePicker()

.Name("DatePicker")

)

</div>