I'm trying to use an AutoComplete component in the popup editor window for a grid.
Here's the grid code:
@(Html.Kendo().Grid<Contract>(Model.Contracts) .Name("contractGrid") .Columns(columns => { columns.Bound(model => model.Name); columns.Bound(model => model.StartDate).EditorTemplateName("_DatePicker").Format("{0:dd MMM yyyy}"); columns.ForeignKey(model => model.WithdrawalReasonId, Model.AllWithdrawalReasons, "Id", "Value"); columns.Bound(model => model.Country).EditorTemplateName("_AutoComplete"); columns.Command(command => { command.Edit(); }).Width(172); }) .Events(e => e.DataBound("contractGridEdit")) .ToolBar(toolbar => toolbar.Create()) .Editable(editable => editable.Mode(GridEditMode.PopUp)) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .ServerOperation(false) .Model(model => { model.Id(p => p.Id); model.Field(p => p.ClinicianId).Editable(false).DefaultValue(Model.Id); }) .Create(update => update.Action("ContractCreateAndEdit", "Clinician").AddRequestVerificationTokenData()) .Update(update => update.Action("ContractCreateAndEdit", "Clinician").AddRequestVerificationTokenData()) ))
Here's the AutoComplete editor template (_AutoComplete.cshtml):
@using Kendo.Mvc.UI@model object@(Html.Kendo().AutoComplete() .Name("Country") .Filter("startswith") .MinLength(3) .BindTo(new string[] { "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan", "Belarus", "Belgium" } ))
I've tried various options for the name of theAutoComplete control but cannot get it to render in the grid popup. What am I missing?
Thanks,
Stuart.

I load data to grid with ajax, the first time when getting data the loader doesn't show up, BUt when data is in grid and I press refresh, then the loader is showing. I have this problem on several grids in our solution. As I must do now is to force the loader, ugly solution: kendo.ui.progress($("#grid" + gridId), true);
Code:
@(Html.Kendo().Grid<HP.PartnerPortal.Web.Areas.CustomerService.Models.PartnerViewModel>()
.Name("gridPartners")
.Columns(columns =>
{
columns.Bound(c => c.InternalPartnerId)
.ClientTemplate(@"<a href='" + @Url.Content("~/CustomerService/Partner/") + "#:InternalPartnerId#/Start' class='g-color-darkblue-v2 g-color-darkblue-v2--hover'>#:InternalPartnerId#</a>")
.Title(Localizer.L("CustomerNumber")).Width(120);
columns.Bound(c => c.Id)
.ClientTemplate(@"<a href='" + @Url.Content("~/CustomerService/Partner/") + "#:InternalPartnerId#/Start' class='g-color-darkblue-v2 g-color-darkblue-v2--hover'>#:Title#</a>")
.Title(Localizer.L("Title"));
columns.Bound(c => c.Id)
.ClientTemplate(@"<a href='" + @Url.Content("~/CustomerService/Partner/") + "#:InternalPartnerId#/Start'>#:AbbreviatedTitle#</a>")
.Width(200)
.Title(Localizer.L("AbbreviatedTitle"));
columns.Bound(c => c.PartnerType).Title(Localizer.L("PartnerType")).Width(140);
columns.Bound(c => c.Market).Title(Localizer.L("Market")).Width(140);
columns.Bound(c => c.CurrentTime).Title(Localizer.L("Current Time")).Width(140);
})
.Scrollable(s => s.Height(667))
.Events(events => events
.DataBinding("onPartnersGridDataBinding")
)
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(50)
.Read(read => read.Action("_ListBySearchFilter", "Partner", new { area = "CustomerService" }))
)
)
<script>
function onPartnersGridDataBinding() {
var grid = $("#gridPartners").data("kendoGrid");
var count = grid.dataSource.total();
$("#totalPartners").html(count);
}
</script>

Adding a row after selected row in inline edit mode for Grid with Grouping is working properly in Mozilla firefox but sometimes its not working properly in Google Chrome. In Google Chrome, On adding a record after particular selection, it adds the record at different place rather than adding record after selected row but sometimes it works fine.
Please provide solution asap why its not working properly in Chrome.

How can I make a filter "row" filters dropdown column text in kendo grid. For now, ]when I click on dropdown filter , its showing [Object] [object].
Please suggest how can I filter text from dropdown value in filterable mode row?
Can we make a group row selected so that I can add record ist record under selected group header.
In this below Image1, Can I make the group header "def" selectable like as a row selectable in Image2, so that I can add ist record in that particular group on button click "Add Activity" Please provide solution asap.
I have a method that validates if the registry is duplicated. How can I use this validation in the edit / insert popup?
@(Html.Kendo().Grid<Site.Models.BreedViewModel>() .Name("grid") .Columns(columns => { columns.Bound(b => b.BreedId).Title("ID") .Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(true))).Width(120); columns.Bound(b => b.BreedCode).Width(140).Title("Code"); columns.Bound(b => b.BreedName).Width(220).Title("Name"); columns.Bound(b => b.Type) .ClientTemplate("# if( Type === 1) { # <span>Beef</span> # } else { # <span>Dairy</span> # } #").Width(140); columns.Bound(b => b.Active) .ClientTemplate("# if( Active ) { # <span class='k-icon k-i-check-outline'></span> # } else { # <span class='k-icon k-i-close-outline'></span> # } #").Width(145); columns.Bound(b => b.Description).Width(220).Title("Description"); columns.Command(command => { command.Edit().CancelText("Cancel").UpdateText("Save").Text(" "); command.Custom("wnDelete").Click("wnDelete").Text(" ").IconClass("k-icon k-i-delete"); command.Custom("ViewDetails").Click("ViewDetails").Text(" ").IconClass("k-icon k-i-zoom-in"); }).Width(100); }) .ToolBar(t => { t.Create().Text("Add"); t.Excel(); }) .Editable(editable => editable.Mode(GridEditMode.PopUp) .DisplayDeleteConfirmation(false) .TemplateName("BreedEdit").Window(w => w.Title("Breed"))) .Scrollable(s => s.Height("auto")) .Pageable(pageable => pageable .Refresh(true) .PageSizes(true) .ButtonCount(5)) .Events(events => events //.Change("onChange") .DataBound("onDataBound") //.Save("onSave") //.DataBinding("onDataBinding") ) .Sortable() .Scrollable() .Excel(excel => excel.FileName("export.xlsx").AllPages()) .Filterable() .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Events(e =>{ e.Error("onGridError"); //e.RequestEnd("wasSaveSuccessful"); }) .Model(model => model.Id(p => p.BreedId)) .Create(update => update.Action("EditingPopup_Create", "Breed")) .Read(read => read.Action("EditingPopup_Read", "Breed")) .Update(update => update.Action("EditingPopup_Update", "Breed")) .Destroy(update => update.Action("EditingPopup_Destroy", "Breed")) ) )@(Html.Kendo().Window().Name("Details") .Title("Details") .Visible(false) .Modal(true) .Draggable(true) .Width(500) )@(Html.Kendo().Notification() .Name("notification") .Position(p => p.Pinned(true).Top(30).Right(30)) )

Hello, I'm creating simple grid, which is populated with data via controller and it's work just fine.
But the problem is when I'm trying to remove a row with .Destroy() method, which doesn't call method from my controller.
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "controller")) <-- this works well
.Destroy(destroy => destroy.Action("Read", "controller"))) <-- isn't called at all
method in controller
public ActionResult Delete([DataSourceRequest] DataSourceRequest request, Model model)
{ <-- I've put breakpoint here and it's not get there
return NotFound();
}
I have no idea where the problem is.

Hello.
I have a ListView which contains say 10 items. I add a new item programmatically, I am able to select it, but I am not able to make the Listview to Scroll to it.
I found several examples for Grid scrolling to selection, but none of them works for ListView.
Can you please provide some assistance?
Thanks,
Kyriakos

Hello,
I'm trying to populate my Grid with Json data, which I gets from my controller. I have set breakpoints and checked that the data is returned correctly but Grid isn't filled somehow.
Controller :
[Route("/api/list/getAll")]
[HttpPost]
public IActionResult GetList()
{
var result = _ListService.GetAll();
if (result == null || result.Count == 0)
return NotFound();
return Json(result);
}
Razor :
@(Html.Kendo().Grid<Model>()
.Name("grid")
.Columns(columns => {
columns.Bound(c => c.Name).Width(140);
})
.Scrollable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetList", "controller")))
)
Model has much more fields but I just put only Name for test purposes. But this isn't filled anyway.
I have no idea what I'm doing wrong there is no errors, page just loading and Grid isn't filled.

I am trying to make a very simple functionality but i cant seem to figure it out.
i want to be able to pick a category and a dependent subcategory, how can i achieve this in an inline grid edit?
