Adding Action to Custom toolbar button

14 posts, 0 answers
  1. Doug
    Doug avatar
    7 posts
    Member since:
    May 2017

    Posted 05 Jul 2018 Link to this post

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

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 10 Jul 2018 Link to this post

    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.
  3. Doug
    Doug avatar
    7 posts
    Member since:
    May 2017

    Posted 10 Jul 2018 in reply to Viktor Tachev Link to this post

    Thanks.  This worked perfectly for me.
  4. Mohammed
    Mohammed avatar
    15 posts
    Member since:
    Mar 2019

    Posted 05 Aug 2019 Link to this post

    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().....

  5. Georgi
    Admin
    Georgi avatar
    700 posts

    Posted 08 Aug 2019 Link to this post

    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.
  6. Mohammed
    Mohammed avatar
    15 posts
    Member since:
    Mar 2019

    Posted 09 Aug 2019 in reply to Georgi Link to this post

    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>"

     

  7. Georgi
    Admin
    Georgi avatar
    700 posts

    Posted 13 Aug 2019 Link to this post

    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.
  8. Mohammed
    Mohammed avatar
    15 posts
    Member since:
    Mar 2019

    Posted 18 Aug 2019 in reply to Georgi Link to this post

    thanks brother it's work 
  9. Mohammed
    Mohammed avatar
    15 posts
    Member since:
    Mar 2019

    Posted 09 Oct 2019 in reply to Georgi Link to this post

    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 

  10. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 11 Oct 2019 Link to this post

    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.
  11. Nimita
    Nimita avatar
    8 posts
    Member since:
    Oct 2019

    Posted 06 Jan in reply to Viktor Tachev Link to this post

    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>  

  12. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 11 Jan Link to this post

    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/.

  13. Nimita
    Nimita avatar
    8 posts
    Member since:
    Oct 2019

    Posted 11 Jan in reply to Viktor Tachev Link to this post

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

     

     

  14. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 14 Jan Link to this post

    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/.

Back to Top