Help with autocomplete for incell editing

[Mark]

I am attempting to use the autocomplete for incell editing. I have been searching and followed several examples but I can't get my code to work. When I select the cell, the current value deletes and the "working" spinner shows but no suggestions are listed.

Below is the code for the Grid, AutoComplete, and Controller function.

Index

@(Html.Kendo().Grid<Timecard.Models.TimecardViewModel>()
    .Name("timecard")
    .ToolBar(toolbar => toolbar.Create().Text("ADD").HtmlAttributes(new { title = "Add employee" }))
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Columns(columns =>
    {
        columns.Bound(p => p.EmployeeName).Width(170).EditorTemplateName("_InCellAutoCompleteEditor");
        columns.Bound(p => p.MonST).Filterable(false).Sortable(false).Format("{0:n1}").Title("Mon ST");
        columns.Bound(p => p.MonOT).Filterable(false).Sortable(false);
        columns.Bound(p => p.MonDT).Filterable(false).Sortable(false);
        columns.Bound(p => p.TueST).Filterable(false).Sortable(false);
        columns.Bound(p => p.TueOT).Filterable(false).Sortable(false);
        columns.Bound(p => p.TueDT).Filterable(false).Sortable(false);
        columns.Bound(p => p.WedST).Filterable(false).Sortable(false);
        columns.Bound(p => p.WedOT).Filterable(false).Sortable(false);
        columns.Bound(p => p.WedDT).Filterable(false).Sortable(false);
        columns.Bound(p => p.ThuST).Filterable(false).Sortable(false);
        columns.Bound(p => p.ThuOT).Filterable(false).Sortable(false);
        columns.Bound(p => p.ThuDT).Filterable(false).Sortable(false);
        columns.Bound(p => p.FriST).Filterable(false).Sortable(false);
        columns.Bound(p => p.FriOT).Filterable(false).Sortable(false);
        columns.Bound(p => p.FriDT).Filterable(false).Sortable(false);
        columns.Command(command =>
        {
            command.Edit().UpdateText("Save");
            command.Destroy().HtmlAttributes(new { title = "Delete highlighted employee" });
        }).Title("Options").Width(150);
    })
    .Sortable()
    .Scrollable()
    .Filterable()
    .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Single)
        .Type(GridSelectionType.Cell)
    )
    .HtmlAttributes(new { style = "height:650px;width:1580px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(100)
        .Model(model => model.Id(p => p.EmployeeCode))
        .Read(read => read.Action("Employee_Read", "Timecard"))
        .Create(create => create.Action("Employee_Create", "Employee"))
        .Destroy(destroy => destroy.Action("Employee_Delete", "Employee"))
    )
)

 

_InCellAutoCompleteEditor

@(Html.Kendo().AutoComplete()
    .Name("EmployeeName")
    .Filter("startswith")
    .DataTextField("employeeName")
    .ValuePrimitive(true)
    .Placeholder("Select...")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("Employee_Read", "Timecard");
        })
        .ServerFiltering(false);
    })
)

 

TimecardController

public ActionResult Employee_Read([DataSourceRequest]DataSourceRequest request)
{
    DataTable dt = new DataTable();

    using (SqlConnection conn = new SqlConnection("Server={IPAddress};DataBase={DB};Integrated Security=SSPI"))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "uspEmployeeGet";
            cmd.CommandType = System.Data.CommandType.StoredProcedure;
            cmd.Connection = conn;
            conn.Open();

            dt.Load(cmd.ExecuteReader());
        }
    }

    var dsResult = dt.ToDataSourceResult(request);
    return Json(dsResult);
}

 

 

 

[Mark]

I have changed the code to more of what the final code will be but I still need help. The grid loads its data from a stored procedure. However, the autocomplete will get its lookup data from a different stored procedure. When I click in the autocomplete cell no results are found but the stored procedure is returning results.

GRID

<div id="employeeTimecard">
    @(Html.Kendo().Grid<Timecard.Models.TimecardViewModel>()
       .Name("timecard")
       .ToolBar(toolbar => toolbar.Create().Text("ADD").HtmlAttributes(new { title = "Add employee" }))
       .Editable(editable => editable.Mode(GridEditMode.InCell))
       .Columns(columns =>
        {
            columns.Bound(p => p.Job).Filterable(false).Sortable(false).Width(115).EditorTemplateName("_InCellAutoCompleteEditor").Title("Job");
            columns.Bound(p => p.Task).Filterable(false).Sortable(false).Width(100);
            columns.Bound(p => p.TaskName).Filterable(false).Sortable(false).Width(150);
            columns.Bound(p => p.SubTask).Filterable(false).Sortable(false).Width(100);
            columns.Bound(p => p.SubTaskCompDate).Filterable(false).Sortable(false).Width(75);
            columns.Bound(p => p.TravelPay).Filterable(false).Sortable(false).Width(75).Title("Travel Pay (Total)");
            columns.Bound(p => p.SpecialPayRate).Filterable(false).Sortable(false).Width(75);
            columns.Bound(p => p.Comment).Filterable(false).Sortable(false).Width(150);
            columns.Bound(p => p.MonST).Filterable(false).Sortable(false).Format("{0:n1}").Title("Mon ST").Width(40);
            columns.Bound(p => p.MonOT).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.MonDT).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.TueST).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.TueOT).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.TueDT).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.WedST).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.WedOT).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.WedDT).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.ThuST).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.ThuOT).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.ThuDT).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.FriST).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.FriOT).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.FriDT).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.SatST).Filterable(false).Sortable(false).Hidden(true).Width(40);
            columns.Bound(p => p.SatOT).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.SatDT).Filterable(false).Sortable(false).Width(40);
            columns.Bound(p => p.SunST).Filterable(false).Sortable(false).Hidden(true).Width(40);
            columns.Bound(p => p.SunOT).Filterable(false).Sortable(false).Hidden(true).Width(40);
            columns.Bound(p => p.SunDT).Filterable(false).Sortable(false).Width(40);
        })
        .Sortable()
        .Scrollable()
        .Filterable()
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Single)
            .Type(GridSelectionType.Cell)
        )
        .HtmlAttributes(new { style = "height:650px;width:1580px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(100)
            .Model(model => model.Id(p => p.EmployeeCode))
            .Read(read => read.Action("Load", "Timecard"))
        )
    )
</div>

 

AUTOCOMPLETE

@model string;

@(Html.Kendo().AutoComplete()
  .Name("Job")
  .Filter("startswith")
  .DataTextField("Job")
  .ValuePrimitive(true)
  .Placeholder("Select...")
  .Template("#= ProjectNumber # | #= ProjectName #")
  .AutoWidth(true)
  .DataSource(dataSource =>
  {
    dataSource.Ajax();
    dataSource.Read(read =>
    {
        read.Action("Project_Read", "Timecard");
    })
    .ServerFiltering(false);
  })
)

 

[Mark]

I forgot to mention that I still have the issue of the selected value not populating the grid cell.

[Alex Hajigeorgieva]

Hi, Mark,

Thank you very much for the provided code snippets. I used it to replicate the behaviour which you mentioned.

There is nothing wrong with the code, unfortunately, this is a known issue that we have which duplicates the name of the editor and that results in the lack of binding. If you inspect the autocomplete markup, you will most likely see name="Job.Job" and data-bind="value:Job.Job"

https://github.com/telerik/kendo-ui-core/issues/3447

It seems that creating the Kendo UI AutoComplete with a Name as an empty string fixed this for me, could you try that in your project as well?

@model string

@(Html.Kendo().AutoComplete()
   .Filter("startswith")
   .Name("")
   .DataTextField("Job")
   .ValuePrimitive(true)
   .AutoWidth(true)
   .Template("#= ProjectNumber # | #= ProjectName #")
   .DataSource(dataSource =>
   {
       dataSource.Ajax();
       dataSource.Read(read =>
       {
         read.Action("Project_Read", "Grid");
         })
         .ServerFiltering(false);
   })
)

Please accept my apology for this inconvenience. I will raise the priority in the issue as the suggested workaround there did not work for this case.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Mark]

Thank you so much. Using an empty string for the Name did work as a workaround.

[Alex Hajigeorgieva]

Hi, Mark,

I am pleased to hear this and to let you know that we have added a milestone to the issue now for our next major release:



The fix should be available by then. 

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Rajesh]

any example  using editor templates for asp.net core using tag helpers?

[Alexander]

Hi Rajesh,

As of the 2023.2.606 release, a variety of Telerik UI for ASP.NET Core suite exposes a new Template component that permits the ability to utilize TagHelpers in a symbiotical manner.

For the Grid's columns in particular such integration is demonstrated within the following section's first bullet point:

• Components Integration (Documentation)

For your scenario based on a previous public communication of ours, this will look in the following manner:

Grid:

<kendo-grid name="gridCheckCalls" on-edit="onEdit">
    ...
    <columns>

        <column field="TechnicianAssigned" width="250">
            <column-editor-template>
                 <kendo-autocomplete name="TechnicianAssigned" data-bind="value:TechnicianAssigned" style="width: 100%;"
                                     datatextfield="ename"
                                     filter="FilterType.Contains"
                                     separator=", ">
                <datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
                     <transport>
                            <read url="@Url.Action("EmpSearchData","Home")" data="additionalData"/>
                     </transport>
                 </datasource>
                </kendo-autocomplete>
            </column-editor-template>
        </column>
    </columns>
</kendo-grid>

JavaScript:

<script>
    var model; // Flag variable.
    function onEdit(e){ // Required for preserving the to-be-edited model.
        model = e.model;
    }
    function additionalData() {
        var autoComplete = $("input[name='TechnicianAssigned']").data("kendoAutoComplete"); // Retrieve the AutoComplete Editor's value.
        return { 
            'tripId': model.TripID, // Utilize the flag variable.
            'text': autoComplete.value() // Supply the AutoComplete's value.
        };
    }
</script>

This would then ensure that the endpoint's metadata is supplemented within the request payload:

For your convenience and that of the community, I am attaching a runnable sample that tackles such a scenario.

I hope this information helps.

[Rajesh]

This Helps Thanks a ton.