I was wondering how can you pass the selected datagrid item to the eventhandler?
My datagrid:
<div>
<kendo-grid [data]="gridData"
[sortable]="true"
[selectable]="true"
(selectionChange)="selectRow($event)"
>
My grid.component.ts
private selectRow(event:any){
console.log(event)
}
How do I pass the selected row into the event handler?
Update
I have solved it now like this:
private selectRow(event:any){
console.log(event)
let i = event.index
let selectedRow = this.gridData[i];
console.log(selectedRow)
}
Can somebody tell me if this is the correct way?
Or is there a better way to solve this?
Thanks,
Yes, you are using the recommended way for finding a data item from select event. We do not provide the dataItem as part of the event argument, as it is easily accessible from the handler anyway.
Now we can get the dataItem directly from the event ,
(selectionChange)="selectRow($event)"
And then in the component we can get all rows selected from selectionEvent
onSelect(e: SelectionEvent) {
if (e.selectedRows.length > 0) {
var rows = e.selectedRows;
console.log(rows[0].dataItem);
}
}
Related
When a grid is in a component at one route and the user navigates away and then comes back, the current kendo grid loses its scroll position and starts at the top.
Anyone know a way to "remember" the scroll position so it can be set on the grid manually?
Not a great solution, but it works for the time being. Here it is.
Inside the component with the grid:
private _scrollPos: number;
#ViewChild("grid", { read: ElementRef }) gridEl: ElementRef;
constructor(private router: Router) { }
ngOnInit(): void {
this.router.events.subscribe(e => {
if (e instanceof NavigationStart) {
let gridContent = this.getGridContentElement();
if (gridContent.scrollTop > 0) {
this._scrollPos = gridContent.scrollTop;
}
}
else if (e instanceof NavigationEnd) {
if (this._scrollPos > 0) {
let gridContent = this.getGridContentElement();
gridContent.scrollTo({ top: this._scrollPos });
}
}
}
}
private getGridContentElement(): Element {
let el = this.gridEl.nativeElement as HTMLElement;
let gridContent = el.getElementsByClassName("k-grid-content").item(0);
return gridContent;
}
This is can done by remembering which row was selected, saving the id of the row, and then setting the grid property [selectedKeys]="id" when the user navigates back.
For example if the data for the grid was based on product data then save last viewed row id (ProductID). When the user navigates back to grid, you can push the ProductID you saved to an array that is bound on the grid. This will make the row selected, to scroll to the row you can use the class k-state-selected and scrollIntoView to scroll the row into view.
This is a basic implementation, but should give you a enough to go on. I created a Stackblitz example so you can see how to implement this. Make sure to configure the grid with kendoGridSelectBy and selectedKeys. The kendoGridSelectBy should match the id that you push to the array. In the example I created it was ProductID.
You can set the Grid skip to the same value it last was. You can check out the persist state examples. The Grids use regular paging, but the same principles apply.
hoping someone can point out where I am going wrong. I am working on an MVC 5 ASP.NET application. In my View I have a form which, amongst other controls, has 2 dropdown boxes.The first dropdown is populated with values in the Viewbag, but I want to populate the second dropdown based on the value selected in the first dropdown. I've read lots of other posts but still can't work it out.
Here is the code for the dropdowns.
#Html.DropDownList("EquipmentPortList", new SelectList(ViewBag.EquipmentPortList, "hvid", "hvnamn"), "--Select Equipment--")
#Html.DropDownList("PortConnectedList", Enumerable.Empty<SelectListItem>(), "--Select Port--")
Here is the change event code for the first dropdown :-
$(document).on('change', '#EquipmentPortList', function () {
var url = '#Url.Action("GetPortInt", "bearers")';
var ports = $('#PortConnectedList');
var id = $(this).val();
$.getJSON(url, { portid: id }, function (response) {
ports.empty();
$.each(response, function (index, item) {
ports.append($('</option>').text(item.portnamn).val(item.portid));
});
});
});
Here is the method in the controller :-
public ActionResult GetPortInt(int portid)
{
var PortConnectedList = from h in nadb.hvportar
where h.porthvid == portid && (h.portnamn.Contains("NT") || (h.portnamn.Contains("Port")) || (h.portnamn.Contains("/")))
orderby h.portid
select new { h.portid, h.portnamn };
return Json(PortConnectedList, JsonRequestBehavior.AllowGet);
}
OK, so the first dropdown populates correctly, and when I select a value I can see (using alerts) that the change event fires and the value is correctly selected.
I can see with the use of a breakpoint that the method is triggered and returns the correct data from the database, but after that I don't know what is wrong as the dropdown does not populate.
I picked up the code change event code from another post and amended it to fit my own project but I can't see what I'm missing. Thanks.
Stephen, your DotnetFiddle link actually showed me the answer. This line :-
ports.append($('</option>').text(item.portnamn).val(item.portid));
Should read
ports.append($('<option></option>').text(item.portnamn).val(item.portid));
Once I changed that it worked. Many thanks.
I have a custom form where, in a subtab, I have a dropdown that I need to find out the selected value on the client side after the user selects to perform some validation. I created the script and tied it to the on change event of the dropdown. I cannot seem to find the code to get the selected value on the client side. I have found code to read the value on the server side from a submit event. I need this on the client side on change. I am going to use the ID to look up a record and check a value on that record and if applicable popup a warning to the user. Either SS1 or SS2 is good, whatever would be better I have both available. Any help with this would be great. thanks
In a client script, you can use nlapiGetFieldValue() to retrieve the results.
function fieldchanged(type, name, linenum) {
if(name == 'dropdownid') {
var value = nlapiGetFieldValue('dropdownid');
alert(value);
}
}
OK the nlapiGetFieldValue, did not do the trick, what did was the following
function ValidateField( type, field, linenum ) {
if ( field === 'recordid' ) {
var vendorid = nlapiGetCurrentLineItemValue(type,field,linenum);
var vendorRecord = nlapiLoadRecord('vendor',vendorid);
}
return true;
}
thanks for your help
I am trying to use md-autocomplete in Angular Material as a multi selector. The idea is, that the selected element from the autocomplete will be added to an object array after selection and then the selection will be removed from the md-autocomplete. I was able to clear the md-autocomplete, but the focus stays on the md-autocomplete input and so the autocomplete suggestions are still visible.
Example:
http://cdpn.io/QjQGVQ
Code:
function selectedItemChange(item) {
$log.info('Item changed to ' + JSON.stringify(item));
if(item)
{
//check if item is already selected
if($filter('filter')(vm.contactsSelected, function (d) {return d.id === item.id;})[0])
{
$log.info('Item already selected. Will not add it again.');
}
else
{
//add id to object
vm.contactsSelected.push(item);
}
// clear search field
vm.searchText = '';
vm.selectedItem = undefined;
//somehow blur the autocomplete focus
//$mdAutocompleteCtrl.blur();
}
}
PS: I am aware I could use the contact chips of Angular Material instead, but I was still wondering how the blur could be achieved.
If you set md-no-cache="true" property inside your the list will dissapear, but input field will not be cleared. I think is better solution than clearing input field but leaving the list visible, but is up to you.
I did subscribe an event on data table as follows (YUI data table):
myDataTable.subscribe("cellClickEvent", this.myDataTable.onEventShowCellEditor);
how can I achieve as follows?
If (condition)
show cell editor
else
remove or hide cell editor
Thanks in Adv.
onEventShowCellEditor is nothing really special, it simply calls method showCellEditor. So can you. Instead of setting a listener for the event and pass it straight through to onEventShowCellEditor put your own listener there instead and decide prior to calling showCellEditor:
myDataTable.subscribe('cellClickEvent', function (oArgs) {
if (condition) {
myDataTable.showCellEditor(oArgs.target);
} else {
...whatever
}
});