Remote validation of Add new item template in MultiSelect

[Ramu]

When user try to add new items I have to validate the item by calling the service and if its valid I need to add it to the list. I am planning to use the noDataTemplate for this, but not sure how to validate the user entry and sow the option to add only when it is valid. Could you please advise on that

To explain it better, in multiselect I am displaying the List of existing available users in the list. but they can valid users outside the list b checking whether it's valid user or not by calling some external service. if it is valid I want to show the option add that item.

I tried creating noDataTemplate, when I use it as normal  javascript(with out ajax callback) like below it's working as expected

<script id="noDataTemplate" type="text/x-kendo-tmpl">
        # var value = instance.input.val(); #
        # var id = instance.element[0].id; #
        # if(value == 'validUser') {#
        <div>
            do you want to add the user - <span style="font-weight:bold">'#: value #' </span>?
        </div>
        <br />
        <button class="k-button" onclick="addnew('#: id #', '#: value #')" ontouchend="addnew('#: id #', '#: value #')">add new item</button>
        # } else { console.log('value:  ' + data);#
        <div>
            user does not exists
        </div>
        # }  #
    </script>

But as I have to validate user I used the template as below, it's executing without error, but the Html is not rendering in the template. it's showing the notemplate area, but there is no text inside it. (not even showing no data found). looks it's the issue because of callback. Please let me know how to solve this issue.

<script id="noDataTemplate" type="text/x-kendo-tmpl">
        # var value = instance.input.val(); #
        # var id = instance.element[0].id; #
        # $.post("@Url.Action("validateuser", "AdminWorkflow")", {alias: instance.input.val()}, function(data){#
        # if(data) {
               <div>
            do you want to add the user - <span style="font-weight:bold">'#: value #' </span>?
        </div>
        <br />
        <button class="k-button" onclick="addnew('#: id #', '#: value #')" ontouchend="addnew('#: id #', '#: value #')">add new item</button>
        # } else { console.log('value:  ' + data);#
        <div>
            user does not exists test
        </div>
        # }  #
        #})  #
    </script>

[Aleksandar]

Hi Ramu,

If I understand correctly the example is based on the Add New Item Demo for the MultiSelect. If that is the case,  a possible solution could be to execute an ajax call for the validation in the addnew function after the user confirms that the record should be added. Then, if the validation passes you can add the new item, otherwise notify the user for the error. 

You can find more details on how to interrupt the normal flow of the confirm dialog here. 

I hope the above helps you implement the desired functionality.

Regards,
Aleksandar
Progress Telerik