my controller loads the Resulting Partial View "SOMETIMES" at application launch

Question

I have a host page which has a .CSHTML view, which eventually calls a Partial view when we click on a Grid element. However sometimes when I launch my app, it starts with trying to load the partial view as a result. I am not sure why is that?

It has to try to load the partial View ONLY IF an element on the Grid is clicked but here it is calling the partial view without having clicked. Following my code snippet:

!DOCTYPE html>
@using (Html.BeginForm())
{
    <div id="clientsDb">
        @(Html.Kendo().Grid<Employee>()
              .Name("employeeGrid")
              .Columns(columns =>
              {
                  columns.Bound(c => c.Id).Width(140).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
                  columns.Bound(c => c.FirstName).Width(500).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
                  columns.Bound(c => c.LastName);
              })
              .HtmlAttributes(new {style = "height: 380px;"})
              .Scrollable()
              .Groupable()
              .Sortable()
              .Selectable()
              .Pageable(pageable => pageable
                  .Refresh(true)
                  .PageSizes(true)
                  .ButtonCount(5))
              .Filterable(filterable => filterable
                  .Extra(true)
                  .Operators(operators => operators
                      .ForString(str => str.Clear()
                          .Contains("Contains")
                          .IsEqualTo("Exactly matches")
                          .StartsWith("Starts with")
                          .DoesNotContain("Does not contain")
                          .EndsWith("Ends with")
                          .IsNotEqualTo("Is not equal to")
                      ))).DataSource(dataSource => dataSource
                          .Ajax()
                          .Read(read => read.Action("ReadEmployee", "Employee"))))
    </div>

    <script type="text/javascript">
        $("#employeeGrid").click(function() {
            var grid = $("#employeeGrid").data("kendoGrid");
            var currentSelection = grid.dataItem(grid.select());
            $.ajax({
                data: { id: currentSelection.Id },
                url: "/Employee/LoadTabControl/" +  currentSelection.Id,
                type: "POST",
                success: function (result) {
                    $('#EmployeeDetails').html(result);
                }
            });
        });
    </script>

    <div id ="EmployeeDetails"></div>

As you can see ""/Employee/LoadTabControl/" OR anything that it loads should not be called until and unless user clicks on the GRID. However, the application is trying to load it "Sometimes" when I launch the application. Any suggestions?

Answer 1

<script type="text/javascript">
$(document).ready(function(){
 var grid = $("#employeeGrid").data("kendoGrid");


$("#employeeGrid").click(function() {
            var currentSelection = grid.dataItem(grid.select());
            $.ajax({
                data: { id: currentSelection.Id },
                url: "/Employee/LoadTabControl/" +  currentSelection.Id,
                type: "POST",
                success: function (result) {
                    $('#EmployeeDetails').html(result);
                }
            });
        });

});

    </script>