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.
Related
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'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 Grid where I am filtering one of the columns with a MultiSelect control. When I click the "Filter" button it sends [object Object] to the server as the filter value. How can I fix it so it sends the values of the selected item(s). Note, I am server filtering the grid not the multi select control.
Initialization of the multiselect
var regionddl = element.kendoMultiSelect({
dataTextField: "Value",
dataValueField: "Value",
optionLabel: "Select One...",
dataSource: {
transport: {
read: {
data: "",
dataFilter: function (data) {
var msg = eval('(' + data + ')');
if (msg.hasOwnProperty('d'))
return msg.d;
else
return msg;
},
contentType: "application/json; charset=utf-8",
type: "POST",
url: "SearchSites.aspx/GetRegions"
}
}
}
}).data("kendoMultiSelect");
Here is the JSON that Kendo is sending to the server. Notice there are two object Object items because I selected two items in the filter.
[{\\\"field\\\":\\\"Region\\\",\\\"operator\\\":\\\"eq\\\",\\\"value\\\":\\\"[object Object],[object Object]\\\"}]
If you want to see an example of what multiselect filtering looks like in a grid, you can see this jsbin
http://jsbin.com/upEPEqU/3/edit
To change this you need to set the valuePrimitive option to true.
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?
i have developed a web application using kendo ui tools and theres a kendo grid with batch edit mode..
but when i press the delete button for any record in kendo grid it will erase from the list in grid but actually not in the data source.when i reload the page or grid the deleted item will still exist..
here is the code of my grid
<div id="grid">
</div>
<script type="text/javascript">
$("#submitMarketUser").click(function () {
var grid = $("#grid").data("kendoGrid");
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "WholeSaleTrade/GetTradeProductDetail",
dataType: "json",
data: {
test: $("#Names").val()
}
},
destroy: {
url: "WholeSaleTrade/DeletePro",
type: "POST",
dataType: "jsonp",
data: {
DAKy: $("#Names").val(),
DIKy: $("#btntxt").val()
}
},
create: {
url: "WholeSaleTrade/CreateProduct",
type: "POST",
dataType: "jsonp",
data: {
AKy: $("#Names").val(),
IKy: $("#btntxt").val()
}
}
},
pageSize: 5,
schema: {
model: {
id: "ProductKey",
fields: {
ProductKey: { editable: false, nullable: true },
ProductName: { validation: { required: true} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
editable: true,
toolbar: ["create", "save"],
autobind: true,
pageable: true,
columns: [
{ field: "ProductName", title: "Product Name",
editor: function (container, options) {
var model = options.model;
$('<input id="btntxt" name="' + options.field + '"/>').appendTo(container).kendoComboBox({
dataSource: {
type: "POST",
transport: {
read: {
url: "MarketInformation/PopulateProducts",
success: function (data) {
var prod = data[0];
model.set("ProductName", prod.ItmNm);
model.set("ItmKy", prod.ItmKy);
model.set("UserKey", $("#Names").val());
}
}
}
},
dataValueField: "ItmKy",
dataTextField: "ItmNm"
});
}
},
{ command: ["destroy"], title: " " }
]
});
});
</script>
can not identify that where is the fault going and can somebody please help me to solve this matter.
There are three common reasons delete won't work:
1. Not setting editable of grid to inline or popup. The deleted items will be automatically processed through transport destroy only for "inline"/"popup" edit modes. Ex:
editable: {
mode: "inline",
}
//or
editable: "inline"
2. If on your datasource, you have the batch flag set to true, this means the datasource will make the call only after you tell it to, e.g calling sync(). Ex:
var dataSource = new kendo.data.DataSource({
batch: true,
//.....
});
//... in some where e.g in a save button click event call the following line:
dataSource.sync();
3. You should define id to your primary key of database field name inside model of datasource. Ex:
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
}
}
So the problem with your code is first one, i.e you did not set editable to inline or popup
If you choose not to include editable.mode in order to utilize the in-cell editing, you can set the toolbar of the grid to include the option save:
$("#grid").kendoGrid({
dataSource: {
transport: {
....
},
schema: {
....
}
},
toolbar: ["create", "save", "cancel"],
columns: [
....
],
editable: true
});
This will create a save button at the toolbar of the grid. After deleting any records by clicking the destroy command button, click on the save button to have the grid to make an Ajax call to the server to delete the record.
If you would rather delete the record automatically without including the save button, you could add a change event handler to the datasource of the grid:
$("#grid").kendoGrid({
dataSource: {
transport: {
....
},
schema: {
....
},
change: function(e) {
if (e.action === "remove") {
this.sync();
}
}
},
columns: [
....
],
editable: true
});
This will automatically sync the changes you made to the grid with the server when there's a data change.
Hmm try not including type: "POST", and see if it now works since as far as I can see that bit isn't included on the demo's and I don't think I included it when I last did inline edits/deletes.
I had put an arbitray name for an int on the server Delete Method.
[HttpPost]
public ActionResult DeleteRandomTest(Int32 randomTestId)
{
...
}
The default modelbinder was probably looking for a property called Id (same as the primary key of my type according to the configuration of the model).
.Model(config => config.Id(p => p.Id))
In fact, I proved this by changing the signature to the following:
[HttpPost]
public ActionResult DeleteRandomTest(Int32 Id)
{
...
}
My break point was hit after that.
Ultimately, I used the full type as the parameter as shown in the Kendo examples because I didn't want to have poorly named parameter names (not camel case) in the action. Shown as follows:
[HttpPost]
public ActionResult DeleteRandomTest([DataSourceRequest]
DataSourceRequest request, RandomDrugTest randomDrugTest)
{
...
}
This seems to the be the reason it wasn't working.
I had the same issue. My issue was caused by having a data property in the kendo model. Example:
{id: 1, data: ""}