2014-06-26 4 views
7

मैं इस तरह की संरचना के साथ JSON है:केंडो डेटा ग्रिड - नेस्टेड JSON ऑब्जेक्ट से कॉलम मान कैसे सेट करें?

"id":1, 
"user_role":"ADMIN", 
"state":"ACTIVE", 
"address":{ 
    "street":"test 59", 
    "city":"City test", 
    "post_number":"25050" 
}, 

मैं कैसे करना चाहिए खेतों और मॉडल में स्थापित करने का उपयोग कर स्तंभ में address.street के मूल्यों पारित करने के लिए?

किसी भी सलाह के लिए बहुत धन्यवाद।

उत्तर

10

आप किसी एकल स्तंभ में सभी मान को दिखाने के लिए क्या @RobinGiltner पता चलता करना चाहते हैं पर http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.template

नमूना देखें।

आप एक अलग कॉलम में address के प्रत्येक सदस्य को आप कर सकते हैं दिखाने के लिए करना चाहते हैं:

var grid = $("#grid").kendoGrid({ 
    dataSource: data, 
    editable: true, 
    columns : [ 
     { field: "id", title: "#" }, 
     { field: "user_role", title: "Role" }, 
     { field: "address.street", title: "Street" }, 
     { field: "address.city", title: "City" }, 
     { field: "address.post_number", title: "Post#" } 
    ] 
}).data("kendoGrid"); 

यानी .: क्षेत्र के रूप में address.street का उपयोग करें। यह आपको उदाहरण के रूप में फ़ील्ड को संपादित करने की अनुमति देगा: http://jsfiddle.net/OnaBai/L6LwW/

+0

शानदार उदाहरण। बिल्कुल मुझे क्या चाहिए। – error505

1

आप जो भी पता चाहते थे उसके सभी टुकड़े प्रदर्शित करने के लिए आप ग्रिड कॉलम परिभाषा पर एक टेम्पलेट का उपयोग कर सकते हैं।

{ field: 'address', title: 'Address', template: '#= address.street# #= address.city#, #= address.post_number# ' }, 

केंडो कॉलम टेम्पलेट के लिए दस्तावेज़ देखें। http://jsbin.com/gizab/1/edit

4

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

var grid = $("#grid").kendoGrid({ 
    dataSource: { 
    data: data, 
    schema: { 
     model: { 
     id: "id", 
     fields: { 
      id: { type: "number" }, 
      user_role: { type: "string" }, 
      address_street: { from: "address.street" }, 
      address_city: { from: "address.city" }, 
      address_post_number: { 
      type: "number", 
      from: "address.post_number" 
      } 
     } 
     } 
    } 
    }, 
    columns: [{ 
    field: "id", 
    title: "#" 
    }, { 
    field: "user_role", 
    title: "Role" 
    }, { 
    field: "address_street", 
    title: "Street" 
    }, { 
    field: "address_city", 
    title: "City" 
    }, { 
    field: "address_post_number", 
    title: "Post#", 
    format: "{0:0#######}" 
    }] 
}).data("kendoGrid"); 

Jsfiddle: http://jsfiddle.net/wtj6mtz2

नेस्टेड गुण तक पहुँचने के लिए भी इस Telerik example देखें।

संबंधित मुद्दे