I am using a Kendo ComboBox in my app and defined the markup of the control as follows:
#(Html.Kendo().ComboBox().Name("GroupUserName")
.Placeholder("- Select Group -")
.Suggest(true)
.BindTo(
(Model.Groups ?? new[] { Model.Group })
.Select(i => new { i.GroupName, i.GroupUserName })
)
.DataTextField("GroupName")
.DataValueField("GroupUserName"))
I know that there are 2 records being bound in the BindTo method, and these are being passed to the client component.
jQuery(
function(){
jQuery("#GroupUserName").kendoComboBox({"dataSource":
[{"GroupName":"membershipgroup01","GroupUserName":"membershipgroup01"},
{"GroupName":"publicgroup01","GroupUserName":"publicgroup01"}]
,"dataTextField":"GroupName","dataValueField":"GroupUserName",
"placeholder":"- Select Group -","suggest":true
});
});
However, the combobox, when I hit the drop down, doesn't show anything. There is no drop down to allow me to select a value. See this image:
There is no drop down that appears when you click the drop down selector. Why?
I'm using JQuery 1.8.2, along with the kendo.all and kendo.aspnetmvc scripts...
You are binding to an anonymous type without field names. Kendo doesn't have anything to grab because the objects you told it to bind to don't have fields named GroupName and GroupUserName.
From what it looks like, you shouldn't need to bind to an anonymous type at all. So this:
.BindTo(
(Model.Groups ?? new[] { Model.Group })
.Select(i => new { i.GroupName, i.GroupUserName })
)
Should be:
.BindTo(
(Model.Groups ?? new[] { Model.Group })
)
If for some reason you do need to bind to an anonymous type you can give the fields the appropriate names:
.BindTo(
(Model.Groups ?? new[] { Model.Group })
.Select(i => new { GroupName = i.GroupName, GroupUserName = i.GroupUserName })
)
For me this was a conflict between JQuery UI and Kendo UI. When I removed references to JQuery UI, it worked.
Related
I am working KendoUi angular 5. I need How to select Multiple rows with out Using Ctrl key And check check boxes in kendogrid in angular 5?
I am able to Select Multiple rows using Ctrl key or select check boxes as per telerik kendo grid but i want to select multiple rows with out select check box or Ctrl key
You can use the rowSelected function and override the built-in Grid selection behavior, replacing it with a custom one:
DOCS
For example you can use the cellClick event handler where the data item, associated with the row the clicked cell is in, is available as event data and store the selected items in a collection that you can manipulate as necessary:
import { Component } from '#angular/core';
import { products } from './products';
import { RowArgs } from '#progress/kendo-angular-grid';
#Component({
selector: 'my-app',
template: `
<kendo-grid
[data]="gridData"
[height]="500"
[selectable]="true"
[rowSelected]="isRowSelected"
(cellClick)="onCellClick($event)"
>
<kendo-grid-column field="ProductName" title="Product Name" [width]="300"></kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="Units In Stock"></kendo-grid-column>
<kendo-grid-column field="UnitsOnOrder" title="Units On Order"></kendo-grid-column>
<kendo-grid-column field="ReorderLevel" title="Reorder Level"></kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
public gridData: any[] = products;
public mySelection: any[] = [];
public onCellClick({dataItem}) {
const idx = this.mySelection.indexOf(dataItem.ProductID);
if(idx > -1) {
// item is selected, remove it
this.mySelection.splice(idx, 1);
} else {
// add item to the selection
this.mySelection.push(dataItem.ProductID);
}
}
// Use an arrow function to capture the 'this' execution context of the class.
public isRowSelected = (e: RowArgs) => this.mySelection.indexOf(e.dataItem.ProductID) >= 0;
}
PLUNKER EXAMPLE
I found an alternate workaround which doesn't require rebuilding the row selection, which I prefer as it feels less risky.
All this does is hijacks any click event on a row in the grid, hides it from Kendo, and then sends a fake click event with ctrl down instead; therefore causing Kendo to do the proper selection behaviour for us.
It must be done in databind as when the page is changed or a filter added the event needs to be bound to the new rows.
$("#yourGrid").kendoGrid({
...
dataBound: dataBound
...
});
...
function dataBound() {
$(".k-master-row").click(function (e) {
// Prevent stack overflow by exiting if we have already done the below logic
// and let kendo handle it
if (e.ctrlKey === true)
return;
// Prevent Kendo from handling this click event as we are going to send another one with ctrl this time
e.preventDefault();
e.stopPropagation();
// Create a fake click with ctrl pressed on this particular row (Kendo will keep previous rows selected in this case)
var e2 = jQuery.Event("click");
e2.ctrlKey = true; // Ctrl key pressed
$(this).trigger(e2);
});
}
The only thing I need to know is if I can create a value for an item in the ComboBox, then I think I will be able to accomplish the task at hand. Would I do something like:
var oItem1 = new sap.ui.core.ListItem("lab", {
text: 'Lab',
value: 'Lab'
});
var oItem2 = new sap.ui.core.ListItem("boxer", {
text: 'Boxer',
value: 'Boxer'
});
Then I would use a button to filter through the table like so:
var oButton = new sap.ui.commons.Button({
text: "find",
styled: false,
press: function () {
var oFilter1 = new sap.ui.model.Filter("typeOfDog", sap.ui.model.FilterOperator.Contains, oItem1.getValue());
var oFilter2 = new sap.ui.model.Filter("typeOfDog", sap.ui.model.FilterOperator.Contains, oItem2.getValue());
var allFilter = new sap.ui.model.Filter([oFilter1, oFilter2], false);
oTable.getBinding("rows").filter(allFilter);
}
}).addStyleClass("searchButton").placeAt("search");
This however does not work. I'm assuming it is because I cannot create a value for a ListItem. If I can, how do I do so?
EDIT: Is there a way to do something like the CheckBox, a method equivalent .getChecked()?
I figured it out. I used a DropdownBox instead and used the following code:
oDropDown.attachChange(function () { oTable.getBinding("rows").filter(new sap.ui.model.Filter("payment", sap.ui.model.FilterOperator.EQ, oDropDown.getValue())); });
I think you can use FacetFilters also .FacetFilter consist of FacetFilterList and these are columns in the table.Based on the values selected in facetfilter table will get filterd.
I'm using a kendo grid and have a checkbox column with the following template:
"<input class='gridCheckbox' id='gridCheckbox_#=name#' name='Selected' type='checkbox' ng-model='dataItem.checked'/>"
In addition I'm also using an observableArray as the grid's dataSource.
When clicking the chekcbox the data in the observableArray is changed as expected but no "change" event is triggered.
Here is how I define the observableArray:
var obsArray = new kendo.data.ObservableArray(scope.gridData);
this.gridDataSource = new kendo.data.DataSource({
data: obsArray
});
obsArray.bind("change", function (e) {
console.log(e.action, e.field);
});
"scope.gridData" is the original dataModel. When I click the checkbox the observableArray is changed but not the "scope.gridData". In order to change the "scope.gridData" I want to listen to the "change" event and change the "scope.gridData" manually but as I said the "change" event is not triggered.
Any suggestions to what am I doing wrong and maybe there is a better solution.
Read This
your issue is that kendo uses a copy of your scope object
I manually added an event to my input checkbox (in our class we're using Angular so it was on ng-click="doSomething()" but maybe yours is just click="doSomething" and recorded handling the boolean change manually.
We have the Kendo Observables, too - but I got **lucky because we're also using the Breeze JS stuff where we can do data detection and refresh the grid once the data propagates backwards to the right place to be set to dirty. ( grid.dataSource.read(); )
If you want the full row value, make the click="doSomething(this)" and then capture it as the Sender. Just debug in and you should the dataItem attached to the Sender.
This might help you & this is not the correct figure but i did one example like this similar to your problem
var contentData = [
{ organization: 'Nihilent', os: 'Window' }
];
var nihl = contentData[0];
var viewModel = kendo.observable({
gridSource: new kendo.contentData.DataSource({
contentData: contentData
})
});
kendo.bind($(document.body), viewModel);
contentData.push({ organization: 'Dhuaan', os: 'Android' });
nihl.set('os', 'iOS');
I am trying to load data dynamically in a fieldset.
So I have a fieldset in which I dynamically add items, in my example I have two comboboxes. I want to fill those comboboxes with data coming from a store, knowing that each combobox will have different data according to its ID.
Here's what I've tried to do :
var targetFieldset = targetView.down('fieldset[id=myfieldset]');
targetFieldset .items.each(function (item) {
myStore.getProxy().url ='combo_items.php?id_combo=' + item.id;
myStore.autoSync = true;
myStore.load({
params : {
id_combo: item.id
}
})
});
How can I do this please ? Any help would be appreciated.
EDIT :
I have tried this as well, but it always binds the values corresponding to the last item id to all the comboboxes.
targetFieldset.items.each(function (item) {
myStore.clearFilter(true);
myStore.filter('id_combo', item.id);
alert(item.id);
item.bindStore(myStore);
myStore.loadData([], false);
});
Okay I managed to do it by cloning the filtered store to an array and then binding that array to the fieldset items.
Using the Telerik Asp.net MVC menu control, I'm trying to get an id on the ul's in sub menus. I've tried putting the HtmlAttributes(new { #id="myId" }) call in a few places but can't seem to figure out where to put it to get the id on the .
In the code snippet below, I've shown the two places I've tried calling the HtmlAttributes method. The comment after the call explains where the Telerik control is actually putting the id.
#(Html.Telerik().Menu()
.Name("mainMenu")
.Items(menu =>
{
menu.Add()
.Text("Tools")
.Items(item =>
{
item.Add().Text("Add To Toolbox").HtmlAttributes(new {#id="toolsMenu"}); #* this puts the id on the "Add To Toolbox" <li>*#
item.Add().Text("Toolbox");
}).HtmlAttributes(new {#id="toolsMenu"}); #* this puts the id on the "Tools" <li>*#
menu.Add()
.Text("Setup")
.Items(item =>
{
item.Add().Text("Print Header");
item.Add().Text("MenuLabelAccountInformation");
});
}).OpenOnClick(true))
Is there a way to get an ID on the <ul> with this control?
You can't set the id attribute of the UL from server side code. You could use jQuery to do that by hooking up the menu's OnLoad client-side event:
<script type="text/javascript">
function onLoad() {
var id = 0;
$(this).find("ul").each( function() {
this.id = "ul_" + id;
id ++;
});
}
</script>