Questions on UI for ASP.NET MVC Forum

0 answers

75 views

Server side sorting doesn't render as expeceted

Edit: Thought this was a ticket but realized I was wrong and have now added a support ticket for this issue.

Hi,

We have a grid that we would like to populate with server side sorted information. So what we did was this:

@(Html.Kendo().Grid<MyProject.ViewModels.Calculation.WorkGridItem>()

.Name("grid")

.BindTo(Model.WorkGrid.WorkGridItems)

.Columns(c =>

{

c.Bound(i => i.Identifier).Title("Id");

c.Bound(i => i.Name).Title("Namn");

c.Bound(i => i.City).Title("Stad");

c.Bound(i => i.Status).Title("Status");

c.Bound(i => i.StartDate).Title("Start");

c.Bound(i => i.EndDate).Title("Slut");

c.Bound(i => i.Created).Title("Skapad");

c.Bound(i => i.SigningDate).Title("Signatur");

})

.ClientDetailTemplateId("expandedRowTemplate")

.Events(l => l.DetailInit("OnLoadDetail"))

.Events(ev => ev.DetailExpand("detailExpand"))

.Pageable(x =>

{

x.PageSizes(new int[] { 50, 100, 200 });

x.Refresh(true);

})

.Sortable(x => x.Enabled(true))

.DataSource(ds => ds.

Ajax()

.ServerOperation(true)

.Read(read => read

.Action("ReadGridItems", "Calculations",

new

{

selectedTab = Model.Tabs.SelectedTab().Value,

gridType = Model.PageHeaderSearch.SelectedSearchType,

searchString = Model.PageHeaderSearch.SearchWord,

})

.Type(HttpVerbs.Post)

)

.PageSize(50)

We then sort the data, and returns the data source and I can see it being sorted the way I want it to. However, when the data is redered in the grid it is all messed up.

When sorting desc on one of the columns, the date would look like this:

28.02.2013
28.02.2013
28.02.2013
28.02.2013
28.02.2013
26.02.2013
25.03.2013
25.02.2014
25.02.2013

Why is this? By setting ServerOperation to true, whould that not then let me do the sorting on the server side and then let me just render the data?

Any thought on this?

Grid

asked on 13 Feb 2013

2 answers

170 views

How to Make Column Menu Sticky?

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

120 views

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

414 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

1.0K+ 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

324 views

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

217 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

625 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

186 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

110 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