Questions on UI for ASP.NET MVC Forum

2 answers

120 views

[Solved] MobileListView not call controller action

Hi, I am trying to implement a Mobile example using Kendo UI ASP.NET MVC using Visual Studio 2013 Express for Web.
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/mobilelistview/overview

I've done this:
- Reference to kendo dll: C:\MovilLab\Kendo2014.2.1008\Kendo.Mvc.dll (v 2014.2.1008.340)
- Add in the web.config of the view in Namespace tag: <add namespace="Kendo.Mvc.UI" />

Index.chtml

@using MovilLab;
@using MovilLab.Controllers;

<!DOCTYPE html>
<html>
<head>
<title></title>
@Html.Partial("~/Views/Comunes/HeaderCssJs.cshtml")
</head>
<body>
@(Html.Kendo().MobileView()
.Name("grouped")
.Title("ListView")
.Content(obj =>
Html.Kendo().MobileListView()
.Name("grouped-listview")
.TemplateId("template") //configure the item template
.FixedHeaders(true)

.DataSource(dataSource => dataSource
.Read(read => read.Action("Read", "Home"))
.Group(group => group.Add("Letter", typeof(string)))
)
)
)

@(Html.Kendo().MobileApplication()
.ServerNavigation(true)
)

</body>
</html>

HeaderCssJs.cshtml (is a PartialView)

<link href="~/Content/kendo/2014.2.1008/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.1008/kendo.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.1008/kendo.dataviz.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.1008/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.1008/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/kendo/2014.2.1008/angular.min.js"></script>
<script src="~/Scripts/kendo/2014.2.1008/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2014.2.1008/kendo.aspnetmvc.min.js"></script>

HomeController.cs (I have 2 actions):

public ActionResult Index()
{
return View();
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
var products = new[] {
new { Name = "Sashimi salad", Letter = "S" },
new { Name = "Chirashi sushi", Letter = "C" },
new { Name = "Seaweed salad", Letter = "S" },
new { Name = "Edamame", Letter = "E" },
new { Name = "Miso soup", Letter = "M" },
new { Name = "Maguro", Letter = "M" },
new { Name = "Shake", Letter = "S" },
new { Name = "Shiromi", Letter = "S" },
new { Name = "Tekka maki", Letter = "T" },
new { Name = "Hosomaki Mix", Letter = "H" },
new { Name = "California rolls", Letter = "C" },
new { Name = "Seattle rolls", Letter = "S" },
new { Name = "Spicy Tuna rolls", Letter = "S" },
new { Name = "Ebi rolls", Letter = "E" },
new { Name = "Chicken Teriyaki", Letter = "C" },
new { Name = "Salmon Teriyaki", Letter = "S" },
new { Name = "Gohan", Letter = "G" },
new { Name = "Tori Katsu", Letter = "T" },
new { Name = "Yaki Udon", Letter = "Y" }
};

//return the data as JSON
return Json(products.ToDataSourceResult(request));
}

I compile and run, but my problem is that the Browser appear in blank! And I put a BreakPoint in Read Action in HomeController and not enter there!
When I check using F12 in Chrome Response Tab appear an error in data-source attribute. Any help??:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="/Content/kendo/2014.2.1008/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo/2014.2.1008/kendo.default.min.css" rel="stylesheet" />
<link href="/Content/kendo/2014.2.1008/kendo.dataviz.min.css" rel="stylesheet" />
<link href="/Content/kendo/2014.2.1008/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="/Content/kendo/2014.2.1008/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/kendo/2014.2.1008/angular.min.js"></script>
<script src="/Scripts/kendo/2014.2.1008/kendo.all.min.js"></script>
<script src="/Scripts/kendo/2014.2.1008/kendo.aspnetmvc.min.js"></script>

</head>
<body>
<div data-reload="false" data-role="view" data-stretch="false" data-title="ListView" data-use-native-scrolling="false" data-zoom="false" id="grouped"><div data-role="content"><ul data-fixed-headers="true" data-role="listview" data-source="{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Home/Read"},"prefix":""},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"group":[{"field":"Letter","dir":"asc"}],"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{}}}" data-template="template" id="grouped-listview"></ul></div></div>

<script>
jQuery(function(){ new kendo.mobile.Application(jQuery(document.body), {"hideAddressBar":true,"updateDocumentTitle":true,"serverNavigation":true}); });
</script>


<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"50645a161c474181843daf7db7ac40ef"}
</script>
<script type="text/javascript" src="http://localhost:49837/5a71b082460e41bebf77ca5ae81229a0/browserLink" async="async"></script>

</body>
</html>

ListView (Mobile)

answered on 25 Nov 2014

1 answer

148 views

DropDown list get closed when attempt to scroll at first time

I am having an issue when working with DropDownList components. After binding the component if a vertical scrollball is needed (too many records at once), if you scroll down in attempt to select a value, the combo box get closed. At second attempt the combo works fine and you can scroll down with any problem.
Our project is running with kendo.web.js version “v2013.2.918”, due to internal project policies we are not allow to change neither .js version nor kendo.mvc dll.
Is there any workaround to this issue for this version?

<div class="controlBlock"> <label>*@Html.RawLocalized(WorkspaceMessageKeys.WorkspaceType).ToString()</label>
@(Html.Kendo().DropDownListFor(m => m.WorkSpaceTypeId)
.Name("WorkSpaceTypeId")
.HtmlAttributes(new { @class = "check" })
.DataTextField("WorkSpaceTypeDesc")
.DataValueField("WorkSpaceTypeId")
.OptionLabel(Html.RawLocalized(WorkspaceMessageKeys.Select).ToString())
.DataSource(source =>
{
source.Read(read =>
{
read.Action("FindWorkSpaceTypes", "WorkSpace")
.Type(HttpVerbs.Post);
})
.ServerFiltering(true);
})
)
<div>
@Html.ValidationMessageFor(m => m.WorkSpaceTypeId)
</div>
</div>

Thanks in advance.

DropDownList

answered on 25 Nov 2014

3 answers

520 views

TableHtmlAttributes Overwriting

The implementation of GridBuilder<T>.TableHtmlAttributes() suggests that you should be able to call it multiple times and have the results merged:

public GridBuilder<T> TableHtmlAttributes(IDictionary<string, object> attributes)

{

this.Component.TableHtmlAttributes.Clear();

Kendo.Mvc.Extensions.DictionaryExtensions.Merge(this.Component.TableHtmlAttributes, attributes);

return this;

}

However, when I try to call TableHtmlAttributes more than once on the same grid, the attributes added by the first call are removed by the second, even though the names do not conflict:

.TableHtmlAttributes(new KeyValuePair<string, object>("k-grid-tab-new-row", null).ToDictionary())

.TableHtmlAttributes(new KeyValuePair<string, object>("class", "custom-table-hover table table-bordered no-footer k-grid-single-line ").ToDictionary())

How can I prevent this behavior?

We have several attribute-based custom functions that we have built on top of Kendo grids, and I would like to create optional extension methods for the MVC builder to add these in the grid definition, like this:

public static GridBuilder<T> TabNewRow<T>(this GridBuilder<T> builder)where T : class

{

return builder.TableHtmlAttributes(new KeyValuePair<string, object>("k-grid-tab-new-row", null).ToDictionary());

}

The above approach is not possible if each call overwrites the previous ones.

Grid

answered on 25 Nov 2014

1 answer

397 views

[Solved] Kendo TreeView with initial item load its children menu from remote data

I have kendo treeview to show history list, so initially I have 1 item then load its children from remote data.
Here is my razor code :

01.@(Html.Kendo().TreeView()

02. .Name("tvHistory")

03. .Animation(animation => animation.Expand(open =>

04. {

05. open.Expand(ExpandDirection.Vertical);

06. open.Fade(FadeDirection.In);

07. }))

08. .Items(treeview => treeview.Add().Text("History").Id(Model.Id.ToString()))

09. .DataTextField("Description")

10. .AutoBind(false)

11. .DataSource(dataSource => dataSource.Read(read => read.Action("History", "Reservation")))

12.)

So technically when this "History" item being clicked it will call datasource read action and load its children items from controller. Yet its produce an error in console instead of calling the controller.

error image

Here is my controller code and the class that I return to client

01.[HttpGet]

02.public ActionResult History(int id)

03.{

04. IList<ReservationHistory> histories = _reservationService.GetHistoryFor(id).DataList;

05. IList<ReservationHistoryViewModel> viewModels = histories.ToModel<ReservationHistory, ReservationHistoryViewModel>();

06.

07. return Json(viewModels, JsonRequestBehavior.AllowGet);

08.}

09.

10.public class ReservationHistoryViewModel

11.{

12. public int Id { get; set; }

13. public int ReservationId { get; set; }

14. public string Description { get; set; }

15.}

any suggestion to fix this? Thanks

TreeView

answered on 25 Nov 2014

1 answer

1.3K+ views

[Solved] Custom export to excel button

I have a grid with a custom toolbar template defined, full of custom controls. I would like to add a button to export the grid contents to excel, however based on the example .ToolBar(tools => tools.Excel()) seems to just arbitrarily add a button to the toolbar. Is there a way to add my own button to my toolbar template and have it be recognized as the export to excel button?

Grid

answered on 24 Nov 2014

1 answer

116 views

No errors and not save enithing to database when authentication timeout

I am using latest trial Kendo.Mvc.dll
I have grid with popup editing.

.Sortable()
.Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.PopUp).TemplateName("Template").Window( w => w.Width(960)))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.NSTemplateID))
.Read(read => read.Action("Templates_Read", "TemplateManager").Data("additionalData"))
.Update(update => update.Action("Templates_Update", "TemplateManager"))
.Events(events => events.Error("error_handler").RequestStart("request_start"))
)

All working good but when authentication timeout - no errors.
How I can handle timeout and show warning to user?

Grid

answered on 24 Nov 2014

1 answer

916 views

Editor - Remove HTML Tags for Reporting

Hi there,

Having previously used the RadControls ASP.NET AJAX Editor, we had a requirement to store two copies of the entered information - one with HTML formatting and one without for reporting purposes.

I seem to recall this was quite trivial to implement at the time, as the Editor control provided a property which just had the plain text which we could store separately.

However, I can't seem to find an obvious way to achieve this with the Kendo Editor - unless I am missing something?

Thanks,

Paul

Editor

answered on 24 Nov 2014

4 answers

150 views

[Solved] TreeList feature absent

I cannot find the treelist feature in my trial version I downloaded.

V2014.2.1008

THanks.

TreeList

answered on 21 Nov 2014

4 answers

225 views

Using the MVC helpers and a javascript IIFE

As we all know using an IIFE (immediately-invoked function expression) is all the rage these days and a best practice for isolation of javascript code from the dreaded global scope.

We are creating a dashboard in which it is possible the same widget is placed on the dashboard twice by the user. So, the js has to be isolated to prevent collisions.

One issue we had was that when we provide a Data("FunctionName") function name to a grids datasource since the helper renders the script inline if the function was declared in the IIFE a js undefined error occurs. This issue would also occur with any event handlers that you set up with the grid.

One possible work around could be to have the IIFE (really now using the revealing module patter) given a name. But, still, this would mean putting the js into the razor view and somehow coming up with a unique name for that instance of the views function and prefixing the event handlers with it. But, I really don't like this because the js in the view isn't minified and cached.

Other than moving to client side configuration, basically nullifying the benefit of the MVC helpers, is there any possible way this could work? Perhaps the helper could somehow allow you to render the HTML separately from the js? Even that wouldn't be perfect since then all the js would have to be in the razor view.

Any other ideas or considerations.

General Discussions

answered on 20 Nov 2014

1 answer

243 views

Formatting Numbers

I have several text boxes that are numeric values and would like for them to always have 2 decimal places (values can vary from less than 1 to several thousand) when displayed. I have tried different masks but can not find one that will work for this. I am also open to using the Numeric text box but would not want the increment and decrement arrows to display as those are not useful for this application.

MaskedTextBox

answered on 20 Nov 2014