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

Question

के साथ ग्रिड में केंडो-यूआई ग्रिड सेट वैल्यू मैं जावास्क्रिप्ट में ग्रिड में एक पंक्ति के मूल्य को बदलने के बारे में सोच रहा हूं ताकि इसे ग्रिड और अंतर्निहित डेटासोर्स में 'गंदे' के रूप में चिह्नित किया जा सके।

उदा। मेरे पास संपर्क/ग्राहक की एक सूची है। उनके पास 3 फ़ील्ड फर्स्टनाम/लास्टनाम/IsPrimaryContact है। केवल 1 प्राथमिक संपर्क हो सकता है, इसलिए जब रिकॉर्ड पर प्राथमिक संपर्क सत्य पर सेट किया गया है तो मेरे पास जावास्क्रिप्ट कोड है जो डेटासोर्स के माध्यम से लूप करता है और किसी अन्य संपर्क को प्राथमिक के रूप में सेट के रूप में सेट करता है।

जावास्क्रिप्ट सब आग ठीक है और डेटा फ़ील्ड सही ढंग से स्थापित कर रहे हैं लेकिन वहाँ दो समस्याएं हैं: 1. ग्रिड परिवर्तन मैं डेटा स्रोत के हुड के नीचे बना 2. रिकार्ड में परिवर्तन के रूप में चिह्नित नहीं कर रहे हैं के साथ अद्यतन नहीं किया गया है "dirty" के रूप में और इसलिए जब मैं Datasource.sync()

पर कॉल करता हूं तो मैं सिंक नहीं किया जाता हूं, मैं रिकॉर्ड पर गंदा फ़ील्ड मैन्युअल रूप से सेट करके दूसरी समस्या को ठीक कर सकता हूं, लेकिन यह सही नहीं लगता है। ऐसा लगता है कि मुझे ग्रिड स्तर पर फ़ील्ड अपडेट करना चाहिए ताकि यह यूआई और डेटासोर्स दोनों में इसका ख्याल रख सके।

इस बारे में कोई विचार कैसे है?

धन्यवाद

Answer 1

मूल रूप से जब आप एक रिकॉर्ड आप मॉडल की set विधि का उपयोग करना चाहिए अद्यतन करना चाहते। उदाहरण के डेटा स्रोत के पहले रिकॉर्ड को अपडेट करने के लिए आप इस तरह यह अद्यतन करना चाहिए:

var firstItem = $('#GridName').data().kendoGrid.dataSource.data()[0]; 
firstItem.set('FirstName','The updated Name'); 

ऊपर स्वचालित रूप से ध्वज के रूप में गंदा निशान चाहिए और परिवर्तन देखते हैं कि यह ग्रिड को सूचित करेंगे, तो ग्रिड स्वचालित रूप से refresh होगा ।

यदि आप सीधे किसी विशिष्ट पंक्ति से संबंधित ऑब्जेक्ट को पुनर्प्राप्त करना चाहते हैं तो आप ग्रिड की dataItem विधि का उपयोग कर सकते हैं।

Answer 2

उपरोक्त पेचका उत्तर के बाद, मैंने संपादित सेल को गंदे झंडे के साथ चिह्नित करने के लिए कुछ अतिरिक्त कोड जोड़ा।

यहां काम करने के लिए कॉलम पर मेरे रेज़र कोड की आवश्यकता है, मैंने कक्षा का नाम जोड़ा है ताकि इसे बाद में jquery selector में उपयोग किया जा सके।

columns.Bound(r => r.RoomRate).HtmlAttributes(new { @class = "grid-allotment-roomrate" }); 

यहां सेल अद्यतन करने के लिए मेरा jQuery कोड है और सर्वर पक्ष से सफलता डेटा पुनर्प्राप्ति के बाद संपादित सेल को चिह्नित करें।

var dataSource = $("#grid-allotments").data("kendoGrid").dataSource; 
var data = dataSource.data(); 
$.each(data, function (index, rowItem) { 
    var checkbox = $("#checkbox_" + rowItem.RoomTypeId + "_" + rowItem.Date.getTime()); 
    if (checkbox != null && checkbox.is(':checked')) { 
     $.ajax({ 
      url: "RackRate/GetRackRateForRoomTypeOn", 
      type: "POST", 
      data: { roomTypeId: rowItem.RoomTypeId, date: rowItem.Date.toUTCString() }, 
      success: function (result) { 
       data[index].set('RoomRate', result); 
       $('tr[data-uid="' + rowItem.uid + '"] .grid-allotment-roomrate').prepend('<span class="k-dirty"></span>'); 
      } 
     }); 
    } 
}); 

नीचे कोड की पंक्ति उस गंदे झंडा आकर्षण के लिए जिम्मेदार है।

$('tr[data-uid="' + rowItem.uid + '"] .grid-allotment-roomrate').prepend('<span class="k-dirty"></span>'); 

Answer 3

मैं एक बहुत ही सरल और प्रभावी तरीके से यह कार्य करें:

var employee = employeeDataSource.get(employeeId); 
    employee.dirty = true; // set it as dirty 
    employeeDataSource.sync(); //Tell the DataSource object to save changes 

यह एक पुराने सवाल है लेकिन आशा है कि यह एक ही मुद्दे के साथ किसी को भी मदद मिल सकती है।

Answer 4

मैं इसे इस तरह से उपयोग करता हूं - कम से कम चेकबॉक्स के साथ।मैं संपादित करें बटन के साथ स्तंभ सेट इस तरह देखना होगा:

columns.Command(command => {command.Edit().HtmlAttributes(new { id = "btnEdit_" + "${Id}" }); }).Width(100).Hidden(true); 

और एक onclick समारोह का उपयोग करता है यह जहां पहले कॉलम (मैं एक हाइपरलिंक के साथ एक छवि है) में क्लिक करने के लिए है प्रोग्राम के रूप में संपादित करें बटन क्लिक करने के लिए , चेकबॉक्स पर क्लिक करें, फिर अद्यतन बटन पर क्लिक करें। शायद अधिक "पुराना स्कूल", लेकिन मुझे यह जानना अच्छा लगता है कि यह आदेश का पालन कर रहा है अगर मैं इसे अपडेट कर रहा हूं तो मैं करूँगा।

मैं ऑब्जेक्ट ("यह") में पास करता हूं, इसलिए जब मैं प्रतीत होता हूं तो पंक्ति और चेकबॉक्स प्राप्त हो सकता है, 0 या 1 के रूप में नई स्थिति (मेरे पास कुछ कोड है जो इसका उपयोग करता है, वास्तव में इस डेमो के लिए आवश्यक नहीं है,

columns.Bound(p => p.IsActive).Title("Active").Width(100).ClientTemplate("# if (IsActive == true) {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '0', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_1.png /></a> #} else {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '1', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_0.png /></a> #}#"); 

function changeCheckbox(obj, status, id) { 
    var parentTr = obj.parentNode.parentNode; 
    $('[id="btnEdit_' + id + '"]').click(); 

    parentTr.childNodes[5].childNodes[0].setAttribute("id", "btnUpdate_" + id); // my Update button is in the 6th column over 
    parentTr.childNodes[0].childNodes[0].setAttribute("id", "chkbox_" + id); 
    $('[id=chkbox_' + id + ']').click().trigger("change"); 
    $('[id=chkbox_' + id + ']').blur(); 

    var btnUpdate = $('[id="btnUpdate_' + id + '"]'); 
    $('[id="btnUpdate_' + id + '"]').click(); 

} 

कोड से ऊपर, मान लिया गया है, ज़ाहिर है, चेकबॉक्स पहले कॉलम में है: हालांकि, तो मैं उस भाग सादगी के लिए मेरी समारोह से बाहर), और है कि आइटम की आईडी जा रहा हूँ। अन्यथा, उस chkbox setAttribute लाइन पर उस कॉलम पर पहले childNodes[0] को समायोजित करें, जो कम से कम एक से कम है, क्योंकि यह शून्य से गिनती शुरू करता है।

Answer 5

मेरे लिए यह (ग्रिड का दृष्टांत की आवश्यकता नहीं है) काम करता है:

select: function(e) { 
      console.log("select"); 
      var item = e.item; 
      var text = item.text(); 
      var index = item.index(); 
      console.log(item); 
      console.log(text); 
      console.log(index); 
      var dataItem = this.dataItem(index); 
      console.log(dataItem); 
      // SET RETURNED VALUES FOR MODEL 
      options.model.set("actionName.id", dataItem.id); 
     } 

Answer 6

set("fieldname",value) स्वचालित रूप से ग्रिड ताज़ा होगी, वहाँ सिर्फ दोनों यूआई मूल्य और के लिए किसी भी आवश्यकता के बिना फ़ील्ड मान अद्यतन करने के लिए एक आसान तरीका है ताज़ा करें बस करो, जैसे:

data.FieldName = "Whatevervalue"; 
    $(currentrow.children()[getColumnIndex("FieldName")]).text("Whatevervalue"); 

    function getColumnIndex(columnName) { 
    var index; 
    var columns = $("#grid").data("kendoGrid").columns; 
    for (var i = 0; i < columns.length; i++) { 
     if (columns[i].field == columnName) { 
      index = i; 
      return index; 
     } 
    } 
} 

    var data = $grid.data("kendoGrid")._data; 
    var currentrow = $grid.data("kendoGrid").tbody.find("tr[data-uid='" +  data[i].uid + "']"); 

आशा इस