Adding Kendo UI to an existing MVC 4 project - kendo-ui

I have a question about Kendo UI. I have an existing MVC4 project in which I wanted to use some of the Kendo extensions, namely the Editor. Currently the project uses jqWidgets as a UI framework.
I opened VS 2012, loaded the project and used the Telerik menu to add references to Kendo in the project. The wizard added all the necessary references and made changes to the web.config files. So far so good. However, I have two problems:
When I try to use the Kendo Html Helper I do not have intellisense and the Kendo is underlined saying that the HtmlHelper does not have a definition for 'Kendo'. I have <add namespace="Kendo.Mvc.UI" /> in both, my main web.config as well as in the web.config in the Views folder. Strangely enough, when I run the site, I do not get an error, but the editor does not load its initial content and if I try to interract with it, I get the following error: (my second question)
TypeError: invalid 'in' operand e - I am guessing that somewhere in the site, There is a conflict that couses this error, but I cannot find it. Here is how I load all the JS files in my _Layout.cshtml:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/Scripts/kendo/2013.2.918/kendo.all.min.js")
#Scripts.Render("~/Scripts/kendo/2013.2.918/kendo.aspnetmvc.min.js")
#Scripts.Render("~/Scripts/kendo.modernizr.custom.js")
I am not sure if the problems are related. My jQuery version is 1.9.1 and I am using the latest Kendo version (2013.2.918.340)
Any help would be greatly appreciated.
Here is how I use the editor in the View:
#(Html.Kendo().Editor()
.Name("editor")
.HtmlAttributes(new { style = "width: 700px; height: 400px" })
.Value(#<text>
<p>
Some text
</p>
</text>)
.ImageBrowser(imageBrowser => imageBrowser
.Image("~/Content/UserFiles/Images/{0}")
.Read("Read", "ImageBrowser")
.Create("Create", "ImageBrowser")
.Destroy("Destroy", "ImageBrowser")
.Upload("Upload", "ImageBrowser")
.Thumbnail("Thumbnail", "ImageBrowser"))
)

The solution to the first problem is to add namespace reference only to the web.config file in the Views folder. There is no need to add it to the root web.config. After that restart Visual Studio and reload your project. Everything should be fine and intellisense should work.
As for the second problem, this is hard to guess. Could you show your code where you are loading the contents into HTML editor?

Related

Blazor components - namespace move

I am experiencing problem in VS 2022 in Blazor complex project. After moving Blazor components to different namespace/folder the components are not functional any more. My component does not 'recognize' other Blazor components anymore. For example custom component MudTable from MudBlazor namespace:
I would like to be able move Blazor components easily as simple classes.
Sometimes it helps to specify the same namespace in razor file to match namespace in partial code behind class, but sometimes I end up creating component (razor and cs files) with different name (copying the same code). This is very time consuming. I am not able to reproduce the described bug in Simple Projects. I have tried to reproduce the issue but it works fine (with minor VS bug) as described below. I will keep trying to reproduce the issue on Sample project.
Please find below scenarios working fine:
Simple scenario working fine
Steps to reproduce the issue:
Create Blazor Server App
Create folders
Components
Components\Sub1
Components\Sub2
Add new Razor component e.g. MyComponent1.razor to folder Components\Sub1
Verify that <MyComponent1\> works on some page. Eg. add lines to Index.razor:
#using BlazorApp1.Components.Sub1
<MyComponent1 />
Move MyComponent1.razor to folder Components\Sub2
Update Index.razor:
#using BlazorApp1.Components.Sub2
<MyComponent1 />
It works fine
More complex scenario with minor bug
Create Blazor Server App
Create folders
Components
Components\Sub1
Components\Sub2
Add new Razor component e.g. MyComponent1.razor to folder Components\Sub1
Add behind the class to 'MyComponent1.razor.cs' to folder Components\Sub1:
using Microsoft.AspNetCore.Components;
namespace BlazorApp1.Components.Sub1
{
public partial class MyComponent1:ComponentBase
{
}
}
Verify that <MyComponent1\> works on some page. Eg. add lines to Index.razor:
#using BlazorApp1.Components.Sub1
<MyComponent1 />
Rename folder Components\Sub1 to Components\Sub1Renamed.
Visual studio does not display any error and project can be compiled/started. Code behind is even displayed 'linked' to razor file:
This seems as a VS bug to me.
When project is started Component1 is invisible on Index page, because component 'BlazorApp1.Components.Sub1.Component1has no visual code defined, because it has only non-visual definition 'behind the code'. The file 'Component1.razor' with visual is not used at all because it is in unused namespaceBlazorApp1.Components.Sub1Renamed`
Update Index.razor:
#using BlazorApp1.Components.Sub1Renamed
<MyComponent1 />
When project is started, Component1 is visible on Index page (but I assume that no code behind is processed)
Do you have any hint, how to make it work for blazor components ?

VS 2022, I can't drag and drop css file into a cshtml file

I am working with VS2022 ASP.NET Core 6 MVC.
I tried to drag & drop one CSS file from explorer to a .cshtml file.
It should be made automatically like this code the same way-VS 2019
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
But prohibition icon shown when I am trying the drag & drop operation.
I started again VS 2022 with Administrator permissions, but it's still the same situation.
Any idea?
Drag & Drop is not yet supported in LSP-based editors. You can refer to this article:
https://developercommunity.visualstudio.com/t/cant-drag-javascript-or-css-files-onto-an-html-pag/1526177
There is a work around suggested by Microsoft: Tools-->Options-->Text Editor-->HTML-->Advanced-->Use Legacy Razor Editor for Asp.NET (Yes) -->OK
The work around that used was to add a temporary .html page to the project. Drag the controls to this page and cut and past them to the .chtml. It's just an extra step but it works.

How do I use a custom CSS stylesheet for Telerik?

I'm using Telerik grids, and want to customize the CSS. I've used Telerik's stylebuilder but I don't know what to do with it once I download the zip. Telerik says that I should
Simply add the files from this archive to your project, and your custom skin is ready go.
But I have no idea where in the project to add them, or even how exactly this is done. I moved the CSS files into the stylesheets folder (I'm using MS Visual Studio 2010) and linked to them, but no dice.
I've also read through this this and this but am still thoroughly confused.
Try the following:
Export theme from style builder, example classic.zip.
Contents of classic.zip
Folder: classic
File: telerik.classic.css
Extract zip to your project's content folder, c:\path to your project\Content\
Modify your master page style sheet regsitrar to include telerik.classic.css instead of the supplied style sheets.
:
<%= Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group.Add("telerik.common.css")
.Add("telerik.classic.css"))
%>

How do I add Jquery VS intellisense reference to my view in VS 2010

I am trying to get Jquery intellisense working in Visual Studio 2010.
I've looked around on StackOverflow and tried adding this to my view:
#{
/// <reference path="/Scripts/jquery-1.5.1-vsdoc.js"/>
}
That's not working.. I've got it working by adding the same script tag to each view but this is less than ideal since i want to keep all my scripts in one place at the bottom of my layout page.
Add the <script> tags to each view inside an #if (false) { ... } block.
The IDE will still see them, and provide IntelliSense, but they won't do anything at runtime.

Visual Studio 10, JavaScript intellisense inside javascript.js file, and where is the MicrosoftAjax-vsdoc.js

I can get javascript intellisense going from and aspx or master page ie
<script src="../../Scripts/jquery-1.4.1-vsdoc.js"type="text/javascript"></script>
<script type="text/javascript">
$.isFunction(
</script>
gives me a drop down in vs2010.
I do all(most) of my js coding inside a js file.
How do I get intellisense drop downs inside js files ?
Also, is there a vsdoc for ms ajax (MicrosoftAjax-vsdoc.js) ?
At the top of your .js file add this:
/// <reference path="jquery-1.4.1.js" />
Or make the path relative, if it's not in the same directory, it'll look for the jquery-1.4.1-vsdoc.js when grabbing it for intellisense, any file you reference like this it'll look for the -vsdoc version if available. As a side note, jQuery 1.4.2 has additional bug fixes you should consider upgrading :)

Resources