$('#gridWrapper').find('div').remove().append($('<div id="grid"></div>')); I receive an error message from kendo.core stating that one the columns names are no longer defined.
So somewhere there must be some lingering data that isn't cleaned up by the process above, but I couldn't figure out where that is ...yet.
Any hints welcome :).
Thanks,
Rainer
var
crudServiceBaseUrl =
"../_vti_bin/listdata.svc/"
,
kendo = window.kendo,
App = window.App = {
columMap : {
'Tasks'
: [
{ title :
"Title"
, field :
"Title"
},
{ title :
"Created"
, field :
"Created"
},
{ title :
"Created By"
, field :
"CreatedBy.Account"
}
],
'Contacts'
: [
{ title :
"Last Name"
, field :
"LastName"
},
{ title :
"Created"
, field :
"Created"
},
{ title :
"Created By"
, field :
"CreatedBy.Account"
}
]
},
Model : {
gridMeta : kendo.observable({
listName : 'Contacts',
total : 0
})
}
};
App.DS = {
sharableDataSource :
new
kendo.data.DataSource({
type :
"SP2010"
,
serverPaging :
true
,
serverSorting :
true
,
serverFiltering :
true
,
sort : [
{ field :
"Created"
, dir :
"desc"
}
],
pageSize : 40,
transport : {
read : {
url :
function
() {
return
crudServiceBaseUrl + App.Model.gridMeta.get(
'listName'
)
},
dataType :
"json"
}
},
change :
function
(e) {
App.Model.gridMeta.set(
'total'
,
this
.total() || 0);
}
})
};
App.createGrid =
function
(options) {
var
options = options || {};
$(
'#grid'
).kendoGrid({
dataSource : App.DS.sharableDataSource,
autoBind : options.autobind ||
false
,
height : 400,
sortable :
true
,
navigatable :
true
,
selectable :
'row'
,
scrollable : {
virtual :
true
},
columns : App.columMap[App.Model.gridMeta.get(
'listName'
)] || []
});
};
// Currently KendoUI grid doesn't support column modifying of an existent grid
App.refreshGrid =
function
() {
$(
'#gridWrapper'
).find(
'div'
)
.remove()
.append($(
'<div id="grid"></div>'
));
// This throws an error when changing from one column set to another
App.createGrid({autobind:
true
});
};
App.init =
function
() {
kendo.bind($(
"span.total"
), App.Model.gridMeta);
App.createGrid();
};
Grid is coming up fine. the detail page , when I attempt to expand... fails:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
height: 400,
columns: [
{ field: "org_name" },
{ command: ["edit"], width: 180 }
],
toolbar: ["create", "excel"],
dataSource: {
type: "aspnetmvc-ajax",
transport: {
read: {
url: "ef_org_Read"
},
create: {
url: "ef_org_Create"
},
update: {
url: "ef_org_Update"
}
},
schema: {
data: "Data",
model: {
id: "org_id",
fields: {
org_id: { type: "number" },
org_name: { type: "string" }
}
}
},
serverPaging: true,
serverSorting: true,
serverSorting: true,
},
columnMenu: true,
editable: "popup",
pageable: true,
detailInit: detailInit,
dataBound: function () {
this.collapseRow(this.tbody.find("tr.k-master-row").first());
},
navigatable: true,
selectable: "single row",
sortable: {
mode: "single"
},
filterable: true,
scrollable: true
})
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "aspnetmvc-ajax",
transport: {
read: "/admin/ef_sites_Read"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: { field: "org_id", operator: "eq", value: e.data.org_id }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "Name", width: "110px" },
]
});
}
</script>
Hi,
I want to create multiple zoom shortcuts for my kendo chart stock. ex: 3 months,6 months, 1 year and all.
Basically, when a user click on the zoom button "3 months", the navigator must cover only three months and the chart must display only three months of data. When "all" is clicked on , the navigator must cover all the available time and the chart must display all data.
Basically the behavior that I want is shown in this link : behavior wanted
Is there a way to do that using the kendo stock chart ?
Hi-
I'm trying to create master-details grid with Add, edit and delete functionality in both, In details grid i have two columns "Name" (Drop Down) and "Value" (Run time Control). When i will select name than value control should get created in value column as per type mention in Data. So for example if select XXX name and it's type is Date then Date control should be created in value column, if i select other name "ZZZZ" and it's type is list then drop down control should be created in value column at run time. I have 5 types as of now to create run time value control (String, date, Numeric, currency and Drop Down). Along with this i should be able to add, edit and delete master/detail rows.
Any help with code sample in achieving this is deeply appreciated. Below my Master/Detail data where Attributes will get bind to detail section and type will let know which control to create run time.
var Data = [
{
"LR_Name": 'Long Term',
"LRVR_Opt_To_Decline": 'Y',
"LRVR_Required": 'Y',
"LPVR_Active": 'Y',
"Attributes": {
"Attribute": [
{
"Name": "ABR Duration",
"Value": "2",
"Type": 'list'
},
{
"Name": "EBR Duration",
"Value": "2",
"Type": 'Number'
}
]
}
},
{
"LR_Rider_Name": 'LTCR',
"LRVR_Opt_To_Decline": 'Y',
"LRVR_Required": 'N',
"LPVR_Active": 'N',
"Attributes": {
"Attribute": [
{
"Name": "LTCR Supp Date",
"Value": "01-01-2018",
"Type": 'date'
},
{
"Name": "LTCR Supp Amount",
"Value": "2500",
"Type": 'Currency'
}
]
}
},
{
"LR_Rider_Name": 'Extended Benefit',
"LRVR_Opt_To_Decline": 'Y',
"LRVR_Required": 'N',
"LPVR_Active": 'N',
"Attributes": {
"Attribute": [
{
"Name": "Benefit Type",
"Value": "5% Simple",
"Type": 'String'
},
{
"Name": "Benefit",
"Value": "10% Simple",
"Type": 'String'
}
]
}
}
];
Is there a way I can have detail template kind of view on treelist as we have for Grid in the following link.
https://dojo.telerik.com/uqULUsIk
I need to have detail template for every leaf node of the treeList.
It can be any other component as well as long as it gives the similar look (View occupying 100% width below a leaf element)
Please let me know if there is anyway to achieve this in KendoUI for jQuery.
Hi,
I'm using Kendo DataSource with templates.But also I've to using Kendo.Tooltip with this Itemtemplate.
I'm wondering if i have any chance to get data without givin a div or any html tag as a data attirbutes from my ItemTemplate to myTooltip template?
Normally you can set data tag with any html tag like this
<div class="col1" data-HistoryType="#:HistoryType#"></div>
and reach data in tooltip like #=target.data('HistoryType')#
But my problem is a have many data to need to pass tooltip like that.
Here is my code example,
//I'm reach the model data using like #:HistoryType# etc.
<
script
type
=
"text/x-kendo-template"
id
=
"newsfeedsItemTemplate"
>
<
li
id
=
"items"
>
<
div
class
=
"col1"
>
<
div
class
=
"cont"
>
<
div
class
=
"cont-col1"
>
<
div
class
=
"label label-sm #:IconColor#"
>
<
i
class
=
"#:FontAwesomeIconName#"
></
i
>
</
div
>
</
div
>
<
div
class
=
"cont-col2"
>
<
div
class
=
"desc"
>
#:shortenText(Description,49)#
</
div
>
</
div
>
</
div
>
</
div
>
</
li
>
</
script
>
<
script
type
=
"text/x-kendo-template"
id
=
"newsFeedsToolTipTemplate"
>
//I want to reach here model data I didnt use in Itemtemplate like ObjectName
<
div
>#:ObjectName#</
div
>
</
script
>
How can I make the grid save when the enter key is pressed? I have tried binding the keycode in the edit handler and that doesn't work.
I have added a kendoNumericTextBox editor for the cell and binded the change event and keydown event to the input. When I edit a cell and then press enter, the keydown event will been fired but the oldValue and newValue are always the same. It seems like the data source for the grid has been changed.
My code as below:
grid.tbody.on(
"change"
,
"input.txtTimeAllocation"
,
function
(e) {
e.preventDefault();
var
row = $(e.target).closest(
"tr"
);
var
cell = $(e.target).closest(
"td"
);
var
colIndex = cell.index();
var
dataItem = grid.dataItem(row);
var
oldValue = dataItem.TimeAllocation[colIndex - 5].Hour;
var
newValue = Number(
this
.value);
if
(oldValue != newValue) {
//save the change
window.alert(
"Hours changed"
);
}
}).on(
"keydown"
,
"input.txtTimeAllocation"
,
function
(e) {
if
(e.keyCode === kendo.keys.ENTER) {
e.preventDefault();
var
row = $(e.target).closest(
"tr"
);
var
cell = $(e.target).closest(
"td"
);
var
colIndex = cell.index();
var
dataItem = grid.dataItem(row);
var
oldValue = dataItem.TimeAllocation[colIndex - 5].Hour;
var
newValue = Number(
this
.value);
if
(oldValue != newValue) {
//save the change
window.alert(
"Hours changed"
);
}
}
});
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/EmployeeDirectory",
dataType: "jsonp"
}
}
});
We have a defined url here so the data is requested from this single URL and stored.
In my use-case, I need to make 3 sequential server calls before I get the actual data.
That is why I need to intercept the read function of transport where I can make all the necessary backend calls and combine the results to move forward.