Autocomplete On Grid Column. Value Empty When I Hit Edit.

10 posts, 1 answers
  1. WH
    WH avatar
    11 posts
    Member since:
    Apr 2017

    Posted 26 Jul 2017 Link to this post

    Is there a way to make the value from an autocomplete column not go blank by default when you click the "Edit Button"?

    The grid is correctly loading, but when I hit "Edit" instead of defaulting to the value that is loaded for my autocomplete column in "View" mode I get a blank value.

     

        @(Html.Kendo().Grid<CostCenterModel>()
            .Name("settinggrid")
            .AutoBind(true)
            .Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(false))
            .Columns(columns =>
            {
                columns.Bound(c => c.CompositeId).Hidden();
                columns.Bound(c => c.CostCenterOwner.NameAndId).EditorTemplateName("_ucUsersAutocomplete");
                columns.Bound(c => c.CostCenter);
                columns.Bound(c => c.Setting);
                columns.Bound(c => c.SendEmailsFlag).ClientTemplate("<input type='checkbox' # if (SendEmailsFlag) { #" +
                                                                        " checked='checked' " + "# } # onclick='return false' /> ").Title("Send Emails");

                columns.Command(commands =>

                { commands.Edit(); commands.Custom("Delete").HtmlAttributes(new { @class = "k-delete" }).Click("deleteRow"); }
                ).Title("Action").Width("100");

            })

            .ToolBar(toolbar => toolbar.Create().Text("Add New Cost Center Owner"))
            .Scrollable()
            .Sortable()
            .Filterable()
            .ColumnMenu()
            .Resizable(rsb => rsb.Columns(true))
            .Reorderable(r => r.Columns(true))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model =>
                {
                    model.Id(c => c.CompositeId); // Specify the property which is the unique identifier of the model.
                    model.Field(c => c.CostCenterOwner).DefaultValue(new UserModel());

                })
                .Read(read => read.Action("Settings_ReadCostCenter", "Admin"))
                .Update(update => update.Action("Settings_UpdateCostCenter", "Admin"))
                .Create(create => create.Action("Settings_CreateCostCenter", "Admin"))
                )




        )

  2. Nencho
    Admin
    Nencho avatar
    1736 posts

    Posted 28 Jul 2017 Link to this post

    Hello,

    In order to have the Autocomplete as editor with bound field value, you have two options - use the AutoCompleteFor (m=>m) or AutoComplete() with the Name exactly corresponding the the Column field. 

    Please give it a try at your end and let us know the results. If the issue still persist, please provide us with the implementation for the custom editor that you use, in order to locally test it.

    I am looking forward to your reply.

    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. WH
    WH avatar
    11 posts
    Member since:
    Apr 2017

    Posted 28 Jul 2017 Link to this post

    I think you misunderstand the problem.  My Autocomplete works fine.

     

    It's just when I click the "edit" button on the form it goes blank.  It doesn't remember the value that was there before I clicked "edit".If I start typing, the autocomplete autocompletes like it is supposed to.

  4. Nencho
    Admin
    Nencho avatar
    1736 posts

    Posted 31 Jul 2017 Link to this post

    Hello,

    Such behavior as the described one - blank editor with no pre-selected value, will appear when the AutoCompleteFor is not used or the Name of the widget does not correspond to the field, which the Autocomplete should edit. This is the reason why such implementation was suggested in my previous reply.

    However, if the issue still persist, having the autocomplete set-up with the advised implementation, I would like to ask you to isolate the issue in a simplified runnable example and provide us with it. Since the EditorTemplate is not provided we could hardly mock the environment and replicate the issue at your end.


    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. WH
    WH avatar
    11 posts
    Member since:
    Apr 2017

    Posted 31 Jul 2017 in reply to Nencho Link to this post

    This was my control:

    (I've tried renaming it "NameAndId") and I've tried changing it to "AutoCompleteFor".  Neither seem to do anything different.  



    @(Html.Kendo().AutoComplete()
            .Name("_ucUsersAutocomplete")
            .DataTextField("NameAndId")
            .ValuePrimitive(true)
            .MinLength(3)



            .DataSource(source =>
            {
                source.Custom()
                  .ServerFiltering(true)
                  .Type("aspnetmvc-ajax")
                  .Transport(transport => { transport.Read("ActiveUsers", "AutoComplete"); });
            })



            .Template("<div class=\"autocomplete-dropdown\"> <span class=\"left-image\" > <img src=\" #: data.GravatarHash #  \" ></span>" +
                    "<span class=\"right-text\"><b>#: data.NameAndId #</b></span><span class=\"sub-span\">#: data.Title #</span> </div>")

    )

  6. Nencho
    Admin
    Nencho avatar
    1736 posts

    Posted 02 Aug 2017 Link to this post

    Hello,

    I have revised the demonstrated implementation and locally tested it. It is working properly at my end. The only difference that I noticed is the fact that in the demonstrated code snippet, there is a data source implemented. If this data differs in any way from the one that is used for the column - the experienced issue could arise.

    This is why, I would suggest you to follow the implementation demonstrated in our documentation article on the Editor Templates:

    http://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates#configuration-Create

    Please note the Step4, where the data used for column is stored in the ViewData. This data is later used in the Editor Template to populate the widget.

    Please give it a try and your end and let us know the result.

    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. WH
    WH avatar
    11 posts
    Member since:
    Apr 2017

    Posted 02 Aug 2017 in reply to Nencho Link to this post

    I'd really rather avoid pre-loading the view data.  Is that the only way to get the Editor Templates to work?  I could have thousands of rows of data in that table, I'd hate to pass all of them to the client every time someone opened the page.  
  8. Answer
    Nencho
    Admin
    Nencho avatar
    1736 posts

    Posted 04 Aug 2017 Link to this post

    Hello,

    The Grid would work without storing the data in ViewData - if you request the data from the editor template. Indeed, storing large data in the ViewData is not a preferable approach.

    I have reiterated trough our communication and I noticed something the previous provided example of the EditorTemplate. I noticed that the advised usage of the ColumnName is set for the DataTextField, while it should be used for the Name. Please test the examples below at your and and let us know the result:

    @model string
     
    @(Html.Kendo().AutoCompleteFor(m=>m)
                    .DataTextField("NameAndId")
                    .ValuePrimitive(true)
                    .MinLength(3)
                    .DataSource(source =>
                    {
                        source.Custom()
                          .ServerFiltering(true)
                          .Type("aspnetmvc-ajax")
                          .Transport(transport => { transport.Read("ActiveUsers", "AutoComplete"); });
                    })
                    .Template("<div class=\"autocomplete-dropdown\"> <span class=\"left-image\" > <img src=\" #: data.GravatarHash #  \" ></span>" +
                            "<span class=\"right-text\"><b>#: data.NameAndId #</b></span><span class=\"sub-span\">#: data.Title #</span> </div>")
    )*
     
    or
     
    @(Html.Kendo().AutoComplete()
                .Name("CostCenterOwner.NameAndId")
                .DataTextField("NameAndId")
                .ValuePrimitive(true)
                .MinLength(3)
                .DataSource(source =>
                {
                    source.Custom()
                      .ServerFiltering(true)
                      .Type("aspnetmvc-ajax")
                      .Transport(transport => { transport.Read("ActiveUsers", "AutoComplete"); });
                })
                .Template("<div class=\"autocomplete-dropdown\"> <span class=\"left-image\" > <img src=\" #: data.GravatarHash #  \" ></span>" +
                        "<span class=\"right-text\"><b>#: data.NameAndId #</b></span><span class=\"sub-span\">#: data.Title #</span> </div>")
    )

    If the issue still persist, I would like to ask you to submit a support ticket, along with a runnable sample attached, in order to locally replicate the experienced issue and pin down the reason for it.

    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. WH
    WH avatar
    11 posts
    Member since:
    Apr 2017

    Posted 07 Aug 2017 in reply to Nencho Link to this post

    The second option did work, thank you!!!!

     

    It looks like two lines are important to highlight here (if anyone else has the same problem and is reading this):

                .Name("CostCenterOwner.NameAndId")
                .DataTextField("NameAndId")

     

    The fully qualified name of "CostCenterOwner.NameAndId" was required for this to work for me.  Just calling it "NameAndId" did not work.  Also, the "DataTextField" needed to be there.  Leaving that off doesn't work for me.

     

    Having to fully qualify the name as "CostCenterOwner.NameAndId" gives me a few minor concerns because it means this will be less reusable than it otherwise would be; however that's a minor concern, I am glad to have this working.  

     

    Thank you,

     

     

  10. Supriya
    Supriya avatar
    1 posts
    Member since:
    Nov 2017

    Posted 05 Apr in reply to WH Link to this post

    Hello,

    I was facing same issue but this worked like charm. Thanks Nencho and WH.

Back to Top