Referring to the below example:
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/configuration/shapes.editable.tools
I would like to customize the toolbar of shapes when using a datasource.
$("#diagram").kendoDiagram({
dataSource: shapesDataSource,
connectionsDataSource: connectionsDataSource,
layout: {
type: "tree",
subtype: "tipover",
underneathHorizontalOffset: 140
},
shapeDefaults: {
visual: visualTemplate,
content: {
template: "#= dataItem.JobTitle #",
fontSize: 17
}
},
connectionDefaults: {
stroke: {
color: "black",
width: 2
}
},
//editable: {
// tools: [{name: "createShape"}]
//},
dataBound: onDataBound,
toolBarClick: onToolBarClick
});
I am trying to add custom tool in org chart to update a value on node. The value gets updated on the datasource but not on the chart.
Nor does it trigger API hit to update the new value
$("#diagram").kendoDiagram({
dataSource: shapesDataSource,
connectionsDataSource: connectionsDataSource,
layout: {
type: "tree",
subtype: "tipover",
underneathHorizontalOffset: 140
},
shapeDefaults: {
visual: visualTemplate,
content: {
template: "#= dataItem.JobTitle #",
fontSize: 17
}
},
connectionDefaults: {
stroke: {
color: "black",
width: 2
}
},
//editable: {
// tools: [{ name: "createShape" }, { name: "edit" },
// { name: "undo" }, { name: "redo" }],
// shapeTemplate: kendo.template($("#popup-editor").html())
//},
editable: {
tools: [{
type: "button",
text: "Set Selected Content",
click: function () {
var selected = $("#diagram").getKendoDiagram().select();
var content = $("#content").val();
for (var idx = 0; idx <
selected.length
; idx++) {
selected[idx]
.dataItem.JobTitle
=
content
;
}
}
}, {
template: "<input
id
=
'content'
class
=
'k-textbox'
value
=
'Foo'
/>"
}]
},
dataBound: onDataBound,
toolBarClick: onToolBarClick
});
gridSelector = gridSelector ||
"#grid"
;
// scoped function that can be assigned to the dataBoundEvent and called directly (below)
var
doGridDataBound =
function
(me, gridSelector, grid) {
me.InitMenu(gridSelector);
setTimeout(
function
() {
grid.autoFitColumn(actionColIndex);
}, 500);
};
var
grid = $(gridSelector).data(
"kendoGrid"
);
// delay "connecting" the dataBound event handler for 250ms to give time for other event handlers to be assigned first (we need this one to "fire" last)
// specifically - customKendoButtons_OnDataBound needs to fire earlier than this one to ensure that the buttons are visible/fully defined before "autoFit" is executed
grid.unbind(
"dataBound"
).bind(
"dataBound"
,
function
() {
doGridDataBound(me, gridSelector, grid);
});
/* if any data rows already exist, then the dataBound event will not fire again, so fire it now */
if
($(gridSelector).find(
"input.gridPopupHelper"
).length)
doGridDataBound(me, gridSelector, grid);
Hi,
We have the Open Street Map example working, but in the documentation, it says...
"Displaying raster maps from popular online providers such as OpenStreetMap, OpenWeatherMap, ArcGIS, and so on."
Does Telerik or anyone else have any working examples of using the Kendo UI Map control with different providers. Either ArcGIS or any other service?
Much appreciated,
George
This my Editor
function
userNameAutoCompleteEditor(container) {
$(
'<input id="UserId" name="UserId">'
)
.appendTo(container)
.kendoComboBox({
autoBind:
false
,
dataTextField:
"UserName"
,
dataValueField:
"UserId"
,
filter:
"contains"
,
minLength: 3,
valuePrimitive:
true
,
dataSource:
new
kendo.data.DataSource({
contentType:
"application/json; charset=utf-8"
,
serverFiltering:
true
,
transport: {
read: {
url:
'../Warehouse/SearchUser'
,
data:
function
() {
debugger;
UserSearcText:
"asd"
}
}
},
}),
});
}
///Mvar grid = new BaseGrid('grdWarehouse_OnWarehouseUserRelation');
grid._batch = false;
grid._dataSourceAutoSync = false;
grid._toolbar = ['create'/*, 'save', 'cancel'*/];
grid._editable = {
mode: "inline",
create: true,
update: true,
destroy: true,
};
grid._autoBind = false;
grid._schemaMethod = {
model: {
id: 'Id',
fields: {
Id: { editable: false },
//User: { defaultValue: { UserId: '', UserName: '' } },
}
}
};
grid._columns.push(grid.GridColumn('Id', null, '200px', null, null, null, null, null, null, null, true));
//grid._columns.push(grid.GridColumn('User', 'User', '200px', null, "#=User.UserName#", null, null, null, null, null, null, null, null, null, userNameAutoCompleteEditor));
grid._columns.push(grid.GridColumn('UserId', 'User', '200px', null,'#=modelName(this)#', null, null, null, null, null, null, null, null, null, userNameAutoCompleteEditor));
grid._columns.push(grid.GridColumn(null, ' ', '200px', { style: 'text-align:right' }, null, null, null, null, null, null, null, null, null, ['edit', 'destroy']));
grid._cancelMethod = function (e) {
var uid = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataItem($(e.container).closest("tr")).uid
dataSource = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataSource
var item = dataSource.getByUid(uid);
dataSource.cancelChanges(item);
};
//My problem ı need filter text to send the controller.But I cant catch searc text CAN YOU HELP ME!!!!??????????
This my grid
01.
var
grid =
new
BaseGrid(
'grdWarehouse_OnWarehouseUserRelation'
);
02.
grid._batch =
false
;
03.
grid._dataSourceAutoSync =
false
;
04.
grid._toolbar = [
'create'
/*, 'save', 'cancel'*/
];
05.
grid._editable = {
06.
mode:
"inline"
,
07.
create:
true
,
08.
update:
true
,
09.
destroy:
true
,
10.
11.
};
12.
grid._autoBind =
false
;
13.
grid._schemaMethod = {
14.
model: {
15.
id:
'Id'
,
16.
fields: {
17.
Id: { editable:
false
},
18.
//User: { defaultValue: { UserId: '', UserName: '' } },
19.
20.
}
21.
}
22.
};
23.
grid._columns.push(grid.GridColumn(
'Id'
,
null
,
'200px'
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
true
));
24.
//grid._columns.push(grid.GridColumn('User', 'User', '200px', null, "#=User.UserName#", null, null, null, null, null, null, null, null, null, userNameAutoCompleteEditor));
25.
grid._columns.push(grid.GridColumn(
'UserId'
,
'User'
,
'200px'
,
null
,
'#=modelName(this)#'
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
, userNameAutoCompleteEditor));
26.
grid._columns.push(grid.GridColumn(
null
,
' '
,
'200px'
, { style:
'text-align:right'
},
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
, [
'edit'
,
'destroy'
]));
27.
28.
grid._cancelMethod =
function
(e) {
29.
var
uid = $(
"#grdWarehouse_OnWarehouseUserRelation"
).data(
"kendoGrid"
).dataItem($(e.container).closest(
"tr"
)).uid
30.
dataSource = $(
"#grdWarehouse_OnWarehouseUserRelation"
).data(
"kendoGrid"
).dataSource
31.
var
item = dataSource.getByUid(uid);
32.
dataSource.cancelChanges(item);
33.
};
Due to some performance issues on the application. I need to do the binding via a json file instead of using an api. However, I was running into an issue doing sorting/filtering.
The application displays a list of data. It needs to filter data by a date range.
Could someone provide me a direction on what I need to do?
I found the following section regarding exporting large datasets from the Kendo Grid:
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/excel-export#use-server-side-processing
We currently have this exact need, but I am unable to find any code giving an example of how to tie the grid data to the TDP library. The closest I can find relating to exporting with this library is http://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing/export but the code samples are not closely related to my situation. Can you provide or point me to some code samples that show how to process a large data set from a Kendo grid?
Thank you.
I've modified the first example at https://docs.telerik.com/kendo-ui/framework/datasource/crud by using a model that is strictly typed with kendo.data.Model.define instead of using the flat JSON object array. If I click on the edit button in a row in the grid and change the value of "Units in Stock" and then click on the cancel button, the change will NOT be discarded. The error "kendo.all.min.js: 27 Uncaught TypeError: n.wrap is not a function" is displayed in the browser's developer console.
What do I have to change so that the example with kendo.dataModel.define works correctly?
Sample code https://jsfiddle.net/chstorb/pq45mn19/
Kind regards,
Chris