Questions on UI for ASP.NET MVC Forum

0 answers

266 views

Converting telerik asp.net mvc grid to kendo mvc grid issues

I am currently working on converting a telerik asp.net mvc grid to the kendoui mvc grid but have some issues that I can't seem to find an answer for.

1) Column HeaderTemplate - I have a column using checkboxes for selecting rows in the grid I use a header template to render a checkbox for selecting all rows in the telerik grid, but there is no headertemplate in kendoui grid. I have had to workaround this by setting the title of the column to the html I need for rendering the checkbox and registering the click event.
Is there a correct way for doing this? is the headertemplate going to be added to the grid column definitions in the full release?

2) the kendo grid does not allow the GridPagerStyles to be set on the paging footer. I need to be including a pageSizeDropDown, nextpreviousandnumeric, page input and total rows on the footer. How can this be converted over to woek on the Kendo MVC Grid?

Thanks in advance

Shaun

Grid

asked on 08 Jun 2012

0 answers

193 views

Public member 'ToDataSourceResult' on type 'ObjectQuery()' not found

Hi,
I'm currently testing the kendo MVC Grid with Ajax Binding, and i have a getPedidosByColabId function in my repository, and a controller with GetListaGrid function that returns data to populate the grid and i'm getting this error "Public member 'ToDataSourceResult' on type 'ObjectQuery(Of PedidoDocumentacaoViewModel)' not found.". Any Help?

Public Function getPedidosByColabId(ByVal idColaborador As Integer)

Dim listaPedidos = (From l In db.tblPEDDOC__tblPedidoDocumentacao

Where l.idColaborador = idColaborador

Select New PedidoDocumentacaoViewModel With {

.idPedidoDocumentacao = l.idPedidoDocumentacao,

.idEstadoPedidoDoc = l.idEstadoPedidoDoc,

.descEstadoPedidoDoc = l.tblPEDDOC__tblEstadoPedidoDoc.descEstadoPedidoDoc,

.idTipoPedidoDoc = l.idTipoPedidoDoc,

.descTipoPedidoDoc = l.tblPEDDOC__tblTipoPedidoDoc.descTipoPedidoDoc,

.data = l.data

})

Return listaPedidos

End Function

Public Function GetListaGrid(<DataSourceRequest()> request As DataSourceRequest) As ActionResult

Dim idColaborador As Integer = 979

Dim pRepository As New PedidosRepository

Dim res = pRepository.getPedidosByColabId(idColaborador)

Dim result As DataSourceResult = res.ToDataSourceResult(request)

Return Json(result)

End Function

Edit: Already solved it..

Dim result As DataSourceResult = New DataSourceResult With {.Data = res}

Sorry for the trouble

Thanks,
Ricardo Castro

Grid

asked on 08 Jun 2012

3 answers

584 views

Editing / updateting grid in a details template not working..

Hi,

With this viewcode I am trying to create a grid hierachy to be editable. The first level grid works , but the 2.nd level does not Update when creating/editing, I get this ModelState error when runnig ReviewCategory_Update , " The parameter conversion from type 'System.String' to type 'Reviews.Models.ReviewCategory' failed because no type converter can convert between these types. " , 'Reviews.Models.ReviewCategory' is the class used to populate the 2.nd level grid.

<ul data-role="listview" data-inset="true">

<li data-role="list-divider">Navigation</li>

<li>@Html.ActionLink("About", "About", "Home")</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")</li>

</ul>

@(Html.Kendo().Grid<Reviews.Models.Review>().Name("ReviewGrid").Columns(columns =>

{

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

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

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

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

})

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

.DetailTemplate(detail=>detail.ClientTemplate(

Html.Kendo().Grid<Reviews.Models.ReviewCategory>()

.Name("ReviewCategory_#=ReviewId#")

.Columns(columns=>

{

columns.Bound(o => o.TableNo);

columns.Bound(o => o.Category);

columns.Bound(o => o.Comment);

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

})

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

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

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.Events(events => { events.Error("error_handler"); })

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

.Create(update => update.Action("ReviewCategory_Create", "Home", new { id = "#=ReviewId#" }))

.Read(read => read.Action("ReviewCategory_Read", "Home", new { id = "#=ReviewId#" }))

.Update(update => update.Action("ReviewCategory_Update", "Home"))

.Destroy(update => update.Action("ReviewCategory_Destroy", "Home"))

)

.ToHtmlString()

))

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

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.Events(events => { events.Error("error_handler"); })

.Model(model=>model.Id(p=>p.ReviewId))

.Create(update=>update.Action("Review_Create","Home"))

.Read(read => read.Action("Review_Read", "Home"))

.Update(update => update.Action("Review_Update", "Home"))

.Destroy(update => update.Action("Review_Destroy", "Home"))

)

<script type="text/javascript">

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

function dataBound() {

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

}

</script>

And this controller:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Kendo.Mvc.UI;

using Kendo.Mvc.Extensions;

using Reviews.Models;

using System.Data.Metadata.Edm;

using System.Data.Objects.DataClasses;

namespace Reviews.Controllers

{

public class HomeController : Controller

{

ReviewModelContainer reviewContext = new ReviewModelContainer();

public ActionResult Index()

{

ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

return View();

}

public ActionResult Review_Read([DataSourceRequest] DataSourceRequest request)

{

//return Json(SessionProductRepository.All().ToDataSourceResult(request));

return Json(reviewContext.ReviewSet.ToDataSourceResult(request));

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Review_Create([DataSourceRequest] DataSourceRequest request, Review review)

{

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

{

reviewContext.AddToReviewSet(review);

reviewContext.SaveChanges();

}

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

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, Review review)

{

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

{

int currentid = review.ReviewId;

Review target = reviewContext.ReviewSet.Where(p => p.ReviewId == currentid).First();

if (target != null)

{

target.Customer = review.Customer;

target.Location = review.Location;

target.Title = review.Title;

reviewContext.SaveChanges();

}

return Json(ModelState.ToDataSourceResult());

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult EditingInline_Destroy([DataSourceRequest] DataSourceRequest request, Review review)

{

if (review != null)

{

reviewContext.DeleteObject(review);

reviewContext.SaveChanges();

}

return Json(ModelState.ToDataSourceResult());

}

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

{

EntityCollection<Models.ReviewCategory> categories = reviewContext.ReviewSet.Where(Review => Review.ReviewId == id).First().ReviewCategory;

return Json(categories.ToDataSourceResult(request));

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult ReviewCategory_Create(int id, [DataSourceRequest] DataSourceRequest request, ReviewCategory category)

{

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

{

category.Review = reviewContext.ReviewSet.Where(t => t.ReviewId == id).First();

reviewContext.AddToReviewCategorySet(category);

reviewContext.SaveChanges();

}

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

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult ReviewCategory_Update([DataSourceRequest] DataSourceRequest request, ReviewCategory category)

{

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

{

int currentid = category.Id;

ReviewCategory target = reviewContext.ReviewCategorySet.Where(p => p.Id == currentid).First();

if (target != null)

{

target.TableNo = category.TableNo;

target.Category = category.Category;

target.Comment = category.Comment;

reviewContext.SaveChanges();

}

return Json(ModelState.ToDataSourceResult());

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult ReviewCategory_Destroy([DataSourceRequest] DataSourceRequest request, ReviewCategory category)

{

if (category != null)

{

reviewContext.DeleteObject(category);

reviewContext.SaveChanges();

}

return Json(ModelState.ToDataSourceResult());

}

public ActionResult About()

{

ViewBag.Message = "Your quintessential app description page.";

return View();

}

public ActionResult Contact()

{

ViewBag.Message = "Your quintessential contact page.";

return View();

}

Any idears of why this is comming...
Thanks for your help !.....

Best Ole

Grid

answered on 08 Jun 2012

1 answer

254 views

Problem posting changes from the Grid

Hi,

I'm trying to use the grid from MVC3 with no success. I'm pretty new at mvc and kendoUI so this may be a really dumb mistake and I can't tell if it's a problem on my end or a bug in the beta grid.

Model:

public class InCartProduct

{

public string ProductId { get; set; }

public string Fabric { get; set; }

public string Pattern { get; set; }

public string Color { get; set; }

public string Description { get; set; }

public double Qty { get; set; }

public double UPrice { get; set; }

public double Total { get; set; }

}

View:

@model IEnumerable<pts.Models.InCartProduct>

@{

ViewBag.Title = "Shopping Cart";

}

<h2>Your Order</h2>

<h3>Fabrics</h3>

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

.Name("FabricGrid")

.Columns(columns =>

{

columns.Bound(p => p.Pattern).Groupable(false);

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

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

columns.Bound(p => p.Qty).Width(150);

columns.Bound(p => p.Total).ClientFooterTemplate("Order Total : ");

columns.Command(command => command.Destroy()).Width(110);

})

.ToolBar(commands => { commands.Save().SaveText("Update Fabric Order"); })

.Scrollable()

.Sortable()

.Editable(editable => editable.Mode(GridEditMode.InCell))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Model(model => model.Id(p => p.ProductId))

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

.Create(create => create.Action("Product_Create ", "ShoppingCart"))

.Read(read => read.Action("Product_Read", "ShoppingCart"))

.Update(update => update.Action("Product_Update", "ShoppingCart"))

.Destroy(update => update.Action("Product_Delete", "ShoppingCart"))

)

ShoppingCartControler:

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Product_Update([DataSourceRequest] DataSourceRequest request, InCartProduct product)

{

if (product != null)

{

// do something

}

return Json(ModelState.ToDataSourceResult());

}

I can load the data (not from SQL) to the grid with no problem but as soon as I change something on the grid and hit the "Update Fabric Order" button I get an "Invalid JSON primitive: sort." error (see attached). The error occurs before it hits the controller. A break point in the controller never gets hit. If I remove all the paramters from the controller i.e.: public ActionResult Product_Update() the program does hit the break point in the controller but it's pretty useless at this point.

Please help.

Thanks,

Edit:
I just found out that the error was caused by the way I'm calling a webservice on the _Layout.cshtml page. This code calls an aspx webservice to return the menu content and uses the Kendo menu control to build the menu. I need this code to run on every page because it's the site's menu.

<script language="javascript" type="text/javascript">

jQuery.support.cors = true;

$.ajaxSetup({

type: 'POST',

contentType: "application/json; charset=utf-8",

dataType: "json",

data: "{}",

success: function (msg) {

console.log(msg.d);

},

error: function (xhr, desc, ex) {

alert("Web Service Error: " + xhr.responseText + ", " + desc + ": " + ex);

}

});

function namespace(namespaceString) {

var parts = namespaceString.split('.'), parent = window, currentPart = '';

for (var i = 0, length = parts.length; i < length; i++) {

currentPart = parts[i];

parent[currentPart] = parent[currentPart] || {};

parent = parent[currentPart];

}

return parent;

}

var myajax = namespace('myajax');

myajax.WebService = {

Url: 'ptsGenericService.asmx/',

_Ajax: function (url, callback) {

$.ajax({ url: url, success: callback });

},

GetMenu: function (callback) {

var url = this.Url + 'GetMenu';

this._Ajax(url, callback);

}

};

$(document).ready(function () {

myajax.WebService.GetMenu(function (menulist) {

var menu = $("#menu").kendoMenu().data("kendoMenu");

var parentItem = null;

$(menulist.d).each(function (rec) {

var parentItem = menu.element.children("li:contains('" + this.ParentTitle + "')");

if (this.ParentTitle == '' || parentItem.length == 0) {

menu.append({ text: this.Title, url: this.Link, imageUrl: this.IconUrl, spriteCssClass: this.SpriteCssClass });

} else {

if (this.SubTitle == null || this.SubTitle == '') {

menu.append([{ text: this.Title, url: this.Link, imageUrl: this.IconUrl, spriteCssClass: this.SpriteCssClass}], parentItem);

} else {

if (this.SubTitle != "") {

var subItem = parentItem.find("li:contains('" + this.Title + "')");

menu.append([{ text: this.SubTitle, url: this.Link, imageUrl: this.IconUrl, spriteCssClass: this.SpriteCssClass}], subItem);

}

});

</script>

think it's the $.ajaxSetup{...} piece that causes the problem. If I remove the entire block of code the Update button on the grid works. So I'm still clueless as to how to solve this thing!

Anyone?

Grid

answered on 08 Jun 2012

0 answers

103 views

Performance question

I'm looking at switching to KendoUI since it has nice support for lesscss. I did see that the beta for MVC support is out there. Since this allows some server side setup does this change performance at all? I'm not sure if we are going to use the mobile library yet and may opt to buy the MVC license. If it doesn't offer any benefit besides ease of use I'm not sure I can justify the cost.

General Discussions

asked on 07 Jun 2012

2 answers

459 views

Kendo UI Complete

Your FAQs mention that people with a license for Telerik for ASP.NET MVC will automatically get Kendo UI for ASP.NET MVC. What about he other way around? Will those of us already with Kendo UI complete also get access to the Kendo UI for ASP.NET MVC? Or, at the very least, a discount since we already have a license to the base framework?

General Discussions

answered on 06 Jun 2012

0 answers

126 views

Conversion of tabstrip and splitter control from MVC Extensions to KendoUI for ASP.NET MVC

After receiving your email about the future of the MVC Extensions, I have begun to look into what the cost(engineering time) to convert our MVC Extension UI's to KendoUI.

We would like to use the new server side scripting you have added with the latest beta. We are currently in the beginning stages of our project but have already used a bunch of MVC Extensions heavily.

The first problem I am seeing is getting the TabStrip to fill up the whole window (except for the header) and have a splitter control fill up a particular tab. I had some issues getting this to work before but was able to resolve them using the MVC forums.

The Tabstrip is ajax loaded and is pretty simple. I have included an example of our application with a stripped down set of controls that just show the basic functionality.

I appreciate the help and hope to hear from you soon.

Thanks,
Lucas

TabStrip

asked on 05 Jun 2012

4 answers

1.0K+ views

ScriptRegistrar and StyleSheetRegistrar

While I can understand some of the reasoning behind not bringing them along into Kendo UI, I believe they still have a very useful function.

Not everyone is going to be quick to move the MVC 4, so they would not benefit from the built in minification and bundling.
The .OnDocumentReady method of ScriptRegistrar is very useful for combining your document.ready code into one rather than scattered throughout your page.
While a lot of people applaud the effort of MS to add Bundling and Minification, using it is no where near as friendly to use as the Telerik StyleSheetRegistrar and ScriptRegistrar.

So how about it Kendo / Telerik? Why don't you include these?

Thanks
Alec

General Discussions

answered on 05 Jun 2012

1 answer

100 views

What are the plans for KendoUI Mobile support

It is great to see the KendoUI support for ASP.NET MVC, but I was wondering will if it will work seamlessly with KendoUI Mobile as well or if that is on the roadmap.

General Discussions

answered on 04 Jun 2012

1 answer

418 views

ScriptRegistrar, compress

Hosting service, I use it, can works only in medium trust mode and I can't to set some parameters like compressing. Up to day I use in Telerik MVC applications code looks like this:
    @(Html.Telerik().ScriptRegistrar()
        .Globalization(true)
        .DefaultGroup(group => group
            .Add("~/Scripts/modernizr-1.7.min.js")
            .Add("~/Scripts/jquery-1.7.1.min.js")
            .Add("~/Scripts/jquery.min.js")
            .Combined(true)
            .Compress(true)
            .CacheDurationInDays(14)
        )

and
    @(Html.Telerik()
        .StyleSheetRegistrar()
        .DefaultGroup(group => group
            .Add("telerik.common.css")
            .Add("telerik.windows7.css")
            .Add("Site.css")
            .Combined(true)
            .Compress(true)
            .CacheDurationInDays(14)
        )
    )
Everythink works fine and typical page speed measured by google pagespeed tools was not less than 85 points with/without CDN.
Now, I would like to use similar code in Kendo UI MVC based programs. How to do it? Testing code used Telerik Kendo UI MVC without compressing gives me not satisfied result equal 54 points :(

Krzysztof

General Discussions

answered on 04 Jun 2012