Kendo UI datetimepicker error - kendo-ui

I've got a Kendo Ui datetimepicker. But when I choose time or date, there is an error "Cannot call method 'attr' of undefined", that appears in kendo.all.min.js. What might be the issue?
Honestly, i've got Kendo Scheduler. But when i try to create an event, there are datetimepickers, and when i choose date or time i've got such kind of error.
Here's my code:
#{
var culture = System.Threading.Thread.CurrentThread.CurrentCulture.ToString();
}
<script src="#Url.Content("~/Scripts/kendo/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/cultures/kendo.culture." + culture + ".min.js")"></script>
<script>
kendo.culture("#culture");
</script>
#using Kendo.Mvc.UI
#(Html.Kendo().Scheduler<TaskViewModel>()
.Name("scheduler")
.Date(DateTime.UtcNow)
.StartTime(DateTime.UtcNow)
.Height(600)
.Width(1000)
.Timezone("Etc/UTC")
.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
views.AgendaView();
})
.DataSource(d => d
.Model(m => {
m.Id(f => f.TaskID);
})
.Read("Read", "TaskManager")
.Create("Create", "TaskManager")
.Destroy("Destroy", "TaskManager")
.Update("Update", "TaskManager")
)
)
i'm using ru-Ru culture.

Does your declaration/include of scripts looks something like this:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
...
JQuery should be declared first and along with your Kendo scripts.
The second posible cause is your JQuery selector. Try something simple and setting both name and id attributes like:
$("#ctrl")

Related

External Template for Column ClientTemplate

I have an issue on having an external template inside Column ClientTemplate
.Columns(col =>
{
col.Bound(c => c.ID);
col.Bound(c => c.Name).Width(100);
col.Bound(c => c.StatusID)
.Title("Action")
.ClientTemplate("#=_actionTemplate(data)#")
.Width(100);
})
<script id="tmplAction" type="text/x-kendo-template">
#(Html.Kendo().Button().Name("btnTest_#=ID#")
.Content("Test")
.ToClientTemplate())
</script>
<script>
var _actionTemplate = kendo.template($('#tmplAction').html());
</script>
Even though it is called and rendered inside the grid column, kendo script is not executed therefore the only rendered element is a basic Button and not Kendo Button
Any help would be appreciated
Copied from your code :
.ClientTemplate("#= fnactionTemplate(data)#")
And declare that function like:
function fnactionTemplate(data){
// External logic goes here....
return $('#tmplAction').html();
}
Hope it will work.

Autofocus on the textbox in html razor code

I want the cursor to be focused on the textbox when I load the page. I tried by adding autofocus="" but I couldn't find any difference in that.
Any help would be greatly appreciated!
#Html.TextBoxFor(
m => m.UserName,
"#xyz.com",
new { #class = "form-control input-lg", #id = "username"})
If you are ok with jquery, you can try using
<script type="text/javascript">
$(function () {
$("#username").focus();
});
</script>
You could use plain java script like this:
<script type="text/javascript">
document.getElementById("username").focus();
</script>
The autofocus attribute isn't implemented in all browsers. It's a good subset of browsers with most newer browsers having it, but not all. It is likely you were using a browser that does not support the autofocus attribute. Dive into HTML 5 has a good listing of the browser support.
<script type="text/javascript">
$(document).ready(function(){
$("#username").focus();
});
}); </script>

Kendo UI Grid is not calling READ method

As per the requirement, I am having a Kendo UI grid on my VIEW.But sadlyy, the read function is not being hit in the controller.This is annoying ,I am getting the same problem even though everyhting seems to be as per the documentation provided on http://demos.kendoui.com/web/grid/index.html. Here is my View code:
#(Html.Kendo().Grid<StudentManagement_Models.Student>()
.Name("studentsGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Groupable(false);
columns.Bound(p => p.FirstName);
columns.Bound(p => p.MiddleName);
columns.Bound(p => p.LastName);
columns.Bound(p => p.CGPA);
})
.AutoBind(true)
.Pageable()
.Navigatable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetAllStudents", "Student"))
)
)
Here is my controller action:
public ActionResult GetAllStudents([DataSourceRequest] DataSourceRequest request)
{
//Thread.Sleep(2000);
StudentManagement_Models.Student student = new StudentManagement_Models.Student();
StudentHelper helper = new StudentHelper();
student.SavedStudents = helper.GetAllStudents();
return Json(student.SavedStudents.ToDataSourceResult(request));
}
How would I tackle this ?Am I missing something ?Kindly suggest.
Thanks in advance.
Add all of this file in your page
<script src="~/Script/Jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="~/Script/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/Script/kendo.all.min.js")" type="text/javascript"></script>
<script src="~/Script/kendo.web.min.js" type="text/javascript"></script>
<script src="~/Script/kendo.aspnetmvc.min.js" type="text/javascript"></script>
<link href="~/Content/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/kendo.default.min.css" rel="stylesheet" type="text/css" />
I think you mis one of the js in your page , probebly Jquery-1.8.1.min.js .
I was having similar issue with the MVC version.
I noticed I was getting a 404 but when clicking the 404'd link in the Chrome debugger it would indeed hit my controller method. Then I noticed that it was using POST (and I had HttpVerbs.Get) specified.
Then I found this (from http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/troubleshooting):
By default Kendo Grid for ASP.NET MVC should make POST requests when
configured for ajax binding. This is implemented by a custom
DataSource transport and schema. Those are defined in the
kendo.aspnetmvc.min.js. Make sure that this file is included after the
other Kendo JavaScript files.
After verifying that the scripts were indeed in the correct order (and knowing it probably had something to with POST) I specified the verb to use at the end of my Read in the grid as so:
.Read(read => read.Action("MyList_Read", "Diagnosis").Type(HttpVerbs.Get))
This solved MY problem.
try to call the read method with JQuery's document.ready()
$(document).ready(function ()
{
var grid = $("#studentsGrid").data("kendoGrid")
grid.dataSource.read()
})
Also is savedStudent a type of student.... Ur grid is bound to Student but you are returning SavedStudent objects
"By default Kendo Grid for ASP.NET MVC should make POST requests when configured for ajax binding. " ???
For Kendo UI version 2014.1.318, I think, by default Kendo Grid for asp.net mvc makes GET requests when configured for ajax binding.
I discovered that if there are two grids on the same webpage (in this case, in different tabs), then each grid MUST have its own datasource method in the MVC controller - even if both grids are using the same data,

Equivalent Razor Syntax of Following Statement?

Let's say I have following ASP.NET Web Form engine code, how can I express it in Razor engine?
<script type="text/javascript">
var initialData = <%= new JavaScriptSerializer().Serialize(Model) %>;
</script>
Thanks
Hardy
I would use the following:
<script type="text/javascript">
var initialData = #Html.Raw(new JavaScriptSerializer().Serialize(Model));
</script>
This is exactly the same as your example (note the Html.Raw).
If you want the output (html)encoded or your code returns an IHtmlString :
<script type="text/javascript">
var initialData = #(new JavaScriptSerializer().Serialize(Model));
</script>
You do want to use #( ... ) syntax, because using #new JavaScriptSerializer(..) will let the Razor parser stop at the first space (after new).
The syntax like this:
<script type="text/javascript">
var initialData = #{ new JavaScriptSerializer().Serialize(Model); }; #* <== wrong *#
</script>
does not work because it will call new JavaScriptSerializer, but discard the output.

Uncaught [CKEDITOR.editor] The instance "html" already exists

I have a problem with loading CKEDITOR. I have made everything like described here: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Integration But anyway i'm getting an error (Google Chrome 4.x) Uncaught [CKEDITOR.editor] The instance "html" already exists.
Here is my code:
<script type="text/javascript" src="/engine/jq.js"></script>
<script type="text/javascript" src="/engine/cke/ckeditor.js"></script>
<script type="text/javascript" src="/engine/cke/adapters/jquery.js"></script>
<textarea class="jquery_ckeditor" name="html" id="html" rows="10">text</textarea>
<script type="text/javascript">
if (CKEDITOR.instances['html']) { CKEDITOR.remove(CKEDITOR.instances['html']); // with or without this line of code - rise an error }
CKEDITOR.replace('html');
</script>
check this:
if (CKEDITOR.instances['html']) {
delete CKEDITOR.instances['html']
};
CKEDITOR.replace('html');
using the jquery ckeditor adapter - I was able to reinitialize ckeditor textareas in ajax content using this function.
function initCKEditor() {
$('.wysiwyg').ckeditor(function(e){
delete CKEDITOR.instances[$(e).attr('name')];
},{
toolbar:
[
['Bold','Italic','Underline','Strike','-','NumberedList','BulletedList','-','Paste','PasteFromWord','-','Outdent','Indent','-','Link','-','Maximize','-','Source']
],
skin: 'office2003'
}
);
}
remove class='ckeditor' as it's triggering the automatic replacement system.
Same error, getting it with the jQuery adapter though. Check the class of the textarea. As far as i can tell all text areas with class 'ckeditor' are automatically converted to editors. So either don't bother setting it with javascript or change the class.
http://ckeditor.com/blog/CKEditor_for_jQuery has a fix if you are using jQuery
// remove editor from the page
$('textarea').ckeditor(function(){
this.destroy();
});
Your page has a html container, try renaming your textarea ?
<textarea class="jquery_ckeditor" name="editor" id="editor" rows="10">text</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>
The solution that works for me: in an Ajax view, having two controls
#Html.TextAreaFor(model => model.offreJob.profile, new { #class = "input_text_area_nofloat", #style = "width:590px", #id = "ck_profile" })
and
#Html.TextAreaFor(model => model.offreJob.description_job, new { #class = "input_text_area_nofloat", #style = "width:590px", #id = "ck_description" })
I use the following script:
<script>
if (CKEDITOR.instances['ck_profile']) {
delete CKEDITOR.instances['ck_profile'];
}
CKEDITOR.replace('ck_profile');
if (CKEDITOR.instances['ck_description']) {
delete CKEDITOR.instances['ck_description'];
}
CKEDITOR.replace('ck_description');
</script>
Try this, hope it works, it worked for me.
for(html in CKEDITOR.instances['html')
{
CKEDITOR.instances[html ].destroy();
}
http://dev.ckeditor.com/ticket/9862#no1
Try this, it worked for me
var editor = CKEDITOR.instances["your_textarea"];
if (editor) { editor.destroy(true); }

Resources