I have a kendo ui dropdownlist
<select id="mySelect"
kendo-drop-down-list
k-options="controller.mySelect"
ng-model="controller.model">
</select>
Then when I change another select I am successfully refreshing the select by
$("#initiative_select").data("kendoDropDownList").dataSource.read();
But the initial selection is blank, I want to make the first item selected,
I have try to do that on dataBound by
dataBound: function(e) {
e.sender.select(e.sender.dataItem(0));
}
But it's not working.
I think you could use this on your dataBound function
if (this.select() === -1) { //check whether any item is selected
this.select(0);
this.trigger("change");
}
As mentioned by ggkrustev, the issue on github
a DEMO here
Related
I use Kendo-angular library. When user select an item in my dropdownlist, the selectionChange event is triggered and based on some conditions I want to cancel the change event and revert to previously selected value in the dropdownlist.
Can this be achieved with the kendo dropdownlist component ?
<kendo-dropdownlist
[data]="services"
[textField]="'defaultLabel'"
[valueField]="'id'"
[(ngModel)]="selectedService"
placeholder="Select a service"
(valueChange)="onServiceChanged($event)">
</kendo-dropdownlist>
onServiceChanged(event) { }
//event is the actual selected value, not the event
i found a solution:
<kendo-dropdownlist #dropdown
(valueChange)="valueChange($event, dropdown)">
</kendo-dropdownlist>
valueChange(value, dropDownControl: DropDownListComponent) {dropDownControl.writeValue("old value");}
Check the event list on the documentation
https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/#toc-events
public valueChange(value: any): void {
// Your condition here
this.log('valueChange', value);
}
I have a kendo grid with filterable = true, mode=row.
I would like a way to have a button click, fire an event that will toggle hiding and showing the filter row.
Right now, I have it working by editing the innerHTML, but this is not what I want to do in the end, for several reasons.
1) I need to have a saved version of the filter row values before they are removed.
2) After they are removed and re-added they will not work
...
many other reasons, just bad practice and there has to be a better way.
A button that fires the event: toggleFilterClick:
<script type="text/x-kendo-template" id="gridFilter">
<button type="button" class="k-button" id="kendoFilterButton" data-click="toggleFilter"><span class="k-icon k-i-funnel"></span>Filter On/Off</button>
</script>
The Javascript code:
//Gets the innerHTML values before they are removed
var filterRowValues = $(".k-filter-row")[0].innerHTML;
//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {
if ($(".k-filter-row")[0].innerHTML == '')
{
$(".k-filter-row")[0].innerHTML = filterRowValues;
}
else
{
$(".k-filter-row")[0].innerHTML = '';
}
});
Any thoughts suggestions would be appreciated/
I would just like to hide the actual filter row in the header
I'm not sure if i get the point but if you just want to hide it just simply remove everything except$(".k-filter-row").show(); and $(".k-filter-row").hide();. I create an example where when i hide the filter, the filter condtion will removed, but when it showed again the grid will refiltered with the previous value used to filter
$("#toggle").kendoButton({
click:function(){
if($(".k-filter-row").css("display") == "none"){
$(".k-filter-row").show();
//show again filter and execute previous filter condition
$("#grid").data("kendoGrid").dataSource.filter({field:"ShipName",operator:"contains",value:vm.get("filterOptions.ShipName").toString()});
$("#grid").data("kendoGrid").dataSource.filter({field:"OrderID",operator:"eq",value:vm.get("filterOptions.OrderID")});
}else{
//store the previous filter value
//autocomplete
vm.set("filterOptions.ShipName",$("input[data-role='autocomplete']").data("kendoAutoComplete").value());
vm.set("filterOptions.OrderID",$("input[data-role='numerictextbox']").data("kendoNumericTextBox").value());
//hide filter row
$(".k-filter-row").show();
//to reset filter of the grid when filterable hidden
$("#grid").data("kendoGrid").dataSource.filter({});
}
}
});
See the details in action
DEMO
Have you tried just hiding the row instead of removing it?
//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {
if ($(".k-filter-row").is(":visible")){
$(".k-filter-row").hide();
}
else{
$(".k-filter-row").show();
}
});
I've got a Kendo grid with detail template. When I open the detail template, I want the respective row to be selected. By default, the detail expands but the row isn't selected.
.Events(e => e.Change("onChange").DetailExpand("jsFunction"))
I know there's a DetailExpand event that fires when the detail is expanded, I just don't know how to make it select the row to which it refers. I have tried:
function jsFunction() {
this.dataItem(this.select()); <--- breaks here because there's no row selected
}
How can I make it select the row?
Nothing is easier:
function jsFunction(e) {
e.sender.select(e.masterRow);
}
Grettings.
I need to present 5 dropdown lists in my UI, populated with a Knockout ObservableArray.
All 5 read from the same source ko.observableArray([]).
I have two problems:
How do I make each option only become active after the option before it has been selected? Should only have the first dropdown active, once a selection has been made then activate teh second one, until user has selected all 5.
Each dropdown is reading from the same observableArray, but I don't want users to be able to select the same option as prior the dropdowns. How do I make the second dropdown show all options excluding what as picked in the first dropdown? How do I make the third dropdown show all optoins excluding what was selected in the first and second dropdown?
I can do cascading dropdowns from loading from different sources, but I don't really want to have to make 5 separate $.getJSON calls, I'd much prefer one at the initial pageLoad.
I've found a few prior questions on cascading select lists, but not for reading from the same one source...
You can use the enable binding to connect the previous select value with the second select.
So when you select something in the first dropwdown the firstValue will contain the selected value so the enable: firstValue will be true and it will enable the second dropdown
<select data-bind="options: options, optionsText: 'value',
optionsCaption: '', value: firstValue"></select>
<select data-bind="options: secondOptions, optionsText: 'value',
optionsCaption: '',value: secondValue,
enable: firstValue"></select>
To solve the "cascading" you can use computed properties to fill in the options with filtering out the already selected values:
var VM = function () {
this.options = ko.observableArray(/* load your original options here */);
this.firstValue = ko.observable();
this.secondValue = ko.observable();
this.secondOptions = ko.computed(function () {
return ko.utils.arrayFilter(this.options(), function (item) {
return item != firstValue();
});
}, this);
}
And apply these patterns for the other 3 dropdowns.
Demo JSFiddle.
i am using ajax to get details from database as in this Example along with it
i used jquery autocomplete combo as in this Example.
The combo box works fine without the auto complete.
When the auto complete is active the details are not generated in the onChange Event of the combo box.
<select name="sitemCode" id="itemCode" onchange="showItem(this.value)">
<option value = " 0 ">Select Item Code</option>
How can i make it work with the autocomplete jquery ? Please Help
Have you tried like this ??
$('#itemCode').change(function() {
var itemCode= $("#itemCode option:selected").text();
showItem(itemCode);
});