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.
Related
I am trying to build this dojo with the headerTemplate and the columns title and data fields under it but I am not sure what I am doing wrong I am not getting any errors so its hard to understand what is happening?
https://dojo.telerik.com/#mcdevittnccn/iNinebUm
I would suggest a bit different approach here. Problem is that your data is a complex nested object (an object with an array of objects - basically grid inside grid). Kendo data source best works with flattened data. If you can't change data you can use the kendo grid detailInit event so every object array has an inner table with data. Something like this:
$(document).ready(function () {
$("#kendogrid").kendoGrid({
dataSource: {
data: data,
pageSize: 10
},
pageable: true,
scrollable: false,
persistSelection: true,
toolbar: ["search"],
search: {
fields: ['Name']
},
sortable: true,
columns: [
{
field: "Name",
title: "Name"
}
],
detailTemplate: '<div class="grid"></div>',
detailInit: function (e) {
e.detailRow.find(".grid").kendoGrid({
dataSource: e.data.PanelsMeetingViewModel
});
}
});
});
Example: Kendo grid detail init
Note: because of the inner table quick search will not work.
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'm fairly new to Kendo UI and got the basics for my code here : http://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist
I got 2 api calls, where the first take no parameters and return a list if items (Id, Name)
The second api call take in an Id, and return a seconds list of items (also just an object with Id and Name)
From this I want to have 2 cascading kendo dropdowns.
However my problem is the second one's url always have the id being null or empty, and I cannot figure out what is the right syntax:
// First dropdown, all good
var controllers = $("#Controller").kendoDropDownList({
optionLabel: "Select controller...",
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
serverFiltering: true,
transport: {
read: "/SharedData/GetControllers/"
}
}
}).data("kendoDropDownList");
// second dropdown, always hit the api method with the id being null or empty (depending on syntax for url)
var actions = $("#Action").kendoDropDownList({
autoBind: true,
cascadeFrom: "controllers",
cascadeFromField: "Id",
optionLabel: "Select Action...",
dataTextField: "Id",
dataValueField: "Name",
dataSource: {
serverFiltering: true,
transport: {
// HELP: need pass id to this route (which is id of selected controller)
read: "/SharedData/GetControllerActions/id=" + $("#Controller").data("kendoDropDownList").text()
}
}
}).data("kendoDropDownList");
I believe the problem is that your datasource only gets set one time - at the time of initialization - and at this time the value of the dropdown is null. What i would do is add a change event on the first dropdown like this:
var controllers = $("#Controller").kendoDropDownList({
optionLabel: "Select controller...",
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
serverFiltering: true,
transport: {
read: "/SharedData/GetControllers/"
}
},
change: function(e) {
setSecondDS();
}
}).data("kendoDropDownList");
var setSecondDS = function() {
//initialize your new kendo datasource here
var dataSource = new kendo.data.DataSource({
//your stuff here
transport:
serverFiltering:
});
$("#Action").data("kendoDropDownList").setDataSource(dataSource);
}
I have a Kendo UI combobox object something like this :
widget: "kendoComboBox",
options: {
dataTextField: "#:userFirstName# #:userLastName#",
dataValueField: "userId",
template: "#:userFirstName# #:userLastName#",
change: function (e) {
that.model.fn.bringUserData();
}
}
I can arrange the template, but i cannot dataTextField value depends on that template. It is possible to make it "userId" etc. But seems not possible to set selected value as #:userFirstName# #:userLastName#. (dataTextFieldTemplate doesn't work.)
Could you help me to solve this?
Correct, you cannot make it a composition of two fields. It needs to be a field per se. What you can do is when reading data from the DataSource create an additional field that is the concatenation of those two fields. You can add to you DataSource definition something like this:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "..."
}
},
schema: {
parse: function(response) {
$.each(response, function(idx, elem) {
elem.fullName = elem.firstName + " " + elem.lastName;
});
return response;
}
}
});
Then the options for the combobox are simply:
options: {
dataTextField: "fullName",
dataValueField: "userId",
...
}
See it in action here : http://jsfiddle.net/OnaBai/12hpLeux/1/
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?