I'm starting developing in HTML and I'm trying to use the Kendo UI framework in ASP.NET MVC.
I started with this tutorial: Entity Framework 5.x – Database First Workflow
With this I was able to create a Web Page that show me a table with data from a database.
But now I want to style de table with Kendo UI widgets (Grid). To do that I followed this video: Using KendoUI Grids on ASP.Net MVC - Tutorial 1 (until 4:37min)
The steps that I made so far:
Download trial version of Kendo UI Complete for ASP.NET MVC
Copy kendo.default.min.css and kendo.common.min.css files from the downloaded folder to the Content folder in my Visual Studio project
Copy kendo.all.min.js file from the downloaded folder to the Scripts folder
Changed the View with the following code:
#model IEnumerable<DatabaseFirst.Models.Artesano>
#{
ViewBag.Title = "Index";
}
<link href="#Url.Content("~/Content/kendo.common.min.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/kendo.default.min.css")" rel="stylesheet" />
<script src="#Url.Content("~/Scripts/kendo.all.min.js")" type="text/javascript" ></script>
<script type="text/javascript">
$(function () {
$("#artesanos-grid").kendoGrid();
});
</script>
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table id="artesanos-grid">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.RFC)
</th>
<th>
#Html.DisplayNameFor(model => model.RazonSocial)
</th>
<th>
#Html.DisplayNameFor(model => model.Telefonos)
</th>
<th>
#Html.DisplayNameFor(model => model.Fax)
</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.RFC)
</td>
<td>
#Html.DisplayFor(modelItem => item.RazonSocial)
</td>
<td>
#Html.DisplayFor(modelItem => item.Telefonos)
</td>
<td>
#Html.DisplayFor(modelItem => item.Fax)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.RFC }) |
#Html.ActionLink("Details", "Details", new { id=item.RFC }) |
#Html.ActionLink("Delete", "Delete", new { id=item.RFC })
</td>
</tr>
}
</tbody>
</table>
But when I run the page, no changes are made to the grid...
What am I missing?
PS:
The source code of the loaded page is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<link href="/Content/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo.default.min.css" rel="stylesheet" />
<script src="/Scripts/kendo.all.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function () {
$("#artesanos-grid").kendoGrid();
});
</script>
<h2>Index</h2>
<p>
Create New
</p>
<table id="artesanos-grid">
<thead>
<tr>
<th>
RFC
</th>
<th>
RazonSocial
</th>
<th>
Telefonos
</th>
<th>
Fax
</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
325
</td>
<td>
sdfwef
</td>
<td>
wetfgvs
</td>
<td>
sdfsdgs
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>
2
</td>
<td>
weg
</td>
<td>
asdgweg
</td>
<td>
dsg
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>
235423
</td>
<td>
sdga
</td>
<td>
et
</td>
<td>
wefwf
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>
23
</td>
<td>
wq
</td>
<td>
sasdga
</td>
<td>
aegweg
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
</tbody>
</table>
<script src="/Scripts/jquery-1.8.2.js"></script>
</body>
</html>
My problem was in the Views/Shared/_Layout.cshtml:
The file was generated like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
So I changed to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
(I put the #Scripts.Render("~/bundles/jquery") at the header)
The problem is now solved.
Related
I'm setting up my first DataTables page and although the table displays and is formatted, most additional elements are missing (sort cols, search, next/previous...).
I have checked the docs, followed tutorials but am still stuck and all I can find is an unintelligible error in the browserś (Chrome) browser.
My HTML file (gets data from a jinja template):
<head>
<title>Test DataTable</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</head>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>{{_('Prod Code')}}</></th>
<th>{{_('Description')}}</th>
<th>{{_('Units')}}</th>
<th>{{_('Category')}}</th>
<th></th>
</tr>
</thead>
<tbody>
{% for each_product in products %}
<tr>
<td> {{ each_product.prod_code }} </a></td>
<td> {{ each_product.prod_desc }} </td>
<td> {{ each_product.prod_units }} </td>
<td> {{ each_product.prod_Category }} </td>
</tr>
{% endfor %}
</tbody>
</table>
Below is the screenshot of the page in the browser. The rows change to light grey when I hover over them.
And here is the screenshot from the error in the browser's console:
Any ideas what I'm missing?
Thanks!
Please find my code which intents to develop a Form. Help me in understanding why the CheckBox and NumberSpinner are rendered as TextFields.
I have imported all the required classes and dojo config attribute is configured properly
<%# taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%# taglib prefix="fmt" uri=`enter code here`"http://java.sun.com/jstl/fmt" %>
<%#include file="/webclient/admin/jspf/NotificationOperations.jspf" %>
<!-- load dojo and provide config via data attribute -->
<script type="text/javascript" src="/webclient/map/js/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
<script>
require([
"dojo/parser",
"dijit/form/CheckBox",
"dijit/form/NumberSpinner",
"dojo/domReady!"
], function(parser){
parser.parse();
});
</script>
<%#include file="/webclient/common/jspf/jsUtility.jspf" %>
<html>
<head>
<body class="claro">
<style>
#import "/webclient/common/js/dojo/dgrid/css/skins/claro.css";
h2 {
margin: 12px;
}
.heading {
font-weight: bold;
padding-bottom: 0.25em;
}
.ui-widget{
margin: 10px;
}
</style>
<table width="100%" height="100%">
<tr><td>
<div id="DomainMapContainer" >
<tr class="spacer"><td> </td></tr>
<tr><td>
<form id="addProfile" data-dojo-type="dijit/form/Form" data-dojo-props='encType:"multipart/form-data", action:"/prov/createRFC2544TestProfile.do?action=createRFC2544TestProfile", method:"POST", target:"formSubmitIframe"'>
<table>
<tr>
<td><label for="profileName">Profile Name</label></td>
<td>
<input data-dojo-type="dijit/form/TextBox" data-dojo-props='id:"profileName", name:"profileName", required:"true"'/>
</td>
</tr>
<tr>
<td><label for="comments">Comments</label></td>
<td>
<input data-dojo-type="dijit/form/TextArea" data-dojo-props='id:"comments", name:"comments", rows:"5", cols:"40"'/>
</td>
</tr>
<tr>
<td><label for="frameSize">Frame Size</label></td>
<td>
<table>
<tr>
<td><label for="cb_1"><input data-dojo-type="dijit/form/CheckBox" id="cb_1" name="cb_1" value="64" checked/> 64</label></td>
<td><label for="cb_2"><input data-dojo-type="dijit/form/CheckBox" id="cb_2" name="cb_2" value="128"/> 128</label></td>
</table>
</td>
</tr>
</table>
<fieldset>
<legend><label> Throughput Test</label></legend>
<table>
<tr>
<td><label for="tTestDuration">Test Duration</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestDuration" value="60" data-dojo-props="smallDelta:1, constraints:{min:1,max:600,places:0}" name="tTestDuration"/>(Seconds)</td>
</tr>
<tr>
<td><label for="tTestMinFrameRate">Minimum Frame Rate</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestMinFrameRate" value="0" data-dojo-props="smallDelta:1, constraints:{min:1,max:10000,places:0}" name="tTestMinFrameRate"/>(Mbps)</td>
</tr>
<tr>
<td><label for="tTestMaxFrameRate">Maximum Frame Rate</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestMaxFrameRate" value="100" data-dojo-props="smallDelta:1, constraints:{min:1,max:10000,places:0}" name="tTestMaxFrameRate"/>(Mbps)</td>
</tr>
<tr>
<td><label for="tTestStepSize">Step Size</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestStepSize" value="5" data-dojo-props="smallDelta:1, constraints:{min:1,max:100,places:0}" name="tTestStepSize"/>(Mbps)</td>
</tr>
<tr>
<td><label for="tTestAcceptableLoss">Step Size</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestAcceptableLoss" value="0" data-dojo-props="smallDelta:0.1, constraints:{min:0,max:10,places:0}" name="tTestAcceptableLoss"/>(%)</td>
</tr>
</table>
</fieldset>
</form>
</td></tr>
</div>
</td></tr>
</table>
</body>
</head>
</html>
I'm seeing a few things here, first of all you're missing a closing </tr> tag when you close the "frame size" table. I suppose that it won't cause errors, but you can never be too sure.
You're also closing your </head> tag at the bottom of the page. You should close it before the <body> starts.
Then the real problem is that your widgets are not working because there are errors while parsing your HTML. The cause of the error is the "comments" text area. The correct module name you should use is dijit/form/Textarea, so the "a" of area should be in lowercase.
Besides that, you should also add the dijit/form/Textarea module to your list of modules (in your require() block).
If you did all that it should work, as you can see in this fiddle: http://jsfiddle.net/9U5AB/
In my master page i've added an table menu that I Want to hide from from the log in page...
This is my _layout.cshtml file..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header class="feature" style="background-color: #0c1d29;">
<div class="content-wrapper">
<p>
<img src="~/Images/images.jpg" width="300" height="100"/>
</p>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
</div>
<h1 style="text-align: center; color: #7ac0da">Office Service Management System</h1>
#*<div class="float-right">
<nav>
<ul id="menu">
</ul>
</nav>
</div>*#
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<table>
<tr>
<td>
<table>
<tr>
<td>
<h3> #Html.ActionLink("User Management", "Index", "UserManagement")</h3>
</td>
</tr>
<tr>
<td>
<h3>#Html.ActionLink("Airtel Management", "")</h3>
</td>
</tr>
<tr>
<td>
<h3> #Html.ActionLink("Sanketh Management", "")</h3>
</td>
</tr>
<tr>
<td>
<h3> #Html.ActionLink("Lionel Management", "")</h3>
</td>
</tr>
<tr>
<td>
<h3> #Html.ActionLink("Reports", "")</h3>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
#*<section class="content-wrapper main-content clear-fix">*#
#RenderBody()
#*</section>*#
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - CCI Valves Pvt Ltd.</p>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
this is my login page.
#model CCIOfficeServiceManagementSystem.Models.LoginModel
#{
ViewBag.Title = "Log in";
#Styles.Render("~/Content/IndexPage")
<section id="loginForm">
<h2>Admin Login.</h2>
#using (Html.BeginForm( "Login","Account",new {ReturnUrl = ViewBag.ReturnUrl }))
{
<span style="color:red">
#Html.AntiForgeryToken()
#Html.ValidationSummary(true,"Incorrect Password!!!!")
</span>
<fieldset >
<legend>Log in Form</legend>
<ol>
<li>
#Html.LabelFor(m => m.UserName)
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
</li>
<li>
#Html.LabelFor(m => m.Password)
#Html.PasswordFor(m => m.Password)
#Html.ValidationMessageFor(m => m.Password)
</li>
<li>
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe, new { #class = "checkbox" })
</li>
</ol>
<input type="submit" value="Log in" />
</fieldset>
}
</section>
<aside>
<img src="~/Images/download%20(2).jpg" />
</aside>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
You can use Request.Path to check the current page, if user is on login page then menu will not come.see below example.
#if (!Request.Path.ToString().Equals("/Account/login"))
<table>
<tr>
<td>
<h3> #Html.ActionLink("User Management", "Index", "UserManagement")</h3>
</td>
</tr>
<tr>
<td>
<h3>#Html.ActionLink("Airtel Management", "")</h3>
</td>
</tr>
<tr>
<td>
<h3> #Html.ActionLink("Sanketh Management", "")</h3>
</td>
</tr>
<tr>
<td>
<h3> #Html.ActionLink("Lionel Management", "")</h3>
</td>
</tr>
<tr>
<td>
<h3> #Html.ActionLink("Reports", "")</h3>
</td>
</tr>
</table>
}
Simply you can assign the id of the menu and hide on runtime using JQuery otherwise I will suggest to create one other layout for without authenticate users. Assign that one to login page.
I need to navigate frames by clicking this drop-down list using selenium. I need to select the links on the menu and drop-down list. But selenium.click doesn't work.
on manual execution:
Mouse-Over The SUBSCRIBER link/menu for list to dropped down
Click the selected link/menu from the drop-down list
I need to automate it through Selenium.
Here is the element inspector from firebug:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<!-- Generated by Python html module ($Revision: 1.6 $). -->
<!-- charset : iso-8859-1 -->
<head> … </head>
<frameset rows="78,62,32,*" frameborder="no" border="0">
<frame scrolling="no" src="/html/header_frame.html" noresize="1" name="head_frame"></frame>
<frame scrolling="no" src="/cgi-bin/main/title.cgi" noresize="1" name="titleframec"></frame>
<frame scrolling="no" src="/cgi-bin/main/navigationframe.cgi" noresize="1" name="navFrame">#document<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<!-- Generated by Python html module ($Revision: 1.6 $). -->
<!-- charset : iso-8859-1 -->
<head> … </head>
<body class="nav_frame" marginwidth="0" marginheight="0" onload="parent.bodyframe.location='/cgi-bin/service/subscriber/subscriberDetails.cgi';" topmargin="0" leftmargin="0"><script language="JavaScript"> … </script>
<table class="nav_frame" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td> … </td>
<td><a onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(menu_SUBS,0,0,null,'subscriber_bt');" href="javascript:;"><img width="125" height="32" border="0" alt="" src="/nav_images/subscriber_bt.jpg" name="subscriber_bt"></img></a></td>
<td> … </td>
<td> … </td>
<td> … </td>
<td> … </td>
<td> … </td>
<td> … </td>
<td> … </td>
<td> … </td>
</tr>
</tbody>
</table>
<script language="JavaScript"> … </script>
<form name="navig" target="bodyframe" method="POST" action="/cgi-bin/service/subscriber/subscriberDetails.cgi"> … </form>
</body>
</html>
</frame>
<frame name="bodyframe">
</frame>
</frameset><noframes> … </noframes>
</html>
You'd need to use the Actions() class of Webdriver.
Actions action = new Actions(driver);
actions.moveToElement(driver.findElement(By.id("subscriber_element"))).moveToElement(driver.findElement(By.id("revealed_element"))).click().build().perform();
When i add this as Gadget to google calendar ,it partially goes out of the screen...How should i correct such that the gadget will appear with in the screen...
Here is a code where it creates a gadget asking for username and password and login button..
I just want to know the procedure too make the gadget to appear with in the screen
enter code here
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="ABC Google Calendar Gadget" width="180" author="abc" author_email="abcgmail.com" description="My First Test">
<Require feature="dynamic-height"/>
<Require feature="google.calendar-0.5"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<html style="overflow: hidden;">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
//.login {
// display: block;
//}
//.event {
// display: none;
/}
</style>
</head>
<body class="loc-en ff ff3">
<script>
var _message = 'This is My first Gadget!';
function validateForm(){
alert("Hello");
$('.login').hide();
$('.event').show();
}
function createEventfun(){
alert("create event");
var eventData = {
title: 'NewYear',
details: 'Hi all',
location: 'My room',
allDay: true,
startTime: {year: 2013, month: 04, date: 21},
endTime: {year: 2013, month: 04, date: 22},
attendees: [
{email: 'nirupama.ninusah#gmail.com'}
],
rrule: 'RRULE:FREQ=YEARLY'
};
google.calendar.composeEvent(eventData);
}
function load()
{
alert("Page is loaded");
}
function changeWidth(){
var e1 = document.getElementById("gadgetcell");
e1.style.width = 180;
alert("Page is loaded and width of gadgetcell is modified to 180");
}
</script>
<div class="login" align="left">
<table border="1" height="200" width="100%">
<tr>
<td>
<image src="http://abc.com/Portals/78096/images/abc_logo.jpg" height="60" width="90"/>
</td>
</tr>
<tr>
<td align="left">
<table border="0">
<tr>
<td>Userid</td>
<td><input type="text" name="userid" size=10/><br></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" size=10/><br></td>
</tr>
<tr>
<td>VidyoURL</td>
<td><input type="text" name="url" size=10/><br></td>
</tr>
<tr>
<td><button onClick="validateForm()" style="background-color:red;color:white">LOGIN</button></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="event" style="width: 180px;">
<table border="1">
<tr>
<td>
<image src="http://abc.com/Portals/78096/image/abc_logo.jpg" height="60" width="90"/>
</td>
</tr>
<tr>
<td align="center">
<table border="0" height="200" width="100%">
<tr>
<span>User Successfully Aunthenticated</span>
</tr>
<tr>
<button onclick="createEventfun()" style="background-color:red;color:white">CREATE VIDYO EVENT</button>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
]]></Content>
</Module>
Look at Managing Gadget Height:
- A <Require feature="dynamic-height"/> tag (under <ModulePrefs>) to tell the
gadget to load the dynamic-height library.
- A call to the JavaScript function gadgets.window.adjustHeight() whenever there
is a change in content, or another event occurs that requires the gadget to
resize itself.
I added this script to all views and it works:
<script type="text/javascript" charset="utf-8">
function resize(){
gadgets.window.adjustHeight();
}
window.onload=resize;
</script>
Don't forget about "Required feature" tag