Questions on UI for ASP.NET MVC Forum

1 answer

191 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

209 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

398 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

446 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

464 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

638 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

704 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

149 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

11 answers

620 views

Using .less with DotLess

Hi,

We today tried switching to the .less version of the Kendo styles to be able to use themebuilder colors elsewhere in our project as well, however we cannot get it to work.

We use DotLess to compile the .less files, however the @require lines seems to fail. Do you have any guidance on how to get this working or a sample project with it working? Our own less files works well, however they do not contain any require statemend, just some variables, mixins and nesting.

Thanks
/Victor

General Discussions

answered on 22 Nov 2012

0 answers

240 views

Grid is always empty.

Hello,

when I'm using the CustomCommand grid, my grid is always empty.
If I'm looking through the generated scriptcode with firebug the url attribute contains ="Controller/action". (Grid/CustomCommand_Read)

But my current page url calls http://localhost:53850/Tickets

Because of the relative url it always calls http://localhost:53850/Tickets/Grid/CustomCommand_read. Is this correct?
If it is so i dont know how to use it with the root url (http://localhost:53850/ + Grid/CustomCommand_Read)

The debugger also doesn't call the CustomCommad_Read. Only if I'm calling the correct url directly.

Thanks a lot.

Kind Regards

Phillip

Grid

asked on 22 Nov 2012