This is a migrated thread and some comments may be shown as answers.

Kendo UI Grid on delete new page opens

4 Answers 29 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jim
Top achievements
Rank 1
Jim asked on 06 Jul 2015, 04:03 PM

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?

4 Answers, 1 is accepted

Sort by
0
Jim
Top achievements
Rank 1
answered on 06 Jul 2015, 04:05 PM

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.

 

 

0
Jim
Top achievements
Rank 1
answered on 06 Jul 2015, 04:25 PM

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");
        }

0
Jim
Top achievements
Rank 1
answered on 06 Jul 2015, 05:51 PM

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

0
Daniel
Telerik team
answered on 08 Jul 2015, 11:43 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Jim
Top achievements
Rank 1
Answers by
Jim
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or