Develop Reference

ASP .NET MVC Kendo Window close exception

I have view
#{
ViewBag.Title = "Page Title";
}
#(Html.Kendo().Window()
.Name("activate-window")
.Title("Car selection")
.Content ( #<h5>cars:</h5>+
#Html.Kendo().AutoComplete()
.HtmlAttributes(new { style = "width:100%" })
.Name("vehicle")
.DataTextField("Name")
.DataSource(ds =>
{
ds.Read(r =>
{
r.Action("GetVehicleList", "Home").Data("getVehicle");
}).ServerFiltering(true);
})
.Filter("contains")
.MinLength(3).ToHtmlString() +
"<h5>Device:</h5>"+
#Html.Kendo().MultiSelect()
.Name("device")
.DataTextField("Name")
.DataValueField("Id")
.AutoBind(false)
.DataSource(ds =>
{
ds.Read(r =>
{
r.Action("GetDevice", "Home").Data("getDevice");
}).ServerFiltering(true);
})
.Filter("contains")
.MinLength(3).ToHtmlString()+
"<div>"+
#Html.Kendo().Button()
.Name("close")
.Content("Close")
.Events(e=>e.Click("close")).ToHtmlString()+
"</div>"
)
.Animation(a => a.Open(e => e.Fade(FadeDirection.In)))
.Resizable()
.Draggable()
.Modal(true)
.Visible(false)
.Width(300)
)
#(Html.Kendo().Splitter()
.Name("mainPanel")
.Orientation(SplitterOrientation.Horizontal)
.Panes(panes =>
{
panes.Add()
.HtmlAttributes(new {id = "left-side"})
.Scrollable(true)
.Collapsible(false)
.Size("250px")
.Content(Html.Kendo().Button()
.Name("activate")
.Content("Show window")
.Events(e=>e.Click("activateDevice"))
.ToHtmlString()
);
panes.Add()
.HtmlAttributes(new {id = "right-side"})
.Scrollable(true)
.Collapsible(false)
.Content(Html.Kendo().TabStrip()
.Name("tabStrip")
.Animation(a => a.Open(e => e.Fade(FadeDirection.In)))
.Items(item =>
{
item.Add().Text("Events")
.Selected(true)
.Content(
Html.Kendo().Grid<string>()
.Name("events-grid").ToHtmlString()
);
}).ToHtmlString()
);
})
)
<script>
function activateDevice(e) {
var window = $("#activate-window");
window.data("kendoWindow").center();
window.data("kendoWindow").open();
}
function getVehicle() {
return {
text: $("#vehicle").val()
};
}
function getDevice() {
return {
text: $("#device").data("kendoMultiSelect").input.val()
}
}
function close(e) {
$(this).closest(".k-window-content").data("kendoWindow").close();
}
</script>
when window open all work ok. When I press close button in window header window closed and all ok. But when I press my close button I get exception in
Unhandled exception at line 25, column 6830 in http://localhost:22061/Scripts/kendo/2016.1.112/kendo.all.min.js
0x800a01b6
Object does not support property or method "call"
What I do wrong?

Error on clear data in group Kendo Grid

I have a grid on Kendo UI that has GROUP, however an error occurs when I ask you to clean the grid data via JavaScript, follow the grid code Razor:
#(Html.Kendo().Grid<ItemViewModel>(Model.FormasPagamento)
.Name("grid")
.Columns(clm =>
{
clm.Group(g => g.Title("FormaPagamento")
.Columns(subitem =>
{
subitem.Bound(e => e.Dias)
.Title("Dias").Width(60).ClientTemplate("#=kendo.format('{0:n0}', Dias)#");
subitem.Bound(e => e.Percentual)
.Title("Percentual").Width(100).ClientTemplate("#=kendo.format('{0:p}', Percentual / 100)#");
subitem.Bound(e => e.Valor)
.Title("Valor").Width(100).ClientTemplate("#=kendo.format('{0:n2}', Valor)#");
})
);
clm.Group(g => g.Title("Parcela")
.Columns(subitem =>
{
subitem.Bound(e => e.ParcelaValor)
.Title("Valor").Width(100).ClientTemplate("#=kendo.format('{0:n2}', ParcelaValor)#");
subitem.Bound(e => e.ParcelaTaxa)
.Title("Taxa").Width(100).ClientTemplate("#=kendo.format('{0:n2}', ParcelaTaxa)#");
subitem.Bound(e => e.ParcelaContratoCambio)
.Title("ContratoCambio").Width(200);
subitem.Bound(e => e.ParcelaStatus)
.Title("Status").Width(80);
})
);
})
.ToolBar(t =>
{
t.Template("<span class=\"adicionarItemGridFormaPagamento k-button k-button-icontext\"><span></span>Adicionar</span>");
})
.Navigatable()
.Editable(a =>
{
a.Mode(GridEditMode.InCell);
a.DisplayDeleteConfirmation("Excluir?");
})
.Scrollable(s => s.Height("auto"))
.Selectable(s => s.Mode(GridSelectionMode.Single))
.Filterable()
.ColumnMenu()
.Sortable()
.Pageable()
.DataSource(da => da
.Ajax()
.Batch(true)
.PageSize(1000)
.Events(e => e.Error("onErrorGrid"))
.Destroy("", "", Model)
.Create("", "", Model)
.Update("", "", Model)
.Model(m =>
{
m.Id(p => p.ItemId);
m.Field(p => p.ParcelaValor).Editable(false);
m.Field(p => p.ParcelaStatus).Editable(false);
m.Field(p => p.ParcelaTaxa).Editable(false);
m.Field(p => p.ParcelaContratoCambio).Editable(false);
}))
)
Follows the JavaScript command to clear the grid data, when it reaches this point the browser code enters into an infinite loop and lock the application:
<script>
var grid = $("#grid").data("kendoGrid");
grid.dataSource.data([]); //ERROR
</script>
This problem does not occur with Kendo grid without GROUP, one would have any idea how to use this call without experience this bug?
I am using ASP.NET MVC5 and Kendo 2015.3.1111.545

client template button event not firing

I'm trying to display a pop up window when a user clicks on a button but I cant seem to get this to work. I can fire the event when using a custom command but I need a textbox and button next to each other in the same column.
Any ideas why this isn't working?
#(Html.Kendo().Grid(Model)
.Name("gridPopup")
.Columns(columns =>
{
columns.Bound(p => p.ProductName).Width(120);
columns.Template(#<text></text>).Title("").Width(110).ClientTemplate(
Html.Kendo().TextBox()
.Name("search_textfield")
.Value("").ToClientTemplate().ToString()
+ " " +
Html.Kendo().Button()
.Name("search_button")
.HtmlAttributes(new { type = "button", #class = "k-primary" })
.Events(e =>
e.Click("SearchButton")
)
.Content("...").ToClientTemplate().ToString()
);
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Scrollable()
.HtmlAttributes(new { style = "height:320px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("errorHandler"))
.Model(model =>
{
model.Id(p => p.ProductID);
model.Field(p => p.ProductID).Editable(true);
model.Field(p => p.CategoryID).DefaultValue(1);
})
.Read(read => read.Action("ForeignKeyColumn_Read", "Home"))
.Update(update => update.Action("ForeignKeyColumn_Update", "Home"))
.Create(create => create.Action("ForeignKeyColumn_Create", "Home"))
.Destroy(destroy => destroy.Action("ForeignKeyColumn_Destroy", "Home"))
)
)
<script type="text/javascript">
function errorHandler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
function SearchButton(e)
{
alert("Search Button Clicked");
}
</script>

Weird! .Events(e => e.Click("SearchButton")) is not generating the onclick attribute if used inside a ClientTemplate()
Try this, it will work for you, but i will wait for someone to explain it :)
.HtmlAttributes(new { type = "button", #class = "k-primary", onclick = "SearchButton()" })
Edit:
The explanation that I found is here: How do I use a Kendo UI widget inside a Grid client column template?. It says script tags are not automatically evaluated inside a Grid client column template, so any included widgets will not be initialized.
Therefore initializing the nested controls in .Events(e => e.DataBound("onDatabound"))
function onDatabound()
{
jQuery("#gridPopup tbody [class='k-primary']").each(function () {
$(this).kendoButton({ "click": SearchButton });
})
}

MVC Kendo Grid Custom Filter

Basically, I am looking for the MVC version of this demo:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
Here is what I currently have:
.Columns(columns =>
{
columns.Bound(e => e.ID)
.Hidden();
columns.Bound(e => e.SearchFunctionCode)
.Hidden();
columns.Bound(e => e.SearchFunctionDesc)
.Title("Search Function")
.Filterable( *** WHAT GOES HERE? *** )
.HtmlAttributes(new { style = "text-align: center" })
.HeaderHtmlAttributes(new { style = "text-align: center" });
Do I still reference the javascript, or is there another approach?
<script type="text/javascript">
function SearchFunctionFilter(element) {
element.kendoDropDownList({
dataSource: searchfunctions(),
optionLabel: "--Select Value--"
});
}
</script>

Yes we need to define specified filter functions in javascript like below.
.Columns(columns => {
columns.Template(#<text>#item.FirstName #item.LastName</text>)
.ClientTemplate("#=FirstName# #=LastName#")
.Title("Name");
columns.Bound(e => e.City)
.Filterable(filterable => filterable.UI("cityFilter"))
.Width(200);
columns.Bound(e => e.Title)
.Filterable(filterable => filterable.UI("titleFilter"))
.Width(350);
})
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
))
)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("FilterMenuCustomization_Read", "Grid"))
)
)
<script type="text/javascript">
function cityFilter(element) {
element.kendoDropDownList({
dataSource: {
transport: {
read: "#Url.Action("FilterMenuCustomization_Cities")"
}
},
optionLabel: "--Select Value--"
});
}
function titleFilter(element) {
element.kendoAutoComplete({
dataSource: {
transport: {
read: "#Url.Action("FilterMenuCustomization_Titles")"
}
}
});
}
</script>
see this
http://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization

Malkan's answer should work. All you need to do is have a separate filter on each column. just replace the column "filterable" with whatever you like like this:
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
))
)

Use Javascript function into Kendo Grid Template

I want to use Javascript Function in Kendo Grid Create.
For that I have defined the Javascript Function as,
<script>
function GetCompanyID()
{
return $("#Company").val();
}
</script>
And I want to use it in Create template of Kendo Grid as,
#(Html.Kendo().Grid<Invoice.Models.ViewModels.DossierViewModel>()
.Name("Dossier")
.Columns(columns =>
{
columns.Bound(p => p.CustomerName).Title("Customer").Width(150);
columns.Bound(p => p.InvoiceNumber).Title("INV no.").Width(100);//.Width(20);
columns.Bound(p => p.InvoiceAmountLC).Title("INV Amount LC").Width(150);
})
.ToolBar(toolbar => toolbar.Create().Text("Add New Dossier"))
.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("New_Dossier")) //Having Different Template for New Dossier
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model => { model.Id(p => p.DossierID); })
.Read(read => read.Action("Dossier_Read", "Dossier"))
.Create(create => create.Action("Dossier_Create", "Dossier", new { #CompanyID = GetCompanyID }))
.Filter(filters =>
{
// Show products whose ProductName property contains "C"
filters.Add(dossier => dossier.Status).Contains("");
})
)
)
In that I want to use that Javascript functio as I am currently using in Above code as,
.Create(create => create.Action("Dossier_Create", "Dossier", new { #CompanyID = GetCompanyID }))
But this is not the Way it should be used. Please Help me on this. How can I use that Javascript function into this, ASAP.

You need to use the Data() method of the grid data source to send this data. Something like:
.Create(create => create.Action("Dossier_Create", "Dossier").Data("GetCompanyID")
function GetCompanyID()
{
return {
CompanyID: $("#Company").val();
};
}
Check the grid FAQ for more info and an example.