Telerik Forums
Kendo UI for jQuery Forum
1 answer
23 views

I'm trying to add series to a specific axis when users drag an item from a treeview and drop it over some axis.

To implement this scenario, is necessary to know the index of the droped axis.

There is any event that I can subscribe to get axis mouse drop?

 

Regards,

Gustavo

Neli
Telerik team
 answered on 17 Apr 2025
1 answer
75 views

Is it possible to prevent script/code injection with the "Drag and Drop" feature? It seems text is encoded when displayed but executed on drag and drop. I only tested this with the Grid and TreeList components.

 

 

Nikolay
Telerik team
 answered on 06 Nov 2024
1 answer
101 views

Hello,

 

I am trying to implement a drag and drop functionality for grid, so that I can drag files and drop in specific rows, so the file will uploaded and saved for that record.

Is this doable and can you post some links or leads.

 

My next requirement is to load uppy plugin uploader while I drop files and it will do the file upload for that record.

 

Thanks

Martin
Telerik team
 updated answer on 26 Sep 2024
1 answer
237 views
Is there any way to make a FileManager widget that will allow for the uploading of both files and folders? I see that the 'directory' option of the Upload prevents the selection of files - https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/configuration/directory - but I can't understand the logic here. Why would this be the case? In any event, if this must be the case, then is there a way to replace the upload widget inside of the FileManager widget on the fly, via a custom toolbar option? Even that would suffice. Or possibly have two upload widgets associated with the FileManager? One for files, and one for directories? If I have to, I'll implement a complete destruction and rebuild of the FileManager in order to facilitate this, but that's obviously far from ideal, especially if users are wanting to upload several different things in a single sitting.
Martin
Telerik team
 answered on 27 Mar 2024
0 answers
223 views

Context

We're using Scheduler component and a custom list of items. We're also using the Draggable component to let the items to be dropped into the Scheduler component. You can find the layout of the implementation in the attachment.

The configuration of the items is the following:


$(element)
  .find(`.${NS}customer-list__draggable`)
  .kendoDraggable({
    hint: () => {
      var draggableElem = $(`
      <span class="ui-draggable ${NS}customer-list__dragging">
        ${scope.customer.name} <br>
      </span>
      `);
      draggableElem.css({
        borderLeft: `3px solid ${scope.customer.displayColor}`
      });
      return draggableElem;
    },
    dragstart: event => {
      // prevent dragging on agenda view
      if ($rootScope.scheduler.viewName() === "agenda") {
        event.preventDefault();
      }
    },
    autoScroll: false,
    containment: "window",
    cursorOffset: { right: 0, top: 0, left: 0, bottom: 0 },
    distance: 50,
    group: "schedulerCustomerGroup"
  });

The configuration of the Drop are is the following:


scheduler.view().table.kendoDropTargetArea({
  group: 'schedulerCustomerGroup',
  filter: '.k-scheduler-table td, .k-scheduler-header-all-day td, .k-event',
  dragenter: (e) => {
    var offset = $(e.dropTarget).offset(),
          slot = scheduler.slotByPosition(offset.left, offset.top);

    $(slot.element).css('background', '#bce8f1');
  },
  dragleave: (e) => {
    var offset = $(e.dropTarget).offset(),
          slot = scheduler.slotByPosition(offset.left, offset.top);

    $(slot.element).css('background', '');
  },
  drop: (event) => {
    var offset = $(event.dropTarget).offset(),
        slot = scheduler.slotByPosition(offset.left, offset.top),
        dragElem = event.draggable.element[0],
        customer = _.find($rootScope.customers, {id: $(dragElem).data('customerId')});

    $(slot.element).css('background', '');

    scheduler.addEvent({
      title: customer.name,
      start: slot.startDate,
      end: slot.endDate,
      description: '',
      customerId: customer.id,
      streetAddr: customer.streetAddr,
      city: customer.city,
      state: customer.state,
      country: customer.country,
      zip: customer.zip,
      phone: customer.phone,
      lat: customer.lat,
      long: customer.long,
      accountId: customer.accountId,
      contactId: customer.d_tx_uid,
      isAllDay: slot.isDaySlot,
    });
  }
});

You can notice the group setting is the same in both configurations: schedulerCustomerGroup.

The filter configured in the kendoDropTargetArea is the following:

  • .k-scheduler-table td
  • .k-scheduler-header-all-day td
  • .k-event

As you can see, the filter include all the cells in the Scheduler component.

Problem

The problem I'm having is when using the Work Week, and resizing the browser to an specific dimension, some cells are not being detected as drop area.

As you can see, I cannot drop the item in Wed 2/21.

A workaround is to resize the browser, but that's not a final solution I'm expecting to have.

Fernando
Top achievements
Rank 1
 asked on 21 Feb 2024
1 answer
77 views

Hi !

hello. Below is a simple test page.

https://dojo.telerik.com/eSAqaXuw/2

 

 

 

A counter for kendosplitter  resize event and a counter for splitbar's dragenter event.

It should be resize cnt = dragenter + 1.

But, the more you go on, the more you go on, the more time goes by.
The gap widens. The difference increases.

Is there any way to strengthen dragenter's recognition?
How can dragenter events always be recognized?
Why isn't the dragenter event recognized properly?
I am very worried about this issue.

Thank you for reading.


Neli
Telerik team
 answered on 07 Feb 2024
1 answer
219 views

We have an existing Kendo Grid inside a Bootstrap Collapse. We are attempted to enable the Drag & Drop functionality on it. If the Collapse starts out visible, it works as expected; if the Collapse starts out collapsed, drag-and-drop does not work. You can drag, but you can't drop.

I attempted to swap out the Bootstrap Collapse for a Kendo ExpansionPanel, but it suffered the same issues: it works if pre-expanded, and not if pre-collapsed.

Dojo for Collapse

Dojo for ExpansionPanel

I don't see this noted in the known limitations. Is there anything we're doing incorrectly, or is this a bug?

Martin
Telerik team
 answered on 20 Jun 2023
1 answer
180 views

Good day, 

When I'm dragging a row, if I hover over the insert indicator on the left of the grid it causes the tooltip (and sometimes the whole row) to flicker/flash, Ive noticed this issue exists on the tutorial page too, is there a work around for this?

The tutorial I used: https://demos.telerik.com/kendo-ui/grid/drag-drop

Kind regards

Chris

Neli
Telerik team
 answered on 31 Mar 2023
1 answer
196 views

Hi,

There are question as below, I could not provide a code snippet because for editing require an API which are not available as development is in progress

  • can I know is there a way to get the response code / response message after the API is call. For example code below, after the create API call I would like to get the response code example 200 or 500 so that we can manipulate error message that require to show for user. Example if kendo taskboard it have "requestEnd" event
transport: {
	read: {
		url: crudServiceBaseUrl ,
		dataType: "json"
	},
	create: {
		url: crudServiceBaseUrl + "/add",
		dataType: "json"
	},
	update: {
		url: crudServiceBaseUrl + "/update",
		dataType: "json"
	},
	destroy: {
		url: crudServiceBaseUrl + "/delete",
		dataType: "json"
	},
	parameterMap: function (options, operation) {
		if (operation !== "read" && options.models) {
			return { models: kendo.stringify(options.models) };
		}
	}
},
  • when I perform  transport "destroy", I realize that it will first remove the node before calling API. I wonder what happen if I fail to remove from our own logic (hit issues when remove from database) then how can we revert the node? 
  • Is it in treelist we can get parent value and assign to a hidden field? Treelist only support number for id and parentid (hierarchy), howeer in our case we use GUID. Therefore, I generate number just for hierarchy display (and drag and drop) purpose. However the models only recognize the parentid but not guid that is from other field.
  • on my page I reliaze that sometimes the jquery are calling the API and sometimes not? Is it related to the placement file of my kendo script versus jquery file?
  • When I add new item, from backend we success to trigger and I return response 200 and model data as per below
{"Project":"e81af126-13cd-40c4-951b-9611fa85f39c","ID":"fc980fda-40c5-4fda-b97d-dfc0aced6a10","Description":"123123","WBSType":1,"SequenceNumber":0,"Parent":null,"BudgetSalesAmountDC":0.0,"BudgetCostsAmountDC":0.0,"Quantity":10.0,"WBSIcon":"","ReportsTo":null,"WBSRunningNumber":0,"hasChildren":false}

however from front-end it will never append. I follow exact implementation from the snippet / tutorial, accept the response type 
Neli
Telerik team
 answered on 23 Feb 2023
1 answer
400 views

Hi,

On the roadmap page there is a "Dock Manager Component" listed, but I don't see any information on this anywhere.

Anyone have more information or an ETA on this?

Thanks

Christopher

 

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
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
SPA
Filter
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
PivotGridV2
ScrollView
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
StockChart
ContextMenu
TimePicker
DateTimePicker
RadialGauge
ArcGauge
+? 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?