Questions on UI for ASP.NET MVC Forum

6 answers

432 views

Hi

i'm using a Kendo UI Grid (Version: 2014.2.716.545) within a ASP .NET MVC 5 Project to bind XML Data from a local hosted REST Webservice. I would like to "activate" ServerPaging. Here is my Datasource Definition

var dataSource = new kendo.data.DataSource({

serverPaging: true,

serverFiltering: true,

serverSorting: true,

transport: {

read: function (options) {

$.ajax({

url: ".../api/{Controller}/GetData",

type: "POST",

success: function (data) {

options.success(data);

},

error: function (errorThrown) {

alert(errorThrown);

}

});

},

create: function (options) {

SaveData(options);

},

update: function (options) {

SaveData(options);

},

schema: {

type: "xml",

data: "/ArrayOfType/Type",

model: {

id: "Type_ID",

fields: {

Type_ID: {

field: "Type_ID/text()", type: "number",

validation: { required: true }

},

FieldA: {

field: "FieldA/text()", type: "string",

validation: {

required: true,

min: 1

}

},

FieldB: {

field: "FieldB/text()", type: "string",

}

},

pageSize: 50

});

and my Controller Method:

[System.Web.Http.ActionName("GetData")]

[System.Web.Http.HttpPost]

public ResponseMessageResult GetData([DataSourceRequest] DataSourceRequest request)

{

try

{

var list = _db.Load().ToDataSourceResult(request);

var resp = ResponseMessage(new HttpResponseMessage(HttpStatusCode.OK)

{

Content = new ObjectContent<DataSourceRequest>(list, new System.Net.Http.Formatting.XmlMediaTypeFormatter

{

UseXmlSerializer = true

})

});

resp.Response.Headers.Add("Access-Control-Allow-Origin", "*");

return resp;

}

catch (Exception ex)

{

Logger.LogError(ex);

throw;

}

The client calls the Controller Method correctly, but the request Parameter is always NULL. Is something wrong with my Client Definition ?

Grid

answered on 20 Oct 2014

1 answer

588 views

Checkbox Column problem

Hello, I'm having trouble setting up checkbox column in my grid. I am using inline edit mode and my checkbox column is se up like this

@(Html.Kendo().Grid<URBIS.ViewModels.PropisiViewModel>()

.Name("grid")

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

.Columns(columns =>

{

columns.Bound(p => p.GrupePropisa).ClientTemplate("#=GrupePropisa.Naziv#").EditorTemplateName("GrupePropisa").Width(220);

columns.Bound(p => p.Naziv).Width(220);

columns.Bound(p => p.SluzbeniList).Width(220);

//columns.Bound(p => p.Aktivan).Width(120);

columns.Bound(p => p.Aktivan)

.Title("Aktivan")

.ClientTemplate("<input type='checkbox' #= Aktivan ? checked='checked': '' # class='chkbx' />")

.HtmlAttributes(new {style = "text-align: center"})

.Width(50);

})

and script handling check events is

$(function () {

$('#grid').on('click', '.chkbx', function () {

var checked = $(this).is(':checked');

var grid = $('#grid').data().kendoGrid;

var dataItem = grid.dataItem($(this).closest('tr'));

dataItem.set('Aktivan', checked);

});

The problem I'm experiencing is very weird. Binding to bool field from database works fine, editing also but when inserting, checkbox always passes as false. Very weird. Also, I would like the checkbox to be disabled if the row is in read only mode and to be editable if the row is in edit/insert mode. Any help? Lost few hours on this and this is too much :)

Grid

answered on 20 Oct 2014

2 answers

402 views

UI for ASP.NET MVC with AngularJS

In the past, with the AngularJS.KendoUI nuget package I was able to mix both AngularJS style kendo instantiation with traditional Html.Kendo() instantiation.

With the latest version Kendo UI v2014.2.716 the bridge is now integrated.

Today I created a brand new project added Kendo UI v2014.2.716 . Added <html ng-app="marketing">
with     <script>
        angular.module('marketing', []);
    </script>

and noticed that the traditional instantiation is broken.
"TypeError: m is not a function"

Attached are images with ng-app and without ng-app behavior.

General Discussions

answered on 19 Oct 2014

2 answers

630 views

Kendo Pie Chart Sum, Count, Avg

I have a problem with Kendo Pie chart about "Aggregate" functions(count, sum, average).Everyting works with Bar or Column chart but when i try to show pie chart i can't use count, sum, average functions of Kendo Pie Chart's.

I can show my values invidually but i can't group my values(like euro, dolar, lira)How can i group my values and show them with Pie chart?

Here is my model:

public decimal MoneyValue{ get; set; }

public string MoneyName{ get; set; }

My values are coming like that with Pie Chart.:
Euro - 10
Dolar- 100
Dolar - 50
Euro -15
Dolar - 50
Lira - 45

I need to show values like that:
Euro - Count: 2 Total:25 Avg: 12,5
Dolar - Count: 3 Total: 200 Avg: 66,6
Lira Count: 1 Total: 200 Avg: 200

View Code

View Code@(Html.Kendo().Chart(Model)
.Name("chart")
.Title(title => title
.Text(@ViewBag.a)
.Position(ChartTitlePosition.Top))
.Legend(legend => legend
.Visible(false)
.Position(ChartLegendPosition.Top))
.Series(series =>
{
series.Pie(model => model.MoneyValue, categoryExpression: model => model.MoneyName);
// .Aggregate(ChartSeriesAggregate.Count)
//.Labels(labels => labels.Visible(true).Position(ChartBarLabelsPosition.Center));

//here i get the error. It shows there is no .Aggregate function so i can't group my values.

})

.Theme("metro")
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= category #: #= value #"))
.Events(ev => ev.DataBound("onDB"))

)

Kendo Count - Sum - Average functions:(i've no problem with them, they work correctly.)<div class="configuration-horizontal">

<div class="config-section">
<center>
<span class="configHead">Grafik </span>
</center>
<ul class="options">

<td>
<input id="aggregateSum" name="aggregate" type="radio" value="sum" autocomplete="off" />

Sum

</td>
<td>
<input id="aggregateAvg" name="aggregate" type="radio" value="avg"
autocomplete="off" />

Avg

</td>
<td>
<input id="aggregateCount" name="aggregate" type="radio" value="count" checked="checked" autocomplete="off" />

Count

</td>
</ul>

</div>
</div>
<script>
$(".configuration-horizontal").bind("change", refresh);

function refresh() {
var chart = $("#chart").data("kendoChart"),
series = chart.options.series,
categoryAxis = chart.options.categoryAxis,
baseUnitInputs = $("input:radio[name=baseUnit]"),
aggregateInputs = $("input:radio[name=aggregate]");

for (var i = 0, length = series.length; i < length; i++) {
series[i].aggregate = aggregateInputs.filter(":checked").val();
}

categoryAxis.baseUnit = baseUnitInputs.filter(":checked").val();

chart.refresh();
}
</script>

Chart

answered on 17 Oct 2014

1 answer

127 views

Forms / Overview

The sample source code does not show, What is the Kendo Mobile Type we need to use to create such a form?

http://demos.telerik.com/aspnet-mvc/mobile-forms/index

View

answered on 17 Oct 2014

1 answer

133 views

Server side grouping by a composite class

Hi,

I'm trying to use KendoGrid server-side logic for grouping grid data with the help of ToDataSourceResult extension.

public class User
{
        public int UserID;
        public string UserName;
        public int UserType;
        public ComplexID complexID;
}

public class ComplexID
{
       public string cID;
       public string Description;
}

I have a list of users:

var userLst = new List<User>{usr1, usr2, usr3};

I'm trying to group the users to be displayed in the KendoGrid:

var kendoData = userLst.AsQueryable().ToDataSourceResult(kendoRequest);

If I group by UserType, everything works fine. My question is how can I group the data by complexID.cID? What should I specify in kendoRequest?

Thank you.

Grid

answered on 17 Oct 2014

1 answer

176 views

Multiple menus...one showing only top level items, other menu showing children

Hi,

We have a specific situation which is not so uncommon. We are using Kendo controls for ASP.NET MVC and binding them to ASP.NET Sitemap which works ok.

We would need to setup on the top of the page Kendo Menu (or any other Kendo control?) which will show only the top level menu options without their children. Besides that, on the left side there should be another menu which does not show the top level items, but only their children.

For example:
- Users
- Create
- Manage
- List
- Payments
- Create
- Due
- List

Top menu should show only Users and Payments items. Left menu should show depending on which page you are either children of Users or children of Payments.

How can this be achieved?

Thank you!

Menu

answered on 16 Oct 2014

1 answer

110 views

Problem with editing

I'm trying to perform editing like in the example :
http://demos.telerik.com/aspnet-mvc/mobile-listview/editing

I have an error on .Events(events => events.Init("listViewInit"))

Error 2 'Kendo.Mvc.UI.Fluent.MobileListViewEventBuilder' does not contain a definition for 'Init' and no extension method 'Init' accepting a first argument of type 'Kendo.Mvc.UI.Fluent.MobileListViewEventBuilder' could be found (are you missing a using directive or an assembly

Thank you

ListView (Mobile)

answered on 16 Oct 2014

1 answer

971 views

Copy and paste rows in kendo ui asp.net mvc grid

Hi,

Do you have sample code for selecting, then copying and pasting the selected rows to other rows in the kendo ui asp.net mvc grid

Thanks,
Annie

Grid

answered on 14 Oct 2014

2 answers

221 views

Kendo Ajax Grid with Conditional Ajax ComboBox Column

I have the following Grid:

@(Html.Kendo()

.Grid<IncidentBreakdownViewModel>()

.Name("Grid")

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(true)

.Read(x => x.Route("PostReadJson", new { incidentId = Model.IncidentId }))

.Create(x => x.Route("PostCreateJson", new { incidentId = Model.IncidentId }))

.Destroy(x => x.Route("PostDeleteJson", new { incidentId = Model.IncidentId }))

.Update(x => x.Route("PostUpdateJson", new { incidentId = Model.IncidentId }))

.Model(model => model.Id(x => x.IncidentBreakdownId)))

.Columns(columns =>

{

columns

.ForeignKey<int

?>(

                         x => x.IncidentBreakdownTypeId, 

                         (SelectList)ViewBag.IncidentBreakdownTypes)

.Width(50);

columns.Bound(x => x.PortfolioId).Width(150);

columns.Bound(x => x.Currency).Width(100);

columns.Bound(x => x.ErrorAmount).Width(50);

columns

.Bound(x => x.PaymentRequired)

.ClientTemplate("#= PaymentRequired ? 'Yes' : 'No' #")

.Width(50);

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

})

.ToolBar(toolbar => toolbar.Create().Text("Add new breakdown"))

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

.Resizable(resize => resize.Columns(true))

.Reorderable(reorder => reorder.Columns(true))

.Sortable(x => x.SortMode(GridSortMode.MultipleColumn))

.Navigatable())

The first column (IncidentBreakdownTypeId) is a drop down with two columns. I want the second column (PortfolioId) to be a different drop down depending on the selected value of the first column (IncidentBreakdownTypeId) and I want to use an AJAX Kendo ComboBoxFor for the second column like so:

<script>

function onGetClientData() {

return {

text: $("#PortfolioId").data("kendoComboBox").text()

};

}

</script>

@(Html.Kendo()

.ComboBoxFor(x => x)

.Name("PortfolioId")

.DataTextField("Text")

.DataValueField("Value")