Questions on UI for ASP.NET MVC Forum

0 answers

233 views

Using Kendo Grid with System.Web.Optimization

Is there any general advice for using Kendo Grid with style and script bundles from the ASP.NET Web Optimization framework? My web app works fine with optimizations disabled, but Firebug reports four JavaScript errors when optimizations enabled:

TypeError: f is undefined

http://localhost:53917/Scripts/Kendo/kendo.aspnetmvc.min.js

Line 9

TypeError: f is undefined

http://localhost:53917/Scripts/master?v=z6jNo6rVh7mOahMFu9siQ94qOttTDJz8JZAyypCOfA01

Line 1

TypeError: e is undefined

http://localhost:53917/Scripts/Kendo/kendo.aspnetmvc.min.js

Line 9

TypeError: jQuery("#Grid").kendoGrid is not a function

http://localhost:53917/Search/Index/3

Line 157

The bundle doesn't even include any Kendo files:

bundles.Add(new ScriptBundle(MasterScript).Include(

"~/Scripts/jquery-1.8.2.js",

"~/Scripts/jquery-ui-1.9.0.js",

"~/Scripts/knockout-2.0.0.js",

"~/Scripts/jquery.gritter.js",

"~/Scripts/jquery.ui.selectmenu.js",

"~/Scripts/Site.js"));

Are people using Kendo Grid with Web Optimizations without any errors?

Grid

asked on 23 Nov 2012

1 answer

454 views

Bind Object from DropdownList

How do i Bind object in model from dropdownlist ?

public class Country
{
public int Id {get; set;}
  public string Name{ get; set; }
}

public class City
{
public int Id {get; set;}
  public string Name{ get; set; }
public Country Country {get; set;}
}

Controller ....

public ActionResult Create()
{
var model = new City();
ViewBag.Countries= ... //Loading all countries typeof IQuerable<Country>
return View(model);
}

cshtml....

@model Entities.City

   @(Html.Kendo().DropDownListFor(m => m.Country)
.BindTo(ViewBag.Countries)
.DataValueField("Id")
.DataTextField("Name")
.OptionLabel("Please select."))

public ActionResult Create(City model)
{
if (ModelState.IsValid) /// <<== Error here..
{
var _obj = new City()
{
Name= model.Name,
Country = model.Country
};
}

Error is Model state is not valid. Because System.String cannot convert to Entities.Country

DropDownList

answered on 23 Nov 2012

1 answer

196 views

Running Both Kendo MVC And Telerik MVC Q1 2012 Extensions

We develop using Telerik MVC Q1 2012 Extensions, but we need a grid that allows multiple rows selected, so I have installed Kendo MVC and added it to my project. After the installation, I received a warning that JavaScript ambiguities might occur, and that I should run the "Telerik MVC Configure Wizard".

I have been unable to find out where the "Telerik MVC Configure Wizard" is - can anyone tell me, please?

On trying to run the project, I received the following error:

Compiler Error Message: CS0104: 'MenuOrientation' is an ambiguous reference between 'Kendo.Mvc.UI.MenuOrientation' and 'Telerik.Web.Mvc.UI.MenuOrientation'

Edit: I now have the full error message: on right clicking on the project and selecting the option to convert it to a Kendo project, it runs a process, then gives the following "Warning" message:

"The Telerik MVC jQuery inclusion may interfere with the Kendo jQuery inclusion. Consider disabling the embedded jQuery usage by running the Telerik MVC Configure Wizard"

Again - does anyone know where I can find the Telerik MVC Configure Wizard, please?

General Discussions

answered on 23 Nov 2012

3 answers

218 views

[Solved] How can I share Kendo's skin with standard MVC HTML helpers?

Hello Team;
Since Kendo is missing several of the key HTML helpers for inputbox or checkbox for data entry and we need to use the ones that come with MVC out of the box, how do we make/match the MVC standard helpers to match the skin & Theme of Kendo?

Our Data entry would look very out of place to put a @Html.TextBoxFor next to a @(Html.Kendo().NumericTextBox<double> if they don't share the same skin * theme. What's the procedure to share Keno's Skin?

Thanks!

General Discussions

answered on 23 Nov 2012

4 answers

420 views

Editor in Window

When placing an Editor in a Window the Editor control does not render correctly (tried this in IE 10, 9, 8 and FireFox)

We are using the latest verion of the MVC Wrappers: 2012.2.913.340

Below is an example from our code (Partial View)

@using (Ajax.BeginForm("AddComment", "Incident", new AjaxOptions { HttpMethod = "Post", OnSuccess = "onSuccess('AddWindow')" }))

{

@Html.ValidationSummary(true)

<div class="editor-field">

@(Html.Kendo().EditorFor(model => model.Comment)

.Name("Comment")

.Tools(tool => tool

.Clear()

.Bold()

.Italic()

.Underline()

.InsertOrderedList()

.InsertUnorderedList()

.JustifyLeft()

.JustifyCenter()

.JustifyRight()

.JustifyFull()

.Indent()

.Outdent()

.CreateLink()

.Unlink()))

@Html.ValidationMessageFor(model => model.Comment)

</div>

@Html.HiddenFor(model => model.IncidentId)

<p>

<input type="submit" value="Add Comment" class="k-button" />

</p>

}

On our Detail page:

@(Html.Kendo().Window()

.Name("AddWindow")

.Title("Add Comment")

.Content(@<div>@Html.Partial("IncidentCommentAddPartial", Model.AddComment)</div>)

.Draggable(true)

.Modal(true)

.Visible(false)

.Width(625)

)

Our onclick function for the window:

$('#addComment').click(function (e) {

e.preventDefault();

window.center().open();

});

I have attached an image of how the partial view is being rendered in the Window

Editor

answered on 23 Nov 2012

0 answers

459 views

Editor in a Window : a solution

Folks
I had the same issue as Nick in this post:
http://www.kendoui.com/forums/mvc/editor/editor-in-window.aspx

I have found a solution that works
Firstly, you must have the latest version on Kendo UI
You will need to have 2 views. one a partial view
The first view holds the button, the Kendo Window element and some javascript
The second holds the content that will appear in the window.

Here is the html for the first view

@model DnB.Connect.Mvc.Common.Models.CompanyModel

@( Html.Kendo().Window()

.Name("DescriptionEdit")

.Title("Edit Company Description")

.HtmlAttributes(new { style = "width: 650px; height:600px;" })

.Draggable(false)

.Visible(false)

.Resizable(resizing => resizing

.Enabled(false)

)

.Modal(true)

           .Actions(a=>a.Close())

)

@Html.HiddenFor(m => m.Company.CompanyID, new { id = "CompanyID" })

<a id="ShowEditDescription" class="edit right">Edit</a>

So it has the button to be clicked, a hidden field to hold a Id and the KendoUI windows control.
Notice that the KendoUI control does not have a Content nor a LoadContentFrom method. I believe that having Content that contains a Kendo Editor was as loading the another nested editor. I just could not get LoadContentFrom to work at all.

Once we click the button(I use css to style the link to a button), we get jQuery to do some work. Here is the javascript, which I put at the bottom of the above view

<script type="text/javascript">

$(document).ready(function () {

$('#ShowEditDescription').click(function () {

var id = $("#CompanyID")[0].value;

var param = { id: id };

var sendwindow = $("#DescriptionEdit").data("kendoWindow");

if (sendwindow && sendwindow != undefined) {

sendwindow.center().open();

sendwindow.refresh({ url: "/Company/DisplayDescriptionEdit", data: param });

}

});

</script>

I use jQuery to handle the link's click event.
inside that I get the Id from the hidden field
I build a parm array to hold the Id
I set a variable for the Kendo Window control
if it exists, I center it and open it
then I refresh it with a call to the controller action, passing in the param array
the controller action does its thing and renders the partial view into the open window

Here is the html for the partial view that holds the Editor

@model CompanyModel

@if (Model != null && Model.Company != null )

{

using (Html.BeginForm("DescriptionEdit", "Company", FormMethod.Post, new { @class = "nice",@style="width: 600px; height:550px;"}))

{

<div class="row">

<div class="columns editing-section">

@(Html.Kendo().Editor()

.Name("DescriptionEdit.CompanyDescription")

.HtmlAttributes(new { style = "float: left; width: 600px; height:450px;" })

.Encode(false)

.Tools(tools => tools

.Clear()

.Bold().Italic().Underline()

.FontName()

.FontSize()

.InsertUnorderedList()

.InsertOrderedList()

)

</div>

<div class="row">

<div class="two columns">

<input type="submit" value="Save" class="nice blue radius small button middle5" />

</div>

<div class="two columns">

@Html.ActionLink("Cancel", "About", "Company", new { id = Model.Company.CompanyID }, new { @class = "nice blue radius small button middle5" })

</div>

<div class="eight columns"></div>

</div>

}

This view must be partial else you will get your default layout loaded as well. Also using a non-partial view disables the action controls on the Kendo Window.

In my struggle with this, I had to constantly delete the Temporary ASP.NET Files.
To do this, Close all instances of Visual Studio
Navigate to: %windir%\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files
Delete all items in that folder.

I hope this helps

Regards

Greg

Editor

asked on 23 Nov 2012

2 answers

473 views

[Solved] Kendo UI for MVC Licensing.

Hi,

I am looking to update an application that uses mvc3 and telerik mvc extensions to MVC 4. I am using this under the open source GPL-v3 license but it looks like this license has been removed from the KendoUI wrappers for MVC.

Am I to understand that there is no upgrade path for telerik mvc extensions under the GPL-v3 license?

Thanks,

Tim

General Discussions

answered on 22 Nov 2012

5 answers

648 views

HtmlAttributes does nothing

Tried the HtmlAttributes method on the mvc extensions for listview

@(Html.Kendo().ListView<ViewModel>()

.Name("listView")

.HtmlAttributes(new { @class = "some-class" }))

This does not set the class. Also tried "style" and nothing. Might be a bug.

ListView

answered on 22 Nov 2012

5 answers

713 views

404 When Using DataSourceRequest

Following examples, I have a ListView I am trying to populate depending upon the selected values of two ComboBoxes. I got the ComboBoxes populated via DataSource fine but the ListView is giving me problems. Here is some illustrative code:

@(Html.Kendo().ListView<BusinessObject>()

.Name("Equipment")

.TagName("div")

.ClientTemplateId("template")

.DataSource(source => source.Read(read =>

read.Action("ControllerAction", "Controller")

.Data("additionalData")))

.Pageable())

<script>

function additionalData() {

return {

first: $("#First").val(),

second: $("#Second").val()

};

}

</script>

public JsonResult ControllerAction(

[DataSourceRequest]DataSourceRequest request,

int first,

int second)

{

var sites = ServiceManager.SomeService

.GetBusinessObjects(first, second)

.ToDataSourceResult(request);

var json = this.Json(sites, JsonRequestBehavior.AllowGet);

return json;

}

I get a 404 (not found) for "Controller/ControllerAction". What am I doing wrong?

Is my whole approach valid?

The examples often show different ways of accomplishing the same thing, which is very confusing.

Thank you,
Richard

ListView

answered on 22 Nov 2012

0 answers

157 views

Kendo grid with custom popup

Hi,

I would like to know that can we add two add buttons on top of the grid .

In my grid i would like to show two different products for e.g., Product A , Product B

when i click on the first button(Add Product A) i would like to open Product A Popup
on click of second button open Product B Popup

Same thing i want to apply for edit button inside the grid,
based on the Product type i would like to open Product A popup, and Product B popup

Can any one suggest me the better approach.

Thanks

Grid

asked on 22 Nov 2012