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"))
)
)
9 Answers, 1 is accepted
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
Rank 1
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.
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
Rank 1
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>")
)
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
Rank 1
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
Rank 1
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,
Rank 1
Hello,
I was facing same issue but this worked like charm. Thanks Nencho and WH.