Open modal with search results using ajax and Telerik Kento

Question

I'm kind of new to using Telerik Kendo, and this is what I need to do:

I have a page with a search textbox. When you click on the search button, a Kendo grid appears with suggestions, and when you select any of the suggestions, a detail section appears on the bottom of the page.

What I need is when you click on the search button, a modal should open with the suggestions Kendo grid, and when you select any suggestions, the modal just closes and then shows the details form after the search section.

This the code at this time:

Search panel:

<div style="margin:5px; padding:10px">
    @using (Ajax.BeginForm("SearchCustomer",
        new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "searchResults",
            HttpMethod = "POST",
            OnSuccess = "SearchSuccess",
            LoadingElementId = "loadingImage",
            OnFailure = "SearchFail",
        }))
    {
        @Html.AntiForgeryToken()

        <div class="input-group" style="justify-content:right">
            <span class="input-group-btn">
                Buscar Cliente:
                <input id="searchText" placeholder="Identificación o nombre" name="searchText" type="text" class="form-control" style="height:22px;" />
                <input id="distributorId" name="distributorId" type="hidden" class="form-control" value="@Model" />
                
                <button id="btnSearch" type="submit" class="btn btn-default btn-sm" style="margin:0px; padding:0px" @*data-toggle="modal" data-target="#loginModal"*@>
                    <i class="icon-search" style="margin:2px"></i> Buscar
                </button>
            </span>
        </div>
        <br />
    }

    <div id="searchResults" style="margin:2px; padding:3px">
    </div>

</div>

Selected customer:

    <script type="text/javascript">

    function onChange(arg) {
        var selectedRows = this.select();
        var dataItem = this.dataItem(selectedRows[0]);

        var url = "@Url.Action("CustomerLookup")" + "?customerId=" + dataItem.CustomerId + "&distributorId=" [email protected]('_')[1];
        $("#loadingImage").show();

        $('#currentSelectedCustomer').load(url, function (result) {
            $("#loadingImage").hide();
            if (result != "Error") {
                $("#customerPreview").show();
            }
        });
    }
</script>

@(Html.Kendo().Grid<CrediNet.Web.Models.CustomerModel>()
    .Name("CustomersResultGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.FirstName);
        columns.Bound(p => p.LastName);
        columns.Bound(p => p.LastName2);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
    .Events(events => events.Change("onChange"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.CustomerId))
        .Read(r => r.Action("SearchCustomer_Read", "POS", new { searchText = Model.Split('_')[0] }))
    )
)

<div id="customerPreview" style="display:none;">
    <br />
    <div class="widget-box">
        <div class="widget-header widget-header-small">
            <h5 class="lighter">Cliente</h5>
        </div>

        <div class="widget-body">
            <div class="widget-main">
                <div id="currentSelectedCustomer">

                </div>
            </div>
        </div>
    </div>
</div>

And then current celected customer page:

@model CrediNet.Web.Models.CustomerModel

<script type="text/javascript">
    function EditCustomer() {
        $("#loadingImage").show();

        var url = "@Url.Action("EditCustomer", new { id = Model.CustomerId })";

        $.ajax({
            url: url,
            success: function (result) {
                $("#selectClientPanel").html(result);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                if (xhr.status === 0) {
                    notificationHelper.Show("Servidor no responde", 2, false);
                } else {
                    notificationHelper.Show(xhr.responseText, 2, false);
                }
            },
            complete: function (jqXHR, status) {
                $("#loadingImage").hide();
            }
        });
    }
</script>

<!-- Se inhabilitará hasta encontrar la forma de que no se repitan los Clientes y se pueda editar el mismo-->
<button id="btnEditCustomer" onclick="EditCustomer();" class="btn btn-purple btn-sm">
    <i class="icon-pencil"></i> Editar cliente
</button>
<br />
<br />

<div class="form-horizontal">

    @if (Model.Flag)
    {
        <div class="form-group">
            <div class="col-xs-2">
            </div>
            <div class="col-xs-8">
                <strong>
                    <span style="color: red;">
                        Este cliente ha sido Inactivado. <br />
                        Razón: @Model.FlagComments
                    </span>
                </strong>
            </div>
        </div>
    }

    <!-- info básica -->
    <div class="form-group">
        @Html.LabelFor(m => m.FirstName, new { @class = "control-label col-xs-2" })
        <div class="col-xs-8">
            <strong>
                @Html.DisplayFor(m => m.FirstName) @Html.DisplayFor(m => m.LastName) @Html.DisplayFor(m => m.LastName2)
            </strong>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.DrivingLicenceCode, new { @class = "control-label col-xs-2" })
        <div class="col-xs-8">
            <strong>@Html.DisplayFor(m => m.DrivingLicenceCode)</strong>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.IFECode, new { @class = "control-label col-xs-2" })
        <div class="col-xs-8">
            <strong>@Html.DisplayFor(m => m.IFECode)</strong>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.PassportCode, new { @class = "control-label col-xs-2" })
        <div class="col-xs-8">
            <strong>@Html.DisplayFor(m => m.PassportCode)</strong>
        </div>
    </div>
    
    <!-- dirección -->
    <div class="form-group">
        @Html.LabelFor(m => m.SimpleAddressModel, new { @class = "control-label col-xs-2" })
        <div class="col-xs-8">
            <strong>@Model.SimpleAddressModel.StreetName #@Model.SimpleAddressModel.ExtNumber @Model.SimpleAddressModel.IntNumber [email protected] @Model.SimpleAddressModel.CityName</strong>
        </div>
    </div>
    
    <!-- Teléfonos -->
    <div class="form-group">
        @Html.LabelFor(m => m.PhoneNumbers, new { @class = "control-label col-xs-2" })
        <div class="col-xs-8">
            @foreach (var phone in Model.PhoneNumbers)
            {
                <div><strong>@phone.Phone</strong></div>
            }
        </div>
    </div>

</div>


<script>
    @if(Model.Flag)
    {
        <text>
            $("#CustomerId").val(0);
            $('#btnSubmitSale').prop('disabled', true);
            bootbox.alert("Este cliente ha sido desactivado. <br />Razón: @Model.FlagComments");
        </text>
    }
    else
    {
        <text>
            $("#CustomerId").val(@Model.CustomerId);
            $('#btnSubmitSale').prop('disabled', false);
        </text>
    }
    
    //$("#showPoints").val(@Model.IsDistributor.ToString().ToLower());

    if (@Model.IsDistributor.ToString().ToLower() == true) {
      $(".points").removeAttr("hidden");
    }

    if (@Model.IsDistributor.ToString().ToLower() == true) {
        $("#isDistributor").prop("checked", true);
        $("#pointCheck").css("display", "inline");
    } else {
        $("#isDistributor").prop("checked", false);
        $("#pointCheck").css("display", "none");
    }
    
    $( "#isDistributor" ).trigger( "change" );

</script>

Any ideas?