केंडो ग्रिड + कोणीय 4 में प्रोग्रामेटिक रूप से चुनी गई पंक्ति को कैसे सेट करें?

Question

मेरे पास कोणीय 4 + टाइपस्क्रिप्ट + केंडो यूआई पर ऐप है। इसके अलावा मेरे पास उपयोगकर्ताओं की तालिका वाला एक पृष्ठ है। उपयोगकर्ता को संपादित करने के बाद मैं आईडी द्वारा उपयोगकर्ता को हाइलाइट करना चाहता हूं जिसे मैंने संपादित किया था।

users: Observable<Array<User>>; 
selectedId: number;  
gridView: GridDataResult; 

ngOnInit() { 
    this.users = this.route.params 
     .switchMap((params: Params) => { 
      this.selectedId = +params['id']; 
      return this.adminService.getUsers(); 
     }); 
    }); 
} 

इसके अलावा, मैं के साथ "सूचकांक" और "चयनित" क्षेत्रों केंडो प्रलेखन घटना में पाया:

this.selectionChange({ index: 1, selected: true }); 

:

selectionChange(event: SelectionEvent): void { 
    //? 
} 

मैं ngOnInit विधि में प्रोग्राम के रूप में selectionChange कॉल करने की कोशिश

लेकिन मुझे नहीं पता कि चयनित पंक्ति कोमें सेट करने के लिए क्या करना है selectionChange विधि के शरीर में।

तो, पंक्ति का चयन करने के लिए gridView के साथ मुझे क्या करना चाहिए? या आईडी द्वारा पंक्ति का चयन करने के लिए एक आसान तरीका हो सकता है।

Answer 1

आप नीचे दिए गए पंक्ति का मैन्युअल रूप से चयन कर सकते हैं, मैंने अपने केंडो ग्रिड में काम करने की कोशिश की है लेकिन इसे कुछ पॉलिशिंग की आवश्यकता हो सकती है।

कुछ आवश्यक चर परिभाषित करें: (कृपया नीचे दिए गए कोड से लापता चर निर्धारित)

rowIndex : number =0; 
isSelectedRowChanged: boolean = false; 
selectedItem : any; 

परिभाषित समारोह चयनित पंक्ति के रूप में नीचे स्थापित करने के लिए:

public SetSelectedRow(index: number, isManualSelection, isSelected, isCellClick) { 

    var grid = this.el.nativeElement.getElementsByClassName('k-grid-content')[0]; 
    var rows = grid.getElementsByTagName('tr'); 

    let dataRowIndex = -1; 
    let selectedRow = grid.getElementsByClassName('k-state-selected')[0]; 
    for (let i = 0; i < rows.length; i++) { 
     if (rows[i].className.indexOf("k-grouping-row") < 0 && rows[i].className.indexOf("k-group-footer") < 0) { 

      if (isManualSelection) { 
       this.rowIndex = 1; 

       if (selectedRow != null) { 
        selectedRow.className = String(selectedRow.className).replace(" k-state-selected", '').replace("k-state-selected", ''); 
       } 
       if (rows[i].className.indexOf("k-state-selected") < 0) { 
        rows[i].click(); 
       } 

       //Set selectedItem 
       for (let k = 0; k < rows[i].children.length; k++) { 
        if (rows[i].children[k].className.indexOf("k-group-cell") < 0 && rows[i].children[k].children[0] != null) {        
         rows[i].children[k].children[0].click(); 
         break; 
        } 
       } 
       break; 
      } else { 
       if (this.isSelectedRowChanged) { 
        this.rowIndex = index + 1; 
        return; 
       } 
       if (selectedRow == null) { 
        //Set selectedItem 
        rows[i].className = rows[i].className + " k-state-selected"; 
        for (let k = 0; k < rows[i].children.length; k++) { 

         if (rows[i].children[k].className.indexOf("k-group-cell") < 0 && rows[i].children[k].children[0] != null) {         
          rows[i].children[k].children[0].click(); 
          break; 
         } 
        } 
        break; 
       } 
       else { 
        dataRowIndex++; 
        if (!this.isSelectedRowChanged) { 
         if (isSelected && !isCellClick) { 
          selectedRow.click(); 
         } 

         break; 
        } else { 
         this.rowIndex = dataRowIndex + 1; 
        } 
       } 
      } 
     } 
    }  
} 

समारोह नीचे कॉल स्थापित करने के लिए ग्रिड को डेटा स्रोत असाइन करने के बाद पहली पंक्ति चयनित:

setTimeout(() => { 
     this.rowIndex = 0; 
     this.SetSelectedRow(0, true, false, false); 
    }, 200); 

पर पंक्ति चयन बदलें घटना समारोह नीचे लिखें:

public OnSelection_Changed(item: any): void { 
    if (!item.selected) { 
     this.SetSelectedRow(item.index, false, true, false); 
    } 
    else { 
     this.SetSelectedRow(item.index, false, false, false); 
    }   
} 

इसके अलावा कक्ष पर क्लिक करें घटना को परिभाषित:

OnCellClick(dataItem, rowIndex, columnIndex) { 
    if (this.selectedItem != dataItem) { 
     this.isSelectedRowChanged = true; 
     this.selectedItem = dataItem;    
    } 
    else { 
     this.isSelectedRowChanged = false; 
    } 
} 

Answer 2

मेरे अस्थायी समाधान है: डेटा का श्रेय

सम्मिलित एचटीएमएल में:

<kendo-grid-column title="Actions"> 
    <ng-template kendoGridCellTemplate let-user> 
     <div class="btn-group"> 
      <button class="btn btn-xs btn-default" type="button" data-toggle="tooltip" title="Edit User" [attr.data-id]="user.id"><i class="fa fa-pencil"></i></button> 
     </div> 
    </ng-template> 
</kendo-grid-column> 

और में ts:

gridView: GridDataResult; 
selectedId: number; 

constructor(private route: ActivatedRoute, 
    private adminService: AdminService) { } 

ngOnInit() { 
    this.route.params 
     .switchMap((params: Params) => { 
      this.selectedId = +params['id']; 
      return this.adminService.getUsers(); 
     }) 
     .subscribe((response: GridDataResult) => { 
      this.gridView = response; 
      this.selectRow(); 
     }); 
} 


selectRow() { 
    setTimeout(() => { 
     if (this.selectedId) { 
      let button = document.querySelector('[data-id="' + this.selectedId + '"]'); 
      if (button) { 
       let tr = button.parentElement.parentElement.parentElement; 
       tr.className += " k-state-selected"; 
      } 
     } 
    }, 200); 
}