KendoUI ग्रिड सर्वर पेजिनेशन

Question

मैं अपने डेटा को नॉकआउटजेएस एमवीवीएम सक्षम एप्लिकेशन में प्रदर्शित करने के लिए केंडोयू ग्रिड का उपयोग कर रहा हूं। चूंकि एमवीवीएम क्लाइंट साइड के लिए आर्किटेक्चर है, इसलिए मैं सर्वर से उस सरणी में डेटा को नॉकआउटज बना रहा हूं और डेटा को लोड कर रहा हूं।

self.loadForGrid = function() { 
    $.ajax({ 
     url: "api/matchingservicewebapi/GetAllMatchItemForClient/1", 
     type: 'GET', 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: function (data) { 
      console.log(data); 
      $.each(data, function (i, obj) { 
       self.users.push(self.items.push({ BirthDate: obj.BDate, Ref: obj.Ref, Amount: obj.Amount, Account: obj.Account, MatchItem_Id: obj.MatchItem_Id })); 

      }); 
      window.alert('User(s) loaded successfully'); 
     }, 
     statusCode: { 
      401: function (jqXHR, textStatus, errorThrown) { 
       alert('Error loading users2'); 
      } 
     } 
    }); 
}; 

यह ठीक काम करता है। लेकिन मैं अपने ग्रिड के लिए अंकन को लागू करना चाहता हूं। मैं इसे इस तरह क्लाइंट पक्ष कर सकता हूं। यह मेरा व्यूमोडेल कोड है।

self.items = ko.observableArray([]); 

ko.bindingHandlers.kendoGrid.options = { 
    groupable: true, 
    scrollable: true, 
    sortable: true, 
    pageable: { 
     pageSizes: [5, 10, 15] 
    } 
}; 

और ये मेरे HTML फ़ाइल में बाध्यकारी है (मैं Knockout-Kendo.js का इस्तेमाल किया है)।

<div data-bind="kendoGrid: items"> </div> 

लेकिन जो मैं चाहता हूं वह सर्वर पेजिनेशन को सक्षम करना है। जिसका अर्थ है कि मैं डेटा को फिर से लोड करना चाहता हूं (पेज 2 का डेटा कहता हूं) जब मैं अगले पृष्ठ पर जाता हूं (जब मैं पेज 2 पर जाता हूं) तो मेरे knockoutjs अवलोकन योग्य सरणी में। मैं उसे कैसे कर सकता हूँ?

अग्रिम धन्यवाद।

Answer 1

आइटमों पर अपने केंडोग्रिड को बाध्य करने के बजाय, आपको इसे kendo.data.DataSource से बांधना होगा और एक परिवहन निर्दिष्ट करना होगा।

रेफरी: http://docs.telerik.com/kendo-ui/api/javascript/data/datasource

उदाहरण के लिए:

पेजिंग और अपने लोड विधि को "सफलता" के लिए पैरामीटर जोड़ें। यह सीधे डेटासोर्स पर पढ़ने की विधि से आएगा।

विकल्प: आप या तो देखने योग्य सरणी या इसकी सामग्री के साथ सफलता विधि को कॉल कर सकते हैं। जब मैंने अवलोकन करने योग्य सरणी का उपयोग किया, तो मैंने इनलाइन संपादन के साथ विसंगतियों का अनुभव किया, और मैंने देखा कि ग्रिड अवलोकन करने योग्य सरणी की सामग्री का उपयोग कर अधिक स्थिर हो।

self.loadForGrid = function(pageIndex, success) { 
    /* Consider adding an argument for page size to the api call. */ 
    $.ajax({ 
     url: "api/matchingservicewebapi/GetAllMatchItemForClient/" + pageIndex, 
     type: 'GET', 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: function (data) { 
      console.log(data); 
      $.each(data, function (i, obj) { 
       self.users.push(self.items.push({ BirthDate: obj.BDate, Ref: obj.Ref, Amount: obj.Amount, Account: obj.Account, MatchItem_Id: obj.MatchItem_Id })); 

      }); 

      /* Invoke the dataSource.read success method. */ 
      success(self.items()); 

      window.alert('User(s) loaded successfully'); 
     }, 
     statusCode: { 
      401: function (jqXHR, textStatus, errorThrown) { 
       alert('Error loading users2'); 
      } 
     } 
    }); 
}; 

अपने डेटा स्रोत को अनिवार्य रूप से अपने पढ़ने के चारों ओर एक रैपर के रूप में बनाएं।

self.gridDataSource = new kendo.data.DataSource({ 
    transport: { 
     read: function(options) { self.loadForGrid(options.data.page, options.success); } 
    }, 
    pageSize: 20, // options.data.pageSize 
    page: 1, // options.data.page 
    serverPaging: true 
}); 

अपने डेटा स्रोत से जुड़ें।

<div data-bind="kendoGrid: gridDataSource"> </div> 

उसके बाद, यदि आप प्रोग्राम के पेज को बदलने की जरूरत है, तो आप पेज विधि डेटा स्रोत पर आह्वान कर सकते हैं:

self.gridDataSource.page(4);