Questions on UI for ASP.NET MVC Forum

1 answer

786 views

Grid without Ajax

I'm trying to learn both Kendo and MVC at the same time, so bear with me. In the code below, I know I could populate my grid via Ajax and frankly I'd be more comfortable with that, but I'm trying to acquaint myself with the basics, so I'd like to avoid it for now.

I would like the contents of my Grid to be restricted by both a DropDownList and a Search box. The issue is that when you turn on Pageable for a Kendo Grid, it wants to GET the next page. But since my DropDownList and my Search box will not be part of the GET params, they won't be available to the Action. So the question:

Is it hopelessly naive to use Grid without Ajax or is there a straightforward way to either include my additional parameters or make the pagination use the form POST?

@using (Html.BeginForm(null, null, FormMethod.Post, new { id="searchForm" })) {

<script>

function submit() { $("#searchForm").submit() }

</script>

@(Html.Kendo().DropDownListFor(m => m.ListID).DataValueField("ID").DataTextField("Name")

.BindTo(Model.Lists).Events(e => e.Change("submit")))

@Html.Kendo().AutoCompleteFor(m => m.SearchText).Placeholder("Search")

<input type="submit" value="Search" />

@Html.Kendo().Grid(Model.Albums).Name("AlbumsGrid").BindTo(Model.Albums).Pageable().Sortable()

}

Grid

answered on 06 Sep 2013

1 answer

201 views

Kendo Panel Bar group header selection

We do not want to highlight the group header on collapse expand. Basically it should not have k-state-focused and k-state-highlight applied to it when I expand or collapse.

Can you please advise a trick?

PanelBar

answered on 06 Sep 2013

0 answers

130 views

Remote Grouping In Kendo Grid when using ASP.NET MVC

On our current project we have implemented server-side grouping, however, I can find no documentation on how to manually populate the aggregated totals of the groupings into the DataSourceResult object that the Kendo Grid expects from the server. Newing up a List<AggregateResult> doesn't seem to work as many of the properties of the AggregateResult object are read only. We can't use the ToDataSourceResult() extension method because we're also paging on the server, so we're only pulling back subsets of the total dataset at whatever page size the user has selected.

Is there some documentation somewhere that I'm just not seeing? If so, can you point it out to me, and if not, what guidance can you offer in populating those aggregated totals?

Grid

asked on 06 Sep 2013

3 answers

378 views

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

424 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

314 views

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

153 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

336 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

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

418 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]