I wonder if there is a way to make #Html.Kendo().MultiSelectFor() with no datasource and add items to it dynamically, simillar to the input for adding tags here on StackOverflow?
It would accept a model property with type IEnumerable:
#Html.Kendo().MultiSelectFor(model => model.Tags)
and accept the values through jQuery, something like:
$("#Tags").items.add("tag1");
I would appreciate if someone can advise on other Kendo widgets that allow quickly add and delete items in multivalue input.
You can add/insert new items to the dataSource that the multiselect uses and thus they will become part of the collection as the other initial items.
e.g.
var ms = $("#select").data('kendoMultiSelect');
ms.dataSource.insert(0,{text:"some text",value:"333"})
http://jsbin.com/uWEvulEn/2/edit
Related
I'm using the Kendo for Angular grid in an Angular 4 application. I have selectable set to 'true', a column in my grid with the kendo-grid-checkbox-column, and selectionChange set to a function that takes the event parameter as an argument.
In my selectionChange handler, the selectedRows array on the event parameter only has one value in it, regardless of how many rows are selected.
Thanks,
James
My code:
onGridSelectionChange(event: SelectionEvent) {
debugger;
console.log(event.selectedRows.length); // this is always 1
};
<kendo-grid *ngIf='!isLoading' style="width:100%; height: inherit;" class="ag-fresh" [data]='gridView' [selectable]="true"
[pageSize]='pageSize' [skip]='skip' [pageable]='true' (pageChange)='onGridPageChange($event)'
(selectionChange)='onGridSelectionChange($event)'>
You are using the wrong event of the grid. You should use selectedKeysChange
<kendo-grid ...
[kendoGridSelectBy]="'id'"
(selectedKeysChange)="selectedKeysChange($event)">
...
</kendo-grid>
Also, you have to set the field used to select the row (kendoGridSelectBy). In this example it's the ID.
Get the selection:
selectedKeysChange(rows: number[]) {
console.log(rows);
}
Take a look at the following example:
EXAMPLE
All selected keys are kept in a collection (mySelection) that we can also manipulate to select/deselect rows programmatically. Instead of keeping the keys, you can keep the whole objects, representing the selected data items instead (bind kendoGridSelectBy to a function that will return eventArgs.dataItem).
change [selectable]="true" to:
[selectable]="{enabled: true, mode: 'multiple'}"
when I added the mode: 'multiple' I was able to get the list..
I try to make complete custom filter for kendo grid to use both: checkboxes and input fields for filtering.
On this example:
https://dojo.telerik.com/EcUdaFeT
I added custom input fields (kendo inputs doesn't work!)
When I, for example, check inside checkboxes menu fields and select 3 products in column 'ProductName' (Chai, Chang, Aniseed Syrup) and than go to filtering inside input (for example want to see if there is product name contains "sy"), what happens is that this filtering is now searching whole data source!
The result I want to get is Aniseed Syrup because this is the only checked value contains "sy".
Is there any way to make this to work like:
select products with product names (chai or chang or Aniseed Syrup) AND (field which contains "sy").
I know how this complex filter needs to look like - this is raw example:
logic:"and"
filters:[
{logic: 'or', filters: {field:"ProductName", operator:"eq", value:"Chai",...}},
{logic:(this goes middle dropdown value from filter - 'and' or 'or'), filters: {field:"ProductName", operator: for example first dropdown value (contains,..), value: "sy"}}
]
Does anyone have an idea how to connect filter I got from checkboxes with the one I get when I use input fields filtering?
Thanks for the help!
P.S. I've already checked and read all similar questions here, but it doesn't lead me to the solution ;)
I am using px-data-table in an Angular2 application.
The data-table is used as follows:
<px-data-table #myTableRef [tableData]='tableDetails' language="en" (px-row-click)="selectedChanged($event)" (px-select-all-click)="selectAll($event)" sortable selectable show-column-chooser>
<px-data-table-column *ngFor="let header of headers" type="html" name="{{header.value}}" label="{{header.label}}" [disableHide]="header.disableHide" [hide]="!header.disableHide">
</px-data-table-column>
</px-data-table>
The user selects more than one rows. So selectedChanged($event) is fired and multiple rows are selected. Now I'd like the selected rows to be unchecked from code not via user interaction. I went with the following approaches (which did not work):
Fire event 'px-select-all-click' from Angular by:
this.myTableRef.nativeElement.fire('px-select-all-click')
this.myTableRef.nativeElement.fire('px-select-all-click', this.myTableRef.nativeElement.selectedRows)
// also did a ChangeDetectorRef.detectChanges() after injection but it did not work.
Select the checkbox with id 'selectAllCheckbox' from Angular by:
this.myTableRef.nativeElement.shadowRoot.querySelector('selectAllCheckBox')
this.myTableRef.nativeElement.querySelector('selectAllCheckbox')
//returns null in both cases so I can't do a .click() on it
Empty the selectedRows attribute:
this.myTableRef.nativeElement.selectedRows = [];
All three methods don't work.
I was looking inside the aha-table.html imported inside the px-data-table.html and found a convenient method: _setAllRows(e) which unselects all the rows with _setAllRows(false). If only this was exposed or I could call this from Angular, I'd have my solution to the problem: unchecking the selected rows.
Any solutions would be helpful.
After noticing that the _setAllRows(e) is a method of aha-table which is a component nested under px-data-table component, accessing the method is easy according to the Polymer documentation for Local DOM API.
let tableRef = this.myTableRef.nativeElement;
tableRef.$$('aha-table')._setAllRows(false);
Basically $$('selector') is the Polymer shorthand for dynamically created nodes. If I get the reference for the aha-table node, I can call its methods.
I have a tabular form which I need to disbale and re-enable some of the columns based on some conditions.
I have the below javascript in my dynamic action which is working. I am referencing the columns by their names (f01_0001, f01_0002, f02_0001, f02_0002....)
$("[name='f01']").each(function(i){
// columns to be disabled
var coltext5 = $("[name='f05']").get(i).id;
var checkbox8 = $("[name='f08']").get(i).id.substring(0,8);
$("#"+coltext5).prop( "disabled", true );
$("#"+checkbox8).prop( "disabled", true );
})
But the issue I have is, if I switch the position of these columns, or add more editable columns to the tabular form, the name of these columns will be changed.
e.g in the above example, if I add one more textbox before coltext5, then coltext5's name will become f06....
Is there any better way to reference the tabular form columns? like ID or class, something that's static and won't be changed even the position of columns are changed?
Thanks
I've hit this issue before, and I've successfully used data attributes to do it - e.g. https://jeffkemponoracle.com/2016/04/05/declarative-tabular-form-dynamic-totals/
For example, you can set Element Attributes on the "Address" column to data-col="address", and refer to them in javascript using $("[data-col='address']").
Of course, you have to add this to each column you need to refer to.
I need to implement a hierarchical choice list in my DataGrid. Depending on the value of the first column, the available options for the second column need to change. Is there any way to attach a selection listener to the DataGrid (or all cells?) and modify the options value of the second column (in this specific row) to display values depending on the first columns value?
I haven't tried this but the dojox.grid.DataGrid has among its defined events:
onApplyCellEdit(inValue, inRowIndex, inFieldIndex)
so you can:
dojo.connect(grid, 'onApplyCellEdit',
function(inValue,inRowIndex, inFieldIndex){
var colObj = grid.getCell(2);
var node = colObj.getNode(inRowIndex);
var select = dojo.query(".dojoxGridSelect",node)[0];
console.log(select);
}
);
as long as the field is set alwaysEditing=true
That will give you access to the node and the cell... but if you change the options it rewrites it. There should be a better way of doing it by using the dojo's methods.
http://jsfiddle.net/dacabdi89/2acjt/