or
3 answers
45 views
Try the demo at http://demos.telerik.com/kendo-ui/sortable/sortable-panels
Panels cannot be dragged in Chrome (latest version) on WIndows 8.1 (latest updates)
It works in IE and Firefox though.
Panels cannot be dragged in Chrome (latest version) on WIndows 8.1 (latest updates)
It works in IE and Firefox though.
Petyo
Telerik team
answered
on
28 Dec 2014
1 answer
246 views
In this example I have an AngularJS sortable that contains three divs. My objective is to obtain the id and the text of the div that was clicked, however the click event is not triggered. What's wrong with this code?
This is the javascript:
var app = angular.module("app", [ "kendo.directives" ]);
app.directive('dir2', function() {
var directive = {};
directive.restrict = 'EA';
directive.template = '<div kendo-sortable="list" id="listid"></div>';
directive.link = function(scope, element, attrs) {
scope.$on("kendoWidgetCreated", function(event, widget){
if (widget === scope.list) {
$('#listid').append ( '<div id="div1" class="item">11111111</div>');
$('#listid').append ( '<div id="div2" class="item">22222222</div>');
$('#listid').append ( '<div id="div3" class="item">33333333</div>');
}
});
$('.item').on( "click", function( event ){
alert('clicked');
console.log(event);
});
};
return directive;
});
This is the javascript:
var app = angular.module("app", [ "kendo.directives" ]);
app.directive('dir2', function() {
var directive = {};
directive.restrict = 'EA';
directive.template = '<div kendo-sortable="list" id="listid"></div>';
directive.link = function(scope, element, attrs) {
scope.$on("kendoWidgetCreated", function(event, widget){
if (widget === scope.list) {
$('#listid').append ( '<div id="div1" class="item">11111111</div>');
$('#listid').append ( '<div id="div2" class="item">22222222</div>');
$('#listid').append ( '<div id="div3" class="item">33333333</div>');
}
});
$('.item').on( "click", function( event ){
alert('clicked');
console.log(event);
});
};
return directive;
});
Alexander Valchev
Telerik team
answered
on
16 Dec 2014
1 answer
55 views
We have a kendo sortable listview object, and the definition and styles for the handler are given below. The handler span contains a span which renders as the drag icon. It looks fine, but the icon and row cannot can not be dragged. If the inner span is replaced by text or a non-breaking space, it works fine.
The icon we want to use is in a SVG sprite. I tried styling the handler itself as the icon but it isn't possible to center the icon in the handler that way.
Is it possible to do what we are attempting to do? Thank you!
Handler HTML:
Styles:
The icon we want to use is in a SVG sprite. I tried styling the handler itself as the icon but it isn't possible to center the icon in the handler that way.
Is it possible to do what we are attempting to do? Thank you!
Handler HTML:
<span class="handler"> <span class="icon icon-drag icon-drag-dims"></span></span>Styles:
.handler { border-right: 1px solid #eaeaea; width: 40px; height: 44px; display: inline-block; text-align: center;}.handler .icon { vertical-align: middle;}.icon { display: inline-block;}.icon-drag { background-position: 0 -391px; background-repeat: no-repeat; background-image: url(../../images/sprites/icons.svg);}.icon-drag-dims { width: 21px; height: 21px;}
2 answers
137 views
Hello,
I have an issue when using two or more sortables with same container selector on one page. The problem appears when the width of one sortable differs from another (I use horizontal sortables). The second and others sortables take the sizes (in my case it is width) of the first, but it's wrong. I understand that changing the container's selector (select by id etc.) for each sortable will solve the problem, but in my case/project it's not possible, I had to leave the selector as it is (sortable is used in directive which can be reused several times on one page).
Is there any way to workaround this issue not changing the selectors?
Sample page can be found here http://dojo.telerik.com/@Artsem.Valenchyts@specific-group.by/axIKu (just try to drag the second sortable item).
Best Regards,
Artsem
I have an issue when using two or more sortables with same container selector on one page. The problem appears when the width of one sortable differs from another (I use horizontal sortables). The second and others sortables take the sizes (in my case it is width) of the first, but it's wrong. I understand that changing the container's selector (select by id etc.) for each sortable will solve the problem, but in my case/project it's not possible, I had to leave the selector as it is (sortable is used in directive which can be reused several times on one page).
Is there any way to workaround this issue not changing the selectors?
Sample page can be found here http://dojo.telerik.com/@Artsem.Valenchyts@specific-group.by/axIKu (just try to drag the second sortable item).
Best Regards,
Artsem
2 answers
227 views
I am trying to implement a screen with Three sortables (left pane, right pane, remove pane). When the user drags an item to the remove sortable I want to remove it from that sortable. (they are deleting it basically)
I have tried e.item.remove in the change event handler, but that just makes the dragged element show on the screen as well as the new item in the sortable.
I have tried to prevent the drop to the new sortable using e.item.PreventDefault and also e.draggableObject.item.preventDefault and then just remove it from the original sortable, but I can't seem to prevent the change.
Any suggestions on how to do this?
I have tried e.item.remove in the change event handler, but that just makes the dragged element show on the screen as well as the new item in the sortable.
I have tried to prevent the drop to the new sortable using e.item.PreventDefault and also e.draggableObject.item.preventDefault and then just remove it from the original sortable, but I can't seem to prevent the change.
Any suggestions on how to do this?
2 answers
120 views
Do you have an example or some hints about using a sortable listview but with AngularJS? The listview is coming from a remote dataSource.
Thanks in advance!
Sergio
Thanks in advance!
Sergio
2 answers
31 views
I have two sortable areas connected to each other. Both of the areas can have sortable in there own respective area and also to each other.
There are certain elements that I want restrict for getting dragged to each other but should be allowed to be sorted in there own area.
Is it possible to achieve this with current release. If yes, please provide some guideline.
There are certain elements that I want restrict for getting dragged to each other but should be allowed to be sorted in there own area.
Is it possible to achieve this with current release. If yes, please provide some guideline.
Alexander Valchev
Telerik team
answered
on
26 Jun 2014
3 answers
68 views
Hi,
I would like to drag an element external from a Sortable and have it inject the Hint instead of the actual element. I don't want the current element to be injected but a sub-element to be injected into the Sortable object.
How does this work? I know that jQuery UI supports this but I want to stick with KendoUI.
I would like to drag an element external from a Sortable and have it inject the Hint instead of the actual element. I don't want the current element to be injected but a sub-element to be injected into the Sortable object.
How does this work? I know that jQuery UI supports this but I want to stick with KendoUI.
Alexander Valchev
Telerik team
answered
on
04 Jun 2014
2 answers
200 views
How can i save the state of my panels? If i move my panels to a new location on the web page, how can i save this configuration?
Can i use localStorage? or what else can i do to achieve this.
Thank you so much.
Can i use localStorage? or what else can i do to achieve this.
Thank you so much.
Alexander Valchev
Telerik team
answered
on
30 May 2014
2 answers
89 views
Hello,
I am trying to build a UI which is basically an editable version of the Kendo Web Demo for Sortable ==> Handlers. However, attaching the Sortable to the editable Listview seems to disrupt the datasource detection and management of the create and update conditions. I've done a snippet at trykendoui.com but can't figure out how to save/share it. The complete code is below.
Forget the actual actions in the transport specification -- I just want to see that I can trap the events and get the IDs and Names as required -- I will be building up REST call URLs. Everything is fine while the list view is not a Sortable. However, when you remove the comments around the Sortable specification, then the following problems occur.
(1) on edit, the name field is not editable (or on my system, is somewhat editable but when the checkmark is clicked to save, the updated product name isn't available),
(2) on add new, the new product name doesn't appear to be available.
Delete still seems to work.
We're designing this functionality into several places in our UI, so an answer or workaround is really key. Thank you in advance!
I am trying to build a UI which is basically an editable version of the Kendo Web Demo for Sortable ==> Handlers. However, attaching the Sortable to the editable Listview seems to disrupt the datasource detection and management of the create and update conditions. I've done a snippet at trykendoui.com but can't figure out how to save/share it. The complete code is below.
Forget the actual actions in the transport specification -- I just want to see that I can trap the events and get the IDs and Names as required -- I will be building up REST call URLs. Everything is fine while the list view is not a Sortable. However, when you remove the comments around the Sortable specification, then the following problems occur.
(1) on edit, the name field is not editable (or on my system, is somewhat editable but when the checkmark is clicked to save, the updated product name isn't available),
(2) on add new, the new product name doesn't appear to be available.
Delete still seems to work.
We're designing this functionality into several places in our UI, so an answer or workaround is really key. Thank you in advance!
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css"> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.mobile.all.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script></head><body> <div style="width: 600px;"> <div> <a id="btnAdd" class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a> </div> <div> <div id="listView"></div> </div> </div> <script type="text/x-kendo-tmpl" id="listTemplate"> <div class="item"> <span class="handler"> </span> <span>#:ProductName#</span> <a class="k-button k-button-icontext k-edit-button rfm" href="\\#"><span class="k-icon k-edit"></span></a> <a class="k-button k-button-icontext k-delete-button rfm" href="\\#"><span class="k-icon k-delete"></span></a> </div> </script> <script type="text/x-kendo-tmpl" id="editTemplate"> <div class="item"> <span class="handler"> </span> <input type="text" class="k-textbox" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" /> <span data-for="ProductName" class="k-invalid-msg"></span> <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a> <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a> </div> </script> <script> var products = [{ ProductID : 1, ProductName : "Chai" }, { ProductID : 2, ProductName : "Chang" }, { ProductID : 3, ProductName : "Aniseed Syrup" }, { ProductID : 4, ProductName : "Chef Anton's Cajun Seasoning" }]; $(document).ready(function() { var dataSource = new kendo.data.DataSource({ transport: { create: function(options) { console.log("datasource create :: ", options); console.log("data :: ", options.data); alert("datasource create: New product name = " + options.data.ProductName ); options.success(products); }, read: function(options) { console.log("datasource read", options); options.success(products); }, update: function(options) { console.log("datasource update", options); console.log("data :: ", options.data); alert("datasource update: Altered product name = " + options.data.ProductName + " for product id " + options.data.ProductID ); options.success(products); }, destroy: function(options) { console.log("datasource destroy", options); console.log("data :: ", options.data); alert("datasource destroy: Deleted product id = " + options.data.ProductID ); options.success(products); } }, schema: { model: { id: "ProductID", fields: { ProductName : { type: "string" }, } } } }); var listView = $("#listView").kendoListView({ dataSource: dataSource, template: kendo.template($("#listTemplate").html()), editTemplate: kendo.template($("#editTemplate").html()) }).data("kendoListView"); /* REMOVE COMMENT TO SEE ISSUES WITH MAKING THE LISTVIEW SORTABLE $("#listView").kendoSortable({ cursor: "move", handler: ".handler", hint:function(element) { return element.clone().addClass("hint"); }, placeholder: function(element) { return element.clone().css("opacity", 0.1); }, change: function(e) { console.log("You sorted me!"); } }); END OF COMMENT */ $("#btnAdd").click(function(e) { listView.add(); e.preventDefault(); }); });</script> <style scoped> .rfm { float:right; margin-right: 5px; margin-top: 5px; } span.k-invalid-msg { position: absolute; margin-left: 6px; } .item { margin: 15px; padding: 0 10px 0 0; min-width: 200px; background-color: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 3px; font-size: 1.3em; line-height: 2.5em; } .handler { display: inline-block; width: 30px; margin-right: 10px; border-radius: 3px 0 0 3px; background: url('http://demos.telerik.com/kendo-ui/content/web/sortable/handle.png') no-repeat 50% 50% #ccc; } .handler:hover { background-color: #2db245; } .placeholder { width: 298px; border: 1px solid #2db245; } .hint { border: 2px solid #2db245; border-radius: 6px; width: 400px; } .hint .handler { background-color: #2db245; } </style> </body></html>
