Custom Edit and Create Buttons to redirect to view

[Dave]

Hi folks,

I'm trying to build custom create and edit buttons to navigate to a totally new view, rather than using inline or popups. I've got the edit one to work using a JavaScript function to redirect to the edit view, but can't seem to get the create one to work.

Here's my grid:

@(Html.Kendo().Grid<Project.Models.Organisation>()
.Name("grid")
.HtmlAttributes(new { style = "ScrollHeight: 700px" })
.Columns(columns =>
{
columns.Bound(c => c.Name).Width(80);
columns.Command(command =>
{
command.Custom("Details").Click("showDetails");
}).Width(20);
})
.Sortable()
.Filterable()
.Pageable(x => x.PageSizes(new int[] { 5, 10, 15, 20, 100 }).Refresh(true).ButtonCount(5))
.ToolBar(toolbar => {
toolbar.Custom().Text("Create").HtmlAttributes(new { id = "showCreate" });
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Name);
})
.Read(read => read.Action("List", "Organisations"))
)
)

Here's the edit function, which works fine:

function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
window.location.href = '/Organisations/Details/' + dataItem.Id;
}

And here's the create function, which doesn't appear to do anything:

function showCreate(e) {
e.preventDefault();
window.location.href = '/Organisations/Create/';
}

I've tried a couple of approaches:

1) In ASP.NET examples, you appear to be able to do the following to fire a controller method directly, is this not available in Core?

toolbar.Custom().Text("Create").Action("Create", "Organisations");

2) Another approach that appears possible from research is to use HtmlAttributes, but this appears to do nothing, am I missing something?

toolbar.Custom().Text("Create").HtmlAttributes(new { id = "showCreate" });

I'm pretty new to ASP Core, so any pointers would be gratefully received.

Thanks,
Dave.

[Stefan]

Hello, Dave,

Thank you for the details.

I can suggest using a Template property and to add an anchor element with action links inside of it:

{
            toolbar.ClientTemplate("<a href='" +Url.Action("ProductCreate", "Product") +"/test' " + ">Add product</a>");
        })

I hope this approach will help to achieve the desired result.

Regards,
Stefan
Progress Telerik

[Dave]

Perfect! Thanks for your help.

[Long]

Thanks Dave and Stefan for an excellent solution!

[Dan]

Hi Stefan,

Is there a git issue to have the same functionality as ASP.NET MVC registered so I can follow or this functionality is not desired in ASP.NET Core. I am talking about the missing of the Action method on custom toolbar button.

[Stefan]

Hello, Dan,

There is an issue which is already closed.

More details on why the Action method is missing can be found in the discussing:

https://github.com/telerik/kendo-ui-core/issues/2008

Apologies for the inconvenience this may have caused you.

Regards,
Stefan
Progress Telerik