Questions on UI for ASP.NET MVC Forum

3 answers

408 views

[Solved] Chart - Utc DateTime values are not converted to local time by the browser

Hi,

In my chart, I have the chart axis labels and chart datapoint labels as DateTime objects. I've been browsing around for a solution to this for quite some time now but I was unable to find a solution to this problem. My DateTime values from the MVC application are of Kind Utc. I'd like the kendo UI chart to automatically convert it to the user's browser's timezone. It currently is showing the chart in UTC.

I tried this hoping it would work for Chart as well, but the rendering didn't display the updated Date values:
http://www.kendoui.com/code-library/mvc/grid/using-utc-time-on-both-client-and-server-sides.aspx

Other users have mentioned that their Chart automatically converted the DateTime but I'm not seeing that behavior:
http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/kendo-grid-automatically-converting-timezone.aspx
http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/chart/chart-is-converting-my-dates.aspx

I am using version '2013.1.514'

My definition of the chart is: (The bolded properties are DateTime objects of Kind Utc)
@(Html.Kendo().Chart(Model.DataPoints)
.Name("chart")
.Title("Unique User, Page View, and Session Counts")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.Series(series =>
{
series.Line(model => model.UniqueUsers).Name("Unique Users");
series.Line(model => model.Sessions).Name("Sessions");
series.Line(model => model.PageViews).Name("Page Views");
})
.CategoryAxis(axis => axis
.Date()
.BaseUnit(axisBaseUnit)
.Min(Model.View.Min)
.Max(Model.View.Max)
.Categories(model => model.DateTimeBucket)
.MajorGridLines(lines => lines.Visible(true))
.Labels(lbls => lbls
.DateFormats(df => df.Hours(Model.View.AxisDateLabelFormat))
.DateFormats(df => df.Days(Model.View.AxisDateLabelFormat))
.DateFormats(df => df.Weeks(Model.View.AxisDateLabelFormat))
.DateFormats(df => df.Months(Model.View.AxisDateLabelFormat))
.DateFormats(df => df.Years(Model.View.AxisDateLabelFormat)))
)
.ValueAxis(axis => axis
.Numeric().Labels(labels => labels.Format("{0:N0}"))
.Line(line => line.Visible(false))
.AxisCrossingValue(-10)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:N0}")
)
)

Thanks,

Chart

answered on 01 Aug 2013

1 answer

269 views

Scheduler "Events" and the ISchedulerEvent interface

After beating my head against a wall, I have found a documentation issue with the new scheduler.

Without knowing what the RecurrenceRule field was for, I was populating this with display information for the user to view (through a template).
The Scheduler would render properly, however no "events" would display. There is no documentation for the ISchedulerEvent interface, only a snippet on the "Getting Started" page, which doesn't describe what each field does, or expects.

I created a new solution, and added the scheduler, created an event and found that the RecurrenceRule is not a user definable field, and has query-like syntax:

RecurrenceRule:FREQ=MONTHLY;BYMONTHDAY=30

Although the product is still in beta, it still needs to be documented, also will this ever be settable/ definable by the user?

also- why not throw an error if the field is not populated correctly/ does not compile? Rather than not showing the events altogether.

Scheduler

answered on 01 Aug 2013

2 answers

274 views

[Solved] Turn off lazy loading?

Hi,
I seem to be having an issue with client side events and lazy loading.
I have a tv on my layout view as follows:

@Html.Kendo().TreeView().Name("MainMenu").DataSource(dataSource => dataSource
.Read(read => read.Action("Index", "MainMenu"))).DataTextField("MenuText").DataUrlField("Url")

I have code on the server that correctly returns the parts of the tv as necessary.
All is well. My tree displays. When I click on a parent node a server call is made and the children are show.
Great.

Now the trouble.
I add the following javascript and when I click on a node I get the alert just fine. However, once, I click ok, I get an error in kendo.all.min.js. Attached is a screenshot of the error.

Thanks ... Ed

function _LayoutOnLoad()

{

$(function ()

{

$("#MainMenu").kendoTreeView({

select: OnMainMenuSelect

})

});

}

function OnMainMenuSelect(e)

{

alert("Selecting: " + e.node.textContent);

}

TreeView

answered on 01 Aug 2013

1 answer

303 views

How to display details of a navigation property in a grid?

I have an OData datasource of UserGroups, called with /api/UserGroups?$expand=USERS. In Fiddler, I see 1..* users in each user group.

I would like to know how to display this in a data grid as a part of a details view per group. I would like to accomplish this with data set, rather than making a secondary call to something like /api/Users?$filter.... as the data is all there in the primary data set.

Here is my main data set - I was initially working with the detailInit() to make a secondary call, but as I mentioned, this isn't necessary:

$(function () {

var dataSource = new kendo.data.HierarchicalDataSource({

type: "odata",

transport: {

read: {

// See http://www.odata.org/documentation/odata-v2-documentation/uri-conventions/ for OData URI conventions

// OData: ~/api/Users?$inlinecount=allpages&top=2

// OData: ~/api/Users?$inlinecount=allpages - includes odata.count

// OData: inline filtering: ~/api/Users?$filter=USERNAME eq 'asgro'

// to include hierarchical data, use the OData /api/UserGroups?$expand=USER

// To reduce the payload sice, the query ~/api/UserGroups will only include the USERGROUP entities, and not any navigation property content

url: "/api/UserGroups?$expand=USERS",

dataType: "json"                                // the default result type is JSONP, but WebAPI does not support JSONP

},

parameterMap: function (options, type) {

// this is optional - if we need to remove any parameters (due to partial OData support in WebAPI

var parameterMap = kendo.data.transports.odata.parameterMap(options);

//delete parameterMap.$inlinecount; // remove inlinecount parameter

//delete parameterMap.$format; // remove format parameter

return parameterMap;

}

},

schema: {

data: function (data) {

return data.value;

}

,

total: function (data) {

console.log("count: " + data["odata.count"]);

return data["odata.count"];

},

model: {

fields: {

ID: { type: "string" },

NETWORKID: { type: "string" },

GROUPNAME: { type: "string" },

DESCRIPTION: { type: "string" },

DATECREATED: { type: "date" },

DATEMODIFIED: { type: "date" },

//ROLESSTRING: { type: "string" },

SUBSCRIPTIONSTRING: { type: "string" }

}

},

pageSize: 10,

serverPaging: true,

serverFiltering: true,

serverSorting: true,

detailTemplate: kendo.template($("#template").html()),

detailInit: function(e) {

console.log('detailInit');

// detailInit,

},

dataBound: function () {

this.expandRow(this.tbody.find("tr.k-master-row").first());

}

});

The template is as follows:

<body>

<div>

User Groups:

<div id="grid"></div>

<script type="text/x-kendo-template" id="template">

<div class="tabstrip">

<ul>

<li class="k-state-active">

Users

</li>

</ul>

<div>

<div class='user-details'>

<ul>

<li><label>User Name:</label>#= USERS.USERNAME #</li>

<li><label>First Name:</label>#= USERS.FIRSTNAME #</li>

<li><label>Last Name:</label>#= USERS.LASTNAME #</li>

</ul>

</div>

</script>

</div>

</body>

I used USERS.USERNAME as when $expand=USERS, the USERS collection is included.

Thanks.

Grid

answered on 01 Aug 2013

2 answers

336 views

[Solved] No values returned from MultiSelectFor in Popup on Grid

Hi there,

I have a problem with a multiselectfor in my test application.

I am attempting to return a list of roles for a user into a multiselectfor in a template.

In the template I have the following:

@(Html.Kendo().MultiSelectFor(model=>model.RoleList)

.Name("RoleList")

.HtmlAttributes(new { style = "width: 310px;" })

.Placeholder("Select roles...")

.DataTextField("RoleName")

.DataValueField("RoleId")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetClientRolesList", "Client", new { id = ViewContext.RouteData.Values["id"] });

read.Type(HttpVerbs.Post);

})

.ServerFiltering(false);

})

)

This shows the list of Roles available in the multiselect, but it doesn't show any values in the box. I am able to click on the box and select some items from the list and they are then shown in the box. When I post back, those items do not arrive.

@model is ClientUserViewModel

So model.RoleList returns a List of RoleViewModels

[DisplayName("Roles")]

public List<RoleViewModel> RoleList

{

get;

set;

}

RoleViewModel looks like this:

namespace MyApp.Models

{

public class RoleViewModel

{

public int RoleId

{

get;

set;

}

public string RoleName

{

get;

set;

}

The Client Roles List in the Client Controller looks like this:

public ActionResult GetClientRolesList(int id, [DataSourceRequest] DataSourceRequest request)

{

using (var db = new MyAppEntities())

{

var rolesList = (from role in db.webpages_Roles

select new RoleViewModel()

{

RoleId = role.RoleId,

RoleName = role.RoleName

});

return Json(rolesList.ToList());

}

And finally, the Update statement it calls is this:

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult ClientUser_Update(int id, [DataSourceRequest] DataSourceRequest request, ClientUserViewModel clientUser)

{

if (clientUser != null && ModelState.IsValid)

{

try

{

ClientUserRepository.Update(id,clientUser);

}

catch (Exception ex)

{

ModelState.AddModelError("ClientName", ex.Message);

}

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

}

When this method is called, the clientUser.RolesList has the correct number of items, but the items themselves are essentially empty. That means that the RoleId is 0 and the RoleName is null.

The grid statement on the main page is here:

@(Html.Kendo().Grid<MyApp.Models.ClientUserViewModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(u => u.UserId).Hidden();

columns.Bound(u => u.FirstName).Width(100);

columns.Bound(u => u.LastName).Width(100);

columns.Bound(u => u.UserName).Width(100);

columns.Bound(u => u.RoleList).Hidden();

columns.Bound(u => u.zTimestamp).Hidden();

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

})

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

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ClientUser"))

.Pageable()

.Filterable()

.Sortable()

.Scrollable()

.HtmlAttributes(new { style = "height:580px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Batch(false)

.Events(events => events.Error("error_handler"))

.Model(model => model.Id(u => u.UserId))

.Create(update => update.Action("ClientUser_Create", "Client", new { id = ViewContext.RouteData.Values["id"] }))

.Read(read => read.Action("ClientUser_Read", "Client", new { id = ViewContext.RouteData.Values["id"] }))

.Update(update => update.Action("ClientUser_Update", "Client", new { id = ViewContext.RouteData.Values["id"] }))

.Destroy(update => update.Action("ClientUser_Destroy", "Client", new { id = ViewContext.RouteData.Values["id"] }))

)

The "id" referred to here is the specific customer's id (real world client, not IT client.) and it's essentially supposed to show a list of users for that client and the roles that they are associated with. I am supposed to be able to add and remove roles for a user via the multiselect.

Any ideas what I'm doing wrong?

Regards,
Tony

MultiSelect

answered on 31 Jul 2013

3 answers

892 views

unobtrusive validation

HI,
I've write this
but for kendo control doesn't wok why?

@(Html.Kendo().NumericTextBoxFor(m => m.size)
                              .Min(1)
                              .Decimals(0)
                              .Format("{0:D}")
                              .Spinners(false)
                )
                @Html.ValidationMessageFor(m => m.size)

thanks

NumericTextBox

answered on 31 Jul 2013

2 answers

390 views

Autocomplete - Model not updated

Hello
Comunity:

It’s the
first time that I use the “AutoCompleteFor” of Kendo MVC Razor.

The
“AutoCompleteFor” works correctly but when I call to Create Function, the Model
not recognized the selected value in the AutoComplete.

Someone can
help me?

AutoComplete:

@(Html.Kendo().AutoCompleteFor(model => model.CountryCode)

.Name("acCountry")

.DataTextField("ISO")

.DataSource(ds =>

{

ds.Read(read =>

{

read.Action("GetCountriesForAutoComplete", "Country")

.Data("onAdditionalData");

})

.ServerFiltering(true);

})

)

<script>

$.validator.unobtrusive.parse("#CreateRegionForm");

//$('#CreateRegionForm').kendoValidator();

function onAdditionalData() {

return {

text: $("#acCountry").val()

};

}

</script>

Autocomplete Read:

public ActionResult GetCountriesForAutoComplete(string text)

{

text = text.ToUpper();

var result = FwdManager.Country.GetAll()

.Where(p => p.ISO.Contains(text) || p.NameEsp.Contains(text))

.Select(s => new DtoCountry()

{

Id = s.Id,

ISO = s.ISO,

NameEsp = s.NameEsp,

NameEng = s.NameEng,

Observations = s.Observations,

PAIS_UNION_EUROPEA = s.PAIS_UNION_EUROPEA,

Active = s.Active

});

return Json(result, JsonRequestBehavior.AllowGet);

}

Create Method:

[HttpPost]

public JsonResult Create(Region region)

{//region.CountryCode is null!!!!

JsonResult jsonOutput = null;

if (ModelState.IsValid)

{

try

{

ConvertToUpperCase(region.GetType(), region);

CheckKeyFields(region);

FwdManager.Region.Insert(region);

FwdManager.Commit();

jsonOutput = Json(new { success = true });

}

catch (Exception ex)

{

jsonOutput = ErrorJson(ex);

}

else

{

jsonOutput = ErrorJson(ModelState);

}

return jsonOutput;

}

AutoComplete

answered on 31 Jul 2013

1 answer

92 views

Sorting on dynamic columns no longer works

All of the columns in my grid are dynamic and are referenced by an enumerator, in 514 this was working and posting the value "sort: Fields[3].value" now it just passes undefined.

I'm guessing this is caused by the "patch" for the jquery stuff.

I have the latest version of 2.716

If this isn't going to be fixed then how should dynamic fields be implemented in MVC4?

Grid

answered on 31 Jul 2013

8 answers

318 views

Populate Grid

Hi, I nedd some help.
I want to populate a Grid in MVC but I can't
I have the next code in view Index

<%: Html.Kendo().Grid<KronosWorkV2.Models.Employee>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.id);
columns.Bound(p => p.Name).Width(140);
})
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Editing_Read", "SupEmps"))
) %>

then I have the nex code in ActionResult:

public ActionResult Editing_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(db.Employees.ToDataSourceResult(request));
}

when I debug in the action I see that the object db.Employees has items(rows) but when return to Index.aspx the Grid is empty.

where I am rong, some body please can help me.
Thanks beforehand for your help.

Grid

answered on 31 Jul 2013

1 answer

134 views

Adding new row to grid above the selected row

Hi,

I need change functionality for standard adding a new row (toolbar command Create() ) so that it would add the row straight above the selected row, for user's convenience - to allow the user to fill new row data based on the data in the selected row.
See the attached picture

Thank you in advance

Shabtai

Grid

answered on 31 Jul 2013