Telerik Forums
Kendo UI for jQuery Forum
5 answers
332 views

Hello. I'd like to know how to implement virtual scrolling for my ComboBox. I'm using OData for ComboBox's DataSource.

I've tried to use the example (https://demos.telerik.com/kendo-ui/combobox/virtualization) - however i'm stuck. I don't know how to implement a Value Mapper in my WebAPI. In this example it's easy to get the index of some value, which is not loaded yet, because there are no any filters/​ordering ​there. But in my case, i'm using the same OData method for different DataSources, but with different filters/ordering.

So, how can i get the index of some value, if i don't know which filter/ordering was used for the DataSource? 

Georgi Krustev
Telerik team
 answered on 23 Nov 2015
1 answer
1.1K+ views

I am using JSON as local data for 3 cascading dropdownlists – the JSON is hierarchical by group->category->subcategory. The JSON looks like this (neat and hierarchical):

01.{
02.  "Groups": [
03.    {
04.      "Group": "Grp 1",
05.      "Categories": [
06.        {
07.          "Category": "Cat 1",
08.          "Subcategories": [
09.            { "Subcategory": "Subcat 1" },
10.            { "Subcategory": "Subcat 2" }
11.          ]
12.        },
13.        {
14.          "Category": "Cat 2",
15.          "Subcategories": [
16.            { "Subcategory": "Subcat 3" },
17.            { "Subcategory": "Subcat 4" }
18.          ]
19.        }
20.      ]
21.    },
22.    {
23.      "Group": "Grp 2",
24.      "Categories": [
25.        {
26.          "Category": "Cat 3",
27.          "Subcategories": [
28.            { "Subcategory": "Subcat 5" },
29.            { "Subcategory": "Subcat 6" }
30.          ]
31.        },
32.        {
33.          "Category": "Cat 4",
34.          "Subcategories": [
35.            { "Subcategory": "Subcat 7" },
36.            { "Subcategory": "Subcat 8" }
37.          ]
38.        }
39.      ]
40.    }
41.  ]
42.}

I’m struggling with filtering the dataSource so that the cascading dropdowns filter the data appropriately.

I create the dataSource (data is the JSON:

1.var dataSource = new kendo.data.DataSource({
2.    data: data.Groups
3.  });
4.dataSource.read();

Then I attempt to cascade the dropdowns. I populate the group dropdown correctly, but just don’t see how to filter the category and subcategory dropdowns based on the dropDown that’s being cascaded from. I'm such a newb.

01.var groups = $("#groups").kendoDropDownList({
02.    optionLabel: "Select group...",
03.    dataTextField: "Group",
04.    dataValueField: "Group",
05.    dataSource: dataSource
06.}).data("kendoDropDownList");
07. 
08.var categories = $("#categories").kendoDropDownList({
09.    cascadeFrom: "groups",
10.    optionLabel: "Select category...",
11.    dataTextField: "Category",
12.    dataValueField: "Category",
13.    dataSource: dataSource  // HOW DO I FILTER THE DATASOURCE FOR CATEGORY OF GROUP?
14.}).data("kendoDropDownList");
15. 
16.var subcategories = $("#subcategories").kendoDropDownList({
17.    cascadeFrom: "categories",
18.    optionLabel: "Select subcategory...",
19.    dataTextField: "Subcategory",
20.    dataValueField: "Subcategory",
21.    dataSource: dataSource  // HOW DO I FILTER THE DATASOURCEFOR SUBCATEGORY OF CATEGORY?
22.}).data("kendoDropDownList");

Here’s hoping you can help a jquery/kendoui newb!  TIA

Georgi Krustev
Telerik team
 answered on 23 Nov 2015
7 answers
312 views

I am working on a C# MVC (5.2.2) App using Kendo.MVC 2015.3.930.545 (VS 2013 .NET 4.5.1) 

Obviously I would like to be able to refresh/update the scheduler when changing the date(s).  I am not using the JSON-based functions as the demos use.  For my other Telerik controls, the same holds true.  That is, I use plain/vanilla server calls to the server instead.  I do capture some events using JS and do make AJAX calls to refresh data where/when applicable.  I would like to use this approach for the Scheduler but I need help w/this control.

In this case, I would like to know how I can capture the change of dates.  I am not able to use the "Navigate" event nor .Data() for the .DataSource's .Read() method in my code (am I missing some lib? dll?):

 

Here is my Scheduler control in my .cshtml file:

@(Html.Kendo().Scheduler<EPIMS.Models.TaskViewModel>()
    .Name("scheduler")
    .Date(System.DateTime.Today)
    .StartTime(new DateTime(System.DateTime.Now.Year,System.DateTime.Now.Month,System.DateTime.Now.Day, 5, 00, 00))
    .Height(600)
    .Views(views =>
    {
        views.DayView(dayView => dayView.Selected(true));
        views.WorkWeekView();
        views.WeekView();
        views.MonthView();
    })
    .Timezone("Etc/UTC")
    .DataSource(d => d
        .ServerOperation(true)
        .Read("Details", "Inspections").Data()
        //.Read(read => read.Action("Details", "Inspections"))
        .Create("Create", "Inspections")
        .Destroy("Deactivate", "Inspections")
        .Update("Edit", "Inspections")
        .Events(e => 
        {
            e.Change("schedulerChange");
            e.Navigate
        })
    )
    .BindTo(Model)
)

 The "Navigate" event is not available nor is the .Data() item for the .Read() method (for DataSource).

I get this error @ runtime for the .Data() item:

Compiler Error Message: CS1061: 'Kendo.Mvc.UI.Fluent.SchedulerAjaxDataSourceBuilder<EPIMS.Models.TaskViewModel>' does not contain a definition for 'Data' and no extension method 'Data' accepting a first argument of type 'Kendo.Mvc.UI.Fluent.SchedulerAjaxDataSourceBuilder<EPIMS.Models.TaskViewModel>' could be found (are you missing a using directive or an assembly reference?)

 

and this error @ runtime for the e.Navigate event:

Compiler Error Message: CS1061: 'Kendo.Mvc.UI.Fluent.DataSourceEventBuilder' does not contain a definition for 'Navigate' and no extension method 'Navigate' accepting a first argument of type 'Kendo.Mvc.UI.Fluent.DataSourceEventBuilder' could be found (are you missing a using directive or an assembly reference?)

 

Am I using old API calls?  How can I capture the change of dates?

Thanks,

 

 ​

Vladimir Iliev
Telerik team
 answered on 23 Nov 2015
1 answer
141 views
We're building an AngularJS app with a table consisting of about 200 rows, each of which contains one KendoNumericTextBox. The table is built with ng-repeat, not with KendoGrid, because we need more flexibility regarding the contents of the cells.

Before we added the KendoNumericTextBoxes, loading the page took about 3s, and after adding the KendoNumericTextBoxes, it took 25s. The Chrome CPU profiler shows that most time is spent in the kendo library, which calls expensive jQuery functions.

I isolated the problem into this jsFiddle: http://jsfiddle.net/Loauc0r6/2/
In this small example, angular's Scope.$digest takes 1.4s, and if I remove the KendoNumericTextBoxes and replace it by normal inputs, it only takes 0.1s. Again, most time is spent in a kendo function called "link", which calls many expensive jQuery functions.

Can you help us to get this running faster?

Petyo
Telerik team
 answered on 23 Nov 2015
2 answers
349 views

Hi,

This is really urgent thing.

i am drawing a scatterLine chart with multi-axis series.I was following your example at http://dojo.telerik.com/oJUyE. My problem is when i have negative(-) values for x-axis, then y-axis will be overlapped. When it has all the x-values with positive values it shows 2 separate y-axis properly. see all-positive-X-values.png image.

But when i have negative x-values, it doesn't show y-axis properly. see with-negative-X-values.png image.

i know there is a property called axisCrossingValue under xAxis, but i still can't use that, because i have 6 different series( that means 6 different y-axis). 

Please guide me how i solve this problem..

Thank you

Steven
Top achievements
Rank 1
 answered on 22 Nov 2015
3 answers
492 views

Hello,

 

assume we a simple tree with items of type A, B and C. It is not possible to drop C into A. I know how cancel a drop - in drop event, just set valid to false. Is it possible to visualy show the user that he/she cannot drop an item of type C into an item of type A in the drag event? And is it possible to template the drag&drop icon  while dragging it?

 

Thanks

Marin
Telerik team
 answered on 20 Nov 2015
2 answers
93 views

Hi,

I'm trying to move the zero line up because the series circles are being drawn behind the category, and only half of a circle is being drawn. I need a space between the category section and the zero line.

So far I tried different combinations of min, max, margins and padding but I haven't found a way to easily separate the category axis from the zero line.

Adding a negative min value had no effect.

Thanks in advance!

Michael
Top achievements
Rank 1
 answered on 20 Nov 2015
3 answers
128 views
Hello,

I am running into issues getting the Kendo Editor to work inside of a jQuery Colorbox (loaded via ajax). 

The Editor appears ok, but none of the "value" content loads into the inside of the editor, and the editor is not selectable.  If I move the editor outside of colorbox is works Ok.

How can I re-initialize the editor once loading via ajax into a Colorbox? 
Helen
Telerik team
 answered on 20 Nov 2015
2 answers
5.5K+ views
I have a Kendo AutoComplete control.
It fetches data from the remote json source.
The returned array looks a little like this...

[{"id":"50344","name":"Jane Doe"},{"id":"50562","name":"John Doe"}]

It is just a list of user names, and their user ids.

I want to grab the "id" field from this data when one of the users are selected from the dropdown list.

Is that possible?
Alexander Popov
Telerik team
 answered on 20 Nov 2015
3 answers
1.5K+ views

Hello all,

I wasn't sure where to put this as my grids are working...the problem is when I'm trying to pass the data from those grids into an ajax post...they keep coming up with an empty collection.  When I step through the jquery...the switches grid has 124 records and the goldList grid has over 1000, but when I hit the breakpoint in the controller the collections are empty. 

Here's the JQuery

function SwitchesModalCloseEvent(e)
{
    var switchesGrid = $("#SwitchModalGrid").data("kendoGrid");
    var goldListGrid = $("#ThirdPartyOpticsGoldListGrid").data("kendoGrid");
    var switchesGridObjects = switchesGrid._data; //.dataItems(); //.dataSource.data();
    var goldListGridObjects = goldListGrid._data;
 
    var goldListAddActionURL = '@Url.Action("AddToThirdPartyOpticsGoldList", "ThirdPartyOpticsGoldList")';
 
    $.ajax(
    {
        contentType: "application/json",
        data: { switchObjects: JSON.stringify(switchesGridObjects), goldListObjects: JSON.stringify(goldListGridObjects) },
        dataType: "json",
        type: "POST",
        url: goldListAddActionURL
    })
    .done(function () { alert('Website Called') })
    .error(function (objAjaxRequest, strError) {
        var respText = objAjaxRequest.responseText;
        console.log(respText);
    });
}

Here's the Controller Action

[HttpPost]
public ActionResult AddToThirdPartyOpticsGoldList([DataSourceRequest] DataSourceRequest request, IEnumerable<SwitchModel> switchObjects, IEnumerable<ThirdPartyOpticsGoldListModel> goldListObjects)
{
    TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
    var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.AddToThirdPartyOpticsGoldList(switchObjects, goldListObjects);
 
    if (!thirdPartyOpticsGoldListResult.Result)
    {
        ModelState.AddModelError("AddToThirdPartyOpticsGoldList", thirdPartyOpticsGoldListResult.Message);
    }
 
    return Json(new[] { thirdPartyOpticsGoldListResult.Payload }.ToDataSourceResult(request, ModelState));
}

Any thoughts?

Kiril Nikolov
Telerik team
 answered on 20 Nov 2015
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
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)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
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
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
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
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?