SlickGrid माता-पिता की 100% ऊंचाई?

Question

मैं SlickGrid का उपयोग jQuery Layout UI के साथ करने की कोशिश कर रहा हूं, और मैं चाहता हूं कि स्लिमग्रिड अपने मूल फलक की 100% ऊंचाई पर कब्जा करे।

समस्या है, जब स्लिकग्रिड को तत्काल किया जाता है, इसमें कोई पंक्ति नहीं होती है (डेटा में मेरे AJAX इंटरफ़ेस लोड का हिस्सा बाद में, पृष्ठ लोड पर नहीं), इसलिए ऊंचाई डिफ़ॉल्ट रूप से 1px (जैसे ऊंचाई की ऊंचाई) पर सेट की जाती है हेडर)। जब मैं बाद में डेटा में लोड करता हूं, तो मैं किसी भी पंक्ति को नहीं देख सकता।

मैंने SlickGrid DOM तत्व को height: 100%; पर सेट करने का प्रयास किया है, लेकिन यह कुछ भी नहीं करता है। मैं स्लेकग्रिड कैनवास को उस फलक की 100% ऊंचाई लेने के लिए कैसे मजबूर कर सकता हूं, भले ही इसमें डेटा की कम पंक्तियां हों?

Answer 1

मैं jQuery PubSub, यूआई लेआउट के एक्सेसर विधियों, और स्लिकग्रिड की resizeCanvas() विधि के संयोजन का उपयोग करके इस पर काम करना समाप्त कर दिया। ऐसा लगता है कि यह बहुत अच्छी तरह से काम करता है।

नोट: मेरा प्रोजेक्ट पहले ही पबब का उपयोग कर रहा था, और मैं RequireJS का उपयोग करके अपने मॉड्यूल में लोड करता हूं।

तो, मेरी ग्रिड मॉड्यूल फ़ाइल में, मैं फलक में वह जीता है, जो इसे एक स्थानीय चर को बचाता है के नए innerHeight प्राप्त करने के लिए एक विधि सदस्यता लेते हैं, फिर मेरे resize(); फ़ंक्शन को कॉल:

$.subscribe("units/set_grid_height", function (new_height) { 
    grid_opts.height = new_height; 
    resize(); 
}); 

// ... 

// grid = the jQuery element that represents the SlickGrid 
// slick = the instantiated slickgrid 
function resize() { 
    grid.css('height', grid_opts.height); 
    slick.resizeCanvas(); 
} 

फिर

layout = $('body').layout({ 
    center: { 
    onresize: function (name, el, state, opts, layout_name) { 
     $.publish("units/set_grid_height", [state.innerHeight]); 
    } 
    } 
}); 

$.publish("units/set_grid_height", [layout.state.center.innerHeight]); 

वास्तव में ऐसा करने के लिए मैं क्या चाहते हैं लगता है कि:, मेरे init js फ़ाइल (जहां लेआउट परिभाषित किया गया है) में, मैं सही प्रकाशन प्रारंभिक अवस्था और हर बार केंद्र फलक परिवर्तन के लिए निर्धारित किया है। मुझे पता है कि यह एक सामान्य समाधान नहीं है, लेकिन ऐसा नहीं लगता है कि SlickGrid यह सब अपने आप कर सकता है।

Answer 2

मैं ऐसा उत्तर देने जा रहा हूं कि मुझे भी पसंद नहीं है, लेकिन मेरे जावास्क्रिप्ट कौशल सीमित हैं और यह एक समाधान है जिसका उपयोग मैं तब तक कर रहा हूं जब तक कि मुझे कुछ बेहतर न लगे।

असल में, मैं दस्तावेज़ ऊंचाई लेने के लिए और slickgrid के बाहर किसी भी अन्य तत्वों की ऊंचाई घटाना, इस तरह:

$("#id-of-slickgrid-container").height(
     $(document).height() - 
     $("#header").outerHeight() - 
     $("#nav").outerHeight() - 
     $("#footer").outerHeight() - 44 
); 

"44" एक fudged संख्या कि की ऊंचाई करने के लिए पर्याप्त करीब आता है स्लिमग्रिड, आदि के अंदर उपयोग की जाने वाली अतिरिक्त जगह

Answer 3

मेरे जैसे जो लोग एक समान त्रुटि लेकिन विभिन्न परिस्थितियों मिल गया के लिए:

wiki से - "स्पष्ट चौड़ाई और slickgrid कंटेनर पर ऊंचाई मार्कअप में आवश्यक हैं, अन्यथा ग्रिड शरीर दिखाई नहीं देता है (ऊंचाई : 1 पीएक्स) और ग्रिड ग्रिड हेडर की चौड़ाई (चौड़ाई: 100000 पीएक्स) प्राप्त करता है। "

तो मुख्य ग्रिड div को चौड़ाई & ऊंचाई देना न भूलें!

पुनश्च: यह इस सवाल का यहाँ लागू होता है मत सोचो लेकिन यह केवल प्रश्न जो खोज "चालाक ग्रिड 1px बग" पर पॉपअप था: -/

Answer 4

मैं वान का जवाब लिया और समायोजित इस प्रकार है। अभी भी magic numbers हैं, लेकिन कम से कम आपको विशिष्ट कंटेनर के बारे में पता नहीं होना चाहिए।

HTML:

<div id="myGridSizer"></div> 
<div id="myGrid"></div> 

सीएसएस:

#myGrid { 
    width: 100%; 
} 

#myGridSizer { 
    top: 73px; 
    bottom: 73px; 
    width: 0; 
    position: absolute; 
} 

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

$("#myGrid").height($('#myGridSizer').outerHeight()); 
grid = new Slick.Grid("#myGrid", dto.data, dto.columns, options); 

Answer 5

मुझे आशा है कि इस सवाल का जवाब अभी भी उपयोगी है, मैं एक और जवाब में यह भर में आया था: https://stackoverflow.com/a/10878955/4606828

Slickgrid विकल्प में autoHeight जोड़ें:

options = { 
     ... 
     autoHeight: true 
     }; 

Slickgrid हमेशा बढ़ेगा साथ यह सामग्री है और आप जो कुछ भी करने के लिए माता-पिता की ऊंचाई सेट कर सकते हैं।