First of all, someone should review the code in these forums so that if a user hits the backspace key when creating a new post the page does not navigate back! So this is my second attempt to post this question because my first 95% complete post was vaporized when I hit the backspace key. [arg!]
I am basing the code from this documentation:
http://docs.telerik.com/kendo-ui/controls/editors/editor/overview
I have a razor form with two editors on them and am formatting them as in the link above but they are showing up as read only. Also the data from the model is not populating the control. I tried using a standard input control as well with the same results.
Here is the code:
<
p
>
@Html.TextAreaFor(m => m.Test.IntroText, new {style = "width:591px", id = "introtext"})
</
p
>
I tried removing the style attribute above with no change.
Here is the JavaScript:
$(
"#thankyoutext"
).kendoEditor({
resizable: {
content:
true
,
toolbar:
true
,
editable :
true
<<-- Just tried that does not change anything
},
tools: [
"bold"
,
"italic"
,
"underline"
,
"strikethrough"
,
"justifyLeft"
,
"justifyCenter"
,
"justifyRight"
,
"justifyFull"
,
"insertUnorderedList"
,
"insertOrderedList"
,
"indent"
,
"outdent"
,
"createLink"
,
"unlink"
,
"insertImage"
,
"insertFile"
,
"subscript"
,
"superscript"
,
"createTable"
,
"addRowAbove"
,
"addRowBelow"
,
"addColumnLeft"
,
"addColumnRight"
,
"deleteRow"
,
"deleteColumn"
,
"viewHtml"
,
"formatting"
,
"cleanFormatting"
,
"fontName"
,
"fontSize"
,
"foreColor"
,
"backColor"
,
"print"
]
});
var
editor = $(
"#thankyoutext"
).data(
"kendoEditor"
),
editorBody = $(editor.body);
editorBody.attr(
"contenteditable"
,
true
).find(
"a"
).off(
"click.readonly"
);
Can someone help explain why it is greyed, read-only and does not contain data from the model?
Reid
I am looking for a way to hide either the toolbar or the buttons with in it. I am using angular with the batch editing and when I disenable the grid I want to be able to be able to either hid or disable the batch toolbar.
I have found example like this that work for MVC or JS approaches, using the databound function,
http://www.telerik.com/forums/how-do-you-remove-toolbar-separators
I have also tried doing it this way, while it does find the element, there are no valid methods or properties
var elements = document.getElementsByClassName("k-grid-toolbar");
while (elements.length > 0) {
elements[0].parentNode.removeChild(elements[0]);
}
I have a grid showing a set of records with a configuration of "editable: "popup" that is working to display the records. The popup shows the row data but when I click the "update" button the popup goes away but the associated controller action does not get called.
I am following along with these links:
http://demos.telerik.com/kendo-ui/grid/editing-popup
http://docs.telerik.com/kendo-ui/controls/data-management/grid/editing
My code is the same :
$(document)
.ready(
function
() {
dataSource =
new
kendo.data.DataSource({
transport: {
read: {
url:
"/Test/TestsAnswerTypesRead"
,
dataType:
"jsonp"
},
update: {
url:
"/Test/UpdateTestAnswerType"
,
dataType:
"jsonp"
},
destroy: {
url:
"/Test/DestroyTestAnswerType"
,
dataType:
"jsonp"
},
create: {
url:
"/Test/CreateTestAnswerType"
,
dataType:
"jsonp"
},
parameterMap:
function
(options, operation) {
if
(operation !==
"read"
&& options.models) {
return
{ models: kendo.stringify(options.models) };
}
}
},
batch:
true
,
pageSize: 20,
schema: {
model: {
id:
"Id"
,
fields: {
Id: { editable:
false
, nullable:
true
},
Name: { validation: { required:
true
} },
Description: {},
Instruction: {}
}
}
}
});
$(
"#grid"
)
.kendoGrid({
dataSource: dataSource,
pageable: {
refresh:
true
,
pageSizes:
true
,
buttonCount: 8
},
groupable:
true
,
scrollable:
true
,
sortable:
true
,
filterable:
true
,
resizable:
true
,
reorderable:
true
,
height: 550,
toolbar: [
"create"
,
"excel"
],
excel: {
fileName:
"TestsExport.xlsx"
,
proxyURL:
"/ExportTestDomain"
,
filterable:
true
},
columns: [
{ field:
"Name"
, title:
"Name"
, width:
"150px"
},
{ field:
"Description"
, title:
"Description"
, width:
"150px"
},
{ field:
"Instruction"
, title:
"Instruction"
, width:
"150px"
},
{ command: [
"edit"
,
"destroy"
], title:
" "
, width:
"150px"
}
],
editable:
"popup"
});
});
Here is the Controller action for the Update :
public
JsonResult UpdateTestAnswerType()
{
var models =
this
.DeserializeObject<IEnumerable<NCC.Model.DTO.TestAnswerType>>(
"models"
);
if
(models !=
null
)
{
// Update Here
}
return
this
.Jsonp(models);
}
And I tried this format:
[AcceptVerbs(HttpVerbs.Post)]
public
JsonResult UpdateTestAnswerType([DataSourceRequest] DataSourceRequest request, [Bind(Prefix =
"models"
)] IEnumerable<NCC.Model.DTO.TestAnswerType> gridtestAnswerTypess)
{
var models =
this
.DeserializeObject<IEnumerable<NCC.Model.DTO.TestAnswerType>>(
"models"
);
if
(models !=
null
)
{
// Update Here
}
return
this
.Jsonp(models);
}
When I click the "add new record" button on the toolbar and post that it does the same, closes with no post to the controller.
Also, how can you make the popup dialog for an insert say, "Adding new record" instead of "Edit", and the dialog's update button say, "Save"?
Any help would be greatly appreciated.
Thanks,
Reid
Hi,
I'm having trouble replicating the demo for the calendar in angular - Customizing Templates http://demos.telerik.com/kendo-ui/calendar/template
I want to be able to pass it a list of dates from a scope variable and have the dates shown on the calendar with a different style from a template.
I would also like to be able to update the list of dates after the widget has been initialized. Is this possible with the calendar and angular?
I've tried setting the 'month' and 'dates' attributes in markup to my scope variable but it's not working.
I'm super excited that Telerik made the jump over to npm for Kendo UI Professional. It works wonderfully! But ...
Is there some particular reason why the *.min.js files were just removed? Those were very useful in optimizing the output. The way it is now, we've got to add minification to kendo to the entire process on top of everything else.
Is there a CSS definition file/page or a list of all CSS per element or something along those lines?
I am attempting to figure out how hard/easy it is going to be to integrate a theme/styling into an app. But I am not even sure what the styles are I should use. Every thing on a page is not going to be a Kendo widget - but everything should look the same.
For instance, if I want to style a table to look like a grid would like using the widget, but without all the overhead - how do I do that?
If I want all links to match - do I really have to use k-link on all <a>s? That's a little crazy.
A definition file would help me determine if it's doable and determine how easy to use the cascading part of CSS without have to add a class to every single element added to a page.
Hi
I use a chart Kendo UI, (using typescript). I have a problem with the tooltip
formatting and the same problem with the label (on series).
I have a formatted value (as string, but not the format type)
and I want to replace the original value with that.
Is it possible to replace
the value? then how?
*** Must say I have seen the example chartTooltip.html
another question , I’ve
tried to replace the value with escape char “\”, Before any character I've
“\\\\”, which is the result.
result : see (kendo chart.png)
------------------------------------------------------------------------
i tried to do that also
namespace prefix.html.chart
{
export class chart
{
public formatnewABC(v: any, vf: any): any
{
return (vf);
}
...
...
// build chart source code
// this.ser - current series object properties
var vf: string = this.data.getFormattedValue(i, j); // contains format value (string)
this.ser["labels"] = {
visible: true,
template: "#= prefix.html.chart.PnChart.prototype.formatnewABC(dataItem," + "\"" + vf + "\"" + " ) #"
};
}
}
result : see (kendo chart2.png)
Thanks in advance for your help
Hi all,
I am currently struggling with changing the editor template of the new/edit appointment. I am using the latest UI for asp.net mvc and i have managed to load a custom cshtml file when in order edit the appointment. The appointment additional fields from the model are displayed as should, and the data is binded correctly as well. However, when i add any additional property of my custom model to the form the validation fails (client side validation prevent the post, happens only on the additional fields) and display empty message (image attached). I tried adding a submit button to the form and when i used my own one everything is working and the data passed to the controller is correct, however with this way i will have to implement all scheduling events myself, which i am trying to avoid.
Any suggestion will be appreciated.
thanks in advanced,
udi