Questions on UI for ASP.NET MVC Forum

5 answers

427 views

It is possible to set the selection in a grid with paging and to show the page with the selection when the grid is initialized.

Grid

answered on 12 Oct 2016

2 answers

179 views

Custom View Grouping all-day events in one Event Count

Hi!

I'm using a kendo Scheduler in cshtml.

@(Html.Kendo().Scheduler<TaskViewModel>()

.Name("scheduler")

.Views(views =>

{

views.DayView();

views.CustomView("CustomDateRangeView ");

})

.DataSource(d => d

.Read("Read", "Home")

.Create("Create", "Home")

.Destroy("Destroy", "Home")

.Update("Update", "Home")

)

In this scheduler I'm using a custom view defined below. This works fine but I want to group only the all-day events in one Event Count like this example: Create Custom month View with Event Count in Show More Button

I tried to create the method _positionEvent in the custom view but it didn't work...

I couldn't find any information about it, only examples but nothing explained.

//extend the base MultiDayView

var CustomDateRangeView = kendo.ui.MultiDayView.extend({

init: function (element, options) {

kendo.ui.MultiDayView.fn.init.call(this, element, options); //call the base init method

if (options.swipe) {

this._bindSwipe(); //bind the swipe event

}

},

options: { //set default values of the options

numberOfDays: 7,

swipe: false

},

calculateDateRange: function () {

var selectedDate = this.options.date,

numberOfDays = Math.abs(this.options.numberOfDays),

start = getMonday(selectedDate),

idx, length,

dates = [];

for (idx = 0, length = numberOfDays; idx < length; idx++) {

dates.push(start);

start = kendo.date.nextDay(start);

}

this._render(dates);

},

nextDate: function () {

return kendo.date.nextDay(this.endDate());

},

previousDate: function () {

var daysToSubstract = -Math.abs(this.options.numberOfDays); //get the negative value of numberOfDays

var startDate = kendo.date.addDays(this.startDate(), daysToSubstract); //substract the dates

return startDate;

},

_bindSwipe: function () { //bind the swipe event

var that = this;

var scheduler = that.element.closest("[data-role=scheduler]").data("kendoScheduler"); //get reference to the scheduler

that.content.kendoTouch({ //initialize Kendo Touch on the View's content

enableSwipe: true,

swipe: function (e) {

var action,

date;

if (e.direction === "left") {

action = "next";

date = that.nextDate();

} else if (e.direction === "right") {

action = "previous";

date = that.previousDate();

}

//navigate with the scheduler

if (!scheduler.trigger("navigate", { view: scheduler._selectedViewName, action: action, date: date })) {

scheduler.date(date);

}

});

}

});

function getMonday(d) {

d = new Date(d);

var day = d.getDay(),

diff = d.getDate() - day + (day == 0 ? -6 : 1); // adjust when day is sunday

return new Date(d.setDate(diff));

}

Thanks!

Scheduler

answered on 11 Oct 2016

7 answers

1.1K+ views

Enum DropDownList selected problem

I am trying to bind enum dropdownlist ,

I checked the html source and find two different results.

First, it shows value="Distribution", the dropdownlist will select correct value.

<input data-val="true" id="TradeType" name="TradeType" type="text" value="Distribution" data-role="dropdownlist" readonly="readonly" style="display: none;">

<script>

jQuery(function(){jQuery("#TradeType").kendoDropDownList({"change":TradeTypeChange,"dataSource":[{"Text":"Clearing","Value":"Clearing"},{"Text":"Contribution","Value":"Contribution"},{"Text":"Distribution","Value":"Distribution"}],"dataTextField":"Text","dataValueField":"Value"});});

</script>

Second, it shows value="1", so it will select wrong value. The correct value should be "DueInterest".

<input data-val="true" id="TDInterestType" name="TDInterestType" type="text" value="1" data-role="dropdownlist" readonly="readonly" style="display: none;">

<script>

jQuery(function(){jQuery("#TDInterestType").kendoDropDownList({"dataSource":[{"Text":"CancelInterest","Value":"CancelInterest"},{"Text":"DueInterest","Value":"DueInterest"},{"Text":"ReceiptInterest","Value":"ReceiptInterest"}],"dataTextField":"Text","dataValueField":"Value"});});

</script>

I don't how it happened, how could I solved it that second's dropdownlist will select correct value ?

DropDownList

answered on 11 Oct 2016

1 answer

278 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

339 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

103 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

88 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

494 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

165 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