Default action command column CRUD button in Grid for ASP.NET Core web app used to Post with record ID

[JimN]

I am trying to use one of the default action command columns, as seen at https://help.syncfusion.com/aspnet-core/grid/columns?cs-save-lang=1&cs-lang=razor#command-column, in order to call a POST method in my web app (NOT MVC) with the ID of the record of the row on which the command button was clicked. One problem I'm having is that the example shown on the page I referenced is apparently not for EJ2. I tried to use that code but the e-column-command is undefined in my code.

I am trying to accomplish the same thing for a Grid that I have done in the code below for the Schedule control. 

.cshtml -->

                                        

              hideEmptyAgendaDays="false" agendaDaysCount="30" eventRendered="OnEventRendered" 

              popupOpen="OnPopupOpen">

                [email protected]>

.cs -->

#region Event Handlers

///

/// 

///

public IActionResult OnGet()

{

//

return Page();

}

///

/// 

///

///

    [HttpPost]

    [ValidateAntiForgeryToken]

public ActionResult OnPostLoadData()

{

if (_context.Shifts != null)

ShiftEvents = _context.Shifts.Where(s => s.StartTime > DateTime.Now.AddMonths(-1)).ToList();

return new JsonResult(ShiftEvents.ToList());

}

///

/// 

///

///

///

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult OnPostUpdateData([FromBody]EditParams param)

{

if (param.action == "insert" || param.action == "batch" && param.added.Count > 0)

{

var value = (param.action == "insert") ? param.value : param.added[0];

int intMax = _context.Shifts.ToList().Count > 0 ? _context.Shifts.ToList().Max(p => p.ShiftId) : 1;

DateTime startTime = Convert.ToDateTime(value.StartTime);

DateTime endTime = Convert.ToDateTime(value.EndTime);

Shift appointment = new Shift()

{

StartTime = startTime.ToLocalTime(),

EndTime = endTime.ToLocalTime(),

Subject = value.Subject,

Location = value.Location,

IsAllDay = value.IsAllDay,

StartTimezone = value.StartTimezone,

EndTimezone = value.EndTimezone,

RecurrenceRule = value.RecurrenceRule,

RecurrenceId = value.RecurrenceId,

RecurrenceException = value.RecurrenceException,

Description = value.Description,

//Category = value.Category,

Category = "Unassigned",

//Assigned = value.Assigned

Assigned = false

};

_context.Shifts.Add(appointment);

_context.SaveChanges();

}

if (param.action == "update" || (param.action == "batch" && param.changed.Count > 0))

{

var value = (param.action == "update") ? param.value : param.changed[0];

var filterData = _context.Shifts.Where(c => c.ShiftId == Convert.ToInt32(value.ShiftId));

if (filterData.Any())

{

DateTime startTime = Convert.ToDateTime(value.StartTime);

DateTime endTime = Convert.ToDateTime(value.EndTime);

Shift appointment = _context.Shifts.Single(A => A.ShiftId == Convert.ToInt32(value.ShiftId));

appointment.StartTime = startTime.ToLocalTime();

appointment.EndTime = endTime.ToLocalTime();

appointment.StartTimezone = value.StartTimezone;

appointment.EndTimezone = value.EndTimezone;

appointment.Subject = value.Subject;

appointment.IsAllDay = value.IsAllDay;

appointment.RecurrenceRule = value.RecurrenceRule;

appointment.RecurrenceId = value.RecurrenceId;

appointment.RecurrenceException = value.RecurrenceException;

appointment.Description = value.Description;

appointment.Category = value.Category;

appointment.Assigned = value.Assigned;

}

_context.SaveChanges();

}

if (param.action == "remove" || (param.action == "batch" && param.deleted.Count > 0))

{

if (param.action == "remove")

{

int key = Convert.ToInt32(param.key);

Shift appointment = _context.Shifts.FirstOrDefault(c => c.ShiftId == key);

if (appointment != null) _context.Shifts.Remove(appointment);

}

else

{

foreach (var apps in param.deleted)

{

Shift appointment = _context.Shifts.FirstOrDefault(c => c.ShiftId == apps.ShiftId);

if (apps != null) _context.Shifts.Remove(appointment);

}

}

_context.SaveChanges();

}

return new JsonResult(new { result = _context.Shifts.ToList(), count = _context.Shifts.ToList().Count() });

}

///

/// 

///

///

public async Task OnPostUpdateEventsAsync()

    {

//

_context.Shifts.AddRange(ShiftEvents);

    //

    await _context.SaveChangesAsync();

    return Page();

}

#endregion Event Handlers

Thanks in advance!

SIGN IN To post a reply.

6 Replies Oldest first

---

JI JimN replied to Jim Nicholson July 3, 2018 07:20 PM UTC

I am trying to use one of the default action command columns, as seen at https://help.syncfusion.com/aspnet-core/grid/columns?cs-save-lang=1&cs-lang=razor#command-column, in order to call a POST method in my web app (NOT MVC) with the ID of the record of the row on which the command button was clicked. One problem I'm having is that the example shown on the page I referenced is apparently not for EJ2. I tried to use that code but the e-column-command is undefined in my code.

I am trying to accomplish the same thing for a Grid that I have done in the code below for the Schedule control. 

.cshtml -->

                                        

              hideEmptyAgendaDays="false" agendaDaysCount="30" eventRendered="OnEventRendered" 

              popupOpen="OnPopupOpen">

                [email protected]>

.cs -->

#region Event Handlers

///

/// 

///

public IActionResult OnGet()

{

//

return Page();

}

///

/// 

///

///

    [HttpPost]

    [ValidateAntiForgeryToken]

public ActionResult OnPostLoadData()

{

if (_context.Shifts != null)

ShiftEvents = _context.Shifts.Where(s => s.StartTime > DateTime.Now.AddMonths(-1)).ToList();

return new JsonResult(ShiftEvents.ToList());

}

///

/// 

///

///

///

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult OnPostUpdateData([FromBody]EditParams param)

{

if (param.action == "insert" || param.action == "batch" && param.added.Count > 0)

{

var value = (param.action == "insert") ? param.value : param.added[0];

int intMax = _context.Shifts.ToList().Count > 0 ? _context.Shifts.ToList().Max(p => p.ShiftId) : 1;

DateTime startTime = Convert.ToDateTime(value.StartTime);

DateTime endTime = Convert.ToDateTime(value.EndTime);

Shift appointment = new Shift()

{

StartTime = startTime.ToLocalTime(),

EndTime = endTime.ToLocalTime(),

Subject = value.Subject,

Location = value.Location,

IsAllDay = value.IsAllDay,

StartTimezone = value.StartTimezone,

EndTimezone = value.EndTimezone,

RecurrenceRule = value.RecurrenceRule,

RecurrenceId = value.RecurrenceId,

RecurrenceException = value.RecurrenceException,

Description = value.Description,

//Category = value.Category,

Category = "Unassigned",

//Assigned = value.Assigned

Assigned = false

};

_context.Shifts.Add(appointment);

_context.SaveChanges();

}

if (param.action == "update" || (param.action == "batch" && param.changed.Count > 0))

{

var value = (param.action == "update") ? param.value : param.changed[0];

var filterData = _context.Shifts.Where(c => c.ShiftId == Convert.ToInt32(value.ShiftId));

if (filterData.Any())

{

DateTime startTime = Convert.ToDateTime(value.StartTime);

DateTime endTime = Convert.ToDateTime(value.EndTime);

Shift appointment = _context.Shifts.Single(A => A.ShiftId == Convert.ToInt32(value.ShiftId));

appointment.StartTime = startTime.ToLocalTime();

appointment.EndTime = endTime.ToLocalTime();

appointment.StartTimezone = value.StartTimezone;

appointment.EndTimezone = value.EndTimezone;

appointment.Subject = value.Subject;

appointment.IsAllDay = value.IsAllDay;

appointment.RecurrenceRule = value.RecurrenceRule;

appointment.RecurrenceId = value.RecurrenceId;

appointment.RecurrenceException = value.RecurrenceException;

appointment.Description = value.Description;

appointment.Category = value.Category;

appointment.Assigned = value.Assigned;

}

_context.SaveChanges();

}

if (param.action == "remove" || (param.action == "batch" && param.deleted.Count > 0))

{

if (param.action == "remove")

{

int key = Convert.ToInt32(param.key);

Shift appointment = _context.Shifts.FirstOrDefault(c => c.ShiftId == key);

if (appointment != null) _context.Shifts.Remove(appointment);

}

else

{

foreach (var apps in param.deleted)

{

Shift appointment = _context.Shifts.FirstOrDefault(c => c.ShiftId == apps.ShiftId);

if (apps != null) _context.Shifts.Remove(appointment);

}

}

_context.SaveChanges();

}

return new JsonResult(new { result = _context.Shifts.ToList(), count = _context.Shifts.ToList().Count() });

}

///

/// 

///

///

public async Task OnPostUpdateEventsAsync()

    {

//

_context.Shifts.AddRange(ShiftEvents);

    //

    await _context.SaveChangesAsync();

    return Page();

}

#endregion Event Handlers

Thanks in advance!

<div id="schedule-control">

<ejs-schedule id="schedule" width="100%" height="500px" selectedDate="@DateTime.Now" currentView="MonthAgenda" 

              hideEmptyAgendaDays="false" agendaDaysCount="30" eventRendered="OnEventRendered" 

              popupOpen="OnPopupOpen">

<e-schedule-eventsettings>

<e-data-manager url="LoadData" crudUrl="UpdateData" adaptor="UrlAdaptor" crossDomain="true" 

                [email protected]></e-data-manager>

</e-schedule-eventsettings>

<e-schedule-views>

<e-view option="Agenda" allowVirtualScrolling="true"></e-view>

<e-view option="Week" allowVirtualScrolling="true"></e-view>

<e-view option="WorkWeek" allowVirtualScrolling="true"></e-view>

<e-view option="Month" allowVirtualScrolling="true"></e-view>

<e-view option="MonthAgenda" allowVirtualScrolling="true"></e-view>

<e-view option="Day" allowVirtualScrolling="true"></e-view>

</e-schedule-views>

</ejs-schedule>

</div>

---

LR Logesh Rajappa Syncfusion Team July 5, 2018 01:06 PM UTC

Hi Jim, 

Thanks for contacting Syncfusion Support. 

Query: “I tried to use that code but the e-column-command is undefined in my code” 

We have validated your query and we do have support for command column in EJ2 like in EJ1. But command column is created as an object here and passed on to the command property of the grid column. Please refer to the below code example and documentation link for your reference. 

Code Example: 

[index.cshtml] 

@{ 

 

        List<object> commands = new List<object>(); 

        commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } }); 

        commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } }); 

        commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } }); 

        commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } }); 

 

    } 

<ejs-grid id="Grid" dataSource="ViewBag.DataSource" height="310"> 

 

            <e-grid-editSettings allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 

 

            <e-grid-columns> 

                <e-grid-column field="OrderID"  headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>                 

... 

    

                <e-grid-column headerText="Manage Records" width="120" command=commands></e-grid-column> 

      

            </e-grid-columns> 

</ejs-grid> 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit.html#command-column 

Online Demo: https://aspdotnetcore.syncfusion.com/Grid/CommandColumn#/material 

Please get back to us for further assistance. 

Regards, 

Logesh Rajappa

---

JI JimN July 27, 2018 05:41 PM UTC

Thank you for the reply and the example code. The documentation states that the Edit, Delete, Save, and Cancel buttons are the "available built-in command buttons". Does this mean that I can create custom command buttons as well? What I'm trying to accomplish, by way of code in the Model code-behind file, is to perform some actions based on an action the user takes on a column in the Grid. If the built-in command column won't work this way, is it possible to use a button in a cell that executes a handler in the C# code (not in javascript code)? For example, is it possible to have a button in the column (cell) and then have it's click action invoke a handler in the code-behind? In ASP.NET Core, using Tag Helpers in a table cell, I can use the following code:

<td>
       <a asp-page="/AgencyInHouse/ToDo/Edit" asp-route-id="@item.ToDoItemId" asp-route-returnUrl="../../Index">Edit</a> |
       <a asp-page="/AgencyInHouse/ToDo/Details" asp-route-id="@item.ToDoItemId" asp-route-returnUrl="../../Index">Details</a> |
       <a asp-page="./Delete" asp-route-id="@item.ToDoItemId">Mark Complete</a>
</td>

I would like to use the Syncfusion Grid instead of a table if I can accomplish what I need.

Thanks

---

VA Venkatesh Ayothi Raman Syncfusion Team August 2, 2018 09:12 AM UTC

Hi Jim, 

Thanks for the update. 

We have analyzed your query. We suggest you to use the column template feature of Grid. With this feature you can have a ASP.NET core Anchor tag in a column. Please refer the documentation and online sample link below, 

Documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns.html#column-template 

Online Sample : https://aspdotnetcore.syncfusion.com/Grid/ColumnTemplate#/material 

 

Please refer the code example below, 

<ejs-grid id="Grid" allowPaging="true" ...> 

    <e-grid-columns> 

        <e-grid-column headerText="Button Column" template="#template" textAlign="Right" width="120"></e-grid-column>  //Template Column 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

        ... 

    </e-grid-columns> 

</ejs-grid> 

 

 

<script id="template" type="text/x-template"> 

    <div> 

        <a asp-page="/AgencyInHouse/ToDo/Edit" asp-route-returnUrl="../../Index">Edit</a> 

    </div> 

</script> 

 

Also if you want to change that Anchor link as button then We can customize the anchor tag as button by adding class ‘e-btn’. Please follow the below documentation to convert anchor element into button element.  

  

Documentation Link:  

https://ej2.syncfusion.com/documentation/button/howto.html?lang=typescript#customize-input-and-anchor-elements  

https://ej2.syncfusion.com/aspnetcore/documentation/button/howto.html#customize-input-and-anchor-elements  

  

 

Please get back to us if you need further assistance. 

If we misunderstood your requirement, then could you please provide more information about your exact requirement? 

 

Regards, 

Venkatesh Ayothiraman. 

---

GI Gige April 1, 2022 07:56 PM UTC

Hi. How can I open a popup window instead of new page in this example with  template="#template"  in column?

Thank you for help.

---

RR Rajapandi Ravi Syncfusion Team April 5, 2022 01:22 PM UTC

Hi George,

We have analyzed your query and we could see that you are using template column and clicking in your template you like to open the popup dialog. Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

In this below sample, we have rendered the button element in the template column and clicking on this button we have open the popup window.

 

<div id="defaultDialog"></div>

    <ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowPaging="true">

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

        <e-grid-columns>

            <e-grid-column field="OrderID" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>

            <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="140"></e-grid-column>

            <e-grid-column field="OrderDate" headerText="Order Date" editType="datepickeredit" format="yMd" width="120"></e-grid-column>

            <e-grid-column field="ShipCountry" template="#templateAccoes" headerText="Ship Country" editType="dropdownedit" width="140"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

 

<script id="templateAccoes" type="text/x-template">

    <button id="combo${OrderID}" onclick="onActionCallClick(this)">Open Dialog</button>

</script>

 

<script>

    function onActionCallClick(args) {

        var dialog = new ej.popups.Dialog({

            content: 'PopUp dialog',

            target: '.e-gridcontent',

            width: '800px',

            height: '500px',

            showCloseIcon: true,

            beforeClose: function (args) {

                args.element.ej2_instances[0].destroy();

            }

 

        });

        // Render initialized Dialog

        dialog.appendTo('#defaultDialog');

    }

 

</script>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample388398559.zip

Regards,

Rajapandi R

[JimN]

I am trying to use one of the default action command columns, as seen at https://help.syncfusion.com/aspnet-core/grid/columns?cs-save-lang=1&cs-lang=razor#command-column, in order to call a POST method in my web app (NOT MVC) with the ID of the record of the row on which the command button was clicked. One problem I'm having is that the example shown on the page I referenced is apparently not for EJ2. I tried to use that code but the e-column-command is undefined in my code.

I am trying to accomplish the same thing for a Grid that I have done in the code below for the Schedule control. 

.cshtml -->

                                        

              hideEmptyAgendaDays="false" agendaDaysCount="30" eventRendered="OnEventRendered" 

              popupOpen="OnPopupOpen">

                [email protected]>

.cs -->

#region Event Handlers

///

/// 

///

public IActionResult OnGet()

{

//

return Page();

}

///

/// 

///

///

    [HttpPost]

    [ValidateAntiForgeryToken]

public ActionResult OnPostLoadData()

{

if (_context.Shifts != null)

ShiftEvents = _context.Shifts.Where(s => s.StartTime > DateTime.Now.AddMonths(-1)).ToList();

return new JsonResult(ShiftEvents.ToList());

}

///

/// 

///

///

///

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult OnPostUpdateData([FromBody]EditParams param)

{

if (param.action == "insert" || param.action == "batch" && param.added.Count > 0)

{

var value = (param.action == "insert") ? param.value : param.added[0];

int intMax = _context.Shifts.ToList().Count > 0 ? _context.Shifts.ToList().Max(p => p.ShiftId) : 1;

DateTime startTime = Convert.ToDateTime(value.StartTime);

DateTime endTime = Convert.ToDateTime(value.EndTime);

Shift appointment = new Shift()

{

StartTime = startTime.ToLocalTime(),

EndTime = endTime.ToLocalTime(),

Subject = value.Subject,

Location = value.Location,

IsAllDay = value.IsAllDay,

StartTimezone = value.StartTimezone,

EndTimezone = value.EndTimezone,

RecurrenceRule = value.RecurrenceRule,

RecurrenceId = value.RecurrenceId,

RecurrenceException = value.RecurrenceException,

Description = value.Description,

//Category = value.Category,

Category = "Unassigned",

//Assigned = value.Assigned

Assigned = false

};

_context.Shifts.Add(appointment);

_context.SaveChanges();

}

if (param.action == "update" || (param.action == "batch" && param.changed.Count > 0))

{

var value = (param.action == "update") ? param.value : param.changed[0];

var filterData = _context.Shifts.Where(c => c.ShiftId == Convert.ToInt32(value.ShiftId));

if (filterData.Any())

{

DateTime startTime = Convert.ToDateTime(value.StartTime);

DateTime endTime = Convert.ToDateTime(value.EndTime);

Shift appointment = _context.Shifts.Single(A => A.ShiftId == Convert.ToInt32(value.ShiftId));

appointment.StartTime = startTime.ToLocalTime();

appointment.EndTime = endTime.ToLocalTime();

appointment.StartTimezone = value.StartTimezone;

appointment.EndTimezone = value.EndTimezone;

appointment.Subject = value.Subject;

appointment.IsAllDay = value.IsAllDay;

appointment.RecurrenceRule = value.RecurrenceRule;

appointment.RecurrenceId = value.RecurrenceId;

appointment.RecurrenceException = value.RecurrenceException;

appointment.Description = value.Description;

appointment.Category = value.Category;

appointment.Assigned = value.Assigned;

}

_context.SaveChanges();

}

if (param.action == "remove" || (param.action == "batch" && param.deleted.Count > 0))

{

if (param.action == "remove")

{

int key = Convert.ToInt32(param.key);

Shift appointment = _context.Shifts.FirstOrDefault(c => c.ShiftId == key);

if (appointment != null) _context.Shifts.Remove(appointment);

}

else

{

foreach (var apps in param.deleted)

{

Shift appointment = _context.Shifts.FirstOrDefault(c => c.ShiftId == apps.ShiftId);

if (apps != null) _context.Shifts.Remove(appointment);

}

}

_context.SaveChanges();

}

return new JsonResult(new { result = _context.Shifts.ToList(), count = _context.Shifts.ToList().Count() });

}

///

/// 

///

///

public async Task OnPostUpdateEventsAsync()

    {

//

_context.Shifts.AddRange(ShiftEvents);

    //

    await _context.SaveChangesAsync();

    return Page();

}

#endregion Event Handlers

Thanks in advance!

<div id="schedule-control">

<ejs-schedule id="schedule" width="100%" height="500px" selectedDate="@DateTime.Now" currentView="MonthAgenda" 

              hideEmptyAgendaDays="false" agendaDaysCount="30" eventRendered="OnEventRendered" 

              popupOpen="OnPopupOpen">

<e-schedule-eventsettings>

<e-data-manager url="LoadData" crudUrl="UpdateData" adaptor="UrlAdaptor" crossDomain="true" 

                [email protected]></e-data-manager>

</e-schedule-eventsettings>

<e-schedule-views>

<e-view option="Agenda" allowVirtualScrolling="true"></e-view>

<e-view option="Week" allowVirtualScrolling="true"></e-view>

<e-view option="WorkWeek" allowVirtualScrolling="true"></e-view>

<e-view option="Month" allowVirtualScrolling="true"></e-view>

<e-view option="MonthAgenda" allowVirtualScrolling="true"></e-view>

<e-view option="Day" allowVirtualScrolling="true"></e-view>

</e-schedule-views>

</ejs-schedule>

</div>

[Logesh Rajappa]

Hi Jim, 

Thanks for contacting Syncfusion Support. 

Query: “I tried to use that code but the e-column-command is undefined in my code” 

We have validated your query and we do have support for command column in EJ2 like in EJ1. But command column is created as an object here and passed on to the command property of the grid column. Please refer to the below code example and documentation link for your reference. 

Code Example: 

[index.cshtml] 

@{ 

 

        List<object> commands = new List<object>(); 

        commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } }); 

        commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } }); 

        commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } }); 

        commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } }); 

 

    } 

<ejs-grid id="Grid" dataSource="ViewBag.DataSource" height="310"> 

 

            <e-grid-editSettings allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 

 

            <e-grid-columns> 

                <e-grid-column field="OrderID"  headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>                 

... 

    

                <e-grid-column headerText="Manage Records" width="120" command=commands></e-grid-column> 

      

            </e-grid-columns> 

</ejs-grid> 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit.html#command-column 

Online Demo: https://aspdotnetcore.syncfusion.com/Grid/CommandColumn#/material 

Please get back to us for further assistance. 

Regards, 

Logesh Rajappa

[JimN]

Thank you for the reply and the example code. The documentation states that the Edit, Delete, Save, and Cancel buttons are the "available built-in command buttons". Does this mean that I can create custom command buttons as well? What I'm trying to accomplish, by way of code in the Model code-behind file, is to perform some actions based on an action the user takes on a column in the Grid. If the built-in command column won't work this way, is it possible to use a button in a cell that executes a handler in the C# code (not in javascript code)? For example, is it possible to have a button in the column (cell) and then have it's click action invoke a handler in the code-behind? In ASP.NET Core, using Tag Helpers in a table cell, I can use the following code:

<td>
       <a asp-page="/AgencyInHouse/ToDo/Edit" asp-route-id="@item.ToDoItemId" asp-route-returnUrl="../../Index">Edit</a> |
       <a asp-page="/AgencyInHouse/ToDo/Details" asp-route-id="@item.ToDoItemId" asp-route-returnUrl="../../Index">Details</a> |
       <a asp-page="./Delete" asp-route-id="@item.ToDoItemId">Mark Complete</a>
</td>

I would like to use the Syncfusion Grid instead of a table if I can accomplish what I need.

Thanks

[Venkatesh Ayothi Raman]

Hi Jim, 

Thanks for the update. 

We have analyzed your query. We suggest you to use the column template feature of Grid. With this feature you can have a ASP.NET core Anchor tag in a column. Please refer the documentation and online sample link below, 

Documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns.html#column-template 

Online Sample : https://aspdotnetcore.syncfusion.com/Grid/ColumnTemplate#/material 

 

Please refer the code example below, 

<ejs-grid id="Grid" allowPaging="true" ...> 

    <e-grid-columns> 

        <e-grid-column headerText="Button Column" template="#template" textAlign="Right" width="120"></e-grid-column>  //Template Column 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

        ... 

    </e-grid-columns> 

</ejs-grid> 

 

 

<script id="template" type="text/x-template"> 

    <div> 

        <a asp-page="/AgencyInHouse/ToDo/Edit" asp-route-returnUrl="../../Index">Edit</a> 

    </div> 

</script> 

 

Also if you want to change that Anchor link as button then We can customize the anchor tag as button by adding class ‘e-btn’. Please follow the below documentation to convert anchor element into button element.  

  

Documentation Link:  

https://ej2.syncfusion.com/documentation/button/howto.html?lang=typescript#customize-input-and-anchor-elements  

https://ej2.syncfusion.com/aspnetcore/documentation/button/howto.html#customize-input-and-anchor-elements  

  

 

Please get back to us if you need further assistance. 

If we misunderstood your requirement, then could you please provide more information about your exact requirement? 

 

Regards, 

Venkatesh Ayothiraman. 

[Gige]

Hi. How can I open a popup window instead of new page in this example with  template="#template"  in column?

Thank you for help.

[Rajapandi Ravi]

Hi George,

We have analyzed your query and we could see that you are using template column and clicking in your template you like to open the popup dialog. Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

In this below sample, we have rendered the button element in the template column and clicking on this button we have open the popup window.

 

<div id="defaultDialog"></div>

    <ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowPaging="true">

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

        <e-grid-columns>

            <e-grid-column field="OrderID" headerText="Order ID" validationRules="@(new { required=true})" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>

            <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="140"></e-grid-column>

            <e-grid-column field="OrderDate" headerText="Order Date" editType="datepickeredit" format="yMd" width="120"></e-grid-column>

            <e-grid-column field="ShipCountry" template="#templateAccoes" headerText="Ship Country" editType="dropdownedit" width="140"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

 

<script id="templateAccoes" type="text/x-template">

    <button id="combo${OrderID}" onclick="onActionCallClick(this)">Open Dialog</button>

</script>

 

<script>

    function onActionCallClick(args) {

        var dialog = new ej.popups.Dialog({

            content: 'PopUp dialog',

            target: '.e-gridcontent',

            width: '800px',

            height: '500px',

            showCloseIcon: true,

            beforeClose: function (args) {

                args.element.ej2_instances[0].destroy();

            }

 

        });

        // Render initialized Dialog

        dialog.appendTo('#defaultDialog');

    }

 

</script>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample388398559.zip

Regards,

Rajapandi R