मैं व्यक्तिगत केंडो ग्रिड कॉलम में अधिकतम-चौड़ाई वाली संपत्ति कैसे सेट कर सकता हूं?

Question

यहां नमूने केन्डो ग्रिड के साथ एक jsfiddle है: जहाँ मैं केन्डो कॉलम सेट

http://jsfiddle.net/owlstack/Sbb5Z/1619/

यहाँ:

$(document).ready(function() { 
    var grid = $("#grid").kendoGrid({ 
     dataSource: { 
      data: createRandomData(10), 
      schema: { 
       model: { 
        fields: { 
         FirstName: { 
          type: "string" 
         }, 
         LastName: { 
          type: "string" 
         }, 
         City: { 
          type: "string" 
         }, 
         Title: { 
          type: "string" 
         }, 
         BirthDate: { 
          type: "date" 
         }, 
         Age: { 
          type: "number" 
         } 
        } 
       } 
      }, 
      pageSize: 10 
     }, 
     height: 500, 
     scrollable: true, 
     sortable: true, 
     selectable: true, 
     change: onChangeSelection, 
     filterable: true, 
     pageable: true, 
     columns: [{ 
      field: "FirstName", 
      title: "First Name", 
      width: "100px", 
     }, { 
      field: "LastName", 
      title: "Last Name", 
      width: "100px", 
     }, { 
      field: "City", 
      width: "100px", 
     }, { 
      field: "Title", 
      width: "105px" 
     }, { 
      field: "BirthDate", 
      title: "Birth Date", 
      template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #', 
      width: "90px" 
     }, { 
      field: "Age", 
      width: "50px" 
     }] 
    }).data("kendoGrid"); 

    applyTooltip(); 
}); 

मैं स्तंभों में से प्रत्येक के लिए अलग-अलग चौड़ाई गयी। हालांकि, मैं प्रत्येक केंडो ग्रिड कॉलम में अधिकतम-चौड़ाई सेट करना भी चाहूंगा। क्या अधिकतम-चौड़ाई निर्धारित करना संभव है (सभी स्तंभों के लिए सेट एक नहीं बल्कि व्यक्तिगत कॉलम के लिए अधिकतम-चौड़ाई?)?

Answer 1

कोई संपत्ति नहीं है जैसे अधिकतम-चौड़ाई केंडो ग्रिड के लिए उजागर हुई। समाधान के बारे में एक दौर कॉलम की चौड़ाई को ऑटोोज़ाइज के रूप में सेट करना होगा और फिर टेम्पलेट का उपयोग करना होगा जहां आप अधिकतम चौड़ाई को बनाए रखने के लिए सीएसएस गुणों का उपयोग करते हैं।

उदाहरण निम्नलिखित है। सुनिश्चित नहीं है कि आप एक ही जवाब की तलाश में हैं।

<style>.intro { max-width: 100px ;width: 20px ;background-color: yellow;</style> 


<script> 
$(document).ready(function() { 
       $("#grid").kendoGrid({ 
        dataSource: { 
         type: "odata", 
         transport: { 
          read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" 
         }, 
         pageSize: 20 
        }, 
        height: 550, 
        groupable: true, 
        sortable: true, 
        pageable: { 
         refresh: true, 
         pageSizes: true, 
         buttonCount: 5 
        }, 
        columns: [{ 
         field: "ContactName", 
         title: "Contact Name", 
         template : '<span class=intro>#:ContactName#</span>' 
        }, { 
         field: "ContactTitle", 
         title: "Contact Title" 
        }, { 
         field: "CompanyName", 
         title: "Company Name" 
        }, { 
         field: "Country", 
         width: 150 
        }] 
       }); 
      }); 
     </script> 

Answer 2

मेरे पास जावास्क्रिप्ट कोड है जो इस कार्यक्षमता को प्राप्त करने में मदद करेगा। यह एक निश्चित आदेश को बनाए रखने के लिए एक (कमांड) कॉलम के लिए एक तरीका प्रदान करता है।

एक ओर, यह कॉलम के लिए न्यूनतम आकार के रूप में कार्य करता है, लेकिन यदि ग्रिड आकार में वृद्धि करना था, तो मूल आकार लागू किया जाता है। यह अन्य ग्रिड कोशिकाओं को आकार में बड़ी मात्रा में वृद्धि करने की अनुमति देता है।

this dojo देखें जो इस कोड को क्रिया में दिखाता है।

ध्यान दें कि सभी कॉलमों को निर्दिष्ट चौड़ाई की आवश्यकता होती है (यह प्रभावी रूप से न्यूनतम चौड़ाई बन जाती है)।

ब्राउज़र का आकार बदलने का उपयोग ग्रिड के आकार पुनर्मूल्यांकन को ट्रिगर करने के लिए किया जाता है।

यह फ़ंक्शन मास्टर/विवरण और समूहकरण का समर्थन करता है।

मैंने इस बिंदु पर कॉलम आकार बदलने पर विचार नहीं किया है।

यदि आपके पास सुधार के लिए कोई विचार है तो इसके लिए जाएं!