Telerik Forums
Kendo UI for jQuery Forum
3 answers
765 views

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")
  
</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 -->
 
<!-- 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%;" />

 

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 22 Sep 2020
7 answers
2.2K+ views

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.

Alex Hajigeorgieva
Telerik team
 answered on 22 Sep 2020
2 answers
47 views

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

Zack
Top achievements
Rank 1
Veteran
 answered on 22 Sep 2020
3 answers
134 views

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

Matt
Top achievements
Rank 1
 answered on 22 Sep 2020
33 answers
2.0K+ views
Hi,

This demonstration very nicely shows how to implement two level hierarchy on a kendo grid. http://demos.kendoui.com/web/grid/hierarchy.html

I tried using the same coding structure to implement three or four levels of hierarchy but couldn't get it to work properly. It works, but the third level grid overwrites and overlaps the second level grid. Please could you let me know if three, four or more levels of hierarchy is possible on kendo web grid and if yes, I'll be grateful if you could point me to an example.

Many Thanks
MB
Ahan
Top achievements
Rank 1
 answered on 21 Sep 2020
4 answers
105 views

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.

Ivan Danchev
Telerik team
 answered on 21 Sep 2020
1 answer
366 views

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

Alex Hajigeorgieva
Telerik team
 answered on 21 Sep 2020
4 answers
276 views
Hi there,

I have 2 cascading comboboxes in my form: CompanyId --> TaskId

When I select a company and there are no tasks linked to it the TaskId combobox should become disabled.
Just like it becomes disabled when I clear the CompanyId combobox.

This is what I do in the controller action:
       
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.       }


How can I do that?

many thanks,
Chris
Ingerid
Top achievements
Rank 1
Veteran
 answered on 21 Sep 2020
1 answer
429 views

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.

 

Ivan Danchev
Telerik team
 answered on 21 Sep 2020
1 answer
150 views
I'm struggling with layout of the pager controls. I'm trying to get the .k-pager-refresh and .k-pager-info elements to flush left (right next to the pager buttons) instead of flush right. Does anyone have a solution for this?
Ivan Danchev
Telerik team
 answered on 21 Sep 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?