Telerik Forums
UI for ASP.NET MVC Forum
3 answers
426 views
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.
Daniel
Telerik team
 answered on 25 Nov 2013
1 answer
167 views
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
Petur Subev
Telerik team
 answered on 25 Nov 2013
1 answer
579 views
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

Rosen
Telerik team
 answered on 25 Nov 2013
1 answer
273 views
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
Dimiter Madjarov
Telerik team
 answered on 25 Nov 2013
1 answer
236 views
Hi,

Attended your webinar yesterday and they said that the new responsive controls would integrate perfectly with bootstrap 3. I was just wondering, I actually started a new Asp.net mvc project with the bootstrap 3 template last friday, and integrated KendoUI with it. I found it to be a bit of a hassle because of the different jquery version. Boostrap is currently at jquery-2.0.3 whereas my current Kendo version is at jquery-1.9.1.
What is the best practice when including these files in the master _Layout.cshtml file? Luckily, Bootstrap 3 is backwards compatible down to jquery-1.9.0. Will the new responsive version ship with a newer jquery version?
Alex Gyoshev
Telerik team
 answered on 25 Nov 2013
2 answers
175 views
If I have a parent menu item which has a child menu item that points to an action, the action has an access control that is the user needs to have certain role. As Kendo documentation says, if the user doesn't have that role, the menu will automatically not show. My question is: I understand the child menu item will not show; what about the parent menu? Will it still show or not?

Thanks.
Y.L.
Top achievements
Rank 1
 answered on 22 Nov 2013
1 answer
390 views
Hi,
I've been trying out the new Map widget and, whilst the map displays fine, I can't seem to get any markers to display on the map.

I've used the MVC Wrapper markup below (based on the GeoJSON example on your demos web page). I've tried to figure out the correct configuration  for adding a single test marker but, as I say, nothing shows up. Are markers supported in the beta version or can you see anything wrong in my markup?

@(Html.Kendo().Map()
.Name("map")
.Center(37.5, 110)
.Zoom(3.4)
.Layers(layers => {
layers.Add()
.Style(style => style.Fill(fill => fill.Opacity(0.7)))
.Type(MapLayerType.Shape)
.DataSource(dataSource => dataSource
.GeoJson()
.Read(read => read.Url(Url.Content("~/Content/Countries.json")))
);
})
.Events(events => events
.ShapeCreated("onShapeCreated")
.ShapeMouseEnter("onShapeMouseEnter")
.ShapeMouseLeave("onShapeMouseLeave")
.ShapeClick("onShapeClick")
)
.Markers(markers => {
markers.Add()
.Shape(MapMarkerShape.Circle)
.Position(37.1, 110.1)
.Size(20)
.Color("Red");
})
)

Thanks, Ian
Hristo Germanov
Telerik team
 answered on 22 Nov 2013
1 answer
271 views
I'm currently working on converting a Silverlight project into an MVC project.  
I'm working on a grid where the number of columns and the names of the columns are not known at design-time.  
Each column in the grid, other than the first one, should contain a checkbox.  I'd like each checkbox to be incell editable with a batch save option.
A screenshot of the current Silverlight version is attached.

I'm having a lot of difficulty getting this to work.  I tried a few different ways by using examples found in this forum.  
http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/kendo-mvc-grid---data-binding-to-dynamic-object-model.aspx

So, my question is, is there a way to make a grid truly dynamic that also works with batch/incell editing?

Thanks.

Daniel
Telerik team
 answered on 22 Nov 2013
1 answer
81 views
Hi,

I am turning on Mobile.Phone mode in MVC web application. (trying Adaptive Widgets)
The javascript error e._addUserEvents occurred when navigate between view especially in Day and Week view. Month and Agenda view no error.
The scheduler is read only.

How to solve the issue, kindly assists.

Kendo UI Complete v2013.3.1119
MVC 4.0

jquery-2.0.3.js
kendo.all.min.js
kendo.aspnetmvc.min.js
kendo.common-bootstrap.min.css
kendo.mobile.common.min.css
kendo.bootstrap.min.css
Rosen
Telerik team
 answered on 22 Nov 2013
1 answer
139 views
If I used a LINQ join that returns anonymous objects, in the manner found in

http://stackoverflow.com/questions/5808116/linq-how-to-do-join-using-the-linq-extension-method-style-on-multiple-fields

How could I set that as my grid's model?
@(Html.Kendo().Grid<*what do I put here?*>()
      .Name("grid")
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .Read(read => read.Action(...)
       )
    ...more configs...
)
Petur Subev
Telerik team
 answered on 22 Nov 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?