Kendo UI Grid on delete new page opens

[Jim]

Hi, I have a partial view "_AccountUsers" with just the following grid:

 
        @(Html.Kendo().Grid<LiteraSite.LiteraProjectSvc.UserDTO>((List<LiteraSite.LiteraProjectSvc.UserDTO>)TempData["AccountUsers"])
    .Name("grdAccountUsers")

    .Columns(columns =>
    {
      columns.Bound(p => p.Email).Title("Email").HtmlAttributes(new { @style = "padding-left: 8px;" });
        columns.Bound(p => p.UserName).Title("Account Users").HtmlAttributes(new { @style = "padding-left: 5px;" });
        columns.Bound(p => p.FirstName).Title("Account Users").HtmlAttributes(new { @style = "padding-left: 5px;" });
        columns.Bound(p => p.LastName).Title("Account Users").HtmlAttributes(new { @style = "padding-left: 5px;" });
        columns.Bound(p => p.Active).Title("Active").HtmlAttributes(new { @style = "padding-left: 5px;" }).Template(@<input @(item.Active ? "checked='checked'" : "") value='active' type='checkbox' />);
        columns.Command(command =>
        {
            command.Edit().UpdateText("");
            command.Destroy();
        }).Width(170);
       // columns.Command(command=> command.Custom("Delete").Action("DeleteUser","Administration")).Width(170);

    })
                        .Pageable()
                        .Navigatable()
                        .Selectable(selectable => selectable.Enabled(true))
                                .Editable(editing => editing.Mode(GridEditMode.InLine))
                        .Scrollable(src => src.Height(300))

                            .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .ServerOperation(false) 
                                    .Model(model => model.Id(p => p.UserID))
                                    .Model(model=>model.Field(o=>o.Email).Editable(false))
                                                     .Model(model => model.Field(o => o.UserName).Editable(false))
                                                              .Model(model => model.Field(o => o.FirstName).Editable(false))
                                                                       .Model(model => model.Field(o => o.LastName).Editable(false))
                                    .Destroy(update => update.Action("DeleteUser", "Administration"))
                                            .Update(update => update.Action("UpdateUser", "Administration"))
                                    )

        )

and the delete user action looks like this:

   [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult DeleteUser([Kendo.Mvc.UI.DataSourceRequest] Kendo.Mvc.UI.DataSourceRequest request,
            UserDTO user)
        {
            (new Models.ProjectModel()).DeleteUser(user.UserID);
            SetAccountUsers();
            return Json(((List<UserDTO>)TempData["AccountUsers"]).ToDataSourceResult(request, ModelState));          
        }

 

 

 

here is where i load the partial view:

 

@{
    ViewBag.Title = "User Administrator";
}

@section scripts {
    @Styles.Render("~/Contents/Control/administrator")
    <link href='@Url.Content("~/Contents/Styles/themes/kendo/kendo.common.min.css")' rel="stylesheet" />
    <link href='@Url.Content("~/Contents/Styles/themes/kendo/kendo.metro.min.css")' rel="stylesheet" />
    <script src='@Url.Content("~/Contents/Scripts/kendo.all.min.js")'></script>
    <script src='@Url.Content("~/Contents/Scripts/kendo.aspnetmvc.min.js")'></script>
    <script src='@Url.Content("~/Contents/Scripts/jquery.unobtrusive-ajax.js")'></script>
    @Scripts.Render("~/bundles/administrator")
    <script type="text/javascript">
        $(document).ready(function () {
            initiate('@ViewBag.ErrMessage');
        });

    </script>
}

<fieldset class="reportContent">

    
    @using (Ajax.BeginForm("SearchUserByEmail", new AjaxOptions { UpdateTargetId = "foundUser" }))
    {
       <label> A user can only be added if they have registered with Orissa as a user. New users can register <a>here</a></label><br/>
        <label>Email:</label>
        <input type="text" name="email" />
           
        <button id="btnSearch" class="k-button submit" value="Search">
            <img src='@Url.Content("~/Contents/Images/search_icon.bmp")' height="20" width="20" />
        </button>
        
        <label style="color:red">@ViewBag.UserNotFound</label>
    }

    <div id="foundUser">                 
      @Html.Partial("_FoundUser")
    </div>


    <div id="accountUsers">   <============================= This is the partial view
        @Html.Partial("_AccountUsers")
    </div>
</fieldset>

 

 

 

When I add a new row then immediately delete it, i get a new page opened with json data. If i delete an already existing (old) record it deletes fine, what am i doing wrong?

[Jim]

When I add a row then delete , it will open in a new page with json data, then when i delete again it works fine. So the behaviour only happens after i add then immediately delete any row.

 

 

[Jim]

another thing to add is I dont add rows using the grid insert, i do it differently, I have a method that refreshes the partial view containing the grid instead:

 

 [HttpPost]
        public ActionResult AddUser(string email,bool active)
        {
            try
            {
                if (string.IsNullOrEmpty(email))
                     return PartialView("_AccountUsers");

                var user = (new Models.AuthModel()).SearchUserByEmail(email);
                if (user == null)
                {
                    ViewBag.UserNotFound = userNotFound;
                    return PartialView("_AccountUsers");
                }
                //create the new user
                var newLiterUser = new UserDTO();     
           //set all properties code
               
                (new ProjectModel()).CreateUser(newLiterUser);
                SetAccountUsers(); 
            }
            catch (Exception e)
            {
                ViewBag.ErrMessage = "Could not connect to server. Please contact administrator";
            }
            return PartialView("_AccountUsers");
        }

 

  public  void SetAccountUsers()
        {
            TempData["AccountUsers"] = (new Models.ProjectModel()).GetUsersByAccount(LiteraSecurity.User.AccountID);
            TempData.Keep("AccountUsers");
        }

[Jim]

Currently the only way i have this working correctly is by refreshing the entire view and not the partial view that just contains the grid, this of course is not ideal, please advise.

 

regards

[Daniel]

Hello Jim,

Could you provide the code that you are using to reload the partial view with the grid and check if there are any JavaScript errors? The described behavior indicates that the grid is not initialized after the partial view is reloaded.

Regards,
Daniel
Telerik