Hi all
After clicking the "Save Changes" button when batch editing a grid, I'd like to set a message once the data has been updated. Currently, the only visual clue that it's been successful is that the little red "triangles" disappear next to the edited entries. My users need something a little less subtle :).
I see there is an event :
Fires before the grid calls DataSource sync.
However, is there an event after the DataSource sync is successful?
I've tried placing a success function in the dataSource's transport: update but it never seems to get hit. Also done a lot of searching but can't find any suggestions.
update: {
url:
"sEMM.asmx/updateEMMData"
,
//specify the URL from which should update the records.
contentType:
"application/json; charset=utf-8"
,
// tells the web service to serialize JSON
type:
"POST"
,
//use HTTP POST request as the default GET is not allowed for ASMX
success:
function
(result) {
alert(
"success"
);
setMessage(
"Changes saved"
);
options.success(result);
},
error:
function
(e) {
alert(
'error'
);
}
}
Thanks, Alison
I have seen people incorporating combobox inside the grids. I have a requirement where I need to place a grid inside the combobox. Or options, the combobox displays shall be in the grid view along with pagination at bottom and the combobox's text field acts as a filter bar.Is it possible to do so ? I tried editing the header and the body templates for the combobox, it didn't really work out.
Is it achievable? or any other better solutions?
We are using the bootstrap theme and we wanted to update to the latest version from 2018.2.620.
I have a dropdown list with an option element. When the option element is selected and you open the list the option element is not selected.
See old version
https://dojo.telerik.com/aqiweQIf
See new version
https://dojo.telerik.com/uPuKuvIn
Click on the categories and when the list opens the new version does not have the option item selected.
Are there other backward compatibilities broken like this one?
This is an error that took us an hour to figure out.
We are using the right-arrow icon as part of the content within a collapsible header to represent a transition. (See image)
We found that the expand/collapse icon did not appear.
Further investigation reveals that if the header content contains a span with a class matching the regular expression k-i-arrow.* then the expand/collapse icon doesn't work.
See this example. https://dojo.telerik.com/EwAsaKAf/3
Ok
simple create a new row with null values, and add the editor as a ComboBox with the edit field.
Editable:inline
Click Combo show, populates, select, click away from the cell, cell shows [object object]
the data is {Id=1, ColumnName="blah", datatype="blah"}
I have tried all examples for the past two weeks and none seem to work.
Should be easy right? OK I give up.
BTW, all the combobox behave the same.
Any help would be appreciated.
var grid = $("#grid").kendoGrid({
width: 500,
dataSource: {
transport: {
read: {
url: "Grid/GetSearches",
dataType: "json",
},
update: {
url: "Grid/UpdateSearches",
dataType: "json",
},
create: {
url: "Grid/CreateSearches",
dataType: "json",
},
destroy: {
url: "Grid/DeleteSearches",
dataType: "json",
}
},
schema: {
data: function (data) {
return data.data;
},
total: function (data) {
return data.total;
},
model: {
id: "Id",
fields: {
Id: { type: "number", editable: false },
field: {
ColumnName: { type: "string" },
Criteria: { type: "string" },
Value: { type: "string" },
Predicate: { type: "string" }
}
}
}
},
cancel: function (e) {
},
},
scrollable: false,
pageable: false,
editable: {
createAt:"bottom",
},
toolbar: ["create","save", "cancel"],
columns: [
{
field: "Id",
readonly: true,
width: 25,
},
{
field: "ColumnName",
width: 200,
editor: function (container, options) {
$('<input data-bind="value:' + options.field + '" />')
.appendTo(container)
.kendoComboBox({
dataTextField: "ColumnName",
dataValueField: "ColumnName",
autoBind: false,
dataSource: typesds
});
}
},
{ field: "Criteria", width: 200, editor: criteriaDropDownEditor},
{ field: "Value", width: 200, editor: textEditor },
{
field: "Predicate",
width: 200,
template: "#=generateTemplate(Id)#",
editor: function (container, options) {
$('<input required id="Id" style="width:200px;" Name="' + options.field + '" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Predicate",
dataValueField: "Id",
change: function(e)
{
selectedValue = this.text();
},
dataSource: {
data: [
{ Id: 1, Predicate: " " },
{ Id: 1, Predicate: "And" },
{ Id: 2, Predicate: "Or" },
]
},
});
}
},
{ command: [{ className: "bt-add", name: "addRow", text: "Add Row" }] },
{ command: [{ className: "bt-del", name: "delRow", text: "Delete Row" }] },
]
}).data("kendoGrid");
var typesds = new kendo.data.DataSource({
transport: {
read: {
url: "Grid/GetFieldList",
dataType: "json",
type: "POST",
},
},
schema: {
data: function (data) {
return data.data;
},
total: function (data) {
return data.total;
},
model: {
id: "Id",
fields: {
Id: { type: "number", readonly: true },
ColumnName: { type: "string" },
DataType: { type: "string" }
}
}
},
});
Hi!
We need to "lock" our combobox when we reload its data. We found the kendo.ui.progress() function and it seems to be exactly what we need.
But, it doesn't work as expected.
If I use it to "lock" the whole body, all my controls are blocked, I can't click on them.
If I try to "block" only my combobox, I see the loading zone displayed only on it, but I can click on it and change the combobox value.
I tried to put a div outside my combo, to lock that div instead, but no results.
You can see the 3 cases in the following code sample:
http://jsfiddle.net/mhtg8pge/4/
How can I show that the dropdown is loading, and keep it locked at the same time, using kendo.ui.progress()?
Thank you
Hello,
I'm trying to implement some server validation when a user tries to move a schedule entry to an invalid resource.
I have tried validating on moveEnd event, however the e.event data contains the "from" data, but I want validate based on the "to" data.
I have tried validating on the save event. e.preventDefault() appears to work on the surface (i.e. the event does not move), however, it does something funny with the underlying data. A subsequent update to the scheduler refreshes scheduler showing the 'invalid' move.
Here's an example of what I mean:
https://dojo.telerik.com/@antman/aniGupAP
Steps:
1. Move "1. Move this to the left causing a conflict with "My Meeting"" as directed.
Hello Team,
We are looking for a bar chart, which displays the sales count. The sales count is shown on the y-axis of the graph. Week wise data is displayed on the x-axis.
The week wise data on the x-axis, must be grouped by the apparel brand, week and city.
We have checked the following below post for "grouped-stacked-bar chart" and could not derive a solution from this.
https://demos.telerik.com/kendo-ui/bar-charts/grouped-stacked-bar