Questions on UI for ASP.NET MVC Forum

3 answers

367 views

Updating newly created event calls Create, not Update

Hi,
I'm using the ASP.NET MVC wrapper for the scheduler. The problem is that when I want to edit an event I just created (for example lengthen the event in the week view) the scheduler calls the Create-Method and not the Update-Method. I could imagine it has something to do with the ID of the newly created event.
How can I correct this?

The Create-Method:

public JsonResult Scheduler_Create([DataSourceRequest] DataSourceRequest request, SchedulerModel model)

{

Calendar_Entry entry = new Calendar_Entry

{

ID=Guid.NewGuid(),

Description=model.Description,

End=model.End,

Begin=model.Start,

CreationTime=DateTime.UtcNow,

UpdateTime=DateTime.UtcNow,

Name=model.Title,

Calendar_ID=model.CalendarID

};

dbContext.Add(entry);

dbContext.SaveChanges();

model.ID = entry.ID;

return Json(new[] { model }.ToDataSourceResult(request, ModelState));

}

The Scheduler:

@(Html.Kendo().Scheduler<ViCRM.Models.SchedulerModel>()

.Name("scheduler")

.Date(DateTime.UtcNow)

.StartTime(new DateTime(DateTime.UtcNow.Year, DateTime.UtcNow.Month, DateTime.UtcNow.Day, 6, 0, 0))

.Height(750)

.Views(views =>

{

views.DayView();

views.WeekView(weekView => weekView.Selected(true));

views.MonthView();

views.AgendaView();

})

.Timezone("Etc/UTC")

.DataSource(d => d

.Model(m =>

{

m.Id(f => f.ID);

})

.Read("Scheduler_Read", "Calendar")

.Create("Scheduler_Create", "Calendar")

.Destroy("Scheduler_Delete", "Calendar")

.Update("Scheduler_Update", "Calendar")

)

.EventTemplateId("EventTemplate")

.Resources(res =>

{

res.Add(m => m.CalendarID).Title("Kalender").DataSource(ds => ds.Read("getCalendars", "Calendar")).DataValueField("Value").DataTextField("Text").DataColorField("Color");

)

Kendo UI Version is 2013.2.716

Thanks in advance.

Scheduler

answered on 06 Sep 2013

1 answer

365 views

Can't get incell editing to work in kendo grid

Hello,

I am trying to create a simple grid where I allow incell editing and each time a cell edits it sends that row back to the server with an ajax call, but I can't seem to get inline editing to work. here is what I have so far...

01.@using Kendo.Mvc.UI

02.@model IEnumerable<Forms.Models.Pending>

03.

04.

05.@{

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

07.}

08.

09.<h2>Pending</h2>

10.

11.@(Html.Kendo().Grid(Model)

12. .Name("Grid")

13. .Columns(columns =>

14. {

15. columns.Bound(p => p.Name).Groupable(false);

16. columns.Bound(p => p.Number);

18. columns.Bound(p => p.Status);

21. columns.Bound(p => p.Analyst);

22. })

23. .Editable(editable => editable.Mode(GridEditMode.InCell))

24. .Pageable()

25. .Sortable()

26. .DataSource(dataSource => dataSource

27. .Ajax()

28. .Model(model => model.Id(p => p.Id))

29. .Read("Index", "Home")

30. .Update("Row_Edit", "Home")

31. )

32.)

I am trying to use the .Update property to call the Row_Edit method in my home controller to handle each edit. Any ideas?

Grid

answered on 06 Sep 2013

3 answers

291 views

Issues when scrolling vertically in a view

Hi,

I'm experiencing a somewhat annoying problem when scrolling my views;

Quite regularly when I scroll, the view "locks up" and the entire view scrolls and shows the grey browser background. By this I mean the footer, the header and the view content. I've attached two images.

Here's my _Layout.cshtml:

<!DOCTYPE html>

<html>

<head>

<title></title>

<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.common.min.css")" rel="stylesheet"/>

<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.default.min.css")" rel="stylesheet"/>

<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.mobile.flat.min.css")" rel="stylesheet"/>

@*<script src="~/Scripts/jquery-1.8.2.min.js"></script>*@

<script src="@Url.Content("~/Scripts/kendo/2013.2.716/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.all.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.aspnetmvc.min.js")"></script>

</head>

<body>

@(Html.Kendo().MobileLayout()

.Name("frontlayout")

.Header(obj =>

Html.Kendo().MobileNavBar()

.Content(navbar =>

@<text>

@navbar.ViewTitle("")

</text>)

)

.Footer(obj =>

Html.Kendo().MobileTabStrip()

.Items(items =>

{

items.Add().Icon("action").Text("Logout").Url("index", "logout");

})

)

@(Html.Kendo().MobileLayout()

.Name("layout")

.Header(obj =>

Html.Kendo().MobileNavBar()

.Content(navbar =>

@<text>

@(Html.Kendo().MobileBackButton()

.Align(MobileButtonAlign.Left)

.HtmlAttributes(new { @class = "nav-button" })

.Url(Url.RouteUrl(new { controller = "home" }))

.Text("Back"))

@navbar.ViewTitle("")

</text>)

)

.Footer(obj =>

Html.Kendo().MobileTabStrip()

.Items(items =>

{

items.Add().Icon("action").Text("Logout").Url("index", "logout");

})

)

@(Html.Kendo().MobileApplication()

.ServerNavigation(false)

.Transition("fade")

.HideAddressBar(true)

.Skin("flat")

)

@RenderBody()

</body>

</html>

<style>

.statusicon {

float: right;

margin-right: 50px;

margin-top: 5px;

display: inline-block;

border-width: 1px;

border-radius: 35px;

border-style: solid;

border-color: black;

width: 15px;

height: 1em;

}

.sl-hidden {

display: none;

visibility: hidden;

}

</style>

And here's my view:

@model Stimline.Xplorer.Mobile.Models.UnitDetailsModel

@Scripts.Render("~/Scripts/jquery.signalR-1.1.2.js")

@Scripts.Render("~/signalr/hubs")

@Scripts.Render("~/Scripts/Stimline/connector.js")

@(Html.Kendo().MobileView()

.Name("unit-list")

.Layout("layout")

.Title("Units")

.Content(

@<text>

<span class="sl-hidden" id="signalRconveyanceId">@Model.ViewUnitContract.ConveyanceId</span>

@ListViewHelper(this)

</text>

)

@helper ListViewHelper(WebViewPage page)

{

@(Html.Kendo().MobileListView().Name("unitlist").Style("inset").Type("group")

.Items(root =>

{

root.Add().Text("Unit Details").Items(items =>

{

items.Add().Content(@<text>

<label>

Unit

<input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.Name" />

</label>

<li style="background-color: #@Model.StatusColor">

<label>

Status

<input type="text"disabled="disabled" value="@Model.StatusMessage" style="color: ghostwhite;"/>

</label>

</li>

</text>);

});

root.Add().Text("Detail information").Items(items =>

{

items.Add().Content(@<text>

<label>

Depth (m)

<input id ="signalRdepth" type="text" disabled="disabled" style="color: black" value="@Math.Round((decimal) Model.ViewUnitContract.CurrentRun.LatestWellLogEntry.Depth, 2)" />

</label>

<li data-icon="recents">

<label>

Speed (m/min)

<input id ="signalRspeed" type="text" disabled="disabled" style="color: black" value="@Math.Round((decimal) Model.ViewUnitContract.CurrentRun.LatestWellLogEntry.Speed, 2)"/>

</label>

</li>

<li data-icon="recents">

<label>

Diff Speed (m/min)

<input id ="signalRdiffSpeed" type="text" disabled="disabled" style="color: black" value="@Math.Round((decimal) Model.ViewUnitContract.CurrentRun.LatestWellLogEntry.DiffSpeed, 2)"/> 

</label>

</li>

<li data-icon="recents">

<label>

Weight (kg)

<input id ="signalRtension" type="text" disabled="disabled" style="color: black" value="@Math.Round((decimal) Model.ViewUnitContract.CurrentRun.LatestWellLogEntry.Tension, 2)"/>

</label>

</li>

<li data-icon="recents">

<label>

Diff Weight (kg)

<input id ="signalRdiffTension" type="text" disabled="disabled" style="color: black" value="@Math.Round((decimal) Model.ViewUnitContract.CurrentRun.LatestWellLogEntry.DiffTension, 2)"/> 

</label>

</li>

</text>);

});

root.Add().Text("Run Overview").Items(items =>

{

items.Add().Content(@<text>

<label>

Name

<input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.CurrentRun.Name" />

</label>

<li data-icon="recents">

<label>

Start time

<input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.CurrentRun.StartTime"/>

</label>

</li>

<li data-icon="recents">

<label>

End time

<input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.CurrentRun.EndTime"/>

</label>

</li>

</text>);

});

root.Add().Text("Project").Items(items =>

{

items.Add().Content(@<text>

<label>

Operation

<input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.CurrentRun.Operation.Description"/>

</label>

<li>

<label>

Name

<input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.CurrentRun.Operation.ProjectContract.Name"/>

</label>

</li>

</text>);

});

root.Add().Text("Well").Items(items =>

{

items.Add().Content(@<text>

<label>

Name

<input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.CurrentRun.Operation.WellContract.Name"/>

</label>

<li>

<label>

Location

<input type="text" disabled="disabled" style="color: black" value="@Model.ViewUnitContract.CurrentRun.Operation.WellContract.Location"/>

</label>

</li>

</text>);

});

})

)

}

Any idea what might be causing this?

Also, the "Back" button seems to be unstable. Sometimes it works, and sometimes nothing happens when I click it.

View

answered on 06 Sep 2013

1 answer

130 views

Using Kendo Grid to open MVC url in model window

I have a basic MVC Kendo Grid using am Action as a DataSource with Ajax enabled. I'd like to make the row clickable (no command buttons) to then open a hidden value which is a row specific MVC URL into a Jquery modal window. My fundamental goal is to have a grid holding X number of rows, each row with a potentially custom URL used for editing data. Can someone point me in the right direction? thanks.

Grid

answered on 05 Sep 2013

2 answers

316 views

Grid.One("DataBind does not work if mutiple grids in one view.

Hi,

I have a view with 4 kendo grids (Version 2013.1.514 MVC complete) doing different functions for the user and I have a central mechanism to handle all errors from all the grids of the application.

Grid Configuration

@(Html.Kendo().Grid<NewAlta.DataCapture.DataModel.ParameterOverride>()

.Name("test")

.Columns(columns =>

{

columns.Bound(p => p.CustomerId).Hidden();

columns.ForeignKey(p => p.EquipmentId, (System.Collections.IEnumerable)ViewData["equipments"], "EquipmentId", "Description").Title("Equipment").EditorTemplateName("CustomerEquipmentId");

columns.ForeignKey(p => p.ParameterId, (System.Collections.IEnumerable)ViewData["parameters"], "ParameterId", "ParameterName").Title("Parameter").EditorTemplateName("ParameterId");

columns.Bound(p => p.Limit1).Width(100);

columns.Bound(p => p.Limit2).Width(200);

columns.Bound(p => p.Limit3).Width(200);

columns.Bound(p => p.Limit4).Width(100);

columns.Command(p => p.Edit()).Width(80);

})

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

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

.AutoBind(false)

// .Navigatable(builder => builder.Enabled(true))

.Events(events =>

{

events.Change("test");

events.Edit("test");

events.Save("test");

})

.Selectable(builder => builder.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Events(e => e.Error("errorHandler"))

// omitted for brevity

Error Handler

<script type="text/javascript">

function errorHandler(e) {

gridErrorHandler(e, "#test");

}

//The below function lies in some js include files.

function gridErrorHandler(args, gridId) {

if (args.errors) {

var message = "We have encountered following errors : \n <ul>";

$.each(args.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

//alert(this);

if (this != "" && this != null)

message += "<li>" + this + "</li> \n ";

});

message += "</ul>";

}

});

var kgrid = $(gridId).data("kendoGrid");

kgrid.one('dataBinding', function (e) { //==> if we have only one grid in the view this works. for mutiple grids in view it does not trigger

e.preventDefault(); // cancel grid rebind if error occurs

});

showAlertWindow(message); //==> Some other function used to show kendo window with errror messages.

}

</script>

I could verify that the kgrid is object but databinding event is not triggered in a view with multiple grids.

Any help is highly appreciated!!!

Thanks,

Grid

answered on 05 Sep 2013

2 answers

1.6K+ views

Getting the row count in the ondatabound event

Hello,

I am wondering how I can get the total rowcount while inside the ondatabound event ?

Here is the background of why I am looking for this info. I am trying to code in a row cap lets say of 250 records which will be done in the controller. However I have a requirement that if the query was capped I need to offer the user an option to view all the rows. Basically implementing an alert to the user that they ran a query that returns a large set of data. At first they will only get the 250 rows but they are given an option to return all rows like a button or something which would rebind the grid and grab all rows from the controller.

I am sending a parameter in the Action call to bind that specifies whether or not to show all records, but I need to figure out how to get a row count so I know if the initial databind hit the cap.

Here is my code:

@(Html.Kendo().Grid(Model)

.Name("Grid")

.HtmlAttributes(new { style = "font-size:.85em;" })

.Columns(columns =>

{

columns.Bound(p => p.Id).Width(60);

columns.Bound(p => p.Title).Width(250);

columns.Bound(p => p.AssignedUser).Width(120);

})

.Pageable()

.Groupable()

.Sortable()

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.Contains("Contains")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to")))

)

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Get", "Grid", new {showAll = ViewBag.ShowAll}))

)

.Events(e => e.Change("onChanged").DataBound("onDataBound"))

)

Grid

answered on 05 Sep 2013

1 answer

401 views

one to many relationship

I have two model.
When I want to display a list of Product in grid, if PurchaseInvoiceDetail have records, Product grid show empty list,
and when i delete PurchaseInvoiceDetail records, Product's grid display list of product.
(I use Editing_Popup grid)

public class Product

{

[Key]

[ScaffoldColumn(false)]

public int ProductId { get; set; }

public string Name { get; set; }

public int Number { get; set; }

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

}

public class PurchaseInvoiceDetail

{

[Key]

public int PurchaseInvoiceDetailId { get; set; }

public int Number { get; set; }

public decimal PurchasePrice { get; set; }

//Navigation Properties

public int ProductId { get; set; }

public virtual Product Product { get; set; }

}

Grid

answered on 05 Sep 2013

2 answers

107 views

Chart date range display versus series display length

So if have a chart that represent data over a period of time like current fiscal quarter, that date would be from beginning of July through end of September. So the chart would draw a period of time ranging those 3 months. However, if the most recent data goes until current day minus one, the series drawn on the chart dips down to "0". What I am after with modifying some existing code is for when the series is drawn, it stops drawing the series (for a line chart) at today(-1) and does not make the series (line) go further where no data is yet represented since it is in the future. This said, I hope I was descriptive enough and am hoping some of you could post some examples I could reference that does draw a chart over coarse of time with the series not going the full span of time. Could not find any particular documentation on this. Appreciate the help. Thanks much.

Chart

answered on 05 Sep 2013

3 answers

70 views

How to use image and title for the app-icon when building mobile app with asp.net wrappers?

Previously, I added an icon and a title to my mobile app like this:

window.app = new kendo.mobile.Application(document.body, {

layout: "mainLayout",

skin: "flat",

hideAddressBar: true,

icon: "Images/FileName.png",

title: "App Name"

});

Whereas now, I can't seem to figure out how to do this. Any suggestions? :)

Application

answered on 05 Sep 2013

1 answer

78 views

Delete confirmation with TemplateId

Hi,
I am using the Asp.Net Mvc Wrapper for the scheduler control. I noticed that if I specify an editor template, the delete confirmation message does no longer appear:

To clarify, with this declaration the confirmation message does not appear:

.Editable(e => {
e.TemplateId("editEventTemplate");
e.Confirmation(true);
})

If I remove all the "Editable" configuration or if I leave just the Confirmation part, it works correctly:

.Editable(e => {
e.Confirmation(true);
})

What could be the reason for this strange behaviour?
Thanks,
Stefano Tassara

Scheduler

answered on 05 Sep 2013