Bind commands to dataSource

[João]

Hi, I have the following view:

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


    List<object> toolbar = new List<object>();
        toolbar.Add(new { });
 
        <div class="col mt-5">
            <ejs-grid
                id="grid" dataSource="ViewBag.dataSource" headerTitle="Users" toolbar="toolbar" showHeader="true" >
                <e-grid-columns>
                    <e-grid-column field="Email" width="250"></e-grid-column>
                    <e-grid-column field="Role" width="100"></e-grid-column>
                    <e-grid-column headerText="" width="60" commands="commands"></e-grid-column>
                </e-grid-columns>
            </ejs-grid>
        </div>

This works. The problem is that I want to access in commands a property I have in ViewBag.dataSource

This si my dataSource:

    public partial class UsersRoles
    {
        public string? Email { get; set; }
        public string? Role { get; set; }
        public int Hierarchy { get; set; }
        public bool Delete { get; set; }
        public bool Edit { get; set; }
        public List<object> Commands { get; set; }
    }

List<Object> Commands is the same as above but changes from object to object. I want to have the commands rendered dinamicly in the server side.

My question basicly is, how can I make this work:

<ejs-grid
                id="grid" dataSource="ViewBag.dataSource" headerTitle="Users" toolbar="toolbar" showHeader="true" >
                <e-grid-columns>
                    <e-grid-column field="Email" width="250"></e-grid-column>
                    <e-grid-column field="Role" width="100"></e-grid-column>
                    <e-grid-column headerText="" width="60" commands="dataSource.Commands"></e-grid-column>
                </e-grid-columns>
            </ejs-grid>

[Rajapandi Ravi]

Hi João,

Greetings from Syncfusion support

Based on your requirement, we have prepared a sample and we have implemented the command columns codes at the server-side and displayed it in the Grid. Please refer the below code example and sample for more information.

Index.cshtml

 

<ejs-grid id="Grid" allowPaging="true" load="onLoad" allowFiltering="true" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })">

    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager>

    <e-grid-filtersettings type="Menu"></e-grid-filtersettings>

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

   

    <e-grid-columns>

        .  .  .  .  .  .  .

        .  .  .  .  .  .  .

        <e-grid-column headerText="Manage Records" width="150" commands="@ViewBag.ccolumn"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

HomeController.cs

 

public class HomeController : Controller

    {

        public static List<Orders> order = new List<Orders>();

        public static List<Commands> command = new List<Commands>();

        public IActionResult Index()

        {

            ViewBag.DataSource = Orders.getAllRecords().ToList();

            ViewBag.ccolumn = Commands.getAllRecords().ToList();

            return View();

        }

 

public class Commands

        {

            public Commands()

            {

 

            }

            public Commands(string type, object buttonOption)

            {

                this.type = type;

                this.buttonOption = buttonOption;

            }

 

            public static List<Commands> getAllRecords()

            {

                if (command.Count == 0)

                {

                    for (int i = 1; i < 2; i++)

                    {

                        command.Add(new Commands("Edit", new { iconCss = "e-icons e-edit", cssClass = "e-flat" }));

                        command.Add(new Commands("Delete", new { iconCss = "e-icons e-delete", cssClass = "e-flat" }));

                        command.Add(new Commands("Save", new { iconCss = "e-icons e-update", cssClass = "e-flat" }));

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

                    }

                }

                return command;

            }

 

            public string type { get; set; }

            public object buttonOption { get; set; }

        }

}

Sample:

Regards,

Rajapandi R

Attachment: sample_a2848b8f.zip