Questions on UI for ASP.NET MVC Forum

1 answer

101 views

Scroll bar in menu after update 2013.3.1119

Hi,

This is probably a very easy answer but after the update to 2013.3.1119 the menu is rendering a horizontal and vertical scroll bar on each child menu item and the width of the child menu is locked to the top menu item. All the top menu items looks fine. If the child menu has an inner child menu item the menu also rendered correctly. We are stuck on IE8 at the moment. Any ideas how this can be corrected?

Rob

Menu

answered on 27 Nov 2013

5 answers

727 views

Problems when creating a kendo mvc project with VS extension

Hi!

I am trying to start a kendo mvc project with VS extension. However, when I use the wizard, it fails and I get this error:

An error occured while running the wizard.

Error executing custom action Telerik.KendoUI.Mvc.VSX.Actions.CopyResourcesAction: System.IO.FileLoadException: Could not load file or assembly 'Kendo.Mvc, Version=2013.2.716.340, Culture=neutral, PublicKeyToken=121fae78165ba3d4' or one of its dependencies. The keyset is not defined. (Exception from HRESULT: 0x80090019)
File name: 'Kendo.Mvc, Version=2013.2.716.340, Culture=neutral, PublicKeyToken=121fae78165ba3d4' ---> System.Runtime.InteropServices.COMException (0x80090019): The keyset is not defined. (Exception from HRESULT: 0x80090019)
at System.Reflection.RuntimeAssembly._nLoad(AssemblyName fileName, String codeBase, Evidence assemblySecurity, RuntimeAssembly locationHint, StackCrawlMark& stackMark, IntPtr pPrivHostBinder, Boolean throwOnFileNotFound, Boolean forIntrospection, Boolean suppressSecurityChecks)
at System.Reflection.RuntimeAssembly.nLoad(AssemblyName fileName, String codeBase, Evidence assemblySecurity, RuntimeAssembly locationHint, StackCrawlMark& stackMark, IntPtr pPrivHostBinder, Boolean throwOnFileNotFound, Boolean forIntrospection, Boolean suppressSecurityChecks)
at System.Reflection.RuntimeAssembly.InternalLoadAssemblyName(AssemblyName assemblyRef, Evidence assemblySecurity, RuntimeAssembly reqAssembly, StackCrawlMark& stackMark, IntPtr pPrivHostBinder, Boolean throwOnFileNotFound, Boolean forIntrospection, Boolean suppressSecurityChecks)
at System.Reflection.RuntimeAssembly.InternalLoadFrom(String assemblyFile, Evidence securityEvidence, Byte[] hashValue, AssemblyHashAlgorithm hashAlgorithm, Boolean forIntrospection, Boolean suppressSecurityChecks, StackCrawlMark& stackMark)
at System.Reflection.Assembly.LoadFrom(String assemblyFile)
at Telerik.KendoUI.Mvc.VSX.Actions.CopyResourcesAction.GetKendoVersionedFolder(String mainAssemblyLoadInfo)
at Telerik.KendoUI.Mvc.VSX.Actions.CopyResourcesAction.ModifyResources()
at Telerik.KendoUI.Mvc.VSX.Actions.CopyResourcesAction.Execute(WizardContext wizardContext, IPropertyDataDictionary arguments, IProjectWrap project)
at Telerik.VSX.Actions.ProjectActionBase.Execute(WizardContext wizardContext, IPropertyDataDictionary arguments)
at Telerik.VSX.WizardEngine.Actions.ActionBase.Telerik.WizardFramework.IAction.Execute(IWizardContext wizardContext, IPropertyDataDictionary arguments)
at Telerik.VSX.WizardEngine.ActionManager.ExecActions()

Does anyone know what it is happening?

Thanks!

Installer and VS Extensions

answered on 26 Nov 2013

5 answers

1.5K+ views

Access hidden field from parial view in grid editortemplate

I've got a view with a kendo grid on it. Above that I have a partial view that loads a value and stores it in a hidden. I need to be able to pass the value of this hidden field to the get, add, update, and delete methods of the grid preferably without having to load the grid via jquery (if possible).

Or is there a way that the hidden field on the view could be accessible or passed to the editortemplate for the grid so that I can make it part of the view model when a row is added or updated?

Here is the main view:

@model IEnumerable<PASSAdmin.ViewModels.UserFacilityAdmin.ProposalTypeViewModel>

@{

ViewBag.Title = "Proposal Types";

}

<h2>Proposal Types</h2>

@Html.Partial("_LastViewedUserFacility")

@{

Html.Kendo().Grid(Model)

.Name("gridProposalTypes")

.Columns(columns =>

{

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

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

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

columns.Bound(o => o.Technique_Selection_Count).Title("# Techniques");

columns.Bound(o => o.Resource_Selection_Count).Title("# Resources");

columns.Bound(o => o.Selection_Order).Title("Selection Order");

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

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

})

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

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("UserFacilityAdmin/ProposalType").Window(window => window.Width(400)))

.Pageable()

.Sortable()

.DataSource(dataSource => dataSource

.Server()

.Model(model => model.Id(o => o.ID))

.Create(create => create.Action("AddProposalType", "UserFacilityAdmin"))

.Read(read => read.Action("ProposalTypes", "UserFacilityAdmin"))

.Update(update => update.Action("UpdateProposalType", "UserFacilityAdmin"))

.Destroy(destroy => destroy.Action("DeleteProposalType", "UserFacilityAdmin"))

)

.Render();

}

Here is the partial view loaded above the grid:

<p>User Facility: <span id="userfacility"></span></p>

<input type="hidden" name="User_Facility_ID" id="User_Facility_ID" />

<script type="text/javascript">

$(document).ready(function () {

$.post('/Search/GetLastViewedUserFacilityID', function (data) {

$("#userfacility").html(data);

$("#User_Facility_ID").val(data);

});

</script>

The "User_Facility_ID" is the value I need when doing the get, add, update, and delete for the grid.

Grid

answered on 26 Nov 2013

3 answers

200 views

ViewModel with Kendo MVC widgets

On a ASP.NET MVC UI, I need to expose multiple input controls (list, multiselect, date controls) on the top and a grid in the bottom.
The grid will be filtered based upon the values selected (with list selection resulting in OR condition, multi-select selections resulting in AND condition and so on) and with their own column filters
I am currently writing a Big ViewModel which will have a collection of the list, multi-select items and then a collection to support grid rows which change according to the filters above.
On a submit button, all the filters (from the list/multiselect controls + the grid column filters) should all filter the grid rows at once.
All my UI widgets are Kendo UI widgets. I am using the MVC wrapper.
Question is : Where do I store the selections the user makes ? I don't want to use any comma-separated logic. I want the VM to be filled with actual selections on post so that I apply the filters on the grid and return the JSONresult?

I am just not able to get the ViewModel and view synced properly.

General Discussions

answered on 26 Nov 2013

2 answers

65 views

How to reference controls on pop-up editor

I want to implement a custom routine that is triggered by a button on a pop-up editor, from a grid.

The routine needs to be passed values that the user has entered into the form (but before the form has been submitted) . How can I obtain these values from a function called from a buttons onclick handler?

I know that its possible to reference controls from the grids edit event, using the e.container object, but how do I do this outside of the edit event?

e.g:- I have a text box defined:-

<p> <span class="fieldlabel2">

Target Table:

</span>

@Html.TextBoxFor(c => c.TargetTable, new { style = "width:200px", Maxlength = 50 })

@Html.ValidationMessageFor(c => c.TargetTable)

</p>

How can I get the value typed into this from a function (not the edit event handler)?

Grid

answered on 26 Nov 2013

1 answer

98 views

Drag and Drop from 1 Listview ot Another - Tablet.

I am doing drag and drop from one listview to another and everything is working great except on a tablet - the drop point seems to not work correctly (wrong x,y coordinates?)

I am not using the Kendo mobile listview - it's a std kendo mvc listview.

On desktops - the drop is great.

Any info on this?

Thanks,

Rene.

ListView

answered on 26 Nov 2013

3 answers

410 views

Help! Dynamically-built multi-level menus don't display well

I built a multi-level vertical menus on a menu partial view.

@using Kendo.Mvc.UI.Fluent

@using MyModels;

@functions{

public void addChildren(MenuItemBuilder builder, AppMainMenu item, IEnumerable<MyMenuStructure> items)

{

var children = items.Where(m => m.ParentMenuID == item.MenuID);

if (children != null)

{

builder.Items(menuItems =>

{

foreach (var child in children)

{

var menuItem = menuItems.Add().Text(child.Name);

menuItem.Action(child.Action, child.Controller);

}

addChildren(menuItem, child, items);

}

);

}

@(Html.Kendo().Menu()

.Name("menu")

.Items(menu => {

using (PCSContext pcscontext = new PCSContext())

{

var menus = got my menu structures;

foreach (var item in menus.Where(m=> m.ParentMenuID == null))

{

var builder = menu.Add().Text(item.Name);

builder.Action(item.Action, item.ControllerName);

addChildren(builder, item, menus);

}

)

On my layou view I set it like this:

Html.Partial("~/Views/Shared/_MyMenu.cshtml");

<script>

$("#menu").kendoMenu({

animation: { open: { effects: "fadeIn" } },

orientation: "vertical",

direction: "left"

});

</script>

I got the below errors:

0x800a01b6 - Microsoft JScript runtime error: Object doesn't support property or method 'kendoMenu' at the line of:
<ul class="k-widget k-reset k-header k-menu" id="menu"><li class="k-item k-state-highlight k-state-default"><a class="k-link" href...">Home</a></li><li class="k-item k-state-default"><span class="k-link">My Account</span></li><li class="k-item k-state-default"><span class="k-link">Admin<span class="k-icon k-i-arrow-s"></span></span><ul class="k-group"><li class="k-item k-state-default"><a class="k-link" href...">User Management</a></li></ul></li><li class="k-item k-state-default"><a class="k-link" href="...">About</a></li></ul><script>
jQuery(function(){jQuery("#menu").kendoMenu({});});
</script>

I have include the scripts in my layout:
<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/kendo")
@Scripts.Render("~/bundles/kendo")
I created those bundles in bundle configuration. What do I miss then?

And my menus look weird(see the attached file) after choosing "continue" after the above error(I'm using MVC4 and latest kendo complete for ASP.NET MVC).
1. Two look greyed out and two look enabled, but if click it does take you to the destination.
2. The popup submenu has a space between popup and the parent menu.
3. The menu is in an splitter pane. After collapse the pane and re-expand it, the popup doesn't show. You can see there appears a horizontal scrollbar instead in the pane.

How can I make all the menus look "not greyed"? How to get rid of the space? How to keep same after re-expand after collapse the splitter pane? I also don't like the little white rectangle and dark-grey rectangle shown on the screen at the corner of the menu item. How to make it look like the kendo demo?

I have tried couple of days trying to solve the above issues, but it didn't work.

Thanks.

Menu

answered on 25 Nov 2013

1 answer

156 views

Basic styling not working (MVC4/5) when using Html Helpers

Hi,
I am just getting started with Kendo UI and am having trouble getting the Inline-Editing of a Grid to render properly when using the Html Helper (Html.Kendo().Grid<>()). Kendo seems to interfere with the default MVC 4 and MVC 5 styles even when I have a fresh "Kendo UI C#" project created right out of the box.

I am tempted to give up on the Html Helpers all together and use the JS only route using Json calls for every data load etc, but it seems I would have to do quite a bit more work.

I have attached a screenshot that shows the styling issues I mean. For instance all textboxes are 300px wide (which I believe is the MVC template default). How have you worked around this?

@(Html.Kendo().Grid<KendoUIMvcApplication1.Models.MyEntity>(Model)

.Name("DefaultGrid").Editable()

.Columns( columns =>

{

columns.AutoGenerate(true);

columns.Command(command =>

{

command.Edit();

});

})

.DataSource(dataSource => dataSource

.Server()

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

.Create("Create", "Home")

.Update("Update", "Home")

.Destroy("Delete", "Home"))

);

Thanks,
Matt

Grid

answered on 25 Nov 2013

1 answer

551 views

Read-only scheduler

Hi!

I'm trying to make a scheduler read-only by setting scheduler.options.editable = false. This prevents users from creating new events, from double-clicking to get the editor, and from resizing events. However, they are still able to MOVE events.

How can I disable that as well, and thus make the scheduler truly read-only?

Best regards,
Gunnar Sylthe

Scheduler

answered on 25 Nov 2013

1 answer

259 views

Upload not taking the full path but only the filename in Imagebrowser

Hi,

I am using the image browser to upload images to FTP server(we are using Akamai FTP). I have written a process whereby the file is uploaded,and the MVC controller uploads and saves the image in my FTP specified location with the same name with which is is uploaded as. It then returns the JSON result with that name of the image. I have checked the sample "KendoEditorImageBrowser" given by your team but this process is working perfectly on a local machine. However, for FTP server or for other locations the image was uploaded, but the thumbnail keeps on rotating.

While debugging the code I found that the Thumbnail is getting called with only the file name but not the path with Which I call or in which the file is located(I have provided the path location in code) which is of no help for me.

But when I close and reopen my Image Browser the image is getting loaded correctly. I am using the latest Kendo UI version

This is my Controller code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using MarketingAdvocate.Admin.Controllers.Base;
using MarketingAdvocate.Admin.Models.CampaignDetail;
using System.IO;
using MarketingAdvocate.Utility.Common;
using System.Web;
using System.Web.Mvc;
using System.Net;

namespace MarketingAdvocate.Admin.Controllers
{
public class ImageBrowserController:BaseController
{
private const string prettyName = "Images/";
private const string DefaultFilter = "*.png,*.gif,*.jpg,*.jpeg";

private const int ThumbnailHeight = 80;
private const int ThumbnailWidth = 80;

private readonly DirectoryBrowser directoryBrowser;
private readonly ThumbnailCreator thumbnailCreator;

public ImageBrowserController()
{
directoryBrowser = new DirectoryBrowser();
thumbnailCreator = new ThumbnailCreator();
}

/// <summary>
/// Upload
/// </summary>
/// <param name="file"></param>
/// <returns></returns>
[AcceptVerbs(HttpVerbs.Post)]
public virtual ActionResult Upload(string path,HttpPostedFileBase file)
{

Utility.Business.Client.Client client = new Utility.Business.Client.Client(ClientId);
Utility.Business.Client.SiteSection siteSection = new Utility.Business.Client.SiteSection(SiteSectionId);

Utility.Business.FTPUpload ftpUpload = new Utility.Business.FTPUpload();
var fullclient = client.ClientId + "_" + client.FolderForAkamai;
var fullsitesection = siteSection.SiteSectionId + "_" + siteSection.FolderForAkamai;
var destination = "/Clients/" + fullclient + "/" + fullsitesection + "/" + "Email" + "/" + "Images" + "/" + "Test" + "/";
var fileLenght = 0;
if ((string.IsNullOrEmpty(path)) || (path == "/"))
{
path = destination;
}
var source = string.Empty;
Random rnd = new Random();
var uploadFirstImages = file;
if (uploadFirstImages != null && uploadFirstImages.ContentLength > 0)
{
source = uploadFirstImages.FileName.Replace("/", "\\");

if (source.IndexOf("\\") != -1)
{
source = source.Substring(source.LastIndexOf("\\") + 1);
}

while (ftpUpload.FileExist(source, destination))
{
source = rnd.Next(0, 1000).ToString() + "|" + source;
}
var fileInputStream = uploadFirstImages.InputStream;
ftpUpload.CopyFile(source, fileLenght, fileInputStream, path);

}

return Json(new
{
size = file.ContentLength,
name = ""http://url here" + path + file.FileName,
type = "f"
}, "text/plain");

}

/// <summary>
/// Read
/// </summary>
/// <returns></returns>
public virtual JsonResult Read(string path)
{

Utility.Business.Client.Client client = new Utility.Business.Client.Client(ClientId);
Utility.Business.Client.SiteSection siteSection = new Utility.Business.Client.SiteSection(SiteSectionId);
var fullclient = client.ClientId + "_" + client.FolderForAkamai;
var fullsitesection = siteSection.SiteSectionId + "_" + siteSection.FolderForAkamai;
var destination = "/Clients/" + fullclient + "/" + fullsitesection + "/" + "Email" + "/" + "Images" + "/" + "Test/";

if ((string.IsNullOrEmpty(path)) || (path == "/"))
{
path = destination;
}
directoryBrowser.Server = Server;

var result = directoryBrowser
.GetContent(path, DefaultFilter)
.Select(f => new
{
name = "http:url here" + path + f.Name,
type = f.Type == EntryType.File ? "f" : "d",
size = f.Size
});

return Json(result, JsonRequestBehavior.AllowGet);

//return Json(destination);

}

[OutputCache(Duration = 3600, VaryByParam = "path")]
public virtual ActionResult Thumbnail(string path)
{

return CreateThumbnail(path);

}

private FileContentResult CreateThumbnail(string physicalPath)
{
WebClient client = new WebClient();
Stream stream = client.OpenRead(physicalPath);
using (var fileStream = stream)
{
var desiredSize = new ImageSize
{
Width = ThumbnailWidth,
Height = ThumbnailHeight
};

const string contentType = "image/png";

return File(thumbnailCreator.Create(fileStream, desiredSize, contentType), contentType);
}
}

[AcceptVerbs(HttpVerbs.Post)]
public virtual ActionResult Create(string path, FileBrowserEntry entry)
{
var name = entry.Name;

Utility.Business.Client.Client client = new Utility.Business.Client.Client(ClientId);
Utility.Business.Client.SiteSection siteSection = new Utility.Business.Client.SiteSection(SiteSectionId);
var fullclient = client.ClientId + "_" + client.FolderForAkamai;
var fullsitesection = siteSection.SiteSectionId + "_" + siteSection.FolderForAkamai;
var destination = "/Clients/" + fullclient + "/" + fullsitesection + "/" + "Email" + "/" + "Images" + "/" + "Test/";
Utility.Business.FTPUpload ftpUpload = new Utility.Business.FTPUpload();
ftpUpload.CreateFTPDirectory(destination);
return Json(null);
}

[OutputCache(Duration = 360, VaryByParam = "path")]
public ActionResult Image(string path)
{

Utility.Business.Client.Client client = new Utility.Business.Client.Client(ClientId);
Utility.Business.Client.SiteSection siteSection = new Utility.Business.Client.SiteSection(SiteSectionId);
var fullclient = client.ClientId + "_" + client.FolderForAkamai;
var fullsitesection = siteSection.SiteSectionId + "_" + siteSection.FolderForAkamai;
var destination = "/Clients/" + fullclient + "/" + fullsitesection + "/" + "Email" + "/" + "Images" + "/" + "Test/";
WebClient url = new WebClient();
var physicalPath = "http://qa.cdn.marketingadvocate.net" + destination + path;
Stream stream = url.OpenRead(physicalPath);
//var physicalPath = Server.MapPath(path);

const string contentType = "image/png";
return File(stream, contentType);

}

}
}

This is my view:
</div>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css"
rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css"
rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css"
rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.timezones.min.js"></script>
@(Html.Kendo().Editor()
.Name("editor")
.HtmlAttributes(new { style = "width: 585px;height:400px" })
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.InsertUnorderedList().InsertOrderedList()
.Outdent().Indent()
.CreateLink().Unlink()
.InsertImage()
.SubScript()
.SuperScript()
.TableEditing()
.ViewHtml()
.Formatting()
.FontName()
.FontSize()
.FontColor().BackColor()

)

.Value(@<text>
</text>)
.ImageBrowser(ImageBrowser => ImageBrowser
.Upload("Upload", "ImageBrowser")
.Read("Read", "ImageBrowser")
.Create("Create", "ImageBrowser")
.Thumbnail("Thumbnail", "ImageBrowser")
)

)

Thanks

Upload

answered on 25 Nov 2013