Questions on UI for ASP.NET MVC Forum

1 answer

290 views

Localization and date instead of datetime inside a grid

Hi,

I have a problem with a datetime in a grid.

It works like it should if date StartDate doesn't have a DateType. And gets a date and a timepicker in the grid.

If I change this to

[DataType(DataType.Date)]

public DateTime StartDate { get; set; }

I will get only the datepicker and not the timepicker.

But if I fill in the date I get "the field startdate must be a date" See attached picture

Maybe this is because of the locatlization? I have no clue at the moment.

To get a localization for all my webpages I have put inside the _Layout.cshtml the following

@{

string culture = System.Globalization.CultureInfo.CurrentCulture.ToString();

}

<script src="@Url.Content("~/Scripts/cultures/kendo.culture." + culture + ".min.js")"></script>

<script>

kendo.culture("@culture");

</script>

</head>

<body>

I can see this becomes

<script src="/Scripts/cultures/kendo.culture.nl-NL.min.js"></script>

<script>

kendo.culture("nl-NL");

</script>

Thanks for your support

Maurice

Grid

answered on 11 Oct 2016

1 answer

1.0K+ views

How to display List<object> Count in a cell

In a simple table, I know I'd be able to just call Count in a cell, and there weren't any problems. However, trying to do it in a Grid has been challenging:

This is how my MVC Grid looks like:

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

.Name("issue-grid")

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(x => x.LinkId))

.Read(read => read.Action("ContentExternalLink_Read", "ContentManagement"))

.Create(create => create.Action("ContentExternalLink_Create", "ContentManagement"))

.Update(update => update.Action("ContentExternalLink_Update", "ContentManagement"))

.Destroy(delete => delete.Action("ContentExternalLink_Destroy", "ContentManagement"))

.ServerOperation(true)

.PageSize(10))

.Columns(columns =>

{

columns.Bound(x => x.LinkId).Hidden();

columns.Bound(x => x.LinkTitle).Title("Title").Template(@<text>

<a href="@item.LinkUrl" taget="_blank">@item.LinkTitle</a>

</text>);

columns.Bound(x => x.LinkTypeId).Title("Type");

columns.Bound(x => x.LinkCreatedDate).Title("Created");

columns.Bound(x => x.ContentTagAssignments.Count).Title("Tags");

columns.Bound(x => x.LinkSource).Hidden();

columns.Bound(x => x.LinkPhoneNumber).Hidden();

columns.Bound(x => x.LinkDate).Hidden();

columns.Bound(x => x.LinkCreatedDate).Hidden();

columns.Bound(x => x.LinkModifiedDate).Hidden();

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

})

.ToolBar(toolbar => toolbar.Create())

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

.Scrollable(scr => scr.Height("auto"))

.Sortable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

)

When I run that, I get the Javascript error: Cannot read property 'Count' of undefined.

Any ideas how to get what I want to achieve?

Thank you!
AJ

Grid

answered on 11 Oct 2016

2 answers

362 views

Formatting an Aggregate/ClientFooterTemplate Row

Hi, I have a grid with an aggregate footer and columns formatted with a ClientFooterTemplate. How can I format an entire aggregate row like set the background color across all cells in the row based on an aggregate value? Also, how can I hide the aggregate row - like when there is only one detail row in the grid? Does anyone have an example of either of these scenarios?

Thanks!

Grid

answered on 11 Oct 2016

1 answer

106 views

Change row color based on error happened in backend while updating records

I am updating spreadsheet rows one by one. I want to change row color of those rows which got error in the backend.

@(Html.Kendo().Spreadsheet()
.Name("spreadsheet")
.Sheetsbar(false)
.Toolbar(x => x.Data(false).Insert(false))
.HtmlAttributes(new { style = "width:100%;" })
.Rows(5000)
.Events(e => e.ExcelImport("niinStockImport"))
.Sheets(sheets =>
{
sheets.Add()
.Name("NiinStock")
.DataSource<DynMRO.DTO.Logistics.Planning.NiinStockSearchResultDTO>(ds => ds
.Ajax()
.Batch(true)
.Read(r => r.Action("NiinStockBulkSearchResults", "Logistics").Data("getCriteria"))
.Update(u => u.Action("NiinStockBulkUpdate", "Logistics").Data("getCriteria"))
.Events(e => e.Change("onChange"))
.Model(m =>
{
m.Id(p => new { p.NiinStockID, p.ORGID });
})
)
.Columns(columns =>
{
columns.Add().Width(100);
columns.Add().Width(415);
columns.Add().Width(0);
columns.Add().Width(0);
columns.Add().Width(145);
})

;
})
)

Spreadsheet

answered on 11 Oct 2016

2 answers

90 views

GridForeignKey w/Filter Broken

Hi,

I've been using a modified version of GridForeignKey.chtml below that has stopped working correctly in 2016.3.914 (UI for ASP.Net MVC). Code is:

@model object

@(Html.Kendo().DropDownListFor(m => m)

.Filter("contains")

.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])

.Height(500)

)

The problem is that after the upgrade to the 2016.3.914 version, as soon as I type a key to filter the dropdown, the dropdown closes, whereas before the upgrade the dropdown filtered to items that contained the typed in value and stayed open.

Any help appreciated.

Regards

Ian Parsons, UK.

Grid

answered on 11 Oct 2016

3 answers

517 views

Save Multiple Grids in Batch Save Mode with one Button Click MVC Razor

Please assist me to do save of multiple batch grids with one Button Click MVC Razor. I have two tabs, each has its own batch edit kendo grids (one for Item and the other Supplier). I only want save button to do both updates to the database. I tried on change of Tab to call savechanges to the supplier and then bring the view back to Item. After that the Item Grid became iractic, not able to edit and it keeps falling with 'VM817:17 Uncaught TypeError: Cannot read property 'end' of undefined.' everywhere I tried calling the var grid = $('#Grid').data('kendoGrid'); it gets undefined?

How do I make it go back to the activated Grid?

Thank you.

Grid

answered on 10 Oct 2016

3 answers

176 views

SecurityTrimming in mvc core menu

hi

im using asp.net mvc core app with telerik ui for mvc.

i need to use SecurityTrimming feature of menu for hiding unauthorized items...

<div class="nav navbar-nav">

@(Html.Kendo()

.Menu()

.Name("headerMenu")

.SecurityTrimming(s => s.HideParent(true))

.Items(items =>

{

items.Add().Text("Index").Action("Index", "Home");

items.Add().Text("About").Action("About", "Home");

items.Add().Text("Contact").Action("Contact", "Home");

}

)

</div>

but i get this error:

Severity Code Description Project File Line Suppression State
Error CS1061 'MenuBuilder' does not contain a definition for 'SecurityTrimming' and no extension method 'SecurityTrimming' accepting a first argument of type 'MenuBuilder' could be found (are you missing a using directive or an assembly reference?) mvccoreapp..NETCoreApp,Version=v1.0 C:\Users\Desktop\practice\01-sample-project-fa\src\mvccoreapp\Views\Shared\_Layout.cshtml 38 Active

it seems that .SecurityTrimming(s => s.HideParent(true)) does not implemented in this version. i tested it with kendo.mvc.2016.2.630-preview and Telerik.UI.for.AspNet.Core 2016.3.914

plz help,tnx

Menu

answered on 10 Oct 2016

2 answers

540 views

Binding Grid to AJAX JSON

I have a WebAPI method that is returning a List<User>. This WebApi is used be several different applications and APIs, but we're attempting our first MVC app against it. I cannot get the grid to populate unless I add a ModelBinder to the WebAPI to return a DataSourceRequest. This seems rather counter-intuitive. It seems the best part of WebAPI is to accept & return generic JSON that anyone can then consume and use. But by adding the need for the DataSourceRequest, it's no longer a generic API, and will only work with Telerik. (a stretch since the result is just a JSON object with a Data[] holding the actual collection, but either way I just want to use regular ole JSON but still use the Telerik controls. What if I connect to someone elses API that just returns flat generic JSON?

So what can I do to keep my WebAPI generic, continue using JSON, and yet still have the MVC use the data in it's grid?

Here is the only way I was able to get it to work.

WebAPI Controller:

[HttpGet]

[ActionName("GetAllActiveUsers")]

[EnableCors("*", "*", "GET,POST,PUT,DELETE,OPTIONS")]

public DataSourceResult GetAllActiveUsers([ModelBinder(typeof(DataSourceRequestModelBinder))] DataSourceRequest request)

{

List<User> allUsers = _manager.GetAllActiveUsers();

return allUsers.ToDataSourceResult(request);

}

And here is the Grid/CSHTML Code:

@using Vensure.Dashboard.Data.DatabaseModels

@{

ViewBag.Title = "Index";

}

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

.Name("ajaxGrid")

.Columns(cols =>

{

cols.Bound(c => c.UserId);

cols.Bound(c => c.FirstName);

cols.Bound(c => c.LastName);

cols.Bound(c => c.UserName);

cols.Bound(c => c.Email);

})

.Scrollable(s => s.Height("auto"))

.Sortable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

.AutoBind(false)

.DataSource(dataSource => dataSource

.Ajax()

.Read(r => r

.Url("http://localhost/Vensure.Dashboard.Service/api/User/GetAllActiveUsers")

.Type(HttpVerbs.Get)

)

.PageSize(20)

.ServerOperation(false))

)

<script>

$(function () {

var grid = $("#ajaxGrid").data("kendoGrid");

grid.dataSource.transport.options.read.beforeSend = function (xhr) {

xhr.setRequestHeader('X-Access-Token', getCookie('VensureToken'));

};

grid.dataSource.read();

});

function getCookie(name) {

var value = "; " + document.cookie;

var parts = value.split("; " + name + "=");

if (parts.length == 2) return parts.pop().split(";").shift();

}

</script>

I tried different things, such s ServerOperation both true and false, etc...

Grid

answered on 10 Oct 2016

5 answers

1.5K+ views

Update Id and Name of DropDownList

Hello,

I'm using Kendo UI MVC to generate a dynamic form.

User fill the form with Name and Las name. And I have a button that adds a template with two DropDownList with cascading behavior.

Each time user clicks on the add button, a couple of DropDownLists is added using template. Everything works fine.

The name and id of those ddl is Articles[0].Name and Articles[0].Quantity each time I add I increment the number between bracket.

The problem is when the user wants to delete one couple of ddl, I find my self with not continuous ids :

Initial :

Articles[0].Name, Articles[0].Quantity

Articles[1].Name, Articles[1].Quantity

Articles[2].Name, Articles[2].Quantity

When user deletes the second one I have :

Articles[0].Name, Articles[0].Quantity
Articles[2].Name, Articles[2].Quantity

This don't work because the mode binder in my action controller will stop at 0 if he doesn't find the index 1.

I tried updating the inputs with jquery, but this breaks the cascading behavior of the kendo DDL.

So is there a way to update the ID and name of a kendo DDL without breaking the cascading behavior ?

Thank you.

DropDownList

answered on 07 Oct 2016

3 answers

215 views

Queryable GeoJSON

Hello,

In the samples I see a lot of static GeoJSON being used to provide shape layer data but none where the layer data is fetched from a service which could query a source and return only the GeoJSON for the current map bounds, perhaps also dependent on the zoom.

My challenge is to integrate a database with plenty of shapes (polygons) in it so querying the database is the only realistic option we have. In the end, new shapes would also be created through the map and saved to the database but for this questions purpose I am only interested in querying and returning the correctly formatted GeoJSON based on the current bounds and zoom.

Does the map control support passing the bound and zoom parameters to the service behind a GeoJSON URL? If so, what are these parameters and would you be able to point me to the related documentation or create a new entry explaining and demonstrating this feature.

Regards,

Aaron

Map

answered on 07 Oct 2016