How can I bind the click event after the deferred script is loaded?
I have a Kendo Grid (in Razor) with deferred initialization due performance issues. So all js scripts are included in the end of the document.
@(Html.Kendo().Grid<
MyViewModel
>()
.Name("myGrid")
.Columns(columns =>
{
columns.Bound(c => c.Name);
columns.Bound(c => c.City);
columns
.Bound(c => c.Id)
.Title("Commands")
.Sortable(false)
.Filterable(false)
.ClientTemplate(
"<
a
href='" + @Url.Action("Details", new {
id
=
"#=Id#"
}) +
"'
class
=
'btn btn-success'
title
=
'Details'
>" +
"<
span
class
=
'glyphicon glyphicon-list'
></
span
></
a
>" +
"<
a
href='" + @Url.Action("Edit", new {
id
=
"#=Id#"
}) +
"'
class
=
'btn btn-info'
title
=
'Edit'
>" +
"<
span
class
=
'glyphicon glyphicon-pencil'
></
span
></
a
>" +
"<
a
href
=
'\\#'
data-id
=
'#=Id#'
data-action
=
'deactivate'
" +
"
class
=
'btn btn-warning'
title
=
'Desactivate'
>" +
"<
span
class
=
'glyphicon glyphicon-remove-sign'
></
span
></
a
>"
);
})
.Pageable()
.Sortable()
.Filterable()
.DataSource(ds => ds
.Ajax()
.Read(read => read.Action("ReadData", "MyController")).Sort(a => a.Add("Name")))
.Deferred()
)
Then I have a section at the end where I want to bind a click event to the <a> click of every element which a data-action='deactivate' attribute. The problem is the deffered initialization is performed after my document is ready.
@section scripts {
@Scripts.Render("~/bundles/kendo")
@Html.Kendo().DeferredScripts()
<
script
>
$(document).ready(function () {
$('[data-action="deactivate"]').click(function (event) {
var id = $(event.target).attr('data-id');
alert(id);
});
});
</
script
>
}
Hello,
i have a grid with the column template with checkboxes, and chekbox to select all rows;
in the grid i have enabled copy (.AllowCopy (true)), and it works if I select by clicking the rows and not the checkbox, however, if for example I select all lines using checkbox, the copy is not working.
I assumed might be a problem of focus, click on the checkboxes instead of rows, you lose the data to be copied, I have tried in the javascript selection function to shift the focus on the tbody of the grid, but this does not work ...
Any suggestions?
Thanks, Roberto
I have a grid in a partial view and it's data source fails to call the read method on the initial page load. It does get called when I submit the ajax form, but the problem is that I want some default data to appear in the grid when the page initially loads.
Also, if I take out the model as a parameter on the read method, then the read method will in fact get called during the initial page load, but the problem with that is then I won't be able to feed it any parameters to filter the data from the ajax form.
I tried to call the read method from javascript in document.ready() to try and force it to call the read method, but that didn't work. Is there a way I can make the read method get called in the initial page load while also feeding it the model as a parameter?
Here is the partial view called _ProjectResults
@model MvcTestProject.Models.ProjectSearchModel
@(Html.Kendo().Grid<
MvcTestProject.Models.ProjectItem
>()
.Name("projectresultsgrid")
.Columns(columns =>
{
columns.Bound(p => p.KeyID).Title("Key ID").Width(130);
columns.Bound(p => p.StoreNumber).Title("Store").Width(130);
columns.Bound(p => p.ProjectType).Title("Type").Width(150);
columns.Bound(p => p.ProjectStatus).Title("Status").Width(130);
columns.Bound(p => p.InstallStartDate).Title("Start Date").Width(130).Format("{0:MM/dd/yyyy}");
})
.Pageable()
.Sortable()
.Scrollable(scr => scr.Height(550))
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(50)
.ServerOperation(false)
.Read(data => data.Action("ReadProjects", "Project", Model))
)
)
Here is the parent page
@model MvcTestProject.Models.ProjectSearchModel
@{
Layout = "~/Views/Shared/_Layout_Project.cshtml";
ViewBag.Title = "Index";
}
<
h2
>Project Search</
h2
>
<
div
>
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "dvProjectResults" }))
{
<
fieldset
style
=
"margin:10px;"
>
<
legend
style
=
"margin:5px;font-weight:bold"
>
Search Criteria
</
legend
>
<
table
>
<
tr
>
<
td
>@Html.LabelFor(m => Model.ProjectTypeID)</
td
>
<
td
width
=
"400px;"
>
@(Html.Kendo().DropDownListFor(m => m.ProjectTypeID)
.HtmlAttributes(new { style = "width: 250px" })
.DataTextField("TypeName")
.DataValueField("ProjTypeID")
.BindTo(Model.ProjectTypeOptions)
.OptionLabel(" ")
)
</
td
>
</
tr
>
<
tr
>
<
td
>@Html.LabelFor(m => Model.ProjectStatusID)</
td
>
<
td
>
@(Html.Kendo().DropDownListFor(m => m.ProjectStatusID)
.HtmlAttributes(new { style = "width: 250px" })
.DataTextField("StatusName")
.DataValueField("ProjStatusID")
.BindTo(Model.ProjectStatusOptions)
.OptionLabel(" ")
)
</
td
>
<
td
>@Html.LabelFor(m => Model.StartDate)</
td
>
<
td
>@Html.EditorFor(m => Model.StartDate)</
td
>
</
tr
>
<
tr
>
<
td
>@Html.LabelFor(m => Model.KeyID)</
td
>
<
td
>@Html.EditorFor(m => Model.KeyID)</
td
>
<
td
>@Html.LabelFor(m => Model.EndDate)</
td
>
<
td
>@Html.EditorFor(m => Model.EndDate)</
td
>
</
tr
>
<
tr
>
<
td
>@Html.LabelFor(m => Model.StoreNumber)</
td
>
<
td
>@Html.EditorFor(m => Model.StoreNumber)</
td
>
</
tr
>
<
tr
>
<
td
colspan
=
"2"
><
input
type
=
"submit"
value
=
"Search"
/></
td
>
</
tr
>
</
table
>
</
fieldset
>
}
<
div
id
=
"dvProjectResults"
style
=
"margin:10px;"
>
@{Html.RenderPartial("_ProjectResults", Model);}
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () { JSReadProjects(); });
function JSReadProjects() {
var grid = $("#projectresultsgrid").data("kendoGrid");
grid.dataSource.read();
}
</
script
>
Here is the http post actionresult that is executed when the ajax form is submitted:
[HttpPost]
public
ActionResult ProjectSearch(ProjectSearchModel model)
{
return
PartialView(
"_ProjectResults"
, model);
}
Here is the read method on the controller:
public
ActionResult ReadProjects([DataSourceRequest] DataSourceRequest request, ProjectSearchModel searchModel)
{
var data = datamgr.GetProjects
(
searchModel.KeyID,
searchModel.StoreNumber,
searchModel.ProjectTypeID,
searchModel.ProjectStatusID,
searchModel.StartDate,
);
var serializer =
new
JavaScriptSerializer();
var result =
new
ContentResult();
serializer.MaxJsonLength = Int32.MaxValue;
// Whatever max length you want here
result.Content = serializer.Serialize(data.ToDataSourceResult(request));
result.ContentType =
"application/json"
;
return
result;
}
Hi,
I am getting an error on page typeerror : e is undefined on firebug. Is there a way that i can debug that and see on which method am getting that exactly? If no can you please suggest me where i can look. I just have grid on that page.
I am attaching the screenshot of my firebug error.
Thanks,
Veena
Hi Everybody,
I have a problem using the grid in asp.net mvc and Telerik for asp.net mvc.
The Client template works fine when entering information and fine display a DateTimePicker.
But when I leave the field is become empty instead of the Value choosed in the DateTimePicker.
Do you have any suggestions?
<
P
>@(Html.Kendo().Grid<Object.Clubs>().BindTo(Model.Clubs).Name("Clubs")<
BR
>.ToolBar(configurator
=><
BR
> {<
BR
>
configurator<
BR
><
BR
>.Create();<
BR
> })<
BR
><
BR
>.Editable(e
=>
e.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))<
BR
>.Events(e
=> e.Edit("onEditItem")).Events(e =>
e.Save("onSaveItem"))<
BR
>.Columns(columns =><
BR
> {<
BR
>
columns<
BR
><
BR
>.Bound(m =>
m.ClubName).EditorTemplateName("RelatedClubs").ClientTemplate("#= ClubName#"
+<
BR
>"<
input
type
=
'hidden'
name
=
'Clubs[#= indexClub(data)#].ClubName'
value
=
'#= ClubName#'
/>"<
BR
> );<
BR
>
columns</
P
>
<
P
><
BR
>.Bound(m => m.EndDate).Width(150).Encoded(true).ClientTemplate("#
if(EndDate != null){ kendo.toString(kendo.parseDate(EndDate,'dd/MM/yyyy'), '" +
"dd-MM-yyyy" + "') } else { kendo.toString('') } #" +<
BR
>"<
input
type
=
'hidden'
name
=
'Clubs[#= indexClub(data) #].EndDate'
value='#=
ConvertDate(EndDate) #' />").Format("{0: dd-MM-yyyy}");<
BR
>
columns<
BR
><
BR
>.Command(m => m.Destroy()).Width(100);<
BR
>
})<
BR
><
BR
>.DataSource(dataSource => dataSource.Ajax()<
BR
>.Read(r
=> r.Action("ClubsRead", "Model"))<
BR
>.Model(model =><
BR
>
{<
BR
> model<
BR
><
BR
>.Id(p => p.Id);<
BR
>
})<
BR
> )<
BR
><
BR
>)</
P
>
Best Regards
Lars
Hi guys, seems like there is an issue with all the .mobile based css files with an element missing like the below:
taken from kendo.mobile.all.min.css
.km-actionsheet>li>a{background-image:-webkit-gradient(linear,)
looking at a previous version it seems it is missing this:
50% 0,50% 100%,color-stop(0,rgba(255,255,255,0.5)),color-stop(0.06,rgba(255,255,255,0.45)),color-stop(0.5,rgba(255,255,255,0.2)),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(1,rgba(100,100,100,0)));
This is just one example that JustCode is highlighting as a css error it has picked up 149 errors in total related to issues like this (assuming they are all like this)
If you need more examples then let me know and I will provide them.
Hi,
I have massive problems with a messed-up MVC project using Kendo UI MVC wrappers (Kendo.Mvc.dll at Version 2015.1.429.545).
To get the project running again I made several nuget updates and so far it compiles and spins up again. But on every view where any @Html.Kendo() widget is used I get an EntryPointNotFoundException in System.Web.Mvc.
sample trace:
bei System.Web.Mvc.IViewDataContainer.get_ViewData()<br> bei System.Web.Mvc.HtmlHelper.get_ViewData()<br> bei Kendo.Mvc.UI.Fluent.WidgetFactory.get_ViewData()<br> bei Kendo.Mvc.UI.Fluent.WidgetFactory.AutoComplete()<br> bei ASP._Page_Views_Suche_Index_cshtml.Execute()
in
c:\# Sources\baumkataster\sources\trunk\Baumkataster.Web\Views\Suche\Index.cshtml:Zeile 67.<br> bei System.Web.WebPages.WebPageBase.ExecutePageHierarchy()<br> bei System.Web.Mvc.WebViewPage.ExecutePageHierarchy()<br> bei System.Web.WebPages.StartPage.RunPage()<br> bei System.Web.WebPages.StartPage.ExecutePageHierarchy()<br> bei System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage)<br> bei System.Web.Mvc.RazorView.RenderView(ViewContext viewContext, TextWriter writer, Object instance)<br> bei System.Web.Mvc.BuildManagerCompiledView.Render(ViewContext viewContext, TextWriter writer)<br> bei System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context)<br> bei System.Web.Mvc.ControllerActionInvoker.InvokeActionResult(ControllerContext controllerContext, ActionResult actionResult)<br> bei System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult)<br> bei System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult)
I checked all the references and binding redirects. So I thought it must have to do with incompatibility between MVC version and Kendo.
My next idea was to try to get the sources of Kendo.Mvc and compile it against the same library versions used in the project. That is at least what I tried to accomplish today. When opening the Project there are two js files missing (kendo.aspnetmvc.js and kendo.dropdownlist.aspnetmvc.js) and after changing reference after reference I end up having 500+ errors on the project.
Has anybody successfully done so and can provide me some help? What are the required steps (change to Framework 4.5, where to get the missing *.js files, which changes to make,...).
Hope somebody can help me out here.
Regards,
Thomas
hi,
I am trying to make a scheduler custom editor with a View Model Collection Binding.
So what i really want. I need to my editor to dynamically a list of dropdownlist. Take a look in my attach image.
My view model is like this (just show you the concern parts): I added one item to the list for testing
public class RendezVousViewModel : ISchedulerEvent
{
public RendezVousViewModel()
{
this.ListRendezVousMateriels = new List<RendezVousMateriel>();
var RendezVousMateriel = new RendezVousMateriel();
RendezVousMateriel.MaterielID = 1;
this.ListRendezVousMateriels.Add(RendezVousMateriel);
}
public List<RendezVousMateriel> ListRendezVousMateriels { get; set; }
#endregion
}
}
Extract of my editor :
@for (var i = 0; i < Model.ListRendezVousMateriels.Count; i++)
{
@(Html.Kendo().DropDownListFor(model => model.ListRendezVousMateriels[i].MaterielID)
.HtmlAttributes(new { data_bind = "value:ListRendezVousMateriels_" + i + "__MaterielID", style = "width: 280px" })
.DataTextField("Text")
.DataValueField("Value")
.ValuePrimitive(true)
.HtmlAttributes(new { @style = "width:100%" })
.DataSource(source => source.Read(read => read.Action("GetDiplomes", "Diplomes")).ServerFiltering(true))
.OptionLabel("Choix du matériel"))
}
So apparently it's doesn't work, do you confirm that is not implemented? Else do you have an idea how i can achieve somethink like this?
Thanks by advance.
I use TreeViewBuilder.Items to build tree view.
Child nodes doesn't be checked when I check parent node without expend nodes, but if I check the parent node again(without expend too), child nodes will be checked.
@using Kendo.Mvc.UI.Fluent;
@model List<
AuthViewModel
>
@functions
{
public static void ShowTree(TreeViewItemFactory helper, IEnumerable<
AuthViewModel
> nodes)
{
foreach (var node in nodes)
{
helper.Add()
.Id(node.ID)
.Text(node.NAME)
.Checked(node.IsChecked)
.Expanded(false)
.Items(items =>
{
if (node.Childs.Count() > 0)
{
ShowTree(items, node.Childs);
}
});
}
}
}
@(Html.Kendo().TreeView()
.Name("authTree")
.Checkboxes(checkboxes => checkboxes
.Name("checkedFiles")
.CheckChildren(true)
)
.Items(root =>
{
ShowTree(root, Model);
}
)
)