फ़िल्टरिंग के बाद मैं एक केंडो यूई ग्रिड पर क्षैतिज स्क्रॉलबार कैसे दिखा सकता हूं?

Question

मेरे पास कई कॉलम के साथ एक केंडो यूआई ग्रिड है। कॉलम जो क्षैतिज स्क्रॉल करके अतिप्रवाह देखा जा सकता है। हालांकि, अगर आप

1) एक स्तंभ है कि शुरू में प्रदर्शित नहीं किया और

2 के लिए स्क्रॉल) ऐसी है कि कोई भी पंक्ति फ़िल्टर मापदंड

ग्रिड अब क्षैतिज स्क्रॉल करने दें जाएगा मेल खाते हैं कि स्तंभ पर फ़िल्टर । जिस फ़िल्टर को फ़िल्टर किया गया था उसे साफ़ नहीं किया जा सकता है।

मैं फ़िल्टरिंग के बाद क्षैतिज स्क्रॉलबार कैसे दिखा सकता हूं?

var dataItem = {}; 
var columns = []; 

for (var i = 0; i < 20; i++) { 
    dataItem['col' + i] = i; 
    columns.push({ 
     field: 'col' + i, 
     width: 80, 
     filterable: true, 
     type: 'number' 
    }); 
} 

$("#grid").kendoGrid({ 
    scrollable:true, 
    columns: columns, 
    filterable: true, 
    dataSource: [dataItem] 
}); 

उदाहरण के लिए, 20 के बराबर पर स्तंभ 18 और फिल्टर करने के लिए जाना मुद्दे को देखने के लिए:

यहाँ एक jsfiddle जहां मुद्दा

http://jsfiddle.net/9sxkG/1/

यहाँ देख सकते हैं है कोड है ।

Answer 1

दिलचस्प डिलीमा। मुझे लगता है कि आपका सबसे सरल जवाब ग्रिड के बगल में एक बटन को ग्रिड को 'रीफ्रेश' करने के लिए जोड़ना है। निम्नलिखित जावास्क्रिप्ट रीफ्रेश का कारण बन जाएगा।

function LoadAllPositions() { 
    $("#grid").data("kendoGrid").dataSource.read(); 
} 

Answer 2

एक स्पष्ट फिल्टर बटन जोड़ने की ट्रे Gramman दृष्टिकोण के आधार पर:

$("#grid").kendoGrid({ 
    scrollable: true, 
    columns : columns, 
    filterable: true, 
    toolbar : [ 
     { 
      name  : "clean_filter", 
      imageClass: "k-icon k-i-funnel-clear", 
      text  : "clean filter" 
     } 
    ], 
    dataSource: [dataItem] 
}); 

$(".k-grid-clean_filter", "#grid").on("click", function (e) { 
    $("#grid").data("kendoGrid").dataSource.filter({}); 
}); 

यह here चल देखें।

यह स्क्रॉलिंग हेडर के प्रश्न को हल नहीं करता है लेकिन कम से कम आपको जारी रखने की अनुमति देता है (यदि कुछ भी बेहतर नहीं मिलता है)।

Answer 3

मुझे एक ही समस्या थी, मैंने इसे ग्रिड में एक खाली पंक्ति जोड़कर हल किया।
कोड:

var dataItem = {}; 
var columns = []; 

for (var i = 0; i < 20; i++) { 
    dataItem['col' + i] = i; 
    columns.push({ 
    field: 'col' + i, 
    width: 80, 
     filterable: true, 
     type: 'number' 
    }); 
} 

$("#grid").kendoGrid({ 
    scrollable:true, 
    columns: columns, 
    filterable: true, 
    dataSource: [dataItem], 
    dataBound: function(e) { 
     if(this.dataSource.view().length == 0) { 
      var colspan = this.content.find("table col").length; 
      this.content.find("table").append("<tr><td colspan=" + colspan + "></td></tr>"); 
     } 
     $("#grid").find(".k-grid-footer-wrap").scrollLeft($("#grid").find(".k-grid-content").scrollLeft());   
     this.content.bind('scroll', function() { 
      $("#grid").find(".k-grid-footer-wrap").scrollLeft(this.scrollLeft); 
     }); 
    } 
})