Questions on UI for ASP.NET MVC Forum

1 answer

402 views

Validation problems with form inside Window

I have a kendo grid with a custom toolbar template that has a button to open a kendo window.

This is the code I use to open my window when the above mentioned button is clicked:

var openAssetEditor = function (e) {

var window = $('#AssetEditorPopUp').data("kendoWindow");

window.wrapper.css({

height: 450

});

window.refresh({

url: "/Asset/AssetPopup",

data: { assetId: 0 }

});

window.center();

window.open();

};

Right below the grid I have my Window:

@(Html.Kendo().Window()

.Name("AssetEditorPopUp")

.Title("Asset Editor")

.Content("loading asset info...")

.Draggable(true)

.Modal(true)

.Visible(false)

.Width(950)

)

My controller for the Popup window:

public ActionResult AssetPopup([DataSourceRequest] DataSourceRequest request, int? assetId)

{

return PartialView("~/Views/Asset/AssetPopup.cshtml");

}

I can't seem to validate the form. I always get back that the form is valid even if all the fields are left blank.

Window

answered on 09 May 2013

2 answers

638 views

Using CDN

I am trying to use CDN for my project however when I use the CDN links instead of my kendo files, nothing displays correctly. I also use a custom Kendo css file which I list after at the end.

<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.aspnetmvc.min.js"></script>

<script src="<%= Url.Content("~/Scripts/jquery.cookie.js") %>"></script>

<link href="<%= Url.Content("~/Content/CustomKendo.css") %>" rel="stylesheet" type="text/css" />

My grids are not returning data or displaying correctly. My drop down list looks like a text box, and my charts are not showing at all. Example of how my grid looks attached. Please help!

General Discussions

answered on 09 May 2013

5 answers

998 views

Add and Update still show entry even when model errors are returned

I am having problems with InLine add and update. If I enter a item that fails the server side validation then the item is still shown as entered/updated. I have followed your examples and looked for threads on this issue, but only found things on PopUp which don't seem to apply here:

The code for add in MVC4 is given below (note: it fails on the ModelState.IsValid, which is correct

[Authorize]

[AcceptVerbs(HttpVerbs.Post)]

[ValidateAntiForgeryToken]

public ActionResult AjaxServiceCreate([DataSourceRequest] DataSourceRequest request, ISmServiceDto newItem, ICreateSmService service)

{

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

{

var response = service.Create(newItem);

if (!response.IsValid)

response.CopyErrorsToModelState(ModelState);

}

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

}

My razor view is:

@model bool

@{

ViewBag.Title = "Services";

}

<h2>Services</h2>

@*<div id="message" class="Message"></div>*@

@Html.AntiForgeryToken()

@(Html.Kendo().Grid<ServiceLayer.Models.DTOs.SmServiceDto>()

.Name("Services")

.Columns(columns =>

{

columns.Bound(p => p.SmServiceId).Hidden();

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

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

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

if (@Model)

{

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

}

})

.ToolBar(toolbar =>

{

if (@Model)

{

toolbar.Create();

}

})

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

.Pageable()

.Sortable()

//.Scrollable()

//.HtmlAttributes(new {style = "height:430px;"})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

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

.Model(model =>

{

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

model.Field(x => x.SmServiceId).Editable(false);

model.Field(x => x.Locked).Editable(false);

})

.Create(x => x.Action("AjaxServiceCreate", "Model").Type( HttpVerbs.Post).Data("sendAntiForgery"))

.Read(read => read.Action("AjaxServiceRead", "Model"))

.Update(x => x.Action("AjaxServiceUpdate", "Model").Type( HttpVerbs.Post).Data("sendAntiForgery"))

.Destroy(x => x.Action("AjaxServiceDelete", "Model").Type( HttpVerbs.Post).Data("sendAntiForgery"))

))

@section scripts {

<script type="text/javascript">

function error_handler(e) {

if (e.errors) {

e.preventDefault(); // cancel grid rebind if error occurs

var message = "Errors:\n";

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

if ('errors' in value) {

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

message += this + "\n";

});

}

});

alert(message);

}

function sendAntiForgery() {

return { "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val() };

}

</script>

}

Your help on this matter would be appreciated.

Grid

answered on 09 May 2013

0 answers

89 views

Manual data display

I have a kendo combobox created using
an MVC wrapper like so:

@Html.Kendo.ComboBox().Name("Well");

I want to update the data manually
using a json array stored in javascript (not from an ajax query) - I came
across this code which almost works except that I get [object Object] 3 times
in the ComboBox instead of the 'text' value from the json array:

$("#Well").data("kendoComboBox").dataSource.data([{text:
"i1", value: "1"},
{text: "i2", value: "2"},
{text: "i3", value: "3"}]);

$("#Well").data("kendoComboBox").dataSource.query();

<Edit>

Never mind, found the issue. Sorry about that.

</Edit>

Thanks for your help.

ComboBox

asked on 08 May 2013

15 answers

593 views

use of javascript functions

Hello ,
i have another question regarding columns in the grid.
When i have a client template something like this
......
@(Html.Kendo().Grid<MyProject.ViewModels.TestViewModel>()
.Name("Grid")

.Columns(columns =>
{
.columns.Template(x => { }).ClientTemplate("<a href='#'><img src="" alt=""></img></a>").Width(100)
......
}
but is huge on several lines, for example
@"<a class='k-button' href='javascript: void(0)' onclick='doLoading(this)' style='min-width:32px!important'><span class='k-icon k-edit'></span></a>
<a class='k-button' href='javascript: void(0)' onclick='deleteRow(this);return false;' style='min-width:32px!important'><span class='k-icon k-delete'></span></a>"

can i use a javascript function that return all this html string ?

Regards,
Daniel

Grid

answered on 07 May 2013

1 answer

260 views

LoadContentFrom not calling my controller

Hi, I've begun the process of upgrading my MVC Telerik Extension app to Kendo. I am on MVC4 using the server wrappers. It didn't take long before I ran into a perplexing issue.
The first thing I did was upgrade the menu to this:

@( Html.Kendo().Menu()

.Name("Menu")

.Items(menu =>

{

menu.Add().Text("Tasks").Action("Index", "Tasks");

@* Rest eliminated *@

})

)

And I get JS error jQuery(...).kendoMenu is not a function in the browser on this code:

jQuery(function(){jQuery("#Menu").kendoMenu({});});

On that same page is a tabstrip here:

@( Html.Kendo().TabStrip()

.Name("TabStrip")

.Items(parent =>

{

parent.Add()

.Text("My Tasks")

.Selected(true)

.LoadContentFrom("MyTasks", "Tasks");

@* Abbreviated *@

})

)

But this never calls my MyTasks controller. This all worked fine with the Extensions, so I must have a configuration issue, right? What am I doing wrong?

TabStrip

answered on 07 May 2013

1 answer

399 views

Grid Model With Dictionary or List

My grid model is essentially a collection of dynamic fields that is stored in a Dictonary<string,Values> where Values has a couple properties on it. What would be the best way to iterate thru those values and display them as grid columns? Values will have a value and header text property. I have been searching the forums but have not found anything similar yet.

thanks

Grid

answered on 07 May 2013

25 answers

335 views

TreeView Q3.2012: New Bug with IE 9 -> Node selection

A new bug has been introduced with the TreeView Q3.2012 release. This bug is only visible in IE 9 (maybe also IE 8).With other browsers it works fine.

The problem: When you select a node in the TreeView (and the TreeView has a vertical scroll-bar), the TreeView automatically scrolls to the top. This is a very annoying bug, please fix it soon. Because of this problem I still have to use the Q2 release. I really want to update soon. Thanks!

TreeView

answered on 06 May 2013

1 answer

700 views

How to reference model in @Url.Action in edit template

In my custom edit template, I'm trying to pass InventoryImageSeq from the model to an action on the controller. This is used to retreive the image for the inventory item.

Here's my custom editor. model.DeviceName displays correctly. The <img... line does call GetImage in the controller, however inventoryImageSeq is always null.

@model Copper.Domain.Entities.EntInventory

<div class="editor-label">

@Html.LabelFor(model => model.DeviceName)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.DeviceName)

</div>

<div>

<img alt="" src="@Url.Action("GetImage", "CellInventory", new { inventoryImageSeq = Model.InventoryImageSeq })" />

</div>

Here's GetImage in CellInventoryContoller.cs:

public FileContentResult GetImage(string inventoryImageSeq)

{

EntInventoryImage entImage = new EntInventoryImage();

int seq;

if (Int32.TryParse(inventoryImageSeq, out seq))

{

entImage = _margoRepository.GetInventoryImage((int?)seq);

}

return File(entImage.ActualImage, entImage.ContentType);

}

Is this a problem with my syntax for the routeValues:

new { inventoryImageSeq = Model.InventoryImageSeq }

or is something else wrong?

Thanks,

Jerry

Grid

answered on 06 May 2013

3 answers

105 views

get CustomButton Tag in js

Hello!
I use this

command.Custom("edit").Click("editPlan");

How I can in js method "editplan" get line in which was clicked my custom button
Because If I use:

var grid = $("#Grid").data("kendoGrid");

var Id= grid.dataItem(grid.select()).Id;

I can select first element in grid and press button in other element(and I get Id from first element)
I have attached a picture that shows it(error) :

And please answer me, you don't forget to answer me?
http://www.kendoui.com/forums/mvc/grid/clientdetailtemplateid-and-id-of-parent.aspx
I wait 5 days :(

Grid

answered on 06 May 2013

And please answer me, you don't forget to answer me? http://www.kendoui.com/forums/mvc/grid/clientdetailtemplateid-and-id-of-parent.aspx I wait 5 days :(

And please answer me, you don't forget to answer me?
http://www.kendoui.com/forums/mvc/grid/clientdetailtemplateid-and-id-of-parent.aspx
I wait 5 days :(