2012-12-18 21 views
16

मैं एक केंडोयूआई ग्रिड के लिए एक खोज बॉक्स बनाने की कोशिश कर रहा हूं। मैं एक फ़ील्ड के आधार पर खोज करने में शुरुआत करने में सक्षम हूं, हालांकि मैं ग्रिड में सभी कॉलम खोजने के लिए अपने खोज बॉक्स में मूल्य चाहता हूं। jsfiddle.net लेकिन मैं यह काम करने के लिए प्रतीत नहीं कर सकते हैं .... (देखें या तर्क बटन)KendoUI ग्रिड में सभी कॉलम खोजें

+0

मैं तर्क ऑपरेटर का उपयोग, लेकिन यह काम नहीं करता है की कोशिश की ... $ ("# ग्रिड") डेटा ("kendoGrid") dataSource.filter ({ तर्क:।। "या", फिल्टर: [ {फ़ील्ड: "उत्पाद नाम", ऑपरेटर: "ने", मान: "शुल्क"}, {फ़ील्ड: "उत्पाद नाम", ऑपरेटर: "ने", मान: "फाई"} ] }); – BlueBird

उत्तर

13

मुझे लगता है कि:

function() { 
      grid.data("kendoGrid").dataSource.filter({ 
       field: "ProductName", 
       operator: "contains", 
       value: $('#category').val() 
      }); 

     } 

See js fiddle example

मैं यहाँ या तर्क ऑपरेटर उपयोग करने की कोशिश आपको eq से feeयाeq से fi कहना चाहिए यदि आप दो स्थितियों में से किसी एक से मेल खाना चाहते हैं।

मैं थोड़ा अपने fiddle संशोधित यह दिखाने के लिए। यदि आप खोज बॉक्स पर टाइप करते हैं तो आप ProductName कॉलम या QuantityPerUnit से मेल खाने वाले रिकॉर्ड फ़िल्टर करेंगे।

//change event 
$("#category").keyup(function() { 
    var val = $('#category').val(); 
    $("#grid").data("kendoGrid").dataSource.filter({ 
     logic : "or", 
     filters: [ 
      { 
       field : "ProductName", 
       operator: "contains", 
       value : val 
      }, 
      { 
       field : "QuantityPerUnit", 
       operator: "contains", 
       value : val 
      } 
     ] 
    }); 
}); 

महत्वपूर्ण: मैं यह काम करने के लिए 1.8.2 के लिए jQuery संस्करण को अद्यतन करना पड़ा है और सिर्फ मामले में मैं KendoUI अद्यतन किया है, साथ ही, नवीनतम संस्करण के लिए।

4

यदि आप कॉलम नामों के बारे में चिंता नहीं करना चाहते हैं तो आप इसके बजाय इस कोड का उपयोग कर सकते हैं। यह किसी भी ग्रिड पर काम करेगा और हार्ड कॉल किए गए कॉलम नाम निर्दिष्ट किए बिना फिल्टर करने योग्य के रूप में चिह्नित सभी कॉलम खोजेगा। इसके अलावा, मैंने अतिरिक्त कार्यक्रमों को जोड़ा ताकि अगर कोई खोज क्वेरी कॉपी और पेस्ट करना था तो ईवेंट को बुलाया जाएगा। (यह भी jQuery 1.83 या उच्चतम की आवश्यकता है)। मैंने इस कोड को jQuery Datatables प्लगइन से केंडो यूआई ग्रिड में स्विच करने के बाद बनाया है। मुझे केंडो से प्यार है लेकिन वास्तव में डेटाटेबल्स द्वारा पेश किए गए वैश्विक खोज टेक्स्टबॉक्स को याद किया गया है। मैं इस कोड को अपने सभी केंडो ग्रिड पर शामिल करता हूं।

 $("#category").on("keypress blur change", function() { 
     var filter = { logic: "or", filters: [] }; 
     $searchValue = $(this).val(); 
     if ($searchValue) { 
      $.each($("#grid").data("kendoGrid").columns, function(key, column) { 
       if(column.filterable) { 
        filter.filters.push({ field: column.field, operator:"contains", value:$searchValue}); 
       } 
      }); 
     } 
     $("#grid").data("kendoGrid").dataSource.query({ filter: filter }); 
    }); 
+0

है कि मैं वास्तव में क्या किया था, लेकिन यह भी अब मैं तो अब मैं शायद एक और दृष्टिकोण –

+0

बढ़िया काम चटाई को बदलने के लिए होगा .. मैं केंडो यूआई ग्रिड से शिफ्ट करना चाहते हैं छिपे हुए स्तंभ फिल्टर करने के लिए, यह है कि केवल डेटा स्रोत में मौजूद कोशिश कर रहा हूँ, साथ ही डेटाटेबल्स ग्रिड से, लेकिन यह आम खोज सुविधा मुझे इन दिनों ऐसा करने से रोक रही थी। अब यह मुझे केंडो यूआई ग्रिड में पूरी तरह से पारगमन करने में मदद करता है। आपके काम के लिए धन्यवाद –

4

ओनाबाई का जवाब डेटा की तरह काम नहीं करता है टेबल्स डेटा टेबल फ़ील्ड के रूप में और पूरे स्थान पर व्यवहार करता है। अगर आप "शेफ 36" टाइप करते हैं तो पहेली में कोई परिणाम नहीं दिखाता है टेबल्स सर्च उस पंक्ति को दिखाएगी जिसमें 5 का उत्पादक है क्योंकि उसके पास एक कॉलम में शेफ है और 36 दूसरे में है। सही कोड इस http://jsfiddle.net/Naka3/38/ जैसा दिखेगा।

$("#category").keyup(function() { 
    var selecteditem = $('#category').val(); 
    var kgrid = $("#grid").data("kendoGrid"); 
    selecteditem = selecteditem.toUpperCase(); 
    var selectedArray = selecteditem.split(" "); 
    if (selecteditem) { 
     //kgrid.dataSource.filter({ field: "UserName", operator: "eq", value: selecteditem }); 
     var orfilter = { logic: "or", filters: [] }; 
     var andfilter = { logic: "and", filters: [] }; 
     $.each(selectedArray, function (i, v) { 
      if (v.trim() == "") { 
      } 
      else { 
       $.each(selectedArray, function (i, v1) { 
        if (v1.trim() == "") { 
        } 
        else { 
         orfilter.filters.push({ field: "ProductName", operator: "contains", value:v1 }, 
               { field: "QuantityPerUnit", operator: "contains", value:v1}); 
         andfilter.filters.push(orfilter); 
         orfilter = { logic: "or", filters: [] }; 
        } 

       }); 
      } 
     }); 
     kgrid.dataSource.filter(andfilter); 
    } 
    else { 
     kgrid.dataSource.filter({}); 
    } 

}); 
संबंधित मुद्दे