Help with autocomplete for incell editing

6 posts, 0 answers
  1. Mark
    Mark avatar
    30 posts
    Member since:
    Jan 2019

    Posted 01 Mar 2019 Link to this post

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

     

     

     

  2.
  3. Mark
    Mark avatar
    30 posts
    Member since:
    Jan 2019

    Posted 05 Mar 2019 Link to this post

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

     

  5. Mark
    Mark avatar
    30 posts
    Member since:
    Jan 2019

    Posted 05 Mar 2019 in reply to Mark Link to this post

    I forgot to mention that I still have the issue of the selected value not populating the grid cell.
  7. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 06 Mar 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8.
  9. Mark
    Mark avatar
    30 posts
    Member since:
    Jan 2019

    Posted 06 Mar 2019 in reply to Alex Hajigeorgieva Link to this post

    Thank you so much. Using an empty string for the Name did work as a workaround.
  11. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 11 Mar 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top