Questions on UI for ASP.NET MVC Forum

0 answers

149 views

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

667 views

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

325 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

485 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

453 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

758 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

139 views

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

1 answer

621 views

How to determine if there was validation errors after calling grid.SaveChanges in javascript

Hi to All,

I call grid.SaveChanges in a javascript function. My problem is if there was some _client_ side validation errors for example invalid date format, then I must not execute some DOM operations. Unfortunately grid.SaveChanges() hase no return value and searching for keyword 'valid' in grid documentation page has no result.

Thx in advance
Horo

Grid

answered on 06 May 2013

5 answers

385 views

Set selected items from viewmodel

I am trying to use the MultiSelectFor without to much luck. I have

@Html.Kendo().MultiSelectFor(m => m.SelectedEmployeeIds).BindTo(Model.Employees).DataTextField("EmployeeName").DataValueField("EmployeeId").ItemTemplate("<

span class='span2'>#: data.EmployeeName #</span><span><strong>#: data.Email #</strong></span>").Placeholder("Select Names")

Posting the contents to the controller works correctly however when the view is loaded any "SelectedEmployeeIds" are not displayed.

Any help would be great.

Thank you

MultiSelect

answered on 05 May 2013

2 answers

1.5K+ views

Can't get grid.dataSource.filter to work

Hello,

I am trying to get ajax filtering to work without luck. However, there may be an overriding issue as I see in the script debugger that I am getting an error in kendo.web.min.js just upon loading my page.

Uncaught TypeError: Cannot call method replace of undefined

This is being displayed directly below line 9 in this .js file.

My Controller:

//Kendow MVC Server binding test

public ActionResult KendoGrid([DataSourceRequest] DataSourceRequest request, string areaFilter = null)

{

ListLocationsViewModel viewModel = _manageLocationsAppServ.CreateListLocationsViewModel(0, areaFilter);

return Json(viewModel.Locations.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

Here is my .cshtml

@using Kendo.Mvc.UI

@using OTIS.domain.CompanyMgmt

@model OTIS.AppServ.CompanyMgmt.ViewModels.ListLocationsViewModel

@{

ViewBag.Title = "Locations | OTIS";

}

<h2>Locations</h2>

@Html.Raw(TempData["message"])

<p>

@using (Html.BeginForm())

{

<p>

Area: @Html.DropDownList("areaFilter", new SelectList(Model.AreaOptions), "")

<input type="submit" value="Search"/>

<button onclick="filter()">Filter</button>

</p>

}

</p>

<hr />

<p>

@Html.ActionLink("Create New", "Edit", "ManageLocations", null, new { @class="button" })

</p>

@(Html.Kendo().Grid<OTIS.AppServ.CompanyMgmt.ViewModels.ListLocationsViewModel.LocationsGrid>()

.Name("MVCClientBindGrid")

.Columns(columns =>

{

columns.Bound(l => l.DisplayLocation);

columns.Bound(l => l.Area);

columns.Bound(l => l.Zone);

columns.Bound(l => l.Aisle);

columns.Bound(l => l.Bay);

columns.Bound(l => l.Level);

columns.Bound(l => l.Position);

columns.Bound(l => l.Barcode);

columns.Command(command => command.Custom("Details").Click("showDetails")).Width(100);

})

// Add "Create" command

.ToolBar(toolbar =>

{

//Want to place this at the bottom

toolbar.Custom().Text("Add").Url("#_").HtmlAttributes(new { onclick = "addNew()", @class = "k-grid-add" });

})

.DataSource(dataSource => dataSource

.Ajax() // Specify that the data source is of ajax type

.ServerOperation(false) // paging, sorting, filtering and grouping will be applied client-side

.PageSize(10)

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

.Read(read => read.Action("KendoGrid", "ManageLocations",  new { area = "CompanyMgmt" })// Specify the action method and controller name

//.Data("getFilters") // the name of the JavaScript function which will return the additional data

)

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.Groupable()

)

<script type="text/javascript">

var detailsTemplate = kendo.template($("#template").html());

function showDetails(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

window.location.href = "@Url.Action( "Edit", "ManageLocations")" + "/" + dataItem.id;

}

function addNew() {

window.location.href = "@Url.Action( "Edit", "ManageLocations")";

}

function filter() {

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

var area = $('#areaFilter').val()

grid.dataSource.filter({

logic: "and",

filters: [

{ field: 'Area', operator: 'eq', value: 'SHIP' },

{ field: 'Area', operator: 'eq', value: 'SHIP' }

]

});

}

</script>

Here is the full HTML as rendered...so you can see what .js files are included and in what order

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Locations | OTIS - My ASP.NET MVC Application</title>

<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<meta name="viewport" content="width=device-width" />

<link href="/Content/site.css" rel="stylesheet"/>

<link href="/Content/superfish.css" rel="stylesheet"/>

<link href="/Content/kendo/kendo.common.min.css" rel="stylesheet"/>

<link href="/Content/themes/green_machine/jquery-ui-1.9.2.custom.css" rel="stylesheet"/>

<link href="/Content/themes/green_machine/green_machine.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.5.3.js"></script>

<script src="/Scripts/jquery-1.8.3.js"></script>

<script src="/Scripts/jquery-ui-1.8.20.js"></script>

<script src="/Scripts/kendo/kendo.web.min.js"></script>

<script src="/Scripts/kendo/kendo.aspnetmvc.min.js"></script>

<script>

//JQuery custom theme application

$(function () {

$("input[type=submit], a.button, button").button()

$('ul.sf-menu').superfish({

animation: { opacity: 'show', height: 'show' }, // fade-in and slide-down animation

speed: 'fast', // faster animation speed

autoArrows: true, // disable generation of arrow mark-up

dropShadows: true // disable drop shadows

});

</script>

</head>

<body>

<header>

<div class="content-wrapper">

<div class="float-left">

<p class="site-title"><a href="/CompanyMgmt/Home">OTIS</a></p>

</div>

<div class="float-right">

<section id="login">

Hello, <a class="username" href="/Account/UserProfile" title="Manage">chadr</a>!

<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="EHsDe8SgQElcRgrIcNq4uuC_Y8XexV-LUKiigBQGqQpjTHVVDvapFTB0W6sylMdJUAelKHrka6apyRxGy39CDJ4JUf_ae4rwGNxFR3aaXp81" /> <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>

</form>

</section>

</div>

<div class="float-right">

<nav>

<ul class="sf-menu sf-hover" id="menu">

<li><a href="/">Home</a></li>

<li><a href="#">Admin</a>

<ul>

<li><a href="/CompanyMgmt/ManageCompanies">Companies</a></li>

<li><a href="/CompanyMgmt/ManageLocations">Locations</a></li>

<li><a href="/CompanyMgmt/ManageCompanies/Kendo">Kendo Test</a></li>

</ul>

</li>

<li><a href="/Home/About">About</a></li>

<li><a href="/Home/Contact">Contact</a></li>

</ul>

</nav>

</div>

<div class="clear-fix"></div>

</header>

<div id="body">

<section class="content-wrapper main-content clear-fix">

<h2>Locations</h2>

<p>

<form action="/CompanyMgmt/ManageLocations" method="post"> <p>

Area: <select id="areaFilter" name="areaFilter"><option value=""></option>

<option>RECV</option>

<option>SHIP</option>

</select>

<input type="submit" value="Search"/>

<button onclick="filter()">Filter</button>

</p>

</form></p>

<hr />

<p>

<a class="button" href="/CompanyMgmt/ManageLocations/Edit">Create New</a>

</p>

<div class="k-widget k-grid" id="MVCClientBindGrid"><div class="k-toolbar k-grid-toolbar k-grid-top"><a class="k-grid-add k-button k-button-icontext " href="#_" onclick="addNew()"><span></span>Add</a></div><div class="k-grouping-header">Drag a column header and drop it here to group by that column</div><div class="k-grid-header"><div class="k-grid-header-wrap"><table cellspacing="0"><colgroup><col /><col /><col /><col /><col /><col /><col /><col /><col style="width:100px" /></colgroup><tr><th class="k-header k-filterable" data-field="DisplayLocation" data-title="Display Location" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=DisplayLocation-asc">Display Location</a></th><th class="k-header k-filterable" data-field="Area" data-title="Area" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Area-asc">Area</a></th><th class="k-header k-filterable" data-field="Zone" data-title="Zone" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Zone-asc">Zone</a></th><th class="k-header k-filterable" data-field="Aisle" data-title="Aisle" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Aisle-asc">Aisle</a></th><th class="k-header k-filterable" data-field="Bay" data-title="Bay" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Bay-asc">Bay</a></th><th class="k-header k-filterable" data-field="Level" data-title="Level" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Level-asc">Level</a></th><th class="k-header k-filterable" data-field="Position" data-title="Position" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Position-asc">Position</a></th><th class="k-header k-filterable" data-field="Barcode" data-title="Barcode" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="/CompanyMgmt/ManageLocations/KendoGrid?MVCClientBindGrid-sort=Barcode-asc">Barcode</a></th><th class="k-header" scope="col"><span class="k-link"> </span></th></tr></table></div></div><div class="k-grid-content" style="height:200px"><table cellspacing="0"><colgroup><col /><col /><col /><col /><col /><col /><col /><col /><col style="width:100px" /></colgroup><tbody><tr class="t-no-data"><td colspan="9"></td></tr></tbody></table></div><div class="k-pager-wrap k-grid-pager"><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the first page"><span class="k-icon k-i-seek-w">seek-w</span></a><a class="k-link k-state-disabled" data-page="0" href="#" title="Go to the previous page"><span class="k-icon k-i-arrow-w">arrow-w</span></a><ul class="k-pager-numbers k-reset"><li><span class="k-state-selected" data-page="1">1</span></li></ul><a class="k-link k-state-disabled" data-page="2" href="#" title="Go to the next page"><span class="k-icon k-i-arrow-e">arrow-e</span></a><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the last page"><span class="k-icon k-i-seek-e">seek-e</span></a><span class="k-pager-info k-label">0 - 0 of 0 items</span></div></div><script>

jQuery(function(){jQuery("#MVCClientBindGrid").kendoGrid({"columns":[{"title":"Display Location","field":"DisplayLocation","encoded":true},{"title":"Area","field":"Area","encoded":true},{"title":"Zone","field":"Zone","encoded":true},{"title":"Aisle","field":"Aisle","encoded":true},{"title":"Bay","field":"Bay","encoded":true},{"title":"Level","field":"Level","encoded":true},{"title":"Position","field":"Position","encoded":true},{"title":"Barcode","field":"Barcode","encoded":true},{"width":"100px","command":[{"name":"Details","buttonType":"ImageAndText","text":"Details","click":showDetails}]}],"groupable":{},"pageable":{"buttonCount":10},"sortable":true,"filterable":true,"toolbar":{"command":[{"name":null,"attr":" onclick=\"addNew()\" class=\"k-grid-add\"","buttonType":"ImageAndText","text":"Add"}]},"dataSource":{"transport":{"read":{"url":"/CompanyMgmt/ManageLocations/KendoGrid"}},"pageSize":10,"page":1,"total":0,"type":"aspnetmvc-ajax","schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"Id","fields":{"Id":{"type":"number"},"DisplayLocation":{"type":"string"},"Area":{"type":"string"},"Zone":{"type":"string"},"Aisle":{"type":"string"},"Bay":{"type":"string"},"Level":{"type":"string"},"Position":{"type":"string"},"Barcode":{"type":"string"}}}}}});});

</script>

<script type="text/javascript">

var detailsTemplate = kendo.template($("#template").html());

function showDetails(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

window.location.href = "/CompanyMgmt/ManageLocations/Edit" + "/" + dataItem.id;

}

function addNew() {

window.location.href = "/CompanyMgmt/ManageLocations/Edit";

}

function filter() {