Basically I have a Kendo UI Dropdownlist as my first grid column called "instrumentName"
In popup EDIT mode, I can see the correct instrumentName in the dropdown but there's one problem when I change the value:
As soon as I select a new instrument - the instrument ID shows up on the grid (in the background). The updated INSTRUMENT NAME should appear on the grid.
And once I click UPDATE, it does NOT show the instrument NAME, but rather the instrument ID (which is a number).
Some code snippets:
instrDropDown.value(e.model.instrumentId);
nodeGrid = $("#curvesGrid").kendoGrid({
dataSource: new kendo.data.DataSource({ ... });
columns: [
{
field: "instrumentName",
editor: instrumentsDropDownEditor, template: "#=instrumentName#"
},
{
field: "instrumentTypeName"
},
edit: function(e){
var instrDropDown = $('#instrumentName').data("kendoDropDownList");
instrDropDown.list.width(350); // widen the INSTRUMENT dropdown list
if (!e.model.isNew()) {
instrDropDown.value(e.model.instrumentId);
}
}
});
and here's my template editor for that Dropdown :
function instrumentsDropDownEditor(container, options) {
// INIT INSTRUMENT DROPDOWN !
var dropDown = $('<input id="instrumentName" name="instrumentName">');
dropDown.appendTo(container);
dropDown.kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
dataSource: {
type: "json",
transport: {
read: "/api/breeze/GetInstruments"
},
},
pageSize: 6,
//select: onSelect,
change: function () { },
close: function (e) {
},
optionLabel: "Choose an instrument"
}).appendTo(container);
}
Do I need to do anything special on change of the Dropdown ?
thanks.
Bob
dataFieldValue is what is going to be saved as value of the DropDownList. If you want name to be saved then you should define dataValueField as name.
Regarding the background update that's the default behavior since this is an ObservableObject and as consequence changes are automatically propagated. If you don't want this you should probably try using a fake variable for the drop-down and in the save event copy it to the actual field. Do you really need this?
Related
I am trying to programmatically set the filter value of a Kendo Grid Custom Filter. I'm applying my new filter values like:
gridOptions.dataSource.filter = [
{
field: 'MyField',
operator: 'eq',
value: newTextValue
}
];
My field definition in the grid options look like:
{
width: '140px',
title: 'MyFieldTitle',
field: 'MyField',
filterable: getFieldFilter()
}
With the following filter:
function getFieldFilter() {
return {
cell: {
template: function (args) {
var element = args.element;
element.kendoComboBox({
dataSource: {
transport: {
read: 'api/Items'
}
},
valuePrimitive: true,
dataTextField: 'Description',
dataValueField: 'Code'
});
},
showOperators: false
}
};
}
If I apply the filter as shown above, it only works after I click the kendoComboBox in the column and click outside of it again.
My initial thought was that kendo grid would not apply the dataValueField and just set the dataTextField. When I was checking the requests kendo grid is sending to the server, I saw that it was sending to value stored in the kendoComboBox itself (text) and not the value behind it.
If I select something in the kendoComboBox from the UI, everything works just fine. But if I set it programmatically like above, it doesn't.
Do I need to refresh some kind of state to make the kendoComboBox refresh its internal value or how do I solve this issue?
EDIT:
What I'm trying to do, is getting the value of the kendoCombobox from the grid.
var currentlyAppliedFilters = grid.dataSource.filter().filters;
for (var filter of currentlyAppliedFilters) {
if (filter.field === 'MyField') {
var currentlyApplied = filter.value;
}
}
So the code above, would give me the Description property of the items in the kendoCombobox, but what I actually want to get it the Code property.
Initially when the dataSource do not have a filter, the cell filter need a option label. so that the 1st value does not appear as selected.
eg : dojo example with optionLabel
args.element.kendoDropDownList({
dataSource: args.dataSource,
optionLabel: "Select a color...",
dataTextField: "color",
dataValueField: "color",
valuePrimitive: true
});
if you you need the grid to filter when binding, a default filter should be added to the dataSource
eg: dojo example with DataSource Filter
dataSource: {
data:[ { color: "#ff0000", size: 30 }, { color: "#000000", size: 33 }] ,
filter: { field: "color", operator: "eq", value: "#ff0000" }
}
Hope this helps.
I am using Kendo multiselect. I am facing issue while removing selected items using cross icon which are coming in kendo multi select at right hand side as shown in image below,
as per above image it is showing 8 item selected in drop down so to remove selected items when I click on highlighted cross icon it is removing item one by one but it should clear all selection when click on highlighted cross icon.
below is my code that I have written for drop down.
<select id="RegionDDL" kendo-multi-select="" k-options="RegionOptions" k-ng-delay="RegionOptions"
k-ng-model="CommonFilter.Regions"></select>
$scope.RegionOptions = {
autoBind: false,
placeholder: "Select All",
dataTextField: "Text",
dataValueField: "ID",
filter: "contains",
tagMode: "single",
change: OnRegionChange,
// ************ Below commented to remove cascading functionality *************
//filtering: function (e) { $scope.callDataBoundFn = false; },
dataBound: function (e) {
current = this.value();
this._savedOld = current.slice(0);
// handle the event
},
dataSource: $scope.RegionDataSource
};
$scope.RegionDataSource = {
transport: {
read: {
url: window.versionType + "api/GetRegions",
headers: {
"Authorization": "Bearer " + sessionStorage["accessToken"],
"coreInfo": JSON.stringify(coreInfo)
},
dataType: "json",
}
}
};
Please help.
I have up and down arrows in my Kendo UI grid. For the first item on the grid I do not want do allow the item to move down (it is impossible) and for the last item I do not want the item to move up (also impossible).
How can I do this?
$(document).ready(function() {
//Set URL of Rest Service
var loc = (location.href);
var url = loc.substring(0,loc.lastIndexOf("/")) + "/xpRest.xsp/xpRest1";
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: url,
type: 'GET'
},batch: false
}});
dataSource.read();
$("#gridIDNoScroll").kendoGrid({
dataSource: dataSource,
pageSize: 15,
noRecords: true,
selectable : false,
columns : [{
field : "name"
},{
field : "strDate",
width : 150
},{
field : "$10",
width : 150
},{
command: [
{
text: " ",
//click: moveDown,
imageClass: "k-icon k-i-arrow-s",
icon: "k-icon k-i-arrow-s",
title: "Up",
enable: false
},
{
text: " ",
//click: moveUp,
imageClass: "k-icon k-i-arrow-n",
icon: "k-icon k-i-arrow-n"
}
],
width:"90px"
},
]
});
});
This worked for me when I needed to disable the button. Use the databound event to basically change the state, use off to remove the event handler, and then override the click event. Something like this:
$('.k-grid-add').addClass('k-state-disabled');
$('.k-header').off('click').on('click', '.k-grid-add', function (e) {
// add new logic here or ignore it
});
If you have multiple buttons in the toolbar, the something like this:
$('.k-grid-add').addClass('k-state-disabled');
$('a.k-grid-add').on("click", function (e) {
e.preventDefault();
e.stopPropagation();
});
You can use the dataBound event of the Grid to apply a k-state-disabled CSS class to the desired buttons in the first and last row of the Grid.
Keep in mind that k-state-disabled only applies a "disabled" look, but the click event will still fire and the command function will execute. You can skip the row move logic for disabled buttons.
On a side note, you can use a command name to find buttons in the DOM more easily. For example, a command button with a name foo will have a CSS class of k-grid-foo.
I have my KendoUI MultiSelect widget initialized like this:
$("#" + key).kendoMultiSelect({
placeholder: placeholder,
dataTextField: dataText,
dataValueField: dataValue,
filter: "contains",
autoBind: false,
dataSource: {
type: "jsonp",
transport: {
read: {
url: urlValue
}
},
error: function(e) {
console.log(e);
}
},
value: GetSavedJSONObject(key),
//value: [
//{ Name: "Chang", Id: 2 },
// { Name: "Uncle Bob's Organic Dried Pears", Id: 7 }
//],
select: removeMark,
change: multiselect_checkForChanges,
autoClose: isAutoClose
});
where GetSavedJSONObject(key) is an array of objects like this:
[Object { Id=1, Name="AA"}, Object { Id=2, Name="BB"}]
The issue I'm facing is when the page loads, I can see "AA" and "BB" in the multiselect widget and no call is made to the url. However, when I attempt to add more items to the widget, there are none to be added because the widget thinks the only items available are the items I specified in the "value" field of the widget during initialization.
In the Server Filtering demo, you will see that the example sets the value of the widget just like I did but when you try to add more items to the widget, then a call is made to the url for more data and the widget opens.
I'm sure this is user error but I just need some pointers on what to try next in order to get the widget to display the rest of the data.
EDIT:
When I made GetSavedJSONObject(key) return an array of the Ids so
[1,2,3]
I was able to click on the widget to get the rest of the data. However, the desired outcome is being able to set the values of the widget (because I have the Id/Name pairs) without having to make the call to the datasource and being able to click on the widget to fetch the rest of the data)
Keeping my array of Objects and setting the serverFiltering: true attribute fixed the issue. Hope this saves someone else time. sigh
Can someone tell me how to bind kendo grid based on previous control selection?
Ex: I've placed one dropdown list and grid in a page. Now I wanted to populate data in grid based on dropdown selected value.
Can someone help me to do this. I'm working with MVC.
try this :
$("#dept").kendoComboBox({
filter: "contains",
index: 0,
dataTextField: "Name",
dataValueField: "ID",
dataSource: data,
select: onSelect
});
//Dropdown change event
function onSelect(e) {
var dataItem = this.dataItem(e.item.index());
UpdateUPGridSource(dataItem.value);
}
//Refresh Datasource by Role wise
function UpdateGridSource(DropdownValue) {
var grd = $("#users").data("kendoGrid");
//Set url property of the grid data source
grd.dataSource.transport.options.read.url = '/Controller/JSONMethodName?ParameterName='+ RoleID;
//Read data source to update
grd.dataSource.read();
}
Maybe you can do this as follow:
$("#dept").kendoComboBox({
filter: "contains",
suggest: true,
index: 0,
dataTextField: "Name",
dataValueField: "ID",
dataSource: data,
change: function(e){
grid.data("kendoGrid").dataSource.filter({
field: "someField",
operator: "eq|etc.",
value: this.value()
});
}
});
grid is the object you defined by kendoGrid() method.
hope it will help you.