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 ParsingMultiSelect15. 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.kendoParsingMultiSelect23. name: "ParsingMultiSelect"24. },25. 26. events: [27. PASTE28. ],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 splitting52. 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 to57. // 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 UI73. 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.
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?
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?
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
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
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
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!
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
Hi,
I use a KendGrid with a custom local dataSource, in method create we use a jQuery ajax call and on success we call the method e.success(e.data) as documented.
In kendogrid we have the follwing in onKeyDown event:
grid.saveRow(); //to save the row data
grid.dataSource.sync(); //sync the da source the transport create is correctly called
grid.addRow();
the effect is the following the new row is crerated but when the async call in transport read method and we invoke the e.success(e.data) the focus is lost and we exit from the editing of the new row.
Could you help us to fix this issue
Thanks,