Setting value and getting dataItem to window variable

6 posts, 0 answers
  1. Drew Auman
    Drew Auman avatar
    17 posts
    Member since:
    Sep 2009

    Posted 26 Jul 2013 Link to this post

    I have an autocomplete that load and saves just fine. The problem is when I come back to the screen to edit the page, I am losing the value of the autocomplete.

    MVC View
    <input type="text" id="clientContactAutoComplete" class="k-autocomplete" />
    Javascript setting up field
    $("#clientContactAutoComplete").kendoAutoComplete({
        minlength: 4,
        placeholder: "Select Client Contact",
        dataSource: new kendo.data.DataSource({
            serverFiltering: true,
            transport: {
                read: {
                    url: '/DataService/LoadContacts',
                    dataType: "json"
                },
                parameterMap: function () {
                    return {
                        search: $("#clientContactAutoComplete").data("kendoAutoComplete").value()
                    };
                },
            },
            pageSize: 10
        }),
        dataTextField: "FullName",
        template: kendo.template($("#clientContactTemplate").html()),
        style: "width: 300px",
        select: function (e) {
            window.clientContactAutoCompleteDataItem = this.dataItem(e.item.index());  // this is the window variable I need to set  /////////////////////////
            var fullName = window.clientContactAutoCompleteDataItem.FirstName;
            if (window.clientContactAutoCompleteDataItem.MiddleName != null) {
                fullName = fullName + " " + window.clientContactAutoCompleteDataItem.MiddleName;
            }
            if (window.clientContactAutoCompleteDataItem.LastName != null) {
                fullName = fullName + " " + window.clientContactAutoCompleteDataItem.LastName;
            }
            window.clientContactAutoCompleteDataItem.FullName = fullName;
     
            // Add DSR information to the display part of the grid if necessary.
            if (!pipelineUtilities.isNullOrEmpty(window.clientContactAutoCompleteDataItem.DSRConsultantName)) {
                window.clientContactAutoCompleteDataItem.FullName = window.clientContactAutoCompleteDataItem.FullName + " {DSR - " + window.clientContactAutoCompleteDataItem.DSRConsultantName + "}";
            }
     
            GetOffLimitsText();
        },
    }).data("kendoAutoComplete");
    Javascript to set value to the field when coming back to the screen to edit
    // get the object
    var clientAC = $("#clientContactAutoComplete").data("kendoAutoComplete");
    // set the saved value to the field  
    clientAC.value(window.ClientFullName);  --- this is working
    // get the selected dataItem and set it to the window variable
    clientAC.search(window.ClientFullName);
    window.clientContactAutoCompleteDataItem = clientAC.dataItem(0); --- this is failing

    I need someway to get at that dataItem that was just set to the field and set it to the window variable, but I can't seem to make it work
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 29 Jul 2013 Link to this post

    Hi Drew,

    I have tested the functionality that you are refering to and everything was working fine. Could you please check my code example in this jsBin and tell me if I am missing something?

    Regards,
    Kiril Nikolov
    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. Drew Auman
    Drew Auman avatar
    17 posts
    Member since:
    Sep 2009

    Posted 29 Jul 2013 Link to this post

    I don't think you are missing anything. Your code looks like mine, but yours works.
    I attached a screenshot of the debugger to show you my values. dataItem is coming back undefined for me.
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 30 Jul 2013 Link to this post

    Hi Drew,

    If the value is undefined it means that the search method was not able to find the item in the AutoComplete widget. Can you please check the values you are searching for and the ones available in the AutoComplete. If this does not work, please send us a runnable demo of your project, that we can take a look into.

    Thank you in advance for your cooperation.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Drew Auman
    Drew Auman avatar
    17 posts
    Member since:
    Sep 2009

    Posted 30 Jul 2013 Link to this post

    I think the difference between our code is that in the jsBin you have the data defined on the page, and in mine, we get the data from an ajax call once there are 4 or more characters in the field. This pulls from a table containing over a million records, so we don't want to get it all on page load.

    Thinking along those lines, I believe when I am attempting to get the dataItem, the autocomplete has nothing in it.

    I need to figure out how to fill the datasource based on the saved information, then I should be able to use dataItem.

    I am not sure how I can get you a working copy of this page, there a many places where we hit the database as the user is filling things in.
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 30 Jul 2013 Link to this post

    Hi Drew,

    As I suggested in my previous post - the most probable reason for this behaviour is that the search method cannot find the item in the AutoComplete widget. As you suggest if the control is empty when you try to get the item, we got a pretty valid explanation for the misbehavior. However the reason for this falls outside of the standard support services, so I will not be able to assist you.

    Please, if you have any questions regarding the Kendo UI widgets, do not hesitate to contact us, we will be more than happy to assist you.
     
    Regards,
    Kiril Nikolov
    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