Hi,
Today, with help of Telerik support, I've included Kendo UI in ASP.NET Boilerplate application. Since I can't find any posting on this, I share our results with you.
Integrating the Kendo UI CDN scripts in Angualar project:
1) Add the Kendo UI styles to the "layout.cshtml" page, inside the Web project, "App" folder:
- file path: testProject\testProject.Web\App\Main\views\layout\layout.cshtml
- styles added:
<
head
>
....
@Scripts.Render("~/Bundles/App/Main/js")
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css"
>
</
head
>
2) Add the Kendo UI scripts to the "layout.cshtml" page, inside the Web project, "App" folder:
- file path: testProject\testProject.Web\App\Main\views\layout\layout.cshtml
- project already contains jQuery and Angular scripts
- Note: the insert of Kendo UI scripts must be after loading jquery. This differs between Boilerplate project types.
- Script insert at bottom of file:
....
@Html.IncludeScript(ScriptPaths.JQuery_Timeago_Localization)
<!-- Scripts of Kendo UI -->
<
script
src
=
"http://kendo.cdn.telerik.com/2016.3.914/js/jszip.min.js"
></
script
>
<
script
src
=
"http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"
></
script
>
<!-- Dynamic scripts of ABP system (They are created on runtime and can not be bundled) -->
....
3) Register the Kendo UI directives in the application module:
- file path: \testProject\testProject.Web\App\Main\app.js
- modify app module:
var
app = angular.module(
'app'
, [
'ngAnimate'
,
'ngSanitize'
,
'kendo.directives'
,
//-- <<< Add this directive
'ui.router'
,
'ui.bootstrap'
,
'ui.jq'
,
'abp'
]);
4) Test example Kendo UI widget to a view in
the project:
- file path: \testProject\testProject.Web\App\Main\views\tenants\index.cshtml
- modify page:
<
div
ng-controller
=
"app.views.tenants.index as vm"
>
<
h1
>@L("Tenants")</
h1
>
<
input kendo-date-time-picker
style
=
"width: 100%;"
/>
Hello Kendo Team,
How do we add/enable vertical scroll to the right of the bar chart to scroll through more items in the data source.
Consider a scenario where there are 100 items to be displayed in the bar chart and bar chart is designed to display the items in the paginated fashion of 10 items in each page,
1.Bar chart will display 10 items in a given view
2.When user pans/mouse scroll the bar chart will display the next set of items in the given ahead
3. Now, there is no visual clue for the user that the bar chart can be scrolled/panned to view more items. Please suggest a way/workaround to include a vertical scrollbar which will allow user to scroll through the entire bar chart items having the x-axis anchored at the bottom.
This is more of a bug report...
Many icons on the following page do not show up at all:
https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web
Hi all,
I'm trying to create a filter menu that allows me to check multiple boxes to search for multiple entries inside a row.
My data looks like the following:
Person | Status
Alice | ABC DEF KLM
Bob | DEF HIJ
Charlie | HIJ
What I would like to be able to do is have a filterable option on Status, to allow you to tick boxes for "ABC", "DEF", "HIJ", "KLM". E.g. selecting HIJ will show both Bob and Charlie, and DEF will show both Alice and Bob, selected ABC and DEF will also show Alice and Bob.
I can't find a way using the filterable method to create the desired outcome.
Any help would be appreciated.
Thanks,
Matt
When viewing a plan in Month view the task titles are cropped within the taskbar by default. What are my options please to overcome this?
Can I specify the title to be displayed to the right of each taskbar? Can I set the title to not be cropped and overflow to the right of the taskbar? Do I have to create a custom template to change anything from the default behaviour?
Many thanks.
I have a map where I have markers that are shipments (individual markers) and loads which are a collection of markers joined by lines. I can right click on a marker that is part of a load and get a menu with the option to remove shipment from load. In the mode for the remove shipment from the load I am accessing the map layers. In the removal process, I have to rebuild the map items. I rebuild the map layers by getting the datasource of the necessary layer, setting the data for the datasource to an empty array ([]) and then pushing in the new data to the datasource.
I have 2 shape layers and 1 marker layer.
The first time I right click and remove a shipment from a load it works perfectly. I try it again ( the context menu shows and goes into the called function) and get the following error:
TypeError: Cannot read property 'layer' of undefined
In the called function,
e.target = span.k-marker.k-marker-pinpink.removeFromShipmentContextMenu
$(e.target) finds the element
But $(e.target).data("kendoMarker") returns undefined.
What am I missing in reload of the map objects?
Thanks
Jason
01.
public
JsonResult Autocomplete(
string
query,
int
companyId) {
02.
var ret = Dao.Task.GetMany(i => i.CompanyId == companyId);
03.
04.
if
(!
string
.IsNullOrEmpty(query)) {
05.
query = query.ToLower();
06.
ret = ret.Where(i => i.Subject.ToLower().Contains(query));
07.
}
08.
09.
var res = ret.Select(i =>
new
{
10.
id = i.Id,
11.
name = i.Subject
12.
});
13.
14.
return
Json(res, JsonRequestBehavior.AllowGet);
15.
16.
}
Hi, I browsed across several similar questions without finding what am I doing wrong:
In Kendo JQuery Grid, I'm not being able to get dataBound event work even in this trivial example(attached). However, the dataBinding event is being fired as expected. What's wrong?
(Can't find any meaningful difference compared with the Telerik grid event demo. https://demos.telerik.com/kendo-ui/grid/events)
Any hint will be greatly appreciated.