Hello,
I'm encountering an issue with the autocomplete functionality in Kendo UI Grid. While the data selected through autocomplete is correctly added to hidden fields, it does not appear in the Grid.
Specifically, after using the autocomplete functionality, I checked whether the correct data was added to the respective hidden fields and found that the values I expected were indeed present in those fields. However, I noticed that these values were not visible in the Grid. This implies that the data selected by users is not being properly reflected within the Grid.
In summary, I am unable to display the data received through the autocomplete functionality within the Grid. I would appreciate any suggestions to resolve this issue.
The code structure related to the problem I mentioned above is as follows.
@(Html.Kendo().Grid(Model.Lines)Thank you in advance for your support.
Hello folks
I got this one nearly done. I can see that it is hitting my controller in the background but the refresh just keeps spinning :)
@model myHinkleyWebApp.Models.ItemInventory
<div id="table_data"><hr /><div class="row"><div class="col-12 padding-0"><h5>Check Product Availability</h5><div class="k-d-flex k-justify-content-left" style="padding-top: 54px;"><div class="k-w-100 text-left">
@{Html.RenderPartial("../Shared/EditorTemplates/Item_Search_Editor");}
</div><div class="k-w-200 text-left"><input id="btnSubmit" type="submit" style="margin-left: 25px;" value="Submit" class="btn btn-outline-primary" name="submit" /></div></div>
@(Html.Kendo().Grid<myHinkleyWebApp.Models.ItemInventory>()
.Name("ItemInventory")
.Columns(columns => {
columns.Bound(p => p.Item_no);
columns.Bound(p => p.Family);
columns.Bound(p => p.Status);
columns.Bound(p => p.DNPrice);
columns.Bound(p => p.MapPrice);
columns.Bound(p => p.QuantityAvailable);
columns.Bound(p => p.QuantityConfirmed);
columns.Bound(p => p.ConfirmedPromiseDate);
//columns.Bound(p => p.inventory_id).Title("").ClientTemplate("<a href='" + Url.Action("Delete", new { id = "#=inventory_id#", m_id = "#=customer_id#" }) + "'>Delete</a>");
//columns.Command(command => command.Destroy()).Width(150);
})
.ToolBar(tools => tools.Excel())
//.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Sortable()
//.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
//.Model(model => { model.Id(p => p.inventory_id); model.Field(p => p.inventory_id).DefaultValue(Guid.Empty); model.Field(p => p.customer_id).DefaultValue(Guid.Empty); })
//.Create("Item_Create_Update", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
//.Read("SearchItems_ByNameOrFamily", "ItemInventory", new {search_phrase = ViewBag.SearchPhrase})
//.Update("Item_Create_Update", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
//.Destroy("Item_Destroy", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
)
)
</div><br /><br /></div></div><script>
function error_handler(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);
}
}
$("#btnSubmit").click(function () {
var ItemInventory = $("#ItemInventory").data("kendoGrid");
$filter = new Array();
var ITEM = $("#item_no").val();
$.ajax({
type: "POST",
url: "/ItemInventory/SearchItems_ByNameOrFamily",
data: { search_phrase: ITEM },
dataType: "json",
success: function (result) {
var ds = new kendo.data.HierarchicalDataSource({
data: result
});
ItemInventory.setDataSource(ds);
ItemInventory.read();
ItemInventory.refresh();
}
});
//ItemInventory.dataSource.read();
});
</script>
After I click the button the grid is just spinning here is a view of that:
So really the help I need is with this javascript here:
$("#btnSubmit").click(function () {
var ItemInventory = $("#ItemInventory").data("kendoGrid");
$filter = new Array();
var ITEM = $("#item_no").val();
$.ajax({
type: "POST",
url: "/ItemInventory/SearchItems_ByNameOrFamily",
data: { search_phrase: ITEM },
dataType: "json",
success: function (result) {
var ds = new kendo.data.HierarchicalDataSource({
data: result
});
ItemInventory.setDataSource(ds);
ItemInventory.read();
ItemInventory.refresh();
}
});
//ItemInventory.dataSource.read();
});
To summarize I have a auto complete text box where I am entering an item. Then i want to push the button and refresh my grid which will pass the
item number and search for it and bring it back down in the grid!
Any help would be greatly appreciated!
Anyways here is my front end code here
am using Azure Ad authentication in my ASP.Net 4.8 MVC application. When authentication is expired and when user clicks on the link or button user get redirected to login page. So that is good.
However, I have a problem with AutoComplete textbox which is also available on the same page among buttons and link. If user leave the app open and comes back after page authentication cookie is expired and enter a value in autocomplete textbox, then textbox doesn't do anything, it works as there is no data to filter and doesn't even throw an error. I would expect it to redirect user to login page or refresh the token.
I suppose that could be known to those who uses Jquery or ajax functions or telerik controls to how to check for token. I am just new to all that.
Just in case if the code is needed so here it is.
<form action="@Url.Action("Transaction", "Job")" method="POST">
<div>
<div class="col-xs-4 k-content py text-left">
@{
try
{
@(Html.Kendo().AutoComplete()
.Name("searchValue") //chaninging the name of the class to UserModel
.DataTextField("SearchString") //DataTextField("dataField")
.Filter("contains")
.MinLength(2)
.HtmlAttributes(new {style = "width:100%"})
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAutoComplete", "Job")
.Data("onAdditionalData");
})
.ServerFiltering(true);
})
//.Events(e => e.DataBound("onDataBound"))
)
}
catch (Exception e)
{
//this.RedirectToAction("Reporting", "ReportManagement");
}
}
i am getting the error when i use @html.kendo()
it showing are you missing any directives
>please suggest any solution
Hi I am using the Autocomplete textbox. It finding to the datasource fine. Just like Product is being used in the demo.
1. My question is if I have a product list. And it has the column product type , and I want to captrue the value of prodcut type then how I can do that. Product is binds with the userId.
2. I have a model class as
ModelViewMY {
date TodaysDate {get;set} // date is not part of the list.
List<Users> Users {get;set}
}
Question now: if I am using the AutoComplete in my mvc project then how I can set the DataTextFiled(Useres.UserId). I tried but I am getting errors.
@(Html.Kendo().AutoComplete()
Hey,
i've got kendo grid with filter row, i'm trying to hook-up all filter inputs to custom kendoAutoComplete(...) components.
Every column definition:
...
columns.Bound(x => x.ColumnName).Filterable(x => x.Cell(y => y.Template("onFilterAutocomplete")));
...
Template function definition:
function onFilterAutocomplete(e)
{
var columnName = $(e.element).closest('span[data-field]').data('field');
e.element.kendoAutoComplete({
dataSource: {
transport: {
read: {
url: '@urlFilterAutocomplete',
type: 'POST',
data: {
field: columnName,
text: /* ... how to get currently entered text here dynamically? ... */
}
}
}
}
});
}
Controller:
[HttpPost]
public async Task<JsonResult> FilterAutocompleteAsync(string field, string text) => Json(/*... db ...*/);
Hello,
i'm using MVC5 Razor helper to create grid and i'm trying to show specific autocomplete values in filter row. As i undestood it from forums and docs i have to replace standard filter row input by manually creating kendoAutoComplete(...) with my own dataSource, as shown for example here with classic filter menu:
https://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization
or here with filter row:
https://www.telerik.com/forums/server-side-filtering-with-row-filter-mode-filters-too-soon!
My custom JS autocomplete:
<script>
function onFilterAutocomplete(e)
{
e.element.kendoAutoComplete({
filter: 'contains',
dataSource: {
serverFiltering: true,
serverSorting: true,
transport: {
read: '@Url.Action("FilterAutocompleteAsync")'
}
}
});
}
</script>
My server method:
[HttpPost]
//[ValidateAntiForgeryToken]
public async Task<JsonResult> FilterAutocompleteAsync([DataSourceRequest]DataSourceRequest dataSourceRequest) => Json(/*... db stuff...*/);
When i try to replace input by defining:
columns.Bound(x => x.ColumnName).Filterable(x => x.Cell(y => y.Template("onFilterAutocomplete")));
my JS function is executed on grid init and no errors are shown in browser console. But when i try to filter, the automatic autocomplete on filter input keeps showing values as normaly from grid dataSource (standard behaviour) and my controller method won't get called.
If i try to replace input by defining:
columns.Bound(x => x.ColumnName).Filterable(x => x.UI("onFilterAutocomplete")));
my JS function won't get called at all.
What am i doing wrong here?
PS: I've tried with following versions:
telerik.ui.for.aspnetmvc.hotfix.2019.2.619.commercial.digitally-signed
and
telerik.ui.for.aspnetmvc.hotfix.2021.2.511.commercial.digitally-signed
Good day guys,
how possible is this, to send input textbox value to autocomplete textbox while typing. and the autocomplete should be set to readonly.
see attached image
kind regards
The code below is within a poup editor when user click the EDIT button in a row of a grid.
I want to handle when autocomplete field changed.
I added .Events(e => e.Change("autocomplete_change")) in the wrapper and add a javascipt function autocomplete_change() after the wrapper
when run it and click one of the edit button in a grid row, I got autocomplete_change is not defined error and the popup will show under the grid without any data.
Is there anyone could help me to let me know how to fix it and what's going on.
thank you very much.
@(Html.Kendo().AutoCompleteFor(model => model.AnswerA)
.Name("AnswerA")
.DataTextField("Answer")
.Placeholder("Type a answer")
.Filter("Contains")
.MinLength(5)
.HtmlAttributes(new { style = "width:100%" })
.Height(520)
.Events(e => e.Change("autocomplete_change"))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("ResponseRead", "Method")
.Data("onAnswerAData");
})
.ServerFiltering(true);
})
)
<script>
function autocomplete_change() {
alter("call ShowAddingAnswerPrompt");
}
</script>
I have a form with autocomplete the works fine until I post the form and it comes back. Then when entering data in the field, it does go to the server to filter, but does not show a dropdown.
Is there a way to reset the autocomplete on the form return?