Telerik Forums
Kendo UI for jQuery Forum
3 answers
780 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.3K+ 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
49 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
138 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
110 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
370 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
277 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
437 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
153 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
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
SPA
Filter
Drawing API
Drawer (Mobile)
Globalization
Gauges
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?