Autocomplete Update Grid DataSource

9 posts, 1 answers
  1. Thomas
    Thomas avatar
    5 posts
    Member since:
    Apr 2014

    Posted 22 May 2014 Link to this post

    Currently I'm working on a Kendo UI Grid which has Autocomplete functionality in the cell of one column via the custom editor method. The Autocomplete dataSource is an array of objects that was received from a REST endpoint. When select an autocomplete entry, a create is fired to the REST endpoint and I also receive the created entry back. My problem is now, I need to use that new data to populate the cells of the grid so that the update method on all the cells works consistant, otherwise the Id that is necessary for the update is missing and I receive an error. The objects the Autocomplete searches in are different from the one that are necessary to populate the grid.
    Is there any way to manipulate the dataSource of the Grid from the select method of the Autocomplete within a cell of the grid?
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 26 May 2014 Link to this post

    Hello Thomas,

    If the other fields in the grid dataSource should be updated in the select event then you could set the values from the object to the model that is passed with the editor options e.g.
    function autocompleteEditor(container, options) {
        var model = options.model;
        $('<input data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoAutoComplete({
                select: function(e) {
                    var dataItem = this.dataItem(e.item.index());
                    model.set("field1", dataItem.field1);
                    ...
                },
                ...
            });
    }




    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Thomas
    Thomas avatar
    5 posts
    Member since:
    Apr 2014

    Posted 26 May 2014 in reply to Daniel Link to this post

    Hello Daniel,

    As far as I can see it, the options object is not in the scope of .kendoAutoComplete hence I cannot use it.
  5. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 28 May 2014 Link to this post

    Hello again Thomas,

    If you do not wish to use the parameter from the parent function scope then I can suggest to find the model from the row with the dataItem method:
    .kendoAutoComplete({
        select: function(e) {
            var dataItem = this.dataItem(e.item.index());
            var grid = $("#grid").data("kendoGrid");
            var row = this.wrapper.closest("tr");
            var model = grid.dataItem(row);
             
            model.set("field1", dataItem.field1);
            ...
        },
        ...
    });


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Thomas
    Thomas avatar
    5 posts
    Member since:
    Apr 2014

    Posted 28 May 2014 in reply to Daniel Link to this post

    Hello Daniel,

    in the former example I couldn't reach var model = options.model; from within the autocomplete. Your latest example though did work and I'm currently working with that one.
  7. con_ssc
    con_ssc avatar
    87 posts
    Member since:
    Apr 2014

    Posted 28 May 2014 in reply to Daniel Link to this post

    Hello Daniel,

    I have a follow up problem to setting the model on AutoComplete. I currently use it in a grid and it doesn't update the grid when I fill the model with the correct objects and values.
  8. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 30 May 2014 Link to this post

    Hello Stefan,

    Could you share the code that you are using?

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. con_ssc
    con_ssc avatar
    87 posts
    Member since:
    Apr 2014

    Posted 30 May 2014 in reply to Daniel Link to this post

    I was afraid you would ask that. I currently have no idea how to share the code since I use it in a CRM environment and get the data from different remote sources there.
  10. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 03 Jun 2014 Link to this post

    Hello again Stefan,

    Possible reasons for the grid not to be updated when changing the autocomplete text are:
    • The autocomplete input is not bound to the correct property. This could be caused by setting incorrect name(should be the same as the field name) to the input or for the value binding.
    • The autocomplete is bound to a string field and the field value is initially null. In this case the field will be considered as an object by default and you should use the data-value-primitive attribute or the valuePrimitive option to specify that the field should be bound to the autocomplete text field and not to the selected item.
    but without the code that you are using for the editor we can only guess what exactly is going wrong. 


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready