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

Adding Action to Custom toolbar button

13 Answers 2221 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Doug
Top achievements
Rank 1
Doug asked on 05 Jul 2018, 02:58 PM

I am trying to figure out how i can add an action event to my custom toolbar button in the .net core grid.  I noticed that both the PDF and excel options have an available .ProxyUrl property but custom toolbar does not.

 

I have something like this......

.Toolbar(toolbar=>toolbar.Custom().Text("CSV Export")

 

I did see that something like this could be done, but that does not give me the same look and feel.  It essentially looks like a hyperlink and nothing more...

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

 

13 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 10 Jul 2018, 12:22 PM
Hi Doug,

The ClientTemplate approach can be used to call an ActionMethod on the server. 

In order to change the appearance of the hyperlink I would suggest including the k-button CSS class to it. 

toolbar.ClientTemplate("<a class='k-button' href='" +Url.Action("ProductCreate", "Product") +"/test' " + ">Add product</a>");


Give the approach a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Doug
Top achievements
Rank 1
answered on 10 Jul 2018, 03:10 PM
Thanks.  This worked perfectly for me.
0
Mohammed
Top achievements
Rank 1
answered on 06 Aug 2019, 04:47 AM

please if i want two button one for actionLink and one for save button 

toolbar.ClientTemplate("<a class='k-button' href='" +Url.Action("ProductCreate", "Product") +"/test' " + ">Add product</a>");
this work fine but when i add second button it's not show

which i use toolbar.custom().....

0
Georgi
Telerik team
answered on 08 Aug 2019, 01:33 PM
Hello Mohammed,

When the toolbar template is used, only the content of the template is rendered, the rest of the toolbar settings are ignored. Thus, you will have to include the second button to the template.

e.g.

toolbar.ClientTemplate("<a class='k-button' href='" +Url.Action("ProductCreate", "Product") +"/test' " + ">Add product</a>"+ "<a class='k-button' href='" +Url.Action(...) +"/test' " + ">Other button</a>");


Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mohammed
Top achievements
Rank 1
answered on 09 Aug 2019, 06:35 AM

thanks Georgi 
brother
could you please help me in this case

this is my first  toolbar which work successfully 

  .ToolBar(c => c.Custom().Name("Save").Text("save").IconClass("save").HtmlAttributes(new { onclick = "CreateNonAdmin()" })

but Now i want to add new button for action link 

toolbar.ClientTemplate("<a class='k-button' href='" +Url.Action("ProductCreate", "Product") +"/test' " + ">Add product</a>"

 

0
Georgi
Telerik team
answered on 13 Aug 2019, 12:44 PM
Hello Mohammed,

You could extend the toolbar template to include the custom command.

e.g.

toolbar.ClientTemplate("<a class='k-button' href='" +Url.Action("ProductCreate", "Product") +"/test' " + ">Add product</a>"
+ "<a role='button' class='k-button k-button-icontext k-grid-Save' onclick='CreateNonAdmin()'><span class='save'></span>save</a>")


Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mohammed
Top achievements
Rank 1
answered on 19 Aug 2019, 03:46 AM
thanks brother it's work 
0
Mohammed
Top achievements
Rank 1
answered on 09 Oct 2019, 06:46 AM

hi brother

Could you please replay i have 2 Q

1- i try to export excel and pdf  file from my kendo grid but not work i am use Core 2.2

Telerik UI for ASP.NET Core R1 2018 SP1

Source Code from this link

https://demos.telerik.com/aspnet-core/grid/excel-export

2- the telerik Report it's Support the Core 2.2 or not 

Thanks 

0
Viktor Tachev
Telerik team
answered on 11 Oct 2019, 02:07 PM

Hi Mohammed,

 

Please submit new questions in a separate ticket or forum thread. This will keep the information in a given thread consistent and easier to use as reference. In addition it will enable us to keep better track of the support activity so we can provide a better service.

 

Regards,
Viktor Tachev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Nimita
Top achievements
Rank 1
answered on 06 Jan 2021, 10:29 PM

Hi when I add below line to create new fund .I am unable to get fund ID primary key...after submitting form ID is null or 0

 

toolbar => toolbar.ClientTemplate("<a class='k-button k-button-icontext k-grid-add' href='" + Url.Action("Create", "Fund") + "'" + "><span class='k-icon k-add'></span>Add Fund</a>  

0
Viktor Tachev
Telerik team
answered on 11 Jan 2021, 11:49 AM

Hello Nimita,

 

For creating a new item in the Grid you can use the built-in options of the component. The create button configuration in the toolbar would look similar to this:

.ToolBar(toolbar => toolbar.Create())

 

When this button is clicked a new row will be added and the users will be able to enter the information for the new record. After clicking the Update button the data will be submitted to the Action Method handling the create operation. Check out the example below that illustrates the approach:

https://demos.telerik.com/aspnet-core/grid/editing-inline

 

That said, usually the primary ID is populated on the server to ensure that it has an unique value.

 

Regards,
Viktor Tachev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Nimita
Top achievements
Rank 1
answered on 11 Jan 2021, 06:26 PM

Hi Viktor,

 

I am following the above example but still m model validation is failing after clicking the save(update) button becuase record identifier (primary ID) is always 0(Null).

 

I am attaching my code over here :

@(Html.Kendo().Grid<CoreMaster.Models.Fund>()
                                    .Name("Fund")
                                    .Columns(cols =>
                                    {
                                        //cols.Bound(x => x.CommitmentId);
                                        cols.Bound(x => x.FundName).
                                                            Filterable(false)
                                                            .ClientTemplate(
                                                                "<a href='"
                                                                    + Url.Action("Details", "Fund") + "/#= FundID #'"
                                                                    + ">"
                                                                    + "#= FundName #" +
                                                                "</a>"
                                                            );
                                        cols.Bound(x => x.StrategyOverview);
                                        cols.Bound(x => x.Segment);
                                        cols.Bound(x => x.Industry);
                                        cols.Bound(x => x.Geography).Visible(true);
                                        cols.Bound(x => x.KeyTcFundSize).Hidden(true);
                                        cols.Bound(x => x.KeyTcWsibcommitment).Hidden(true);
                                        cols.Bound(x => x.KeyTcOwnershipPct).Hidden(true);
                                        cols.Bound(x => x.KeyTcGpcommitment).Hidden(true);
                                        cols.Bound(x => x.KeyTcClosingDates).Hidden(true);
                                        cols.Bound(x => x.KeyTcInvestmentPeriod).Hidden(true);
                                        cols.Bound(x => x.KeyTcInvestmentPeriodDate).Hidden(true);
                                        cols.Bound(x => x.KeyTcTerm).Hidden(true);
                                        cols.Bound(x => x.KeyTcEndOfFundLife).Hidden(true);
                                        cols.Bound(x => x.KeyTcEndOfFundLifeDate).Hidden(true);
                                        cols.Bound(x => x.KeyTcManagementFee).Hidden(true);
                                        cols.Bound(x => x.KeyTcFeeOffsets).Hidden(true);
                                        cols.Bound(x => x.KeyTcTerm).Hidden(true);
                                        cols.Bound(x => x.KeyTcPreferredReturn).Hidden(true);
                                        cols.Bound(x => x.KeyTcCarriedInterest).Hidden(true);
                                        cols.Bound(x => x.KeyTcReturnTarget).Hidden(true);
                                        cols.Bound(x => x.KeyTcIncomeYieldTarget).Hidden(true);
                                        cols.Bound(x => x.KeyTcClawback).Hidden(true);
                                        cols.Bound(x => x.KeyTcWaterfall).Hidden(true);
                                        cols.Bound(x => x.KeyTcInvestmentLimits).Hidden(true);
                                        cols.Bound(x => x.KeyTcLeverageLimitAnticipated).Hidden(true);
                                        cols.Bound(x => x.KeyTcRecycling).Hidden(true);
                                        cols.Bound(x => x.KeyTcAdvisoryCommittee).Hidden(true);
                                        cols.Bound(x => x.KeyTcKeyPersonProvision).Hidden(true);
                                        cols.Bound(x => x.KeyTcOther).Hidden(true);
                                        cols.Bound(x => x.InvStatsCapitalCommitted).Hidden(true);
                                        cols.Bound(x => x.Notes).Hidden(true);
                                        cols.Bound(x => x.DwAcctId).Hidden(true);
                                        cols.Bound(x => x.Source).Hidden(true);
                                        cols.Bound(x => x.IsActive).Hidden(true);

                                        // Edit button leading to edit controller for each item
                                        cols.Bound(x => x.FundID)
                                                .Title("Edit")
                                                .Filterable(false)
                                                .Sortable(false)
                                                .Width(70)
                                                .ClientTemplate(
                                                    "<a href='"
                                                        + Url.Action("Edit", "Fund") + "/#= FundID #'"
                                                        + " class='fa fa-edit' style='font-size:24px; color: \\#3343a4'"
                                                    + "></a>"
                                                );

                                        // Details button for each item
                                        //cols.Bound(x => x.FundId)
                                        //        .Title("Detail")
                                        //        .Filterable(false)
                                        //        .Sortable(false)
                                        //        .Width(70)
                                        //        .ClientTemplate(
                                        //            "<a href='"
                                        //                + Url.Action("Details", "Fund") + "/#= FundId #'"
                                        //                + " class='fa fa-search' style='font-size:24px; color: \\#3343a4'"
                                        //            + "></a>"
                                        //        );

                                    })
                                    .ToolBar(t => t.Search())
                                   .ToolBar(toolbar => toolbar.Excel())
                                   .Excel(excel =>
                                   {
                                       excel.AllPages(true);
                                       excel.FileName("TangibleFund");
                                       excel.Filterable(false);
                                   })
                                    .ToolBar(toolbar => toolbar.Pdf())
                                    // .ToolBar(toolbar => toolbar.Create())
                                    .ToolBar(toolbar => toolbar.ClientTemplate("<span class='global-search-container'> <label for='global-search' style='display: inline-block; justify-content: space-between'><font color='black'>Global Search</font></label><i class='fas fa-search fa-2x'></i><input id='funds-global-search' pe='text' class='form-control' placeholder=''></span>" +
                                    "<a class='k-button k-button-icontext k-grid-add' href='" + Url.Action("Create", "Fund") + "'" + "><span class='k-icon k-add'></span>Add Fund</a>"

                                     + "<a class='k-button k-button-icontext k-grid-excel' href=''><span class='k-icon k-i-excel'></span>Export to Excel</a>" +
                                      "<a class='k-button k-button-icontext k-grid-pdf'  href=''><span class='k-icon k-i-pdf'></span>Export to PDF</a>"))
                                    .Scrollable()
                                    //.Filterable(filtering => filtering.Enabled(false))
                                    .Filterable()
                                    .Sortable()
                                    // Enables column picker function in sorting context view
                                    .ColumnMenu()
                                    .Search(s =>
                                    {
                                        s.Field(c => c.FundName);
                                        s.Field(c => c.Industry);
                                        s.Field(c => c.Segment);
                                    })
                                    .Pageable(pageable => pageable
                                    .Refresh(true)
                                    .PageSizes(true)
                                    .ButtonCount(5))

                                    // This is how you connect to a datasource url, in this case the Funds_Read controller action
                                    .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .PageSize(10)
                                        .Model(model =>
                                        {

                                            model.Id(x => x.FundID);
                                            model.Field(x => x.FundID).Editable(false);
                                            model.Field(x => x.FundName);
                                            model.Field(x => x.Geography);
                                        })
                                        .Read(read => read.Action("Funds_Read", "Fund"))
                                    .Create(create => create.Action("Create", "Fund"))
                                    )
                                    .Resizable(resize => resize.Columns(true))
                                    .Events(e => e.ExcelExport("excelExport"))


        )

 

 

Controller method :

 

 [AcceptVerbs("Post")]
        public IActionResult Create([DataSourceRequest] DataSourceRequest request, Fund fund)
        {
            string error = "error";
           // fund.FundID = id;
            if (ModelState.IsValid)
            {
                _context.Add(fund);
                _context.SaveChanges();
                return Json(new[] { fund }.ToDataSourceResult(request, ModelState));
            }
            // Return error to controller when validation didn't pass from ModelState.IsValid
            else if (ModelState.IsValid == false)
            {
                return Json(error);
            }
            else
            {
                return BadRequest();
            }
        }

 

 

0
Viktor Tachev
Telerik team
answered on 14 Jan 2021, 11:17 AM

Hi Nimita,

 

I examined the code and noticed that editing was not enabled in the Grid. With this setup the Grid will not be configured to modify the data in it.

For enabling editing in the Grid component it is recommended to enable the Editable option for it. Furthermore you can specify what edit mode will be used in the Grid. 

.Editable(editable => editable.Mode(GridEditMode.InLine))

 

Also, there is no need to add custom buttons and actions for creating or editing records. You can use the built-in commands and the Grid will handle the operation.

Defining a create button in the toolbar can be done like this:

.ToolBar(toolbar => toolbar.Create())

 

And the following line will add an Edit and Delete button on each row of the Grid:

columns.Command(command => { command.Edit(); command.Destroy(); });

 

Check out the example below that illustrates how you can configure the Grid for editing:

https://demos.telerik.com/aspnet-core/grid/editing-inline

 

Regards,
Viktor Tachev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Stefan
Top achievements
Rank 1
Iron
commented on 04 Jan 2023, 08:48 AM | edited

@Viktor Tachev

Is there any special reason why we don't have the Action anymore in ASP.NET Core?

I'm currently upgrading from MVC5 to Core  and stumbled accross this issue.

Do we need to write custom HTML for the whole toolbar?

 

Mihaela
Telerik team
commented on 06 Jan 2023, 02:19 PM

Hi Stefan,

The Grid Toolbar commands in Telerik UI for ASP.NET Core can be defined through any of the following approaches:

  • Built-in commands:
    .ToolBar(toolbar=> {
        toolbar.Create();
        toolbar.Save();
        toolbar.Pdf();
        toolbar.Excel();
        toolbar.Search();
    })

 

  • Custom commands:
    .ToolBar(toolbar=> {
        toolbar.Custom().Text("Command 1").HtmlAttributes(new { id = "customCommand1" });
        toolbar.Custom().Text("Command 2").HtmlAttributes(new { id = "customCommand2" });
    })

    <script>
    $(document).ready(function(){
        $("#customCommand1").click(function (e) {
            e.preventDefault();
            //add custom command logic here
        });
    })
    </script>

 

If you have any additional questions, feel free to share them.


Tags
Grid
Asked by
Doug
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Doug
Top achievements
Rank 1
Mohammed
Top achievements
Rank 1
Georgi
Telerik team
Nimita
Top achievements
Rank 1
Share this question
or