KendoUI JQueryUI

Question

जैसे सॉर्टेबल JQueryUI सॉर्ट करने योग्य विधि की तरह केंडोयूआई का उपयोग करने का एक उदाहरण खोज रहे हैं। ऐसा कुछ नहीं लगता है। यदि आप केंडोयू में ऐसा नहीं कर सकते तो क्या शर्म की बात है।

http://jqueryui.com/demos/sortable/

Answer 1

आप कस्टम बिल्डर के साथ एक कस्टम jQuery यूआई js फ़ाइल का निर्माण कर सकते हैं: http://jqueryui.com/download

बस ui कोर और sortable समारोह की आवश्यकता, फ़ाइल का आकार कम से कम हो जाएगा शामिल करने के लिए संदर्भ मिल और आपको वह कार्यक्षमता मिल जाएगी जो आप खोज रहे हैं।

चूंकि केंडो यूआई jQuery के साथ काम करता है, jQuery UI का अतिरिक्त वजन न्यूनतम है।

Answer 2

हाँ आप इसे केंडोई में कर सकते हैं। मैं मानता हूँ, अपनी दस्तावेज़ीकरण थोड़ा और अधिक स्पष्ट हो सकता है, लेकिन & ड्रॉप treeview खींचें के तहत की जाँच:

http://demos.kendoui.com/web/treeview/dragdrop.html

Answer 3

आपके पास एक ही & का मानना ​​है कि अन्य KendoUI विजेट आप इसे लागू करने के लिए कोशिश कर सकते हैं देखने के लिए चाहते हैं TreeView का उपयोग कर:

इस तत्व हैं जो sortable हैं कर रहे हैं:

var dataSource = [ 
    { id:1, text:"Element 1" }, 
    { id:2, text:"Element 2" }, 
    { id:3, text:"Element 3" }, 
    { id:4, text:"Element 4" }, 
    { id:5, text:"Element 5" }, 
    { id:6, text:"Element 6" } 
]; 

तो आप निम्न कोड का उपयोग हो सकता है:

$("#sortable").kendoTreeView({ 
    dataSource :dataSource, 
    template :"<div class='ob-item'> #= item.text # </div>", 
    dragAndDrop:true, 
    drag  :function (e) { 
     var dst = $($(e.dropTarget).closest(".k-item")[0]).data("uid"); 
     var src = $(e.sourceNode).data("uid"); 
     if ($(e.dropTarget).hasClass("ob-item") && dst != src) { 
      e.setStatusClass("k-insert-top"); 
     } else { 
      e.setStatusClass("k-denied"); 
     } 
    }, 
    drop  :function (e) { 
     if ($(e.sourceNode).data("uid") !== $(e.destinationNode).data("uid")) { 
      $(e.sourceNode).insertBefore(e.destinationNode); 
     } 
     e.setValid(false); 
    } 
}); 

जो एक क्रमबद्ध सूची प्रस्तुत करता है।

नोट:

ob-item स्टाइल है कि आप प्रत्येक sortable आइटम के लिए चाहते हैं। उदाहरण के लिए:

.ob-item { 
    background-color: #e9e9e9; 
    border: 1px solid #a99f9a; 
    color: #2e2e2e; 
    padding: 5px; 
    border-radius: 4px; 
} 

आप तो घोंसले की अनुमति देते हैं, तो आप append द्वारा insertBefore प्रतिस्थापित करना चाहिए।

Answer 4

उन लोगों के लिए जो इस प्रश्न को ढूंढते हैं। http://demos.telerik.com/kendo-ui/web/sortable/index.html

Answer 5

इस

var template = kendo.template("<ul id='sortable-basic'><li class='sortable'>Papercut <span>3:04</span></li><li class='sortable'>One Step Closer <span>2:35</span></li><li class='sortable'>With You <span>3:23</span></li><li class='sortable'>Points of Authority <span>3:20</span></li><li class='sortable'>Crawling <span>3:29</span></li><li class='sortable'>Runaway <span>3:03</span></li><li class='sortable'>By Myself <span>3:09</span></li></ul>"); 

$("#divSolution").html(template); //display the result 
$("#sortable-basic").kendoSortable();