Grid + Link

[Thomaz Lima]

Hi,

I try create a page with a grid.

this grid has a Edit Button, but I need this button redirect to another page.

I can't discovery how can I do this.

[Dhivya Rajendran]

Hi Thomaz, 

Thanks for contacting Syncfusion support. 

We have analyzed your requirement and created a sample for your reference. In the below sample we have used command column feature for editing operation in Grid and we have customized the edit button click event. You can also customize the button click event as per your requirement (redirect to another page).   

Kindly refer to the below code example and sample for more information. 

@{ 

 

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

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

} 

 

@Html.EJS().Grid("EditParam").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).ValidationRules(new { required = "true" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    . . . . 

    col.HeaderText("Manage Records").Width("150").Commands(commands).Add(); 

 

}).AllowPaging().Load("load").EditSettings(edit => { edit.AllowEditing(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Search" }).Render() 

 

<script> 

    function load() { 

           this.columns[4].commands[0].buttonOption.click = function (args) { 

           var row = new ej.base.closest(event.target, '.e-row'); // get row element  

           var index = row.getAttribute('aria-rowindex') 

           var grid = document.getElementById('Grid').ej2_instances[0]; 

           var rowData = grid.currentViewData[index]; // get current row Data 

          // you can send POST request or redirect to another page  

      } 

    } 

</script> 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvc-commandcolumn1348355481  

Help documentation : https://ej2.syncfusion.com/16.1.37/aspnet/documentation/grid/edit.html?syntax=razor#command-column  

If we misunderstood your requirement, could you please provide more information regarding your query, it will be more helpful for us to provide a better solution as soon as possible. 

Regards,
R.Dhivya.  

[Thomaz Lima]

HI,

I undersant, but with a Menu Context it is not possible?

When I click on the Edit Record menu, do not redirect to another page or maybe exist row use a Edit Mode Dialog Template

[Dhivya Rajendran]

Hi Thomaz, 

Query : I understand, but with a Menu Context it is not possible? 

We have provided an event while click the context menu items in Grid. You can achieve your requirement by using the ContextMenuClick event. 

Kindly refer to the below code example and documentation link for more information. 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

{ 

    . . . . 

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true" }).Add(); 

    col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); 

 

}).AllowPaging().ContextMenuItems( new List<object>() {"Edit", "PdfExport", "ExcelExport" }).ContextMenuClick("menuClick").AllowExcelExport(true).AllowPdfExport(true).EditSettings(edit => { edit.AllowEditing(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal).Render() 

 

<script> 

  function menuClick(args) { 

    if (args.item.text === 'Edit Record') { 

        // you can redirect the page as per your requirement. 

    } 

  } 

Help documentation : https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=typescript#contextmenuclick  

Regards,
R.Dhivya 

[Thomaz Lima]

Hi,

Thanks your help.

[Dhivya Rajendran]

Hi Thomaz,

 

Thanks for your update.

 

We are happy to hear that the provided solution was helpful to achieve your requirement.

 

Please get back to us if you need further assistance on this. 

Regards,
R.Dhivya 

[Bhrugen]

Hi,

With syncfusion grid in  ej2 I want to add a details button that would redirect to some action in an MVC controller is that possible?

[Thiyagu Subramani]

Hi Bhrugen,

 

Thanks for contacting Syncfusion forum.

 

We can achieve your requirement using command click event. In this event we have showed row details and redirected to some action in an MVC controller using ajax post.

 

Please refer to the below code block.

 

@{

 

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

    commands.Add(new { type = "userstatus", buttonOption = new { content = "Details", cssClass = "e-flat" } });

}

 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>

{

    . . . . .

    col.HeaderText("Manage Records").Width("150").Commands(commands).Add();

 

}).AllowPaging().Load("load").CommandClick("commandClick").EditSettings(edit => { edit.AllowEditing(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Search" }).Render()

 

<script>

   

    function commandClick(args) {

        console.log((JSON.stringify(args.rowData)));  // display row data details

         var ajax = new ej.base.Ajax({

            type: "POST",

            url: "/Home/PersonnelList",

            contentType: "application/json; charset=utf-8",

        });

        var data = JSON.stringify({ Username: 'hello', Password: 123456 });

        ajax.send(data).then();

        ajax.onSuccess = result => {

            console.log(JSON.parse(result));

        };

    }

 

</script>

 

        public class MyModel

        {

            public string Username { get; set; }

            public long Password { get; set; }

        }

        public JsonResult PersonnelList(MyModel model)

        {

            List<Name> list = new List<Name>

            {

                new Name { Text = "Berlin"},

                new Name { Text = "Madrid"},

                new Name { Text = "Cholchester"}

            };

            return Json(list);

        }

 

Reference link : https://ej2.syncfusion.com/documentation/api/grid/#commandclick

 

Please get back to us, if you need any further assistance.

 

Regards,

Thiyagu S