Questions on UI for ASP.NET MVC Forum

2 answers

152 views

We use the Kendo Grid Column Menu but would like the “Columns” submenu to not disappear when the mouse leaves the submenu. So we want the submenu to be “sticky.” Is there a way to do that? Also, what event triggers the submenu to disappears and where is it done? Please see image below.

Grid

answered on 12 Feb 2013

1 answer

104 views

Newbie question - OpenAccess ORM and ODATA3

Hello,
I apologize now for probably obvious question, I just bought your products and today began my first application.

Following several tutorials I started the first project to try to use Kendo Grid and openaccess ORM.

Here's what I do:

- Create a new project c # kendo ui for MVC
- I choose to use OpenAccess domain model orm
- I create a new domain class test with some property
- Run "update db from model" and configure the connection

So far so good, the database is created and works.

Then I click "Add OpenAccess Service" and select "WCF .. - Odatav3" and finish.
It creates the file "EntitiesModelService.svc."

The problem is that if I click "View in browser" on that file to see if it works (as in yours tutorial) I always get an error

Server Error in '/' Application ...
The resource can not be found ...
HTTP404
RequestedUrl: / EntitiesModelService.svc "

What can I try? Please help me.
Thanks in advance,
Luca

General Discussions

answered on 12 Feb 2013

1 answer

393 views

GPL vs commercial version

I am trying to learn the kendoUI. MVC 4 Razor.

Inorder to use it, can I learn via the GPL version and what do I get for paying the $1,000 that's different, minus the viz controls. I'm only interested in the grid, tree view, and date picker at the moment.

I hear that the GPL is jquery only and the commercial is c#. Is this tru? Can someone please explain the difference to me if I only care about those controls at the moment? Obviously after i'm comfortable I could buy the full version to get all the tools.

I'm confused, because the bloggers seem to contradict each other when reading multiple blogs.

Thanks,
Nick

PS. This is fully personal use. No public facing web site, just educational.

General Discussions

answered on 12 Feb 2013

14 answers

996 views

Kendo.DropDownList in Kendo.Window not working

Is this a bug or am I doing something stupid?

The code for the dropdownlist works independently, just not inside a Kendo Window?

If you change the window DIV name or the name in the javascript so it isn't generate, the drop-down-list works just fine?

I've tried to narrow out down to the least possible code that demonstrates the problem:

<!DOCTYPE html>
<html>
<head>
<script src="http://localhost:59181/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<link href="http://localhost:59181/Content/kendo/2012.2.913/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://localhost:59181/Content/kendo/2012.2.913/kendo.blueopal.min.css" rel="stylesheet" type="text/css" />
<script src="http://localhost:59181/Scripts/kendo/2012.2.913/jquery.min.js"></script>
<script src="http://localhost:59181/Scripts/kendo/2012.2.913/kendo.all.min.js"></script>
<script src="http://localhost:59181/Scripts/kendo/2012.2.913/kendo.aspnetmvc.min.js"></script>
</head>
<body>
<div id="XXXwindow" class="k-content" style="overflow: scroll;" >
x<input data-val="true" data-val-number="" data-val-required="" id="Group2" name="Group2" type="text" value="9" />x
<script>
jQuery(function(){jQuery("#Group2").kendoDropDownList({"dataSource":[
{"ID":9,"Description":"[All membership types]","Value":"\/Date(254966400000)\/"},
{"ID":10,"Description":"Monthly Fees","Value":"\/Date(254966400000)\/"},
{"ID":11,"Description":"Cards","Value":"\/Date(254966400000)\/"}],
"dataTextField":"Description","dataValueField":"ID"});});
</script>
</div>
<script type="text/javascript"> $("#XXXwindow").kendoWindow({ width: 500, height: 500 }); </script>
</body>
</html>

DropDownList

answered on 12 Feb 2013

1 answer

293 views

Filter template over Kendo helper

Hello.
Have anybody ever tried to use Kendo helpers for creating Filter Templates?

<div>

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

.Name("Grid")

.Columns(columns =>

{

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

columns.Bound(p => p.UserName);

columns.Bound(p => p.FullName);

columns.Bound(p => p.Organization).ClientTemplate(

"# if (data.Organization != null) { #" +

"#= data.Organization.Name #" +

"# } else { #" +

"#: '<N/A>' #" +

"# } #"

)

.Filterable(filterable => filterable.UI("orgFilterKendo"));

columns.Bound(p => p.Email);

columns.Bound(p => p.PhoneNumber);

columns.Bound(p => p.PostName);

})

.Filterable(filterable => filterable

.Extra(true)

)

.EnableCustomBinding(true)

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => {

model.Id(p => p.Id);

model.Field(p => p.Id).Editable(false);

})

.Read("GetGridData", "User")

)

</div>

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

@Html.Kendo().DropDownListFor(

@(Html.Kendo().DropDownList()

.Name("Organization")

.DataValueField("Id")

.DataTextField("Name")

.OptionLabel("Не задано")

.BindTo((System.Collections.IEnumerable)ViewData["UserOrganizations"])

.ToClientTemplate()

)

</script>

The above example doesn't work :-(
I don't want to use JavaScript like in the example. The solution described below works fine, but I have to bind data again and I can't bind it to the ViewData directly.

<script type="text/javascript">

function orgFilterKendo(element) {

element.kendoDropDownList({

dataTextField: "Name",

dataValueField: "Id",

optionLabel: "--Select Value--",

dataSource: {

transport: {

read: "@Url.Action("FilterMenu_Organizations")"

}

});

}

</script>

Grid

answered on 12 Feb 2013

3 answers

198 views

ClientDetailTemplateId - Have Read, Insert working, but Update, Delete don't pass Ids

I have a parent/child grid which correctly displays the child table and is working for both Read & Create. However, Update and Delete don't pass the Id in the URL as I can see from the console.

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(g => g.id);

model.Field(g => g.id).Editable(false);

model.Field(g => g.user_id);

model.Field(g => g.group_id);

})

.Read(read => read.Url("http://localhost:808/api/UserGroup/" + "#=id#").Type(HttpVerbs.Get))

.Create(c => c.Url("http://localhost:808/api/UserGroup").Type(HttpVerbs.Post))

.Update(update => update.Url("http://localhost:808/api/UserGroup").Type(HttpVerbs.Put))

.Destroy(destroy => destroy.Url("http://localhost:808/api/UserGroup").Type(HttpVerbs.Delete))

)

This is what I see in the console:

OPTIONS http://localhost:808/api/UserGroup 405 (Method Not Allowed) jquery.min.js:2

DELETE http://localhost:808/api/UserGroup 404 (Not Found) UserGroup:1

XHR finished loading: "http://localhost:808/api/UserGroup".

The DELETE should be passing the Id of the row.

Grid

answered on 11 Feb 2013

9 answers

591 views

If-statement on command.Destroy()

Hi,
I need to check the current item to display Destroy button or not. But I can't figure out how to write the if-statement.
Currently it looks like:

columns.Command(commands =>

{

commands.Edit();

@<text>

@if (!item.IsStartPage)

{

commands.Destroy();

}

</text>;

})

How should it look like?

And as I wrote in this thread: http://www.kendoui.com/forums/mvc/grid/enable-properties-by-true-false.aspx
it would be more beautiful to just write:

columns.Command(commands =>

{

commands.Edit();

commands.Destroy(!item.IsStartPage);

})

:)

Regards,
Mattias

Grid

answered on 11 Feb 2013

1 answer

168 views

Line Chart Example Dataset

Trying to work through the online demos, there is no representation of what the actual dataset or viewmodels look like. This makes it difficult to format data properly to be consumed by the dataviz controls.

I have the following model:

public class ReportMonthTotals

{

public string Month { get; set; }

public int Year { get; set; }

public decimal Total { get; set; }

}

The data looks as such, a column for the month, the year, and the total.

1 2013 1200.00

12 2012 1350.00

11 2012 1100.00

10 2012 1050.00

I need to display in a Line chart with a Series for each year (2013, 2012, 2011...) over the Category (X) Axis of Month (Jan, Feb, Mar...Dec). Value (Y) Axis is Total.

This is the start of my control, but its obviously missing something as I get a nonsensical result:

@(Html.Kendo().Chart<Reporting.Data.SalesModel.ReportMonthTotals>()

.Name("salesChart")

.Title("Sales")

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom)

)

.Series(series =>

{

series.Line(m => m.Total);

})

.ValueAxis(axis => axis.Numeric()

.Labels(labels => labels

.Format("${0}")

)

.CategoryAxis(axis => axis

.Categories(m => m.Month)

)

.DataSource(dataSource => dataSource

.Read(read => read.Action("Sales_Read", "Sales")

           .Group(group => group.Add(m => m.Year))

)

My Controller:

public ActionResult Sales_Read([DataSourceRequest] DataSourceRequest request)

{

return Json(SalesModel.GetSales(), JsonRequestBehavior.AllowGet);

}

GetSales() returns a List of object ReportMonthTotals

What exactly am I missing? Thanks.

Chart

answered on 10 Feb 2013

1 answer

95 views

Multiple Add New at one time in Grid

Is there is an easy way to allow a user to hit the Add New button several times to make several blank rows and then go and add the data? They don't want to hit Add -> Enter Data -> Update -> Repeat. They want to go Add -> Add -> Add -> Enter Data -> Enter Data -> Enter Data -> Save button.

Thanks!

Grid

answered on 08 Feb 2013

3 answers

127 views

Ajax Datasource Data

Hi,

This question and example actually applies to the Grid but since it is about the DataSource I'm posting it in the General Area.

As you can see below I'm using a read action for my Ajax request. And also using the Data method to provide the action with Data.

When I only provide string or integer types in the return function (AdditionalData) everything is fine. But when I want to use a Date (i.e. StartDate, EndDate), the properties StartDate and EndDate are not passed to the Action Controller and the Action cannot be found (because the parameters do not match, I think).

Is there a simple way to pass a Date object to your Action Controller or not to use the .Read(.. method but a jQuery ajax request?

Kind regards,

Lennart

Grid Definition:
@(Html.Kendo().Grid(Model) // Bind the grid to the Model property of the view
.Name("Grid")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("HistoryDowntimes_Read", "TimeRegistration").Data("AdditionalData")))
.Columns(columns =>
{
columns.Bound(p => p.TimeEventID);
....

Data Return Function:
function AdditionalData() {
return {
LocationID: 8,
StartDate: new Date(2012, 1, 1, 11, 42, 30, 477),
EndDate: new Date(2013, 1, 1, 11, 42, 30, 477)
};
}
==> Fixed LocationID and Date is for Development purposes only.

General Discussions

answered on 08 Feb 2013