वेब सूचीदृश्य

Question

के साथ अंतहीन स्क्रॉल को कार्यान्वित करना मुझे पता है कि सूचीदृश्य के वेब संस्करण में मोबाइल की तरह अंतहीन स्क्रॉल सुविधा बॉक्स से बाहर नहीं है। मुझे अभी भी अपने समाधान में इसे लागू करने की आवश्यकता है और मुझे सच में यकीन नहीं है कि कहां से शुरू करना है। मेरे पास सभी किनारों के लिए मुझे सभी डेटा फिर से लोड करने की आवश्यकता होगी। तो मान लें कि मेरे पास 25 पंक्तियां लोड हैं। आप स्क्रॉल पॉइंट तक पहुंचते हैं और यह 25 और लोड करता है, जिस तरह से मैं इसे कार्यान्वित करता हूं, यह पहले 25 को पुनः लोड करेगा और 25 और जोड़ देगा। यह निश्चित रूप से उतना धीमा हो जाएगा जितना आप जाते हैं, इसलिए यह कोई विकल्प नहीं है हां किसी ने सफलतापूर्वक ऐसा कुछ किया है? क्या कोई अच्छा ओपन सोर्स एंडलेस स्क्रॉल समाधान उपलब्ध है? किसी भी सुझाव/जानकारी/कोड की सराहना की जाएगी।

धन्यवाद!

Answer 1

मैं अंत में इस के लिए एक समाधान के साथ आया था। एक ग्रिड के साथ वर्चुअल स्क्रॉलिंग वह नहीं था जिसे मैं ढूंढ रहा था। मैंने सूचीदृश्य को हटा दिया और एक डेटासोर्स और सादे केंडो टेम्पलेट प्रतिपादन का उपयोग किया।

यहां बताया गया है कि यह कैसे काम करता है ... मेरे पास मेरे डेटा के लिए एक मूल div है। मैं अपने डेटासोर्स चेंज इवेंट में एक इवेंट संलग्न करता हूं और एक बार जब डेटा का एक नया पेज पढ़ा जाता है तो माता-पिता div को एक बच्चे div जोड़ दिया जाता है जिसके अंदर डेटा का नया पृष्ठ प्रस्तुत किया जाता है। यह अब तक मेरे लिए निर्दोष रूप से काम करता है।

तो मेरा डोम ऐसा कुछ दिखता है।

<div id="EndlesslyScrollabledata" > 
    <div id="DataPage1"> 
     ..... 
    </div> 
    <div id="DataPage2"> 
     ..... 
    </div> 
</div> 
<button> Load more data </button> 

प्रत्येक लोड पर क्लिक करें और अधिक डेटा, अगले पृष्ठ पर डेटा स्रोत के लिए कदम संलग्न अगले "DataPage" और संलग्न "DataPage" अंदर डेटा के साथ टेम्पलेट प्रस्तुत करना होगा।

MVC कोड::

@(Html.Kendo().ListView<your.custom.Class>() 
    .Name("searchResults") 
    .TagName("div") 
    .ClientTemplateId("tptSearchResult") 
    .DataSource(source => 
    { 
     source.Read(read => 
     { 
      read.Action("Search", "ControllerName").Data("searchResults_AdditionalData"); 
     }); 


    }) 
) 

आप का उपयोग करना चाहिए "AdditionalData" विधि यदि आप खोज मापदंडों भेजना चाहते हैं या

Answer 2

यह सुविधा वेब में केंडो ग्रिड में उपलब्ध है (केंडो वेबसाइट में वर्चुअल स्क्रॉलिंग उदाहरण देखें)। वर्चुअल स्क्रॉलिंग के साथ ग्रिड का उपयोग करने और सूचीदृश्य की तरह दिखने के लिए डिस्प्ले टेम्पलेट को संशोधित करने के बारे में कैसे? आभासी स्क्रॉल ग्रिड के लिए

नमूना कोड है:

$("#yourList").kendoGrid({ 
     dataSource: { 
      type: "json",     
      pageSize: 25, 
      transport: { 
       read: { 
        cache: false, 
        url: "controller/actionmethod", 
        type: "post", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json" 
       } 
      } 
     }, 

     height: 150, 
     width: 50, 
     pageable: true, 
     //selectable: "multiple", 
     scrollable: { 
      virtual: true 
     }, 

     columns: [ { field: "col1", title: "col1" }] 

    }); 

Answer 3

मैं एक समाधान इस व्यवहार का अनुकरण करने dataBinging घटना का उपयोग करता है पर आए हैं खोज सेवा के लिए कुछ अतिरिक्त।

जावास्क्रिप्ट कोड:

function Search(page) { 
    currentPage = page; 
    if(page == 1) { 
     searchResults = []; 
    } 

    $("#searchResults").data("kendoListView").dataSource.read(); 
} 

function searchResults_AdditionalData(ev) { 
    return { 
     code: $("#txtSearchCode").val(), 
     pageNumber: currentPage, 
     pageSize: pageSize 
    }; 
} 

var currentPage = 1; 
var pageSize = 20; 
var searchResults = []; 
$(document).ready(function() { 

    $("#searchResults").data("kendoListView").bind("dataBinding", function(ev) { 

     if(searchResults.length != (currentPage * pageSize)) { 
      if(!!ev && !!ev.items && ev.items.length == pageSize) { 
       $("#btnLoadMoreData").show(); 
      } else { 
       $("#btnLoadMoreData").hide(); 
      } 

      searchResults = $.merge(searchResults, ev.items); 
      this.dataSource.data(searchResults); 
      this.dataSource.sync(); 
     } 

    }); 
}); 

केवल एक बात शेष: समन्वयित करने के बाद सूची में पहले जोड़ा तत्व पर स्क्रॉल करें।