How can i setup kendo ui with mvc4. I want use its themas and grid and all controls in my web application.
I have use http://demos.kendoui.com/themebuilder/web.html but how do i apply generated themas in my website. I am little bit confused with kendo, I am new with it. Please suggest me how can I configure kendo on mvc4 and use its all functionality.
Using : - MVC 4 , html 5 and c#
Thanks!!
How can i setup kendo ui with mvc4
In exactly the same way you would set it up with PHP. Or with a Java Servlet. KendoUI is a client side framework which is server side agnostic. It doesn't matter which server side technology you are using.
I want use its themas and grid and all controls in my web application.
Great, go ahead. Head over to the documentation, read it, roll up your sleeves and integrate into your application.
Create a new ASP.NET MVC 4 application using the Empty template
Add a HomeController to serve up a view:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
And of course a corresponding ~/Views/Home/Index.cshtml view:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="//cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css" />
</head>
<body>
<input id="dropDownList" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script type="text/javascript">
$("#dropDownList").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Item1", value: "1" },
{ text: "Item2", value: "2" }
]
});
</script>
</body>
</html>
As you can see there's absolutely nothing MVC specific here. You could have served this markup from any server side framework. All you need is pick a theme, reference it from the Kendo CDN, reference the Kendo scripts at the end of your DOM from the CDN and start playing with it.
But the most important thing if you want to have some progress is to RTFM where the guys from Telerik (and colleagues of mine) have spent a lot of time to documenting everything you need to know.
There is a tutorial on the Kendo Docs site that will walk you through it step by step.
Hello Kendo UI - Add Kendo UI
and
Kendo Music Store - Project Setup
Related
I was following the section "How do I use a web component?" from
What are web components?
end very soon I realized that node and npm it's a must. On top of that you have to run node to serve it.
Code
<html>
<head>
<script type="module" src="node_modules/#polymer/paper-button/paper-button.js"></script>
</head>
<body>
<paper-button raised class="indigo">raised</paper-button>
</body>
</html>
What is the simplest - no node - way to run this simple web component?
Disregard everything "Polymer",
better yet... burn it down, throw your coffee over every monitor you see that title.
It was based on the V0 implementation of Web Components;
which basically was Google's lets-throw-something-at-the-wall-and-see-if-other-vendors-adopt-it attempt at forcing Web Components on us.
That whole V0 era is what gave "Web Components" a bad reputation, and catchy blog titles like
"The Broken Promise of Web Components"
(but everyone involved learned what not to do)
Since years, all Browsers vendors work together on V1
Web Components run in all modern Browsers.. period.. so all you need is a Browser..
no built steps.. no bundlers.. no parcel.. no Svelte-compiler... no Rome... no fuss
Use any online editor like JSFiddle or CodePen, or your own IDE, or use your F12 Sources panel
and with a few lines of code you are started
<my-component name="Alex"></my-component>
<script>
customElements.define("my-component", class extends HTMLElement {
connectedCallback() {
this.innerHTML = `<h2>${this.getAttribute("name")} his very first Custom Element!</h2>`;
}
});
</script>
The 3 distinct (each can be used without the other) technologies making up "Web Components" help you built more complex Components
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Soon you will read about Lit and Hybrids and Stencil and uCe, and all types of tools that make developing Web Components "easier"...
They are just that... tools; You pick one or two once you fully understand the technology
The simplest way would probably be to just include the script via a CDN like UNPKG https://unpkg.com/.
<html>
<head>
<script
type="module"
src="https://unpkg.com/#polymer/paper-button#3.0.1/paper-button.js?module"></script>
</head>
<body>
<paper-button raised class="indigo">raised</paper-button>
</body>
</html>
I want to use Material Design Component: Lists into my Progressive Web App Starter Kit.
So...
npm install #material/list
Now what?
All I can think to do is
import { MDCList } from '#material/list/dist/mdc.list.css'
or
<link rel="stylesheet" href="/node_modules/#material/list/dist/mdc.list.css"/>
Both produce errors. What should I do?
You can download the materialize css and js files at keep it at the root level of the project folder
then in the app.js (your entry point file)
html`
<link rel="stylesheet" href="./styles/materialize.min.css" />
<script type="text/javascript" src="./js/materialize.min.js"></script>
<div> Your content here..</div>
`
give the path according to the folder you have created
I have recently made a chat bot and am seeking to further edit the components of the interface by adding a minimizing button and an anchor so that the Chatbot is statically secured to the bottom right of the page (which is the most common area). This is made with the Azure QnA framework, so I'm not sure how much I can really edit..
Is there any way that I can access the code so that I can minimize the chat bot or add a button?
I will show a photo to make things more clear: minimizing image
The webchat interface that you are using is coming from Microsoft GitHub's project named BotFramework-WebChat available here.
If you look at the documentation provided on GitHub's main page, you will see that you have several ways of implementing your webchat on your website, from the easiest iframe inclusion to more detailed solutions.
If you want to customize your interface, I would suggest an implementation like the following in your hosting page code:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
BotChat.App({
directLine: { secret: direct_line_secret },
user: { id: 'userid' },
bot: { id: 'botid' },
resize: 'detect'
}, document.getElementById("bot"));
</script>
</body>
</html>
Here you are declaring the chat and using js and css files from the CDN.
All the code for the webchat component is in the js, so you should get it, make your customization and host it on your side to have what you want.
From the CDN it is minified, but you can rebuild the file using the process described here: https://github.com/Microsoft/BotFramework-WebChat#building-web-chat
For example an interface that we made from those sources:
For this example, we have customized the header in js to :
add 1 button to maximize
add 1 button to close
Then the image of the buttons is made with CSS
We are trying to build a sample application with asp.net MVC using office ui fabric react. Followed the the below steps from node js command prompt as mentioned here.
By following the steps I could get the normal react sample working. I tried to add the fabric UI label code as given below in index.tsx file and then running the application, but fabric react label component is not getting rendered in the browser.
index.tsx code:
/* tslint:disable:no-unused-variable */
import * as React from 'react';
/* tslint:enable:no-unused-variable */
import { Label } from 'office-ui-fabric-react/lib/Label';
export const LabelBasicExample = () => (
<div>
<Label>I'm a Label</Label>
<Label disabled={ true }>I'm a disabled Label</Label>
<Label required={ true }>I'm a required Label</Label>
</div>
);
After adding this code ran webpack from nodejs command prompt and then tried browsing my index.html which has the below code. But could not see the react component getting rendered and neither I get any error.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>
Can someone help here on is there any additional step that I am missing here or guide me to have the fabric react component working with asp.net.
Thanks
I've started learning Meteor.js and it seems fabulous for single page app. But I only know how to create one page for the entire site.
How can I add a static page to http://domain.com and have my Meteor app run at http://domain.com/app? For your solution, will your page actually change when you go to domain.com/app from domain.com?
Check out meteor-router. It lets you assign routes to templates.
If you dont mind calling a html file you can have static pages in /public. This probably wont work for you, because your page probably isnt actually a "static" page. This would be accessed at http://mydomain.com/index.html .
eg,
/public/index.html :
<html>
<head>
<link href="/public/index.css rel="stylesheet">
</head>
<body>
<h1 class="something"> I am a web page </h1>
</body>
</html>