Eden Hazard praises Frank Lampard's start in charge of Chelsea
Real Madrid star Eden Hazard has praised Frank Lampard’s start in charge of Chelsea and believes his old teammate can become one of the best managers in the world.
The Belgian winger moved from Stamford Bridge to the Bernabeu a month before Lampard took over at the west London club, with the side thriving under his leadership.
Lampard has promoted a host of Chelsea’s youngsters – notably Fikayo Tomori, Mason Mount and Tammy Abraham – and the side currently sit in third place in the Premier League table.
Despite his move to Spain, Hazard says he has kept a close eye on his old club and was in no doubt about Lampard’s managerial credentials.
Asked if he was surprised by Lampard’s impact, Hazard told reports while on international duty with Belgium: ‘No, not at all.
Advertisement Advertisement
‘I know Frank as a player, not as a manger, but he’s a great guy. He’s showed already after four months that he can be one of the best managers in the world.
‘The good thing is that they are playing with young players, young English players. For England it’s good, for Chelsea’s it’s good. They are lucky to have young players with quality.’
Chelsea’s transfer ban has been credited with giving Lampard license to integrate young players, though Hazard believes they could be doing even better if they had been able to bring in a few new recruits.
Asked if the ban was a blessing in disguise, Hazard continued: ‘I don’t know. Maybe with two or three more players they would first!
‘When I saw them play it’s nice, they all play together. I still have good friends there. I follow them all the time. They are winning at the moment so I’m just happy for them.’


Middleware are components that are assembled into an application pipeline to handle requests and responses.The concept is similar as famous open source framewosk django(python) or expressjs(nodejs) frameworks
Middleware, at least in ASP.NET, comes from the Open Web Interface for .NET (Open Web Interface for .NET (OWIN) project.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
if (env.IsDevelopment())
{
app.UseBrowserLink();
app.UseDeveloperExceptionPage();
app.UseDatabaseErrorPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
}
app.UseIISPlatformHandler(options => options.AuthenticationDescriptions.Clear());
app.UseStaticFiles();
app.UseIdentity();
// To configure external authentication please see http://go.microsoft.com/fwlink/?LinkID=532715
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}
public class CustomMiddleware
{
private readonly RequestDelegate _next;
public AuthorizationMiddleware(RequestDelegate next)
{
_next = next;
}
}
3 ways to configure middlewares
public void Configure(IApplicationBuilder app)
{
app.Run(async context =>
{
await context.Response.WriteAsync("Return From Run.");
});
app.Run(async context => {
await context.Response.WriteAsync("This is second Run.");
});
}
The nature of Run extension is to short circuit the HTTP pipeline immediately. It is a shorthand way of adding middleware to the pipeline that does not call any other middleware which is next to it and immediately return HTTP response.
n case of Use extension, there is a chance to pass next invoker, so that HTTP request will be transferred to the next middleware after execution of current Use if there next invoker is present
public void Configure(IApplicationBuilder app)
{
app.Use(next=> async context =>
{
await context.Response.WriteAsync("Return From Use.");
await next.Invoke(context);
});
app.Run(async context => {
await context.Response.WriteAsync("This is from Run.");
});
}
Map extensions are used as convention for branching the pipeline. We can hook delegate to Map extension to push it to HTTP pipeline. Map simply accepts a path and a function that configures a separate middleware pipeline
private static void MyDelegate(IApplicationBuilder app)
{
app.Run(async context =>
{
await context.Response.WriteAsync("Returning from Map");
});
}
public void Configure(IApplicationBuilder app)
{
app.UseMvc();
app.Map("/MyDelegate", MyDelegate);
}
private static void MapQuery(IApplicationBuilder app)
{
app.Run(async context =>
{
await context.Response.WriteAsync("Return from MapQuery");
});
}
public void Configure(IApplicationBuilder app)
{
app.UseMvc();
//Execute when "map" is there in query string
app.MapWhen(context => {
return context.Request.Query.ContainsKey("map");
}, MapQuery);
//Return response for other request
app.Run(async context =>
{
await context.Response.WriteAsync("From Run extension");
});
}


{% extends 'base.html' %}
You have been successfully updated the users profile.
Search for users in the database.
Search
Add a new user to the IEEE member database
Add User
Click here to login new user
Login new User


Home
About
Services
Contact
Our Vision
* Contributing in client success.* Maintaining long lasting relationships.* Increase productivity.* Quality deliverable.


The Bio-Bridge web platform is a tool for facilitating technical and scientific cooperation. The platform is an integral part of clearing-house mechanism, and is aligned with the Web Strategy for the Convention and its Protocols. The clearing-house mechanism is the main repository for any databases and case studies of relevance to the implementation of the Convention and its Protocols. The Bio-Bridge web platform links to these resources, providing a list of curated resources that are specifically relevant to technical and scientific cooperation. The web platform:


This is usually the first question new clients ask? This is not an easy question to answer without a deep understanding of what the client requires. The main component in the price is the cost of labour of the developer(s) but there are additional expenses which will dictate the final cost of the project.
The first element to analyse is the size of the website in terms of number of pages. Does the client require a single page scrolling webiste or a website with several or tens of pages layed out in a hierarchical nature which may be several layers deep.
Once the structure of the website is confirmed, content needs to created, aggregated and approved. A client who has already prepared content and indeed knows where the content will be placed within the website structure will obviously not need the services of a content writer and therefore will avoid the associated cost. As you can appreciate time taken in the creation and approval of content can lead to project creep. Project creep can lead to expense which will inflate overal costs.
In an ideal world everyone would have access to their own high resolution images, video and any other media which would be of use on their new website. This is rarely the case, therefore it is often neccessary to leverage other options to fulfill the requiremnt. It is possible to hire a photographer, a videographer etc. or design custom graphics or buy stock media which is readily available. It is important to get the mix between stock and custom images and other media right while staying within the project budget constraints.
If the client requires the project to "Go Live" in a very short time frame, development time for a project of a certain size will be more or less be fixed therfore long working hours for developers will obviously inflate costs. These urgent projects will often work flawlessly if the client is well prepared in terms of prior aggregation of content and pre-determined website structure.
Having reviewed all the above, we can in consultation with the client look at possible solutions that may reduce costs. We will always work with the client to provide an accurate approximation of an achieveable project timeline. Ultimately we will produce a quotation for the project that reflects all of the aforemnetioned.


Start {{items.engine}} server?
The blockchain needs to be fully downloaded before MofoWallet starts using the local server. Running a local server could make your computer run slower but it will make MofoWallet operate faster. Forging with your local server is supported.


Protocols
The following protocols are available globally.
-
PAY.JP SDK initial settings.
See moreDeclaration
Swift
public protocol PAYJPSDKType : AnyObject
-
PAY.JP API error response.
See moreDeclaration
Swift
@objc public protocol PAYErrorResponseType : NSObjectProtocol
-
Undocumented
See moreDeclaration
Swift
public protocol TokenOperationObserverType
-
3DSecure handler delegate.
See moreDeclaration
Swift
public protocol ThreeDSecureProcessHandlerDelegate : AnyObject
-
Handler for 3DSecure process.
See moreDeclaration
Swift
public protocol ThreeDSecureProcessHandlerType
-
Delegate of web browse driver.
See moreDeclaration
Swift
public protocol ThreeDSecureWebDriverDelegate : AnyObject
-
Web browse driver for 3DSecure.
See moreDeclaration
Swift
public protocol ThreeDSecureWebDriver
-
CardForm style protocol.
See moreDeclaration
Swift
public protocol CardFormStylable
-
CardFormViewController delegate.
See moreDeclaration
Swift
@objc(PAYCardFormViewControllerDelegate) public protocol CardFormViewControllerDelegate : AnyObject
-
CardFormView delegate.
See moreDeclaration
Swift
@objc(PAYCardFormViewDelegate) public protocol CardFormViewDelegate : AnyObject
-
CardForm action protocol.
See moreDeclaration
Swift
public protocol CardFormAction


[![npm][npm]][npm-url] [![node][node]][node-url] [![deps][deps]][deps-url] [![tests][tests]][tests-url] [![coverage][cover]][cover-url] [![chat][chat]][chat-url]
It’s a simple wrapper middleware for webpack. It serves the files emitted from webpack over a connect server. This should be used for development only.
It has a few advantages over bundling it as files:
npm install webpack-dev-middleware --save-dev
javascript
var webpackMiddleware = require("webpack-dev-middleware");
app.use(webpackMiddleware(...));
Example usage:
``` javascript app.use(webpackMiddleware(webpack({ // webpack options // webpackMiddleware takes a Compiler object as first parameter // which is returned by webpack(…) without callback. entry: “…”, output: { path: “/” // no real path is required, just pass “/” // but it will work with other paths too. } }), { // publicPath is required, whereas all other options are optional
noInfo: false,
// display no info to console (only warnings and errors)
quiet: false,
// display nothing to the console
lazy: true,
// switch into lazy mode
// that means no watching, but recompilation on every request
watchOptions: {
aggregateTimeout: 300,
poll: true
},
// watch options (only lazy: false)
publicPath: "/assets/",
// public path to bind the middleware to
// use the same as in webpack
index: "index.html",
// The index path for web server, defaults to "index.html".
// If falsy (but not undefined), the server will not respond to requests to the root URL.
headers: { "X-Custom-Header": "yes" },
// custom headers
mimeTypes: { "text/html": [ "phtml" ] },
// Add custom mime/extension mappings
// https://github.com/broofa/node-mime#mimedefine
// https://github.com/webpack/webpack-dev-middleware/pull/150
stats: {
colors: true
},
// options for formating the statistics
reporter: null,
// Provide a custom reporter to change the way how logs are shown.
serverSideRender: false,
// Turn off the server-side rendering mode. See Server-Side Rendering part for more info. })); ```
This part shows how you might interact with the middleware during runtime:
close(callback)
- stop watching for file changes
js
var webpackDevMiddlewareInstance = webpackMiddleware(/* see example usage */);
app.use(webpackDevMiddlewareInstance);
// After 10 seconds stop watching for file changes:
setTimeout(function(){
webpackDevMiddlewareInstance.close();
}, 10000);
invalidate()
- recompile the bundle - e.g. after you changed the configuration
js
var compiler = webpack(/* see example usage */);
var webpackDevMiddlewareInstance = webpackMiddleware(compiler);
app.use(webpackDevMiddlewareInstance);
setTimeout(function(){
// After a short delay the configuration is changed
// in this example we will just add a banner plugin:
compiler.apply(new webpack.BannerPlugin('A new banner'));
// Recompile the bundle with the banner plugin:
webpackDevMiddlewareInstance.invalidate();
}, 1000);
waitUntilValid(callback)
- executes the callback
if the bundle is valid or after it is valid again:
js
var webpackDevMiddlewareInstance = webpackMiddleware(/* see example usage */);
app.use(webpackDevMiddlewareInstance);
webpackDevMiddlewareInstance.waitUntilValid(function(){
console.log('Package is in a valid state');
});
Note: this feature is experimental and may be removed or changed completely in the future.
In order to develop a server-side rendering application, we need access to the stats
, which is generated with the latest build.
In the server-side rendering mode, webpack-dev-middleware sets the stat
to res.locals.webpackStats
before invoking the next middleware, allowing a developer to render the page body and manage the response to clients.
Notice that requests for bundle files would still be responded by webpack-dev-middleware and all requests will be pending until the building process is finished in the server-side rendering mode.
```javascript // This function makes server rendering of asset references consistent with different webpack chunk/entry configurations function normalizeAssets(assets) { return Array.isArray(assets) ? assets : [assets] }
app.use(webpackMiddleware(compiler, { serverSideRender: true })
// The following middleware would not be invoked until the latest build is finished. app.use((req, res) => {
const assetsByChunkName = res.locals.webpackStats.toJson().assetsByChunkName
// then use assetsByChunkName
for server-sider rendering
// For example, if you have only one main chunk:
res.send(`
`)
}) ```
Don’t hesitate to create a pull request. Every contribution is appreciated. In development you can start the tests by calling npm test
.
|
Kees Kluskens |


Attendance tracking applications are commonly used by many, small and large companies, government organizations, and by individuals. Yet teachers are still taking attendance in an extremely inefficient manner. That’s where ettendance tracker comes in aid.


Welcome to the UI for ASP.NET MVC quick start guide. In this guided tutorial you'll learn how to install, configure, and utilize UI for ASP.NET MVC to build a rich single page dashboard application that works beautifully on any device.
This guide will walk you through building Team Efficiency Dashboard, a single page app that does the following things:
If you follow along until the end, here is what the finished app will look like.
And here is what the app will look like on mobile.
From client-side point of view, the vanilla HTML/JavaScript Kendo UI widgets and the rendered UI for ASP.NET MVC represent the same thing and provide the same capabilities. However, the UI for ASP.NET MVC wrappers provide additional capabilities for use with ASP.NET MVC and tooling for VisualStudio. Refer to the documentation for a complete feature comparison.
In this chapter you're going to start with the basics, including starting a new project, adding Telerik UI for MVC to your project, and installing the quick start boilerplate.
UI for ASP.NET MVC can easily be added to an existing ASP.NET MVC project in just a few clicks using VisualStudio.
Start by creating a new ASP.NET MVC project. You'll use this project throughout the rest of this tutorial to build your application.
Click File > New Project
In the New Project dialog choose the ASP.NET Web Application template by expanding the "Templates" tree to Templates > Visual C# > Web
Give the application a name (ex: MyQuickStartApp)
Click OK to continue
In the New ASP.NET Project dialog, choose MVC from the 4.6 template selection
Click OK to finish
With the new project created, it's time to start building your app. For this guide, we've scaffolded out a boilerplate project to act as a starting point for the Team Efficiency Dashboard.
The boilerplate has an HTML page, a layout, the Northwind database and some server-side code you may find in a typical MVC project.
Using the package manager console, run the following command
PM> Install-Package KendoQsBoilerplate
Alternatively, you can use the package manager GUI
From the Solution Explorer right-click References, then choose Manage NuGet Packages
Search for KendoQsBoilerplate
Click Install to continue
When the package installs you may be prompted to accept a license agreement for the NortwindDB, click I Accept to continue
It is normal for the quick start boilerplate to overwrite existing files, when prompted with a file conflict choose Yes to All
With the boilerplate installed, take a moment to run the application. If all went well, you should see something like this:
At this point, you have the wire frame for a basic MVC application. Next you will be adding the UI for ASP.NET MVC to the application by using the Convert to Telerik Application tooling. When an application is converted to a Telerik application, all required HTML, CSS, JavaScript and .DLL libraries are added. This is the first step you would take to upgrade a new or existing MVC project to use Telerik UI for ASP.NET MVC.
Stop the application if it is already running.
In the Solution Explorer right-click the project name and select Telerik UI for ASP.NET MVC > Convert to Telerik Application. This will launch the Project Configuration Wizard, from here you can choose settings for your Telerik project.
For this tutorial your project will use CDN support. This means all Kendo UI resources are served from Telerik's content delivery network (CDN) versus relying on your server for the assets. Mark the box Use CDN support and click Next to continue.
Since the boilerplate is designed with Bootstrap, choose Bootstrap from themes select box so the theme matches the current look of the boilerplate. You'll change the theme later when you're ready to customize the look of the application.
Open \Views\Shared_Layout.cshtml find and remove the following script bundle @Scripts.Render("~/bundles/modernizr")
. This script is included with the Kendo UI assets.
Next, find the CSS bundle @Styles.Render("~/Content/css")
and move it just above the closing head tag </head>
this will make sure that any custom styles are applied when you customize the application.
The final code of the head section should look like this:
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<EMAIL_ADDRESS>- UI for MVC / Kendo Quick Start Guide</title>
<link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2015.3.1111/styles/kendo.dataviz.bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.kendostatic.com/2015.3.1111/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.3.1111/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.3.1111/js/kendo.aspnetmvc.min.js"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
@Styles.Render("~/Content/css")
Tip: Because the Convert to Telerik application, Upgrade Project, or Configure Project wizards modify the
_Layout.cshtml
file, be sure to check position of any custom CSS declarations afterward.
Now that your app is ready for development, let's add some simple input components to create a nice user experience.
In this chapter you'll learn how to add Kendo UI widgets to your application. UI for MVC has powerful HTML Helpers that configure and render Kendo UI widgets.
Server-side wrappers
Telerik UI for ASP.NET MVC is a set of server-side wrappers. A server-wrapper does the following.
Configuration
The Kendo UI HtmlHelper exposes all Kendo UI server wrappers.
Widget options
The widget options are exposed via fluent interface.
Below is an example of how a Numeric Text Box input is created:
@(Html.Kendo().NumericTextBox()
.Name("name") // set the name of the NumericTextBox
.Value(10) //set the value
.Spinners(false) // disable the spinners
)
Let's open the Index.cshtml
page under the folder views/home/
. The Index.cshtml
page is where most of the application's UI lives. This page currently contains basic HTML inputs to collect date input from the user. To provide a better user experience, replace the standard HTML inputs with Kendo UI date picker controls. The Kendo UI date picker controls offer users a fly out calendar to choose a desired date.
Note: The Kendo UI DatePicker control is touch and mouse friendly. No additional code is necessary to support tablets and phones.
Open Views/Home/Index.cshtml
and find the StatsFrom
text box helper
<!-- Stats From Date Picker -->
@Html.TextBox("StatsFrom", new DateTime(1996, 1, 1))
Replace the text box helper with a Kendo UI date picker. Set the Name property to StatsFrom
and the Value with a new DateTime
of 1996,1,1
.
<!-- Stats From Date Picker -->
@(Html.Kendo().DatePicker()
.Name("StatsFrom")
.Value(new DateTime(1996, 1, 1))
)
Find the StatsTo
text box helper
<!-- Stats To Date Picker -->
@Html.TextBox("StatsTo", new DateTime(1996, 1, 1))
Replace the text box helper with a Kendo UI DatePicker. Set the Name property to StatsTo
and the Value with a new DateTime
of 1998,8,1
.
<!-- Stats To Date Picker -->
@(Html.Kendo().DatePicker()
.Name("StatsTo")
.Value(new DateTime(1998, 8, 1))
)
The Kendo UI HTML helper's fluent interface let you configure a widget's behavior and appearance. The code you just added uses the following properties:
After you run your app with this change, you will see a calendar icon in the Stats from field. Click or tap the icon to reveal the date picker:
With the inputs upgraded let's move on to the extremely robust Kendo UI Grid.
In this chapter, you'll learn how to add leverage Telerik UI for MVC's scaffolding capabilities. One feature that MVC developers are quite used to is scaffolding. Visual-Studio-powered MVC scaffolding is a code generation framework that allows you to hook up your model to a controller and render views that are strongly typed, among other things. Since the scaffolding is simply a code generation tool, you are free to change any of the code that it generated.
A copy of the Northwind database is included with the Kendo UI Quick Start Boilerplate. Before you begin scaffolding make sure the Northwind database is upgraded. Having a working connection to the database is needed for the scaffolding wizard to work properly.
Note: Upgrading the database is only necessary for this guide because the database supplied must support multiple versions of SQL therefore we chose the lowest database version possible.
Note: If you do not have an SQL Server instance installed on your machine, you may need to install SQL Server Express Edition from Microsoft. You can download the free installer here.
Using Visual Studio's Server Explorer, expand DataConnections and right-click NorthwindDB > Modify Connection.
Next, click OK.
Finally, click Yes to complete the upgrade.
Once the upgrade is complete, expand the Northwind Database Tables to verify connectivity.
With the database upgraded use the scaffolding wizard to create an interactive grid view.
The scaffolding wizard will aid you in creating the view by providing point a click configuration screen. Use the scaffolding wizard to create an interactive Kendo UI Grid view of invoices for the Team Efficiency Dashboard. By enabling grid features like: sorting, paging and exporting users will be able to analyze and share data in a familiar way.
Start the scaffolding wizard by right-clicking Controllers > Add > New Scaffolded Item
Choose the Kendo UI Scaffolder and click Add to continue
Notice the Scaffolder is capable of creating Grid, Chart, and Scheduler views for both C# and JavaScript. For this guide you'll be using the UI for MVC Grid scaffolding option. Choose UI for MVC Grid and click Add to continue.
From MVC Grid scaffolding dialog, the grid's model options, grid options and events are defined. The Model Options control the following settings:
Define the grid's model options using the following values:
The Grid Options control what features are scaffolded & enabled on the grid including:
Define the grid's options by setting the following values:
Click Add to continue and create the scaffolded items.
The Scaffolder will create the following files:
Controllers/InvoiceController.cs
- This controller has the actions for the features selected in the scaffolding wizard.Index
returns the viewInvoices_Read
- gets all invoices from the database and returns a JSON formatted DataSourceRequest object. The DataSourceRequest will contain the current grid request information - page, sort, group and filter.Excel_Export_Save
- creates an XLS exported File result.Pdf_Export_Save
- creates a PDF exported File result.Views/Invoice/Index.cshtml
- This view contains the markup and HTML helper responsible for rendering the grid control.Run the application and navigate to /Invoice/index
to see the generated grid control. You should see the following output:
Now that the UI for MVC Scaffolder has generated a starting point for working with the grid, you can modify the scaffolded code to meet your needs. In the next chapter we'll do just that.
In this chapter you will modify the scaffolded grid code to further customize the grid's appearance. Additionally, you'll be incorporating the grid into the Team Efficiency Dashboard's main view.
As you may have noticed in the scaffolding wizard, the Grid is a versatile component with many options. The options for the grid are set using the server-side HTML wrapper. Take a close look at the code generated by the Scaffolder in /Views/Invoices/Index.cshtml
, below is a breakdown with additional comments of what each configuration method is used for. Also make note that the fluent API chain can be extended to include further options, and there is no strict order in which the options are defined.
@(Html.Kendo().Grid<KendoQsBoilerplate.Invoice>() // Kendo UI Grid Wrapper
// Name, also HTML elements "id" attribute
.Name("grid")
// Grid column bindings
.Columns(columns =>
{
columns.Bound(c => c.CustomerName);
columns.Bound(c => c.OrderDate);
columns.Bound(c => c.ProductName);
columns.Bound(c => c.UnitPrice);
columns.Bound(c => c.Quantity);
columns.Bound(c => c.Salesperson);
})
// Toolbars
.ToolBar(toolbar => {
toolbar.Excel();
toolbar.Pdf();
})
// Enable Paging
.Pageable()
// Enable Sorting
.Sortable(sortable => {
sortable.SortMode(GridSortMode.SingleColumn);
})
// Disable Scrolling
.Scrollable(scrollable => scrollable.Enabled(false))
// Datasource configuration
.DataSource(dataSource => dataSource
.Ajax()
// Read method action and controller
.Read(read => read.Action("Invoices_Read", "Invoice"))
)
)
TIP: If you find the comments above useful, feel free to copy them into your project. Comments are completely valid inside the Fluent API chain.
Change the grid's Name from "grid"
to "EmployeeSales"
. This is an important step since the Name property of all UI for MVC wrappers set the id attribute of the rendered Kendo UI widget.
Find the .Name
method and change the value from "grid"
to "EmployeeSales"
@(Html.Kendo().Grid<KendoQsBoilerplate.Invoice>()
.Name("grid")
...
)
The resulting code should be
@(Html.Kendo().Grid<KendoQsBoilerplate.Invoice>()
.Name("EmployeeSales")
...
)
Now add the EmployeeSales grid to the Dashboard page /Home/Index.cshtml
. To keep things tidy, add the grid to the Dashboard as a child action using Html.Action
in the /Home/Index.cshtml
view. This will keep the grid's view and controller code separate and easy to find.
Ensure the application's layout is not repeated, set the Layout
of the view to null
. Skipping this step will result in duplicate scripts which could cause the page to load improperly.
At the top of /Views/Invoices/Index.cshtml
add
@{ Layout = null;}
The resulting code should be:
@{ Layout = null;}
@(Html.Kendo().Grid<KendoQsBoilerplate.Invoice>()
.Name("EmployeeSales")
...
)
Add the grid as a child action. Open /Home/Index.cshtml
and locate the <!-- Invoices -->
placeholder and replace it with the child action @Html.Action("Index","Invoice")
<!-- Invoices -->
@Html.Ipsum().table(5, 3, "d,t,n", new { @class = "table table-striped table-bordered" })
The resulting code should be:
<!-- Invoices -->
@Html.Action("Index","Invoice")
Run the project and visit the dashboard page /Home/Index
in the browser. Take a moment to interact with the grid's sorting, paging, and exporting features.
Currently the data in Grid column Order Date
is verbose and should look something like Mon Aug 25 1997 00:00:00 GMT-0400 (Eastern Daylight Time). This isn't very user-friendly, let's change that.
The grid's data can easily be formatted by adding the .Format
property chain to any column. Use the Date Format MM/dd/yyyy
on the OrderDate
column using the .Format
method.
You can keep the application running while performing this exercise.
Open '/Views/Invoice/Index.cshtml' and find the OrderDate
column property.
columns.Bound(c => c.OrderDate);
Set the OrderDate
column's Format
property to "{0:MM/dd/yyyy}"
to apply the format to the column.
The resulting code should be:
columns.Bound(c => c.OrderDate).Format("{0:MM/dd/yyyy}");
Refresh the application to see the formatting changes take place. Notice the OrderDate
column is now much easier on the eye.
While interacting with the grid you may have noticed that all of the records are being pulled from the database. Don't worry, as we progress through the next several chapters that will change as you learn how to work with Kendo UI and datasources on the client side. First, let's setup some additional UI elements to provide a source for filtering data.
In this chapter you will learn about the Kendo UI ListView control and client-side templates. Using the ListView you'll create a list of employees containing the employee's full name and avatar image. This ListView will allow users to interact with the dashboard by filtering the data.
The purpose of Kendo UI ListView is to display a custom layout of data-bound items through templates. The ListView is ideally suited for scenarios where you wish to display a list of items in a consistent manner.
The ListView is designed to put you back in control when it comes to displaying data. It does not provide a default rendering of data-bound items, but, instead, it relies entirely on templates to define how a list of items - including alternating items and items being edited - is displayed.
Example:
@(Html.Kendo().ListView(Model) //The listview will be initially bound to the Model which is the Products table
.Name("productListView") //The name of the listview is mandatory. It specifies the "id" attribute of the widget.
.TagName("div") //The tag name of the listview is mandatory. It specifies the element which wraps all listview items.
.ClientTemplateId("template") // This template will be used for rendering the listview items.
.DataSource(dataSource => {
dataSource.Read(read => read.Action("Products_Read", "ListView"));
}) // DataSource configuration. It will be used on paging.
.Pageable() //Enable paging
)
Use a ListView to create selectable list of employees containing the employee's full name and avatar image.
Since you will need to update the HomeController
stop project if it is already running.
Open /Views/Home/Index.cshtml
and find the placeholder <!-- Employee List View -->
.
Remove the <ul>
and its child elements that follow <!-- Employee List View -->
.
Now add a Kendo UI ListView of type KendoQsBoilerplate.Employee
using the Fluent HTML Helper @(Html.Kendo().ListView<KendoQsBoilerplate.Employee>()
.
Set the Name
property to "EmployeesList"
.
.Name("EmployeesList")
Set the ClientTemplateId
property to "EmployeeItemTemplate"
. The template EmployeeItemTemplate will be created later in the exercise.
.ClientTemplateId("EmployeeItemTemplate")
Set the TagName
property to "ul"
. The TagName is the element type that will wrap the ListView items when the control is rendered. In this case, we're creating an unordered list element.
.TagName("ul")
Set the DataSource
read action to "EmployeeList_Read"
and the controller to "Home"
. The action will be created later in the exercise.
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("EmployeesList_Read", "Home"));
})
Set the select mode by setting the Selectable
property to ListViewSelectionMode.Single
.
.Selectable(s => s.Mode(ListViewSelectionMode.Single))
The resulting code should look like the following:
<!-- Employee List View -->
@(Html.Kendo().ListView<KendoQsBoilerplate.Employee>()
.Name("EmployeesList")
.ClientTemplateId("EmployeeItemTemplate")
.TagName("ul")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("EmployeesList_Read", "Home"));
})
.Selectable(s => s.Mode(ListViewSelectionMode.Single))
)
Now that the ListView is defined you'll need to supply the datasource with employee data by creating the read action for the ListView.
Open Controllers/HomeController.cs
and add a reference to Kendo.Mvc.UI
and Kendo.Mvc.Extensions
. These dependencies are needed for the DataSourceRequest object and .ToDataSourceResult
extension method.
At the top of the file you should have the following statements:
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
Now, create an ActionResult
named EmployeesList_Read
that accepts a DataSourceRequest
parameter. The parameter of type DataSourceRequest
will contain the current ListView request information. Decorate that parameter with the DataSourceRequestAttribute
which is responsible for populating the DataSourceRequest
object.
public ActionResult EmployeesList_Read([DataSourceRequest]DataSourceRequest request)
{
}
Use entity framework to query a list of employees, ordered by FirstName
from the database and return the result as Json
using the .ToDataSourceResult
extension method, the method will format the data to be consumed by the ListView.
public ActionResult EmployeesList_Read([DataSourceRequest]DataSourceRequest request)
{
var employees = db.Employees.OrderBy(e => e.FirstName);
return Json(employees.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);
}
The ListView is almost complete, however the ListView still needs a template to apply to the data when it is rendered to the page. In the previous exercise the ClientTemplateId
was defined, but was not created. Let's learn about Kendo UI Templating and complete the ListView.
The Kendo UI Templates provide a simple-to-use, high-performance JavaScript templating engine within the Kendo UI framework. Templates offer a way to create HTML chunks that can be automatically merged with JavaScript data. They are a substitute for traditional HTML string building in JavaScript.
Kendo UI Templates use a simple templating syntax called hash templates. With this syntax, the # (hash) sign is used to mark areas in a template that should be replaced by data when the template is executed. The # character is also used to signify the beginning and end of custom JavaScript code inside the template.
There are three ways to use the hash syntax:
#= #
.#: #
.# if (true) { # ... non-script content here ... # } #
.Example:
<script type="text/x-kendo-template" id="myTemplate">
#if(isAdmin){#
<li>#: name # is Admin</li>
#}else{#
<li>#: name # is User</li>
#}#
</script>
Open /Views/Home/Index.cshtml
and find the placeholder <!-- Kendo Templates -->
.
After <!-- Kendo Templates -->
add a new <script>
element of type "text/x-kendo-tmpl"
with an id of EmployeeItemTemplate
The resulting code should be:
<!-- Kendo Templates -->
<script type="text/x-kendo-tmpl" id="EmployeeItemTemplate">
</script>
<!-- /Kendo Templates -->
Inside the template create a <li>
and set the class to employee
.
Add a <div>
element inside the <li>
. Inside the <div>
add an image that corresponds to the EmployeeId
by setting the src to "@(Url.Content("~/content/employees/"))#:EmployeeId#-t.png"
and a <span>
with the template field #: FullName #
.
The resulting code should be:
<!-- Kendo Templates -->
<script type="text/x-kendo-tmpl" id="EmployeeItemTemplate">
<li class="employee">
<div>
<img src="@(Url.Content("~/content/employees/"))#:EmployeeId#-t.png" />
<span> #: FullName #</span>
</div>
</li>
</script>
<!-- /Kendo Templates -->
Run the application to see the ListView in action.
If everything was done correctly, the list view should look like this.
At this point you can select items from the list, but before the dashboard can become truly interactive you'll need to work with the client-side APIs.
The client side is where Kendo UI really shines. Kendo UI uses a common JavaScript language and standards so that it’s easy for any JavaScript developer to get started. In this chapter you'll learn about client-side events and how to take control of Kendo UI using JavaScript.
Telerik UI for MVC helpers provide an Events method that is part of the HTML Helper's property chain. The Events method is used to set event handlers for the Kendo UI widget. Each widget has a variety of events that can be handled including: cancel, change, dataBound, dataBinding, edit, remove, and save.
Example:
@(Html.Kendo().ListView<ProductViewModel>()
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.DataSource(dataSource => {
dataSource.Read(read => read.Action("Products_Read", "ListView"));
})
.Events(e => e
.DataBound("productListView_dataBound")
.Change("productListView_change")
)
)
Let's continue to work with the EmployeesList that was created in the previous chapter. The list is selectable, but when the application starts the first item should be selected by default giving the user a starting point to begin interacting with the dashboard.
Find the EmployeeList
<!-- Employee List View -->
@(Html.Kendo().ListView<Employee>()
.Name("EmployeesList")
...
.Selectable(s => s.Mode(ListViewSelectionMode.Single))
)
Add an event handler named onListDataBound
for the DataBound
event for the EmployeeList.
@(Html.Kendo().ListView<KendoQsBoilerplate.Employee>()
...
.Selectable(s => s.Mode(ListViewSelectionMode.Single))
.Events(e => e.DataBound("onListDataBound"))
)
The resulting code should be:
<!-- Employee List View -->
@(Html.Kendo().ListView<KendoQsBoilerplate.Employee>()
.Name("EmployeesList")
.ClientTemplateId("EmployeeItemTemplate")
.TagName("ul")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("EmployeesList_Read", "Home"));
dataSource.PageSize(9);
})
.Selectable(s => s.Mode(ListViewSelectionMode.Single))
.Events(e => e.DataBound("onListDataBound"))
)
In the same view find the Scripts
section.
@section Scripts {
<script>
//Custom Scripts
</script>
}
In the <script>
element and add a function onListDataBound
.
Select the first element by calling the .select
function on the ListView object this
and pass in the element first employee element using the jQuery selector $(".employee:first")
.
@section Scripts {
<script>
//Custom Scripts
function onListDataBound(e) {
this.select($(".employee:first"));
}
</script>
}
Refresh the page to see that the first item in the list is selected by default.
Selecting the first item using the DataBound
event was a good start. Next we'll take it a step further by using the selected item to populate a Kendo UI template showing the selected employee on the dashboard.
Add an event handler named onCriteriaChange
for the Change
event for the EmployeeList.
@(Html.Kendo().ListView<Employee>()
...
.Selectable(s => s.Mode(ListViewSelectionMode.Single))
.Events(e => e.DataBound("onListDataBound")
.Change("onCriteriaChange"))
)
Find the <!-- Kendo Templates -->
placeholder.
<!-- Kendo Templates -->
...
<!-- /Kendo Templates -->
Add a new template that will display the selected employee's image and full name.
<!-- Kendo Templates -->
<script type="text/x-kendo-tmpl" id="employeeAvatarTemplate">
<img src="@(Url.Content("~/content/employees/"))#:EmployeeId#.png" />
<span>#:FullName#</span>
</script>
Find the <script>
section.
<script>
...
</script>
Add a function named getSelectedEmployee
that returns the selected employee from the EmployeeList.
function getSelectedEmployee() {
var employeeList = $("#EmployeesList").data("kendoListView"),
employee = employeeList.dataSource.getByUid(employeeList.select().attr("data-uid"));
return employee;
}
Add a function named updateEmployeeAvatar
that binds the selected employee data to the employeeAvatarTemplate
and places the template's content in the employee-about
element.
function updateEmployeeAvatar() {
var employee = getSelectedEmployee(),
template = kendo.template($("#employeeAvatarTemplate").html());
//apply template
$("#employee-about").html(template(employee));
}
Add a function named onCriteriaChange
, this function will handle the Change
event and call updateEmployeeAvatar
.
function onCriteriaChange() {
updateEmployeeAvatar();
}
Refresh the page and select an employee from the EmployeeList. Selecting an item should update the dashboard with the selected employee's data.
Find and remove the <!-- Employee Avatar -->
placeholder code, it is no longer needed because the element is created dynamically.
Remove:
<!-- Employee Avatar -->
@Html.Placehold(90, 90, "Face")
<span>Full Name </span>
Now that you know how to work with client-side APIs, let's enhance the Team Efficiency Dashboard by working with datasources.
In this chapter you'll learn how to work with Kendo UI datasources.
The Kendo UI DataSource component plays a central role in practically all web applications built with Kendo UI. It is an abstraction for using local data—arrays of JavaScript objects—or remote data—web services returning JSON, JSONP, OData or XML.
The Kendo UI DataSource has many abilities and responsibilities, among which to:
For detailed information on the capabilities of the DataSource, refer to its configuration API, methods, and events, and demos.
At this point the dashboard is showing all invoice data. Let's use the EmployeeList list view and StatsFrom/StatsTo date pickers to filter the invoice grid by invoking the grid's datasource.
In the view /Views/Home/Index.cshtml
find the scripts section.
<script>
...
</script>
Add a function named getEmployeeFilter
that gets the employeeId
, salesPerson
, statsFrom
and statsTo
values and returns a JSON object.
The resulting code should be:
function getEmployeeFilter() {
var employee = getSelectedEmployee(),
statsFrom = $("#StatsFrom").data("kendoDatePicker"),
statsTo = $("#StatsTo").data("kendoDatePicker");
var filter = {
employeeId: employee.EmployeeId,
salesPerson: employee.FullName,
statsFrom: statsFrom.value(),
statsTo: statsTo.value()
}
return filter;
}
In the view /Views/Invoice/Index.cshtml
find the EmployeeSales grid.
@(Html.Kendo().Grid<KendoQsBoilerplate.Invoice>()
.Name("EmployeeSales")
...
.Scrollable(scrollable => scrollable.Enabled(false))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Invoices_Read", "Invoice"))
)
)
On the grid's DataSource
property, set the Data
property to getEmployeeFilter
. The Data
property supplies additional data to the server, in this case the data is our filter parameters.
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Invoices_Read", "Invoice")
.Data("getEmployeeFilter"))
)
Add the property AutoBind
to the end of the property chain and set the value to false
. Setting AutoBind to false tells UI for MVC that the datasource's Read
action is invoked on manually on the client.
The resulting code should be:
@(Html.Kendo().Grid<KendoQsBoilerplate.Invoice>()
.Name("EmployeeSales")
...
.Scrollable(scrollable => scrollable.Enabled(false))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Invoices_Read", "Invoice")
.Data("getEmployeeFilter"))
)
.AutoBind(false)
)
In the view /Views/Home/Index.cshtml
add a function named refreshGrid
, this function will invoke the grid's Read
action.
function refreshGrid() {
var employeeSales = $("#EmployeeSales").data("kendoGrid");
employeeSales.dataSource.read();
}
Find the function onCriteriaChange
and add a call to the refreshGrid
function. This will cause the Grid's data to refresh whenever the employee selection changes.
function onCriteriaChange() {
updateEmployeeAvatar();
refreshGrid();
}
Next, we'll need to update the grid's Read
action to apply the filter using Entity Framework.
Open Controllers/InvoiceController.cs
and find the Invoices_Read
action.
public ActionResult Invoices_Read([DataSourceRequest]DataSourceRequest request)
{
IQueryable<Invoice> invoices = db.Invoices;
DataSourceResult result = invoices.ToDataSourceResult(request, invoice => new {
OrderID = invoice.OrderID,
CustomerName = invoice.CustomerName,
OrderDate = invoice.OrderDate,
ProductName = invoice.ProductName,
UnitPrice = invoice.UnitPrice,
Quantity = invoice.Quantity,
Salesperson = invoice.Salesperson
});
return Json(result);
}
Add the parameters salesPerson
, statsFrom
and statsTo
to the action.
public ActionResult Invoices_Read([DataSourceRequest]DataSourceRequest request,
string salesPerson,
DateTime statsFrom,
DateTime statsTo)
Using the parameter values filter the invoices using a Where
LINQ query.
The resulting code should be:
public ActionResult Invoices_Read([DataSourceRequest]DataSourceRequest request,
string salesPerson,
DateTime statsFrom,
DateTime statsTo)
{
var invoices = db.Invoices.Where(inv => inv.Salesperson == salesPerson)
.Where(inv => inv.OrderDate >= statsFrom && inv.OrderDate <= statsTo);
DataSourceResult result = invoices.ToDataSourceResult(request, invoice => new {
OrderID = invoice.OrderID,
CustomerName = invoice.CustomerName,
OrderDate = invoice.OrderDate,
ProductName = invoice.ProductName,
UnitPrice = invoice.UnitPrice,
Quantity = invoice.Quantity,
Salesperson = invoice.Salesperson
});
return Json(result);
}
Run the project to see the behavior. Now the EmployeeList and EmployeeSales grid are in sync. When an employee is selected, only that employees data will show in the grid.
At this point EmployeeList is acting as a filter for EmployeeSales, however the data shown does not reflect the StatsFrom/StatsTo date range. With the filtering code in place, additional controls are wired up with relative ease. Let's wire up the StatsFrom/StatsTo DatePickers to EmployeeSales.
In the view /Views/Home/Index.cshtml
find the StatsFrom DatePicker.
@(Html.Kendo().DatePicker()
.Name("StatsFrom")
.Value(new DateTime(1996, 1, 1))
)
Add the Events
property and set the Change
event to onCriteriaChange
.
@(Html.Kendo().DatePicker()
.Name("StatsFrom")
.Value(new DateTime(1996, 1, 1))
.Events(e => e.Change("onCriteriaChange"))
)
Find the StatsTo DatePicker and set the Events
property and set the Change
event to onCriteriaChange
.
@(Html.Kendo().DatePicker()
.Name("StatsTo")
.Value(new DateTime(1998, 8, 1))
.Events(e => e.Change("onCriteriaChange"))
)
Save the changes and refresh the browser. StatsFrom/StatsTo and EmployeeList will update EmployeeSales with data based on the selected dates and employee.
Your Team Efficiency Dashboard is now interactive, users can filter data using dates and employees. Next, you'll enhance the application by adding some data visualizations.
In this chapter you'll learn how to add Kendo UI Chart widgets to your application. The Telerik ASP.NET MVC chart, powered by Kendo UI, is a powerful data visualization component, which allows you to graphically represent your data. It is useful when you would like to utilize modern browser technologies such as SVG or Canvas (with a fallback to VML for older IE versions) for interactive data visualizations.
The component offers a variety of chart types such as area, bar, line, scatter, polar, radar, pie and donut, stock (OHLC) and many more.
The Chart HtmlHelper extension is a server-side wrapper for the Kendo UI Chart widget.
Example:
@(Html.Kendo().Chart(Model) // The chart will be bound to the Model which is the InternetUsers list
.Name("internetUsersChart") // The name of the chart is mandatory. It specifies the "id" attribute of the widget.
.Title("Internet Users")
.Series(series => {
series.Bar(model => model.Value) // Create a bar chart series bound to the "Value" property
.Name("United States");
})
.CategoryAxis(axis => axis
.Categories(model => model.Year)
)
)
Begin by adding a Bullet chart, a variation of a bar chart. Bullet charts make great dashboard gauges or meters. The bullet graph compares a given quantitative measure against qualitative ranges and a symbol marker.
Since changes to the controller are necessary, stop the application if it is running.
Use partials to keep the markup tidy. Under 'Views/Home/' add a new empty partial view '_QuarterToDateSales.cshtml'
In the new partial view _QuarterToDateSales.cshtml
add a new Kendo UI Chart helper of type QuarterToDateSalesViewModel
. The QuarterToDateSalesViewModel
is part of the quick start bolierplate.
@(Html.Kendo().Chart<KendoQsBoilerplate.QuarterToDateSalesViewModel>()
)
Set the Name
property to EmployeeAverageSales
.
.Name("EmployeeQuarterSales")
Using the .HtmlAttributes
property Set the controls height to 30px
.
.HtmlAttributes(new { style = "height:30px;" })
Next, add and define a Bullet
chart with the following properties.
Current
property on the model.Target
property on the model..Series(series =>
{
series.Bullet(model => model.Current, model => m.Target);
})
Next, add and configure the Category Axis. Since the chart will be a spark line visualization, set these properties to false
.CategoryAxis(ca => ca.Labels(lab => lab.Visible(false))
.MajorGridLines(m => m.Visible(false)).Visible(false)
)
Next, add and configure the ValueAxis with a Numeric configuration.
Since the chart will be a spark line visualization, set these Visible
properties to false
to disable them.
.ValueAxis(va => va.Numeric()
.Labels(lab => lab.Visible(false))
.MajorGridLines(m => m.Visible(false))
.MajorTicks(mT => mT.Visible(false))
)
Also set the Legend
to false
.Legend(leg => leg.Visible(false))
Configure the DataSource
by setting Read
to the action EmployeeQuarterSales
on the Home
controller.
Using the Data
property, set the value to getEmployeeFilter
sending filter data back to the Read
action.
Since the DataSource will be invoked on manually, set AutoBind
to false
.AutoBind(false)
The resulting code should be:
@(Html.Kendo().Chart<KendoQsBoilerplate.QuarterToDateSalesViewModel>()
.Name("EmployeeQuarterSales")
.HtmlAttributes(new { style = "height:30px;" })
.Series(series =>
{
series.Bullet(m => m.Current, m => m.Target);
})
.CategoryAxis(ca => ca.Labels(lab => lab.Visible(false))
.MajorGridLines(m => m.Visible(false)).Visible(false)
)
.ValueAxis(va => va.Numeric()
.Labels(lab => lab.Visible(false))
.MajorGridLines(m => m.Visible(false))
)
.Legend(leg => leg.Visible(false))
.DataSource(ds => ds
.Read(read => read.Action("EmployeeQuarterSales", "Home")
.Data("getEmployeeFilter"))
)
.AutoBind(false)
)
Open controllers/HomeController.cs
and create a controller action named EmployeeAverageSales
on the Home
controller. This action will supply the Chart with data.
The boilerplate installed in Chapter 1 has a function named EmployeeQuarterSales
, this query will select the data required for the chart. Return the results of EmployeeQuarterSalesQuery
as JSON.
public ActionResult EmployeeQuarterSales(int employeeId, DateTime statsTo)
{
DateTime startDate = statsTo.AddMonths(-3);
var result = EmployeeQuarterSalesQuery(employeeId, statsTo, startDate);
return Json(result, JsonRequestBehavior.AllowGet);
}
Add the partial view to the main application page.
In Views/Home/Index.cshtm
find the <!-- QTD Sales Chart -->
placeholder.
<!-- QTD Sales Chart -->
@Html.Placehold(430, 120, "Chart")
Replace the placeholder with the _QuarterToDateSales
partial.
<!-- QTD Sales Chart -->
@Html.Partial("_QuarterToDateSales")
Find the scripts section.
<script>
...
</script>
Add a new function named refreshEmployeeQuarterSales
, this function will invoke read
on the chart's DataSource.
The resulting code should be:
function refreshEmployeeQuarterSales() {
var employeeQuarterSales = $("#EmployeeQuarterSales").data("kendoChart");
employeeQuarterSales.dataSource.read();
}
Find and modify the onCriteriaChanged
function so it calls refreshGrid
updating the entire dashboard when a filter is changed.
function onCriteriaChange() {
updateEmployeeAvatar();
refreshGrid();
refreshEmployeeQuarterSales();
}
Run the application to see the chart render on the dashboard. Change the filter criteria to see the chart update along with other UI elements.
Next, add a Line chart, a Line chart shows data as continuous lines that pass through points defined by their items' values. It can be useful for showing a trend over time and comparing several sets of similar data. For this example, you'll use a Line chart to show trend data.
Since changes to the controller are necessary, stop the application if it is running.
Use partials to keep the markup tidy. Under 'Views/Home' add a new empty partial view '_MonthlySalesByEmployee.cshtml'
In the new partial view _MonthlySalesByEmployee.cshtml
add a new Kendo UI Chart helper.
@(Html.Kendo().Chart<KendoQsBoilerplate.MonthlySalesByEmployeeViewModel>()
)
Set the Name
property to EmployeeAverageSales
.
.Name("EmployeeAverageSales")
Set the controls height to 30px
.
.HtmlAttributes(new { style = "height:30px;" })
Next, add and define a Series chart with the following properties.
Line
to the EmployeeSales
property on the model.Width
to 1.5
Markers
visible property to false
#=kendo.toString(value, 'c2')#
.Series(series =>
{
series.Line(model => model.EmployeeSales)
.Width(1.5)
.Markers(m => m.Visible(false))
.Tooltip(t => t.Template("#=kendo.toString(value, 'c2')#"));
})
Next, add and configure the Category Axis with a Date
configuration
Set the Category to the Date
field of the view model
Since the chart will be a formatted like a sparkline, set these Visible
properties to false
to disable them.
.CategoryAxis(ca => ca
.Date()
.Categories(model => model.Date)
.Visible(false)
.MajorGridLines(m => m.Visible(false))
)
Next, add and configure the ValueAxis with a Numeric configuration.
Set the following Visible
properties to false
to disable them.
.ValueAxis(va => va.Numeric()
.Visible(false)
.Labels(lab => lab.Visible(false))
.MajorGridLines(m => m.Visible(false))
)
Also set the Legend
to false
.Legend(leg => leg.Visible(false))
Configure the DataSource
by setting Read
to the action EmployeeAverageSales
on the Home
controller.
Using the Data
property, set the value to getEmployeeFilter
sending filter data back to the Read
action.
Add an Aggregates
on the DataSource to Average
the EmployeeSales
.
.DataSource(ds => ds
.Read(read => read.Action("EmployeeAverageSales", "Home")
.Data("getEmployeeFilter"))
.Aggregates(a => a.Add(model => model.EmployeeSales).Average())
)
Since the DataSource will be invoked on manually, set AutoBind
to false
.AutoBind(false)
The resulting code should be:
@(Html.Kendo().Chart<KendoQsBoilerplate.MonthlySalesByEmployeeViewModel>()
.Name("EmployeeAverageSales")
.HtmlAttributes(new { style = "height:30px;" })
.Series(series =>
{
series.Line(model => model.EmployeeSales)
.Width(1.5)
.Markers(m => m.Visible(false))
.Tooltip(t => t.Template("#=kendo.toString(value,'c2')#"));
})
.CategoryAxis(ca => ca
.Date()
.Categories(model => model.Date)
.Visible(false)
.MajorGridLines(m => m.Visible(false))
)
.ValueAxis(va => va.Numeric()
.Visible(false)
.Labels(lab => lab.Visible(false))
.MajorGridLines(m => m.Visible(false))
)
.Legend(leg => leg.Visible(false))
.DataSource(ds => ds
.Read(read => read.Action("EmployeeAverageSales", "Home")
.Data("getEmployeeFilter"))
.Aggregates(a => a.Add(model => model.EmployeeSales).Average())
)
.AutoBind(false)
)
Open controllers/HomeController.cs
and create a controller action named EmployeeAverageSales
on the Home
controller. This action will supply the Chart with data.
The boilerplate installed in Chapter 1 has a function named EmployeeAverageSalesQuery
, this query will select the data required for the chart. Return the results of EmployeeAverageSalesQuery
as JSON.
public ActionResult EmployeeAverageSales(
int employeeId,
DateTime statsFrom,
DateTime statsTo)
{
var result = EmployeeAverageSalesQuery(employeeId, statsFrom, statsTo);
return Json(result, JsonRequestBehavior.AllowGet);
}
Add the partial view to the main application page.
In Views/Home/Index.cshtm
find the <!-- Montly Sales Chart -->
placeholder.
<!-- Montly Sales Chart -->
@Html.Placehold(430, 120, "Chart")
Replace the placeholder with the _MonthlySalesByEmployee
partial.
<!-- Montly Sales Chart -->
@Html.Partial("_MonthlySalesByEmployee")
Find the scripts section.
<script>
...
</script>
Add a new function named refreshEmployeeAverageSales
, this function will invoke read
on the chart's data source.
The resulting code should be:
function refreshEmployeeAverageSales() {
var employeeAverageSales = $("#EmployeeAverageSales").data("kendoChart");
employeeAverageSales.dataSource.read();
}
Find and modify the onCriteriaChanged
function so it calls refreshGrid
updating the entire dashboard when a filter is changed.
function onCriteriaChange() {
updateEmployeeAvatar();
refreshGrid();
refreshEmployeeQuarterSales();
refreshEmployeeAverageSales();
}
Run the application to see the chart render on the dashboard. Change the filter criteria to see the chart update along with other UI elements.
Charts, like other Kendo UI widgets are easy to interact with on the client side. By handling the chart's events additional functionality can be added to the application. Use the DataBound event and the DataSource to populate values on labels within the Team Efficiency Dashboard.
In Views/Home/Index.cshtm
, find the scripts section.
<script>
...
</script>
Add a function named onQuarterSalesDataBound
, find the first element of the datasource and displays the Current value in EmployeeQuarterSalesLabel
.
function onQuarterSalesDataBound(e) {
var data = this.dataSource.at(0);
$("#EmployeeQuarterSalesLabel").text(kendo.toString(data.Current, "c2"));
}
Add a function named onAverageSalesDataBound
find the dataSource aggregates and display the average of EmployeeSales
in the EmployeeAverageSalesLabel
.
function onAverageSalesDataBound(e) {
var label = $("#EmployeeAverageSalesLabel"),
data = this.dataSource.aggregates()
if (data.EmployeeSales) {
label.text(kendo.toString(data.EmployeeSales.average, "c2"));
} else {
label.text(kendo.toString(0, "c2"));
}
}
Open the partial view _MonthlySalesByEmployee.cshtml
and add a DataBound
event handler to the chart, set the event handler to onQuarterSalesDataBound
.
@(Html.Kendo().Chart<KendoQsBoilerplate.MonthlySalesByEmployeeViewModel>()
...
.AutoBind(false)
.Events(e => e.DataBound("onAverageSalesDataBound"))
)
Open the partial view _QuarterToDateSales.cshtml
and add a DataBound
event handler to the chart, set the event handler to onQuarterSalesDataBound
.
@(Html.Kendo().Chart<KendoQsBoilerplate.QuarterToDateSalesViewModel>()
...
.AutoBind(false)
.Events(e => e.DataBound("onQuarterSalesDataBound"))
)
The Team Efficiency Dashboard is starting to look complete, but it hasn't been tested for devices like mobile phones or tablets yet. In the next chapter you'll use responsive web design techniques to support devices beyond the desktop.
In this chapter you'll learn how to make the dashboard application look amazing on any device size. The Team Efficiency Dashboard layout uses Bootstrap for some basic responsive functionality, however more detailed controls like the grid need extra attention to ensure a proper user experience on any device size. In the next few steps you'll take the app from desktop, to anywhere, with a few key changes.
Run the project and shrink the browser window horizontally to about 400 pixels wide. Refresh the browser and observe how the application elements stack nicely, but the grid bleeds off the page. There is simply too much information in the grid to show at this screen size. By setting a few properties we can remove non-essential columns from the grid for small screens.
Open Views/Invoice/Index.cshtml
and find where the Columns
are defined in the EmployeeSales
grid.
.Columns(columns =>
{
...
})
First, remove the Salesperson
column completely. The sales person is already displayed at the top of the page.
Set the MinScreenWidth
of the CustomerName
column to 900. This means that the column will no longer be displayed on screen sizes less than 900 pixels wide.
Set the MinScreenWidth
of the ProductName
column to 768. This means that the column will no longer be displayed on screen sizes less than 768 pixels wide.
.Columns(columns =>
{
columns.Bound(c => c.CustomerName).MinScreenWidth(900);
columns.Bound(c => c.OrderDate).Format("{0:MM/dd/yyyy}");
columns.Bound(c => c.ProductName).MinScreenWidth(768);
columns.Bound(c => c.UnitPrice);
columns.Bound(c => c.Quantity);
})
Refresh the page, then shrink and grow the browser to different widths to see how the grid reacts at various sizes.
When changing the screen size you may have noticed the Report Range side bar disappear. If not, take a moment to adjust the browser width again to see the side bar's behavior. Currently the side bar is hidden using Bootstrap's hidden-xs
class. Bring back the side bar using a Kendo UI ResponsivePanel and make a seamless user experience on any device size.
Open Views/Home/Index.cshtml
and find the <!-- Menu Panel -->
placeholder.
Below the <!-- Menu Panel -->
placeholder add a ResponsivePanel
. Set the Name
to menuPanel
and set the Breakpoint to 768
.
Add a Content
property and include all of the elements until you reach the ending placeholder <!-- /Menu Panel -->
Note: The "at" symbol
@
is used as an escape charter for HTML content.
The resulting code should be:
<!-- Menu Panel -->
@(Html.Kendo().ResponsivePanel().Name("menuPanel").Breakpoint(768).Content(
@<div class="hidden-xs" style="float:left;">
...
</div>
))
<!-- /Menu Panel -->
Remove class="hidden-xs" style="float:left;"
from the div
element in the newly added responsive panel.
<!-- Menu Panel -->
@(Html.Kendo().ResponsivePanel().Name("menuPanel").Breakpoint(768).Content(
@<div>
...
</div>
))
<!-- /Menu Panel -->
Next, add a button for users to tap and toggle the responsive panel.
Find the following block of code:
<section id="app-title-bar" class="row">
<div class="col-sm-3">
<h1<EMAIL_ADDRESS></div>
</section>
After the section's closing tag </section>
, add a new div
with a class
of hamburger
.
Inside the hamburger div
, create a Kendo UI Button. Set the button's following properties:
Note: Any element with the class
k-rpanel-toggle
will be able to toggle the current page's responsive panel.
<div class="hamburger">
<!-- toggle button for responsive panel, hidden on large screens -->
@(Html.Kendo().Button()
.Name("menuPanelOpen")
.Content("menu")
.Icon("hbars")
.HtmlAttributes(new { @class = "k-rpanel-toggle" }
)
</div>
Open Content/Site.css
and find the /* Top Bar */
placeholder.
/* Top Bar */
Add a style that selects the hamburger
element and sets the position
to absolute
. Give the style a top
of 5
and left
of 5
to create a margin around the element.
.hamburger {
position: absolute;
top: 5px;
left: 5px;
}
Add a style that selects the menuPanel
. Set a solid background color of #fff
(white), include a padding
of 10px
and z-index
of 3
. This style will ensure that the panel appears above other UI elements and has a solid background.
#menuPanel {
background-color: #fff;
padding: 10px;
z-index: 3;
}
Run or refresh the application. Expand and contract the browser's width, notice the menu button appear when the browser is small. Click the menu button to open the panel. Click beside the panel to collapse it.
For a better user experience, add close button to the panel so the interaction is discoverable and intuitive.
Find the menuPanel
and add a Kendo UI Button inside the Content's first div
. Set the button's properties to:
Wrap the button in a div
with a class of text-right
to position the button on the right hand edge of the panel.
@(Html.Kendo().ResponsivePanel().Name("menuPanel").Breakpoint(768).Content(
@<div>
<div class="text-right">
@(Html.Kendo().Button()
.Name("menuPanelClose")
.Content("Close")
.Icon("close")
.HtmlAttributes(new { @class = "k-rpanel-toggle" })
)
</div>
...
</div>
Refresh the application. Expand and contract the browser's width until the menu button is shown. Toggle the responsive panel using the menu and close buttons.
The application is almost complete, just apply a nice bright theme and it will be ready to ship.
Kendo UI widgets include a number of predefined themes. In this chapter you'll learn how to make your app look amazing using Kendo UI themes.
If the project is running, stop the project.
In Visual Studio's Project Explorer, Right click on the project and choose Telerik UI For MVC > Configure Project from the menu.
From the Project Configuration Wizard, choose the Nova theme.
Open Views/Shared/_Layout.cshtml
and move @Styles.Render("~/Content/css")
just above the closing head tag </head>
.
Run the application to see the theme applied to the Kendo UI widgets.
Next, you'll be finishing the theme by adding styles to non-Kendo UI elements creating a completely custom look.
A style sheet was installed with the boilerplate to give you a jump-start. Add it to the application by opening Views/Shared/_Layout.cshtml
and adding a reference to ~/Content/site-nova.css
just above the closing head tag </head>
.
Note: This is CSS, so the order in which the style sheets are added is very important.
<link href="~/Content/site-nova.css" rel="stylesheet" />
</head>
Refresh the application and notice the look is starting to come together. There's just a few items that could use some fine-tuning. Let's add some additional styles to site-nova.css
to complete the theme.
Open site-nova.css and find /* Side Panel - Employee List */
. Add a style that sets the date picker widgets inside the menuPanel to %100 width of the container.
The resulting code should be:
/* Side Panel - Employee List */
#menuPanel .k-widget.k-datepicker.k-header {
width: 100%;
}
Add a style to offset the employee list so its content lines up with the left edge of its container.
#employee-list > ul {
margin: 0 -10px;
}
Find /* Small Devices, Tablets, and Up */
. Here you'll find a media query that will hold some styles that are only applied to scree sizes above 768px
.
@media only screen and (min-width : 768px) {
}
Inside the media query add a selector for .app-wrapper
and set a left margin of -15
and set the position
to relative
. This style will align the app with the left hand edge of the screen.
/* Small Devices, Tablets, and Up */
@media only screen and (min-width : 768px) {
.app-wrapper {
position: relative;
margin-left: -15px;
}
}
Finally, set the Kendo UI Chart themes.
Open _MontlySalesByEmployee.cshtml
and set the Theme
property to nova
on the EmployeeAverageSales
chart.
@(Html.Kendo().Chart<KendoQsBoilerplate.MonthlySalesByEmployeeViewModel>()
.Name("EmployeeAverageSales")
...
.AutoBind(false)
.Events(e => e.DataBound("onAverageSalesDataBound"))
.Theme("nova")
)
Open _QuarterToDateSales.cshtml
and set the Theme
property to nova
on the EmployeeQuarterSales
chart.
@(Html.Kendo().Chart<KendoQsBoilerplate.QuarterToDateSalesViewModel>()
.Name("EmployeeQuarterSales")
...
.AutoBind(false)
.Events(e => e.DataBound("onQuarterSalesDataBound"))
.Theme("nova")
)
And... that's it! You've created an interactive dashboard application using Telerik UI for MVC and Kendo UI. In the process you've mastered scaffolding, Kendo UI templates, charts, server and client-side APIs, responsive web design and themes.
Congratulations!
Your journey with Telerik is just beginning. Here are some resources to help you figure out where to go from here.


{% extends "layout.html" %} {% block styles %} {% endblock %} {% block scripts %} {% endblock %} {% block content %}
MediaCrush relies on a lot of new technologies to get you videos. For the majority of our users, this isn't a problem. However, some users have trouble playing our videos. If videos aren't playing well for you, it might be one of the following problems:


val outputIndices: List<Int>
A collection of indices of registers that the program uses as output.
outputIndices - A collection of indices of registers that the program uses as output.
outputIndices


-
critics reviews of hbo soprano's finale
Abstract - University of Hawaii
The intent was to have a metamediary provide a virtual mall and advertising, . limited by the remote geographical location and its natural tourist attractions. . where customers can invest online, and CarsDirect.com, where high volume and .
http://www2.hawaii.edu/~walbritt/research/report.doc
-
us army support kuwait
Atlas Rich Media: Publishers
CarsDirect.com CartoonNetwork.com. Cash.CH CBS Digital Media CBSmarketwatch.com CBSsportsLine.com. Channel 4 Shop UK CheckInterestRates.com .
http://www.atlasrichmedia.com/index.php?page=publishers
-
air charged lathe chucks
Things You Should Know In Buying A Car Online
. set of information, you can also have a hassle-free virtual car shopping spree. . CarsDirect.com, AutoWeb, Edmunds.com, Car.com, AutoByTel and AutoUSA . Guide and is widely used by travelers, expats and tourists around the world.
http://www.streetdirectory.com/travel_guide/214302/car_buyer/things_you_should_know_in_buying_a_car_online.html
-
ringtones for blackberry verizon wireless phones
Import-Export - Global Car Locator
Virtual Showroom: (22 cars) . New cars direct from USA with no USA tax! . Leisure travels, Tourism & Amusement centers, Catering, Security services, Health .
http://www.globalcar.com/directory/services/import-export/1.htm
-
hp discount lcolor laser printers
Sonya Armstrong | Facebook
. I'm Like Madea I believe in getting equal, you hit me, I hit you back.(:, Tourism Fiji, Outshine, Experience Chehalis, Hotwire, Oracle Socialand 1,959 more.
http://www.facebook.com/sonya.armstrong.79
-
papers on povrty reduction in nigeria
Fitzgerald - Miami/Fort Lauderdale Area
+Currently managing the planning, design and construction of the virtual set studio . apartments for short-term rentals to upscale tourists and business travelers. . Director at DealerTrack, Area Manager at Internet Brands / Carsdirect, Senior.
http://www.linkedin.com/pub/dir/+/Fitzgerald/us-56-Miami%2FFort-Lauderdale-Area
-
new born kidnapping united states statistics
ado design - web design portfolio
ado design web design portfolio work for virtualtourist, yahoo, doodah surf, edivvy, lunch, moodcount, melissa graves brown, . cars direct deals section .
http://www.ado-design.com/
-
passing a drug test thc
Using Ecommerce to improve - Kiwiwebs
www.carsdirect.net.nz . but growing, as people become more confident, and for some industries (like travel and tourism) the B2C market is growing very fast.
http://www.kiwiwebs.info/ecommerce/05-using_ecommerce.doc
-
album and movie cover art
E-Commerce
Jan 19, 2012 . Creating a social media strategy for a tourism business | Block 4: Case presenta
. Advertising Networks [DoubleClick] Buy/Sell Fulfillment [CarsDirect . Merchant: Search Agent Virtual Merchant [Amazon.com] Virtual .
http://www.slideshare.net/franciscohm73/ecommerce-11162065
-
microsoft student software facts
Beverly Millson - Google+
. Missing Sock Public Relations - Austin, Texas - Building new brain cells on a diet of virtual art, Augmented Reality, robotics, 3D immersive virtual worlds.
https://plus.google.com/112105846790781064323
-
samsung sgh c300 manual
Mentors & Advisors | Los Angeles CleanTech Incubator (LACI)Los ...
As CTO at Carsdirect.com, he led the design of the customer request business . in international trade, entertainment, tourism, manufacturing and professional services. . Glenn worked for Walt Disney Imagineering as co-director of the Virtual .
http://laincubator.org/people/mentors-advisors/
-
clast english practice test
Automotive Classifieds in the Yahoo! Directory
Find sites offering auto classifieds, including regional car .
http://dir.yahoo.com/business_and_economy/shopping_and_services/automotive/classifieds/?o=a
-
iridium spark plugs 2002 honda accord
accommodation Giant Mountains
TOURIST LINES IN THE KRKONOEMTS. Each bus (except line 5) can take at . the western part of Giant mountains. You can park you cars direct by pension.
http://www.accommodation-giant-mountains.com/
-
free journal articles on erik erikson
Welcome to TopGuide.Com - Best web sites on one page
Virtual Tourist | Travel Library | TravelPod | IgoUgo | TravelBlog | TrekShare . Yahoo Autos | Edmunds | CarsDirect | KBB | Autoweb | NADAguide | Carfax | | .
http://www.topguide.com/
-
cannot save pagemaker default file
Work at Home Jobz: 07/03/12
Jul 3, 2012 . CarsDirect is looking to hire passionate car enthusiasts with a track . We are seeking a Virtual Recruiter to help us find new job candidates.
http://www.wahjobz.com/2012_07_03_archive.html
-
star trek borg introduction
Chapter 3
Dec 5, 2009 . Describe how online travel and tourism services operate and their industry impact. 4. . Why are virtual e-tailers usually not profitable? . Automobile rating sites (carsdirect.com, autoinvoices.com, and feuleconomy.gov) e.
http://www.docstoc.com/docs/18583324/Chapter-3
-
honolulu greek fest details
Car Rentals Online (Info About Car Rentals)
Holiday Cars Direct.com · RentalCar.com . Tourism directory with travel related information and links to advertisers. www.virtualtourist.com. Interactive site .
http://www.infofaq.com/buying-online/travel/Car-Rentals.html
-
substance abuse testing child welfare
Internships near ca - Internships.com
This is a virtual internship that can be done from anywhere in the US (and we take . (Celebrity Apprentice, Business woman) Scott Painter (True Car, Cars Direct) . mountaineers, campers, adventure racers, bicycle tourists, car-trippers, and .
http://www.internships.com/search/post/results?location=ca&start=8270&limit=10
-
is hexametaphosphate in tooth paste
Products and
Virtual e-tailers sell over the Internet without a physical sales channel. General . Using a virtual car at jaguar.com. Consumers . Travel and Tourism Services ( cont.) Information . autobytel.com; carsdirect.com (Amazon.com's partner). 97 .
http://bm.gduf.edu.cn/kcpt/dzswe/doc/kj/Chapter03.ppt
-
biology related oilfield jobs
EC2004_ch03.ppt
Describe how online travel and tourism services operate and their industry impact. . Carsdirect.com allows it to sell cars online; Drugstore.com connects to health and . Virtual (pure-play) e-tailers: Firms that sell directly to consumers over the .
http://utminers.utep.edu/mmahmood/cis5340ec/PPTs/EC2004_ch03.ppt


--- layout: post status: publish published: true title: WSCF 0.4 author: display_name: Tomas Restrepo login: tomasr email<EMAIL_ADDRESS>url: http://winterdom.com/ author_login: tomasr author_email<EMAIL_ADDRESS>author_url: http://winterdom.com/ wordpress_id: 367 wordpress_url: http://winterdom.com/2004/12/wscf04 date: '2004-12-07 04:03:50 +0000' date_gmt: '2004-12-07 04:03:50 +0000' categories: - Web Services tags: [] comments: [] ---
Christian Weyer just announced the release of WSCF 0.4. This is very exciting for me, not only because of the new features it brings to the table (the WSDL wizard rocks!), but also because I was lucky enough to be allowed to try early copies of the tool, and immediately saw the great potential it has to improve how we approach our webservices creation process. I wholeheartedly recommend anyone working with ASMX WebServices to give it a spin.
Congrats my friend!


You are going to run a new simulation, all charts and trials are going to be lost. A new ones will be available after the simulation.
Check your new environment variables for this simulation.
| Variable | Value | Variable | Value |
|---|
You can download the results of the selected trial in GEXF or JSON Graph format for your personal purposes.
For downloading the results of the other trials simulated, please first select them in menu.


{% extends 'commercialoperator/base.html' %} {% load static %} {% block content %}
A confirmation email has been sent to {{ submitter }}.
Please click here if you want to make another booking.
You must be logged in to see your invoice online.
{% endif %} {% endif %}You must bring your confirmation with you to the park
{% else %}You do not have permission to access the confirmation or invoice for this booking.
Please check your email or contact COLS directly.


Welcome to MyOpinionMatters!
Today, we are delighted to launch our shiny new website and welcome all our new members. MyOpinionMatters is Ireland's leading market research company and by signing up you are joining a community of thousands of people from every walk of life, across the country.
We look forward to sending you fun and engaging surveys on everything from your favourite brands, current affairs, new trends or even advance looks at advertising campaigns.
Our mission at MyOpinionMatters is to get your opinion on all these things, and we promise to make it worth your while by giving you Reward Points, which can be exchanged for Gift Cards or else used to buy tickets for bigger, more extravagant prizes like hotel breaks or even flights abroad.
Your opinion is fundamental to the success of MyOpinionMatters so here are a few extra hints and tips to help you get the most out of it.
-
Don't leave us hanging: Surveys are usually only open for a few days, and we often start closing them gradually as we get enough replies from certain ages/genders. Act quick to make sure your voice is heard and you get your Reward Points.
-
Try every survey: Even if you do not qualify for a specific survey, we will enter you into a monthly draw for free €20 Gift Cards just for making the attempt. The more survey's you try, the more entries you get!
-
Get your Prize Draw Ticket: Every few weeks, a lucky member of the community will win one of our big prizes, to celebrate the launch of our new website we are offering a €500 voucher of your choice. The only way to enter is to use Reward Points to purchase tickets but you can buy as many tickets as you like, and each one increases your winning chances.


All our lives we are inclined to believe that we are in a multiplayer game with more than 7 billion people around us playing the same game. We are in a constant fear of peer pressure, sometimes doing things, we don’t want to do at all. We feel that if we do not follow or chase what others are doing, we will be left behind. The reality is kind of opposite in my opinion. Do you know that what is our default state? Its solitude.
In our heads, we are always making stories which does not make sense at all. We fear of those future incidents which haven’t happened yet, and probably will never occur. The disadvantage of all of this is that we forget what actually matters in this life.
The interactions we are having with each other may have an effect on our internal state but sometimes our internal state changes without any interference from the outer world. To overcome this, mindfulness can help us in a lot of ways. If you are having any trouble with passing an exam, getting a job or finding a loved one, always remember that they are the things which will eventually happen if you keep on working towards them. What matters is your state of mind at this moment, take a second and feel grateful of what you have right now.
If we take example of education, we will see that since childhood we are thrown into a well where everyone just competes with each other to get out of the well, but the truth is, there is no getting out. There will always be a person more learned than you. There will always be a person who has a higher degree than you. There will always be a person who has more gold medals than you. We turn learning into a multiplayer game where we compete with others to stay ahead. Although competition is important, it is a force that moves us forward, but it should never get involved in our happiness. We should remember that happiness is single player.
Another multiplayer game that the society has created is making money. How much should one make to feel satisfied? Do you think all the billionaires are content with what they have? They are not. Within those top one percent, they contest with each other. Even if you start making one million dollars per year from now on, there will still be a person making more than you.
Additionally, you cannot share your happiness. Even if you do, you are doing it because you feel better after doing it. The competitive games we are trying to play are never winnable. You can be the richest person but one day you will not be the richest anymore. It may sound strange, but you cannot be best at everything. If you are great at one thing, you will not be good at another.
We keep working hard in these external games, but never ever have we focused on our internal settings. We strive for more, perhaps this new thing will make our life feel satisfied but its not going to work. The answer is to stop playing. Nevertheless, life goes on and we have to work towards our goals which will turn into other goals after few months sometimes years. You are not in a competition to be happier than others.
The most brilliant and happy people I have seen all work in a single player mode. They don’t experience jealousy to the extent that normal people do. They consider success as a byproduct. You might ask a byproduct of what? In reply I would say of happiness. They don’t chase success like most of us do. There is no doubt that we can never be totally happy, we will keep on playing these multiplayer competitive games. The important thing is to remind ourselves everyday that they don’t matter more than our internal conditions. If we remove all the noise and distractions, then focus on our interior signals, we can achieve what is not found in our lives at this point of time.
Star thinking single player. Measure yourself against yourself. Have you ever thought where were you ten years ago on October 17th, 2009? How far have you reached? If you focus on your inner workings, you will able to move towards a meaningful life.
I would like to end this by mentioning what Naval Ravikant said in this podcast:
“Life is a single player game. You are born alone.  All of your interpretations are alone. All of your memories are alone. You are gone in three generations and no one cares. Before you showed up nobody cared. Its all SINGLE PLAYER !”


--- layout: post status: publish published: true title: Javier Baez Out 4-8 Weeks author: display_name: Sean Clement login: Sean email<EMAIL_ADDRESS>url: '' author_login: Sean author_email<EMAIL_ADDRESS>wordpress_id: 11244 wordpress_url: http://ivyenvy.com/?p=11244 date: '2015-06-08 07:49:34 +0000' date_gmt: '2015-06-08 12:49:34 +0000' categories: - Infield - Minor Leagues tags: - Iowa Cubs - Javier Baez comments: - id: 18885 author: Jeff Lembcke author_email: '' author_url: '' date: '2015-06-08 08:30:56 +0000' date_gmt: '2015-06-08 13:30:56 +0000' content: Bummer - id: 18886 author: Bob Johnson author_email: '' author_url: '' date: '2015-06-08 12:20:32 +0000' date_gmt: '2015-06-08 17:20:32 +0000' content: Shame, the kid looked like he made some positive swing changes. Timing is everything. Hopefully middle August call up. ---
Saturday night the Ivy Envy crew watched on with family and friends of the podcast at Des Moines’ Principal Park for the annual meet-up as the Iowa Cubs played Memphis, showing off a new infield configuration.
Javier Baez, as has been well-documented, had slid over from his normal middle infield confines to get reps over at the hot corner – a move that seemed likely to precede a call up to Chicago and the big league squad.
Indeed, with the Cubs preparing for two upcoming Interleague series with designated hitters in play, the timing seemed to be lining up for Baez to get a well deserved second shot at the majors within the next week, if not earlier.
Baez has calmed his approach at the plate recently, decreasing his strikeout rate to a very palatable 25% and not losing any of his trademark raw power in doing so. He proved as much Saturday night, blasting a two-run homer off the light tower in deep left field, salvaging an otherwise quiet night from the I-Cubs.
Maybe more impressively, Baez looked comfortable at third base. Strong infield defense from Javy isn’t a surprise, but with so few reps there, it was good to see. Notably, the only thing that seemed unnatural about Baez transition to the corner was deferring to the shortstop on pop-ups on the infield, showing off McKayla Maroney-esque ‘Not Impressed’ body language after allowing Jonathan Mota to snare a pop-up that Baez is used to handling himself.
Baez had his triple slash up to .314/.386/.536 and was checking all the boxes to show he was ready for another chance after a mostly disappointing first try in the MLB.
Then, Sunday night, as Baez was stealing his 7th bag of the season, he apparently jammed his left hand, causing a non-displaced fracture in his left ring finger.
Early reports estimate a 4-8 week layoff for Baez, another bad break for the budding prospect after going through the tragic loss of his sister to open the season.
Baez is young and supremely talented and will get another chance soon enough. We can only hope for a speedy recovery and a quick return to form for the kid who will be champing at the bit to join his teammates in Iowa and eventually Chicago. He deserves it."


COMPUTER MEMORY
September 27th, 2014
What is computer memory?
Any form of electronic storage is considered computer memory. Accessing information from a computers harddrive is a slow process. For this reason information gets stored in memory and can be accessed at a much fast rate.
These is a hierarchy to accessing memory. The CPU will first access the random access memory (RAM), followed by whatever storage devices the computer might have(e.g. hard drives, USB drives) and lastly by unput sources (e.g. mouse, keyboard).
From the moment a computer is turned on to the time it is turned off computer memory is being used. When a computer is started the operating system (Windows or Linux) is loaded from the hard drive into the RAM. Not the whole operating system as that would be huge but essential components which the CPU would frequently access. When an application is started, it's loaded into the RAM, just like what occurs with the operating system it will only load the important parts and others on a, as needed basis. Files loaded into an application are loaded into the RAM. After use, when the file is saved and the application is closed the data gets stored into the hard drive memory and the memory in RAM is deleted to make space for the next application.
There are different forms of computer memory out there. CPUs these days can run at speeds of 1 gighertz and consume large amounts of data. The problem is these CPUs are expensive. To overcome this problem, designers have created "tiering" memory. This works as large inexpensive memory backs up small quantities of that large expensive CPU memory we mentioned. What is the large inexpensive memory that we are referring too. Simple, the hard drive memory and the allocation at this level for use with the CPU memory is termed "vitual memory".
The next level of memory the RAM (working memory.) RAM speed is based on bus width and bus speed. Bus width is the number of bits that can be sent to the CPU and bus speed is the number of times those bits can be sent each second. If you every come accross a 100-MHZ 32-bit bus this means it can sent 4 bytes (1 byte=8bits, 4bytes=32bits) at 100 millions times/second.
The last level of memory, sits between the RAM and the CPU is called the Cache. It is a small amount of memory that stores data of considerable high prority. Data that the CPU uses most often, and it sits nearest to the CPU, physically it's actually build right onto it.
ROM -Read only memory. This is permanent memory storing control programs and system software. Data in this class is used to performing booting on startup so deleting it would not be in anyones interest.


|
Home >
Enterprise >
Participants >
ReaQta > Carbanak+FIN7 Configuration
|
ReaQta Configuration
Product Versions
- ReaQta-Hive Windows: 3.3.11
- ReaQta-Hive Linux: 0.50.0
- ReaQta-Hive Server: 3.3.99
Product Description
ReaQta-Hive is an AI-powered endpoint security platform that leverages Dynamic Behavioral Analysis to identify and block the most advanced attacks, including zero day threats, in-memory malware and ransomware. Consolidated on a single and elegant dashboard, ReaQta streamlines the work of security analysts by automatically mapping the relevant MITRE ATT&CK events to existing security alerts and threat hunting activities. Attackers’ operations are broken down in stages, making it easy for analysts to identify the phases of the cyber kill-chain that have been reached for efficient, real-time remediation.
ReaQta-Hive makes the MITRE ATT&CK framework an integral part of its operations to speed up and simplify the work of security professionals, while providing in-depth visibility over complex behaviors.
ReaQta-Hive
ReaQta- Hive’s learning models profile the normal behaviour of each endpoint, enabling greater accuracy in detections and alerts when there are deviations from the normal. ReaQta-Hive’s algorithmic approach does not require the use of any managed service capabilities for detection, considerably reducing the workload for SOC teams and MSSPs.
ReaQta’s dashboard lays out a resolution workflow to guide analysts by providing risk indicators, impact assessment and a clear list of high-level activities conducted by attackers, without requiring manual analysis. A powerful threat hunting interface enables security teams to look for suspicious activities in real-time and to discover and aggregate MITRE ATT&CK techniques for easier assessment.
With a unique set of engines capable of continuous learning at both the endpoint and infrastructural levels, ReaQta-Hive can be deployed on-cloud, on-premise and in completely isolated environments, without degradation of performance.
ReaQta’s NanoOS technology
MITRE Engenuity Note: NanoOS was not included in this round's evaluation due to test setup
ReaQta’s proprietary NanoOS technology is a live-hypervisor component that provides deep visibility into endpoint behaviour by enabling monitoring from the hypervisor (Ring -1) layer. The feature is used to acquire low-level information and detect anomalies but this was disabled during the evaluation due to restrictions on the testing environment.
Primary features of NanoOS:
- Is invisible to malware, ensuring attack resilience
- Inspects the OS without modifying running applications/adding hooks that may generate instabilities
- Accurate, reliable data collection even in adversarial scenarios like post-breach assessments
- Little performance impact (<1% CPU)
ReaQta-Hive supports Windows, Linux, MacOS, and Android endpoints, allowing analysts to make use of a single agent to contextualize and respond to threats.
Product Configuration
- NanoOS: Disabled (due to restrictions in the testing environment)
- Quarantine: Disabled
- Anti-Malware: Disabled
- Protection Policies: Disabled
- Anti-Ransomware: Detection Only
- Telemetry level: Standard
- DeStra: Enabled


Custom Camera Controller UI
For greater control you can build out your own UI that sits on top of our base camera controller. To do so, subclass BRCameraViewController
and create your UI programmatically or in Interface Builder.
#import <BlinkReceipt/BlinkReceipt.h>
@interface MyCameraController : BRCameraViewController
Your camera controller interacts with properties and methods of its superclass to facilitate the scanning experience.
Initial Setup
- You must set the background of your view to be transparent so that the camera preview underneath will be visible.
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor clearColor];
}
- It is recommended to set
BRCameraViewController.scanningRegion
so that the area of the camera preview that is visible to the user corresponds to the region that is cropped out of the full camera frame for scanning. For example, to indicate that your UI uses margins of 10% screen width on the left and right, a margin of 5% on top, and some controls that occupy 30% on the bottom, you would use the following:
- (void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
self.scanningRegion = CGRectMake(0.1, 0.05, 0.8, 0.65);
}
Note
The components of this property are percentages not absolute pixel values. They must all be between 0.0 and 1.0.Basic Scanning
There are 3 base class methods for which you should provide UI in order to enable basic scanning functionality:
-[BRCameraViewController userSnappedPhotoOnReady:]
- Call this method when the user attempts to snap a picture (such as a press on a camera button)-[BRCameraViewController userConfirmedFrame:]
- Call this method when the user has indicated they are satisfied with the image that was returned by the previous call (this is necessary to ensure the image is saved properly at session end)-[BRCameraViewController userFinishedScan]
- Call this method when the user indicates the scan session is complete-[BRCameraViewController userCancelledScan]
- Call this method when the user cancels the scan session
Extended Functionality
See the BRCameraViewController
documentation for extended functionality:
“Base Class Methods” are methods you can call to control aspects of the scan session
“Subclass Methods” are methods you can implement that allow the base class to notify your subclass of various conditions during the scan session
Starting a Scan Session with a Custom Controller
To begin a scan session with your custom controller use the following:
MyCameraController *cameraController = [MyCameraController new]; //or instantiate from storyboard
[[BRScanManager sharedManager] startCustomCamera:cameraController
fromController:self
scanOptions:scanOptions
withDelegate:self];


Posted on: Wednesday, October 23, 2019
Reading time: 6 minutes and 11 seconds.
This post uses GA to generate a high quality solution of the Travelling Salesman Problem.
This blog post is regarding using genetic algorithm to solve the Travelling Salesman Problem. In a one liner the TSP asks the following question: Given a list of cities and the distances between each pair of the cities, what is the shortest possible route that visits each city and returns to the origin city?"
The conditions in this scenario are that no point can be visited twice and it must return to the starting point. The selected starting point here is New York. (The starting point does not really matter in this scenario.). There are times however, that a point maybe the revisited more than once in order to achieve a better solution. The number of cities in this scenario is 13. In this specific implementation, it will never visit the same city twice.
The inspiration for this post is based on the google OR-Tools found here. This blog post, however uses Genetic Algorithm to obtain the answer. It is implemented with a web worker which runs in the browser based on JavaScript.
I will also reuse the genetic algorithm implementation written for another blog post however with different fitness functions and different cross-over methodologies.
| Location | Coordinates | Shorthand |
|---|---|---|
| New York | 40, -74 | A |
| Los Angeles | 34, -118 | B |
| Chicago | 41, -87 | C |
| Minneapolis | 44, -93 | D |
| Denver | 39, -104 | E |
| Dallas | 32,-96 | F |
| Seattle | 47,-122 | G |
| Boston | 42,-71 | H |
| San Francisco | 37,-122 | I |
| St. Louis | 38,-90 | J |
| Houston | 29,-95 | K |
| Phoenix | 33,-111 | L |
| Salt Lake City | 40,-111 | M |
Total number of cities - 13.
In order to the Genetic Algorithm to work, a distance matrix needs to be given to it. This distance matrix is based on the “Euclidean Distance” and not Road Network distance. The distance matrix is obtained from here which has 13 cities in the United States.
It can be observed that the selection method random tends to not give a good result as it would defeat the purpose of the GA algorithm. The current mutation rate of the GA is set to 0.2 for this purpose. The starting population size is set to 20.
Due to the nature of GA, each run under the given settings will give a different solution as I have defaulted the number of generations to 500. This includes running with the same cross over methodology and selection methodology.
The fitness in general would depend on the cross over methodology. For example, if the roulette wheel methodology is used, it can be observed that the average fitness tends to spike more.
The suggested answer based on the Google OR tools is
New York -> Boston -> Chicago -> Minneapolis -> Denver -> Salt Lake City -> Seattle -> San Francisco -> Los Angeles -> Phoenix -> Houston -> Dallas -> St Louis -> New York which gives the total distance of 7293 miles which is also the minimal tour length.
The GA however does not obtain this solution. It does however, generate a high quality solution really quick.
The earth is not flat! Mapping putting coordinates using latitude and longitude on a chart, it would work in a different way so it displays beautifully. Latitude and longitude needs to be swapped.
Most chart API do not let you specify both the x-axis and y-axis at the same time. This is especially true if the chart is able to generate SVG diagrams. SVG diagrams are always nicer and would generally be of more responsive nature at the end of the day.
You can use a series graph to draw lines from a point to point in the chartist API. However, chartist API does not like the situation where there are two values on the same axis. (So it is not able to draw a straight line on the x-axis because of the nature of a series chart. An example of this is where there is a point on 30,55 and 30,65.
There are specific data sets in which people benchmark their TSP solutions.
The GA will downgrade into a random search if the mutation rate is too high. However, the mutation rate can always be change to tailor to the specific use case.


Full Stack Developer
Program Manager
ICT Professional (Sales & Marketing)
ERP Implementation Consultant
JavaScript, Databases, User Interface , User Interfaces, Accessibility, MCP, CCNA (training)
Business Transformation, Project Management Professional- training.
ERP Implementation, Documentation. Deploying software on cloud platforms .