Develop Reference

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

Kendo Grid-Treeview Drag and Drop Issue

I'm using a kendo treeview as a drop target for my grid rows.
This code is giving me the following error when the row is dropped in the treeview: Uncaught TypeError: item.level is not a function.
How can I solve this issue?
<%=Html.Kendo().TreeView()
.Name("treeview")
.Checkboxes(checkboxes => checkboxes
.Name("checkedActivities")
.CheckChildren(true)
)
.LoadOnDemand(true)
.DataTextField("descriptionText")
.DataSource(dataSource => dataSource
.Read(read => read.Action("Activity", "Activity"))
)
.DragAndDrop(true)
%>
<%: Html.Kendo().Grid<Web.Models.Model>()
.Name("grid")
.BindTo((IEnumerable<Web.Models.Model>)ViewBag.List)
.Columns(columns =>
{
columns.Bound(p => p.PK).Title("PK").Hidden(true);
columns.Bound(p => p.CODE).Title("Code");
columns.Bound(p => p.DESCRIPTION).Title("Description");
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(Model => Model.Id(p => p.PK))
)
%>
<script>
$("#grid").kendoDraggable({
filter: "tr",
hint: function (element) {
return element.clone().css({
"opacity": 0.6,
"background-color": "#0cf"
});
}
});
$("#treeview").kendoDropTarget({
drop: function (e) {
console.log("drop");
var dataSourceGrid = $("#grid").data("kendoGrid").dataSource;
var dataSourcetreeview = $("#treeview").data("kendoTreeView").dataSource;
var draggableElement = e.draggable.currentTarget,
dataItem = dataSourceGrid.getByUid(draggableElement.data("uid"));
if (dataItem == undefined) {
dataItem = dataSourcetreeview.getByUid(draggableElement.data("uid"));
}
else {
dataSourcetreeview.add({ descriptionText: dataItem["DESCRIPTION"] });
}
}
});
</script>

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 });
})
}

Kendo UI Grid get id of current element javascript

i m using Kendo UI apsnet and i have a Gird with autocomptele as template in 3rd column and i want send data using javascript function "onAutoCompleteX", in this function i want to get id of active autocomplete to send text as parametere to action "GetArticle" but my probleme is how get this id, tried many methods always i get "undefined" or error
#using KendoUIMvcApplication2.Areas.Gescom.Models.Achat
<style>
.k-widget .templateCell
{
overflow: visible;
}
</style>
<script>
function initMenus(e) {
$(".templateCell").each(function () {
eval($(this).children("script").last().html());
});
}
function onAutoCompleteSelectX(e) {
var dataItem = this.dataItem(e.item.index());
var url = '#Url.Action("GetArticle", "Fiche")';
$.ajax({
url: url,
data: { code: dataItem.Code }, //parameters go here in object literal form
type: 'GET',
datatype: 'json',
success: function (data) {
if (data == null)
document.getElementById('labelx').innerHTML = "null";
else
document.getElementById('labelx').innerHTML = data.Code;
},
error: function () {
document.getElementById('labelx').innerHTML = "error";
}
});
}
function onAutoCompleteX() {
var currentId = $(this).attr('id');
//var currentId = $(this).id;
//document.getElementById('labelx').innerHTML = $(this).className; //$obj.attr('id');
return {
text: document.getElementById(currentId).value
//text: $("#id_of_another_autocomplete").val() works fine when i set static id manually
};
}
</script>
<div class="lines-tab-doc">
#(Html.Kendo().Grid<LineAppelOffre>()
.Name("grid-lines-doc")
// Declare grid column
.Columns(columns =>
{
// Cretae all the columns base on Model
columns.Bound(l => l.Document);
columns.Bound(l => l.LigneOriginale);
columns.Template(l => { }).Title(#Resources.Resource.Article)
.HtmlAttributes(new { #class = "templateCell" })
.ClientTemplate(
Html.Kendo().AutoComplete()
.Name("Article")
.HtmlAttributes(new { id = "#=LigneOriginale#", style = "width:100%;" })
.DataTextField("Code")
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetArticles", "Fiche").Data("onAutoCompleteX");
})
.ServerFiltering(true);
})
.Events(e => { e.Select("onAutoCompleteSelectX"); }).ToClientTemplate().ToHtmlString()
);
columns.Bound(l => l.Fournisseur);
columns.Bound(l => l.RefArtFrs);
// Edit and Delete button column
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(200);
})
.Events(ev => ev.DataBound("initMenus"))
// Declare ajax datasource.
// CRUD operation are wired back to ASP MVC Controller/Action e.g. HomeController, GetAll
// Set the model Id
.DataSource(datasoure => datasoure.Ajax()
.Model(model =>
{
//model.Id(l => l.Document);
model.Id(l => l.LigneOriginale);
})
.Read(read => read.Action("LinesAppelOffre_Read", "Achat"))
.Create(create => create.Action("LinesAppelOffre_Add", "Achat"))
.Update(update => update.Action("LinesAppelOffre_Update", "Achat"))
.Destroy(delete => delete.Action("LinesAppelOffre_Delete", "Achat"))
.PageSize(10)
)
// Add tool bar with Create button
.ToolBar(toolbar => toolbar.Create())
// Set grid editable.
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Scrollable(scr=>scr.Height(327))
.Sortable()
.Selectable()
.Navigatable()
.Pageable(pageable =>
{
pageable.Refresh(true);
pageable.PageSizes(true);
pageable.Messages(msg => msg.Empty(null));
})
)
</div>

You can get your AutoComplete id like that:
function onAutoCompleteX(e) {
var currentId = e.sender.element.attr('id');
...
}
But I'm not sure if you have explicity set name as "Article" .Name("Article") you will not always get "Artilcle" as id, even if you set it using .HtmlAttributes property.
If so, just try to use different attribute then id and get is same way.

i used document.activeElement
Browser compatibility
Chrome 2
Firefox (Gecko) 3.0
Internet Explorer 4
Opera 9.6
Safari 4.0

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.