How to Create the Customized Kendo Auto Complete as a Shared Control into ASP.NET MVC using VB

Introduction

This tip shows how to use kendo auto complete control to make it customized for our requirement and use it as a shared control into our ASP.NET MVC application.

Background 

We have generally used the kendo auto complete control into the many .NET MVC applications. Now suppose if we have a requirement to customize this auto complete according to our own way for example.

If I have to show many existing organization lists of my application into the auto complete control and if user selects the 0^th Index option, then we need to open the dialog box to allow for creating the new organization record as well as this control should be as shared control for application, then this kind of development requirement can be achieved with this example.

Using the Code

Here, I am trying to show you this by the code example from one of my existing application code with the three very simple steps. I hope it will help someone looking for this.

Steps 1 (How to Implement)

Go to view/shared folder of ASP.MVC web project and then create the partials view with the name - "OrganizationAutoComplete.vbhtml"

Here we have declared modelType as a string, i.e., It will be the control name which we need to pass as a model from the actual page where we want to use this shared control.

So, when this shared control will render into the parent page where we have called this, then the Id of shared control will be the same as model value which we have passed.

@modelType String
@Code
  Dim ControlId = Model  
End Code
 
<input type="text" id="@Model" class = "Organization" 
style="width:250px" required="required" />
 <input type="hidden" id="hdnOrgId_@Model"  
 class = "org" value="" />
     
           <span class="clr" style="color:red;font-size: 12px;"> </span>  
 
 
<script type="text/javascript">
 
    var searchText = $('.Organization').val
 
        var selectedItem = "";
        $("#"+'@Model').kendoAutoComplete({
            minLength: 3,
            dataTextField: "Organization",
 
            template: '${ data.Organization }' +
                         '<span style="display:none;" 
                         id="@Model${ data.Index }"> ${ data.OrganizationId }
                         </span>',
            dataSource: {
                type: "json",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 20,
                transport: {
                    read: "@Url.Action("JsonGetOrganization", 
                    "OrganizationOperations")",
                }
            },
            change: function (e) {
 
                if (selectedItem == "0")
                    $("#"+'@Model').val(""); 
            },
            select: onOrgSelect
        });
 
        function onOrgSelect(e) {
 
            if ($("#"+'@Model'+ e.item.index()).html() == 0) {
                selectedItem = "0";
 
                $("#"+'@Model').val("");
                $("#hdnOrgId_"+'@Model').val("");
                controlCreatesOrg = $("#"+'@Model').attr("id");
                controlCreatesOrgId = $("#hdnOrgId_"+'@Model').attr("id");
 
                var url = '@Url.Action("CreateNewOrgnization", "OrganizationOperations")';           
                $.ajax({
                    type: 'GET',
                    cache: false,
                    url: url,
                    datatype: "json",
                    success: function (data) {
                        selectedItem = "";
                        $("#divNewOrganization").html(data);
                        $("#divNewOrganization").dialog({
                            autoOpen: true,
                            title: 'Create New Organization',
                            width: 800,
                            modal: true,
                            beforeClose: function (event, ui) {
                                $("#divNewOrganization").html('');
                                $("#divNewOrganization").dialog('destroy');
                            }
                        });                      
                        $("#divNewOrganization").dialog('open');
                    }
                });
            }
            else {
               
                $("#hdnOrgId_"+'@Model').val($("#"+'@Model'+ e.item.index()).html());
            }
        }
 
</script>

Step 2 (How to Call this Shared Function)

From the parent page, we can call this shared control like this:

@html.Partial("EditorTemplates/OrganizationAutoComplete","txtOrganization")

Here "txtOrganization" is passed as a model, so this will be the Id of the auto complete control.

Step 3 (Demonstration)

When you will start typing the name of any organization into auto complete, then it will look like this:

Here at 0^th index, there is a red highlighted option to create the new organization. When you click on this, it will open a dialog box where the new organization can be created. And if any other option will be selected apart from 0^th index, then the existing organization can be selected.