Calling existing views for grid updates

[Scott Buchanan]

I am using UI for MVC 2015.1.318

I am replacing user admin lists with Telerik grids, but need to call the original views for CRUD.  I have reviewed the documentation at http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/server-editing as well as several forum posts, but the Edit command button always calls the inline editor.

 My grid

@(Html.Kendo().Grid(Model.UsersList)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(u => u.DisplayName);
        columns.Bound(u => u.AccountName);
        columns.Bound(u => u.Email);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .PageSize(20)
        .Sort(sort => sort.Add("AccountName").Ascending())
        .Model(model => model.Id(u => u.UserId))
        .Update(update => update.Action("Edit", "UserAdmin"))
        .Destroy(destroy => destroy.Action("Delete", "UserAdmin"))
    )
)

There is a UserAdminController.cs with Edit and Delete methods.  Here is the Edit: 

public async Task<ActionResult> Edit(string id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    var editUser = await UserManager.FindByIdAsync(id);
    if (editUser == null)
    {
        return HttpNotFound();
    }

    UserDetailsViewModel vm = new UserDetailsViewModel()
    {
        Id = editUser.Id,
        Email = editUser.Email,
        DisplayName = editUser.DisplayName,
        SelectedAccountId = editUser.AccountId,
    };

    // System Admins can assign Account to users, so get a list
    if (User.IsInRole("System Admin"))
    {
        vm.AvailableAccounts = DataRepo.GetAccountListForDdl().ToList();
    }

    await Edit_SetupRoles(editUser.Id, vm);

    vm.ProviderId = editUser.ProviderId;
    if (editUser.ProviderId != null)
        vm.ProviderName = DataRepo.GetProviderName(editUser.ProviderId);

    vm.AccessLevelsAssigned = DataRepo.GetAssignedUserAccessLevels(editUser.Id);
    vm.AccessLevelsPool = DataRepo.GetAvailableUserAccessLevels(editUser.Id, editUser.AccountId);
    vm.AccountAndClients = DataRepo.GetAccountAndClientListForDdl(editUser.AccountId).ToList();
    return View(vm);
}

Where is this going off the rails?

Best,
Scott

[Rosen]

Hi Scott,

If I understood correctly, your wish to navigate to a different View when Edit button is clicked instead of using the built-in editing functionality. In this case you will need to disable the build-in editing and use a custom command on which click to navigate the page to the different view. Similar to the following:

@(Html.Kendo().Grid(Model.UsersList)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(u => u.DisplayName);
        columns.Bound(u => u.AccountName);
        columns.Bound(u => u.Email);
        columns.Command(command => command.Custom("edit").Text("Edit").Click("editClick"));
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .PageSize(20)
        .Sort(sort => sort.Add("AccountName").Ascending())
        .Model(model => model.Id(u => u.UserId))
    )
)

<script type="text/javascript">
    function editClick(e) {
        e.preventDefault();
        location.href = '@Url.Action("Edit", "UserAdmit")' + "?id=" + this.dataItem($(e.currentTarget).closest("tr")).ProductID;
    }
</script>

Regards,
Rosen
Telerik

 

 

[Scott Buchanan]

Rosen,

That make sense, and works.

Best,
Scott