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.

13 Answers, 1 is accepted

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

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(" <label for='global-search' style='display: inline-block; justify-content: space-between'>Global Search</label><input id='funds-global-search' pe='text' class='form-control' placeholder=''>" +
"<a class='k-button k-button-icontext k-grid-add' href='" + Url.Action("Create", "Fund") + "'" + ">Add Fund</a>"
+ "<a class='k-button k-button-icontext k-grid-excel' href=''>Export to Excel</a>" +
"<a class='k-button k-button-icontext k-grid-pdf' href=''>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();
}
}

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

Stefan

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

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>

Custom and built-in commands - you can add both type of commands only through a template. Use the ClientTemplate() or ClientTemplateId() methods, as demonstrated in the Grid Toolbar documentation.

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Adding Action to Custom toolbar button

13 Answers, 1 is accepted