Telerik Forums
Kendo UI for jQuery Forum
1 answer
92 views

Hi, when i use the label buttons to hide a series the valueAxis adjusts to the remaining series and it changes the proportion of areas which looks really weird in a graph that doesn't even show the valueAxis like the one i have in production. I've found a workaround and i have it in this dojo but it feels kinda hacky and weird, is there a simpler way to maintain the valueAxis value and hide a series from the user view?.

 the code of the solution is this:

function onLegendItemClick(e) {
    e.preventDefault();
    var serie = e.sender.options.series[e.seriesIndex]
    serie.opacity = serie.opacity === 0 ? 0.4 : 0;
    serie.markers.size = serie.markers.size === 0 ? 6 : 0;
    serie.tooltip.visible = serie.tooltip.visible === false ? true : false;
    var chart = $("#chart").data("kendoChart");
    chart.refresh();
    console.log(serie);
    console.log(e.sender);
}

Iliana Dyankova
Telerik team
 answered on 08 Dec 2015
5 answers
946 views

Hello!

I wish to add functionality to the MultiSelect in order to capture the "paste" event, parse the input and if any values in the pasted input match are options to the MutliSelect, select them.

Below is the code I used to extend the MutliSelect.  The parsingMutliSelect.value(...) call is indeed changing the values, however the UI is not updating and displaying the values as tags within the input field for the MultiSelect.  In fact, the error "TypeError: Argument 1 of Node.removeChild is not an object" keeps occurring when the parsingMultiSelect._change() call is made.  This error occurs at the line "tagList[0].removeChild(tagList[0].children[removedItem.position]);" within the _selectValue function definition within the MultiSelect configuration (kendo.multiselect.js).

Using my FireBug console, I can successfully get the MutliSelect to perform as expected by using the .value() and .trigger("change") methods on the MultiSelect instance.  Why can I not seem to successfully set values from within the MutliSelect extension definition?

 

01.(function ($) {
02. 
03.  var kendo = window.kendo,
04.      ui = kendo.ui,
05.      MultiSelect = ui.MultiSelect,
06.      CHANGE = "change",
07.      PASTE = "paste";
08. 
09.  var ParsingMultiSelect = MultiSelect.extend({
10. 
11.    init: function (element, options) {
12.      var that = this;
13. 
14.      // Base call to MultiSelect to initialize ParsingMultiSelect
15.      MultiSelect.fn.init.call(that, element, options);
16. 
17.      that.input.on(PASTE, that, that._paste);
18.    },
19. 
20.    options: {
21.      // Assigns the name as it should appear off the kendo namespace (i.e. kendo.ui.ParsingMultiSelect).
22.      // The jQuery plugin would be jQuery.fn.kendoParsingMultiSelect
23.      name: "ParsingMultiSelect"
24.    },
25. 
26.    events: [
27.      PASTE
28.    ],
29. 
30.    _paste: function (e) {
31.      alert("data pasted!");
32.      var parsingMultiSelect = e.data,
33.        dataValueField = parsingMultiSelect.options.dataValueField,
34.        parsingMultiSelectDataSource = parsingMultiSelect.dataSource,
35.        pastedData = e.originalEvent.clipboardData.getData('text'),
36.        validValues = [];
37. 
38.      multiSelect._close();
39. 
40.      parsingMultiSelectDataSource.fetch().done(function () {
41.        var dataSourceData = parsingMultiSelectDataSource.data();
42.        var dataSourceValues = [];
43. 
44.        if (dataSourceData instanceof kendo.data.ObservableArray) {
45.          dataSourceValues = dataSourceData.map(function (arrayElement, index) {
46.            return arrayElement[dataValueField];
47.          });
48.        }
49. 
50.        // Convert all commas to a single space then reduce all whitespace (and consecutive)
51.        // characters in the pasted input to a single space to get ready for splitting
52.        pastedData = pastedData.replace(/,/g, "").replace(/\s\s+/g, " ").trim();
53. 
54.        pastedValues = pastedData.split(" ");
55. 
56.        // Loop through the values pasted in.  If any exist in the dataSource, push them to
57.        // the array of valid values.
58.        $.each(pastedValues, function (index, value) {
59.          if (dataSourceValues.indexOf(value) != -1) {
60.            validValues.push(value);
61.          }
62.        });
63. 
64.        parsingMultiSelect.value(e.data.value().concat(validValues));
65.        parsingMultiSelect._change();
66.      });
67. 
68.      e.preventDefault();
69.    }
70.  });
71. 
72.  // Add the ParsingMultiSelect to Kendo UI
73.  ui.plugin(ParsingMultiSelect);
74. 
75.})(jQuery);
76. 
77. 
78.$("#parsingmultiselect").kendoParsingMultiSelect({
79.  dataSource: [
80.    { unitId: "0001X" },
81.    { unitId: "0002X" },
82.    { unitId: "0003X" },
83.    { unitId: "0004X" },
84.    { unitId: "0005X" },
85.    { unitId: "0006X" }
86.  ],
87.  dataTextField: "unitId",
88.  dataValueField: "unitId",
89.  placeholder: "Select a Unit ID..."
90.});

...and a jsFiddle: https://jsfiddle.net/Lvvwzmyv/3/.  Try pasting a single value: "0002X" and try pasting multiple values: "0002X, 0004X, 0005X" and observe the unintended behaviour.

 

Thank you,

R. J.

Konstantin Dikov
Telerik team
 answered on 08 Dec 2015
1 answer
193 views

We are not able to scroll the Kendo Popup Window contents on IPad IOS 9.

Scroll works on Ipad IOS 8 though.

Have we found any solution for such issue?

Dimiter Topalov
Telerik team
 answered on 08 Dec 2015
1 answer
212 views

What if i want to use a Font Awesome spinner as progress indicator on a KendoGrid

 Is there any CSS template for that?

If i wanted to use etc. <i class='fa fa-spinner fa-pulse'></i>

 

Could maybe imagine something like

.k-loading-image {
    content: "\25AE";
    
font-family: FontAwesome;
    background-image: none;
}

But would that be the correct way to do it?

Venelin
Telerik team
 answered on 08 Dec 2015
2 answers
342 views

Hey guys, 

Been putting together a solution using kendo ui grids and AngularJS, but hit the wall when trying to perform CRUD operations in a nested grid.  I did do some research but couldn't get an straight answer so this is my last resource. 

As I said, got grid inside a grid, and I need to be able to perform CRUD operations.  This is what the markup looks like 

<div kendo-grid="firstgrid" k-options="context.gridOptions">
         <div k-detail-template>
               <div kendo-grid="secondgrid" k-options="secondGridOptions(dataItem)"></div>
         </div>
 </div>

 nothing especial there, here's the secondGridOptions function

 $scope.secondGridOptions = function (dataItem) {
        return {
            dataSource:  { 
                transport: {
                    read: "api/Entity/" + dataItem.ID,
                    update: function (options) {
                        angularResourceSvc.entity.update({}, options.data, function (response) {
                            console.log(response);
                        });
                    },
                    destroy: function (options) {
                        angularResourceSvc.entity.delete({ id: options.data.Id}, function (response) {
                            console.log(response);
                        });
                    },
                    create: function (options) {
                        options.data.RAID = $stateParams.RAID;
                        angularResourceSvc.entity.save({}, options.data, function (response) {
                            console.log(response);
                        });
                    }
                }
            },

I've omitted the rest of the function for brevity (schema, columns etc)

As you can see I'm using an angular service to perform the operations, and this is what I've used on all the other grids in the app, which works pretty well.

Normally this is what my read looks like:  

read: function (options) {
             options.success($scope.dataCollection)
    },

 and this is how I call it whenever I need to get/refresh the data

 $scope.dataCollection = rangularResourceSvc.entity.query({}, function (result) {
          $scope.mygrid.dataSource.read();
   });

 

But since this is a function (as opposed to a kendo data source) I didn't really know how to  "read" the data like I've done in my other grids, so I decided to just use the url.

Reading the data works fine, but that's about it. It won't update, delete or create... nothing happens, no error message, nothing..  the events just won't fire.

Did a little but of digging on this and found a post where it says that all CRUD operations had to be the same, so either reading straight from the Url or a function; so I changed the read operation to a function (a bit of a hack really) so it'd read "local" data that I'm just pulling onload.. but same thing, rows are fine, grid gets displayed properly, but that's as far as it'll go.

 

Any help would be very much appreciated 

 

 

Andrew
Top achievements
Rank 1
 answered on 08 Dec 2015
1 answer
103 views

Hi,

I think the close event of the popover does not fire when closing via button in the popover.

It only seems to fire when the popover is closed by clicking outside of the popover window.

See http://dojo.telerik.com/EbEJO

Thanks for your help.

Henri

Venelin
Telerik team
 answered on 08 Dec 2015
1 answer
169 views

I've got a local variable in javascript that is a dictionary object. on inline edit of a row, I want to have the column edit mode be a dropdownlist where the data source is the list of keys in the dictionary and the selected key is the value from the row in the grid.  How can I set the data source of the dropdownlist to be the key in my local dictionary?

I've looked at this demo but the data is remote. I want to specify the data source to be local from the key of the dictionary object.

http://demos.telerik.com/kendo-ui/grid/editing-inline

Thanks,

--Ed

Ed
Top achievements
Rank 1
 answered on 07 Dec 2015
2 answers
132 views

Hello,

 

I created a project following the same methods as this project to build a scheduler with custom views. The issue I'm running into is that the code

 

//detach events
        destroy: function () {
            if (this.element) {
                this.element.off(NS);
            }
            ui.SchedulerView.fn.destroy.call(this);
        }

never executes when I select another view. Instead, the view stays in place and the view I selected appears below it. If I toggle between my two custom views, they will simply stack. Is there any reason you now of why this might happen? Let me know if I need to upload a project, but it will take time to make it so it can be downloaded and run with minimal changes.

 

Thanks for your help!

Derek
Top achievements
Rank 1
 answered on 07 Dec 2015
5 answers
302 views

Hi,

we are trying to use a kendo grid with angular, as follow

http://plnkr.co/edit/AkKBtTVWRrhvJyF8Kmfd?p=preview 

 

and we found a strange behaviour: if you try to delete all the elements in the grid, you will see that the last one will persist in the angular tables.

Can you help us to understand why?

 Thanks

Rosen
Telerik team
 answered on 07 Dec 2015
1 answer
910 views
I'm using MVC wrappers and was wondering how I would export to excel with some extra columns that were not visible in the grid?
Any ideas? thanks
Boyan Dimitrov
Telerik team
 answered on 07 Dec 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?