How to add custom command to List<GridColumnSettings>

[Marianne]

Hello 

Hopefully someone can give me an idea of how to do this. I am using Razor not MVC.

Currently I am building the columns setting for a grid using a backend function in the .cs file to create List<GridColumnSettings>. Then I can reference that from the Grid.  This application has a lot of columns and it seemed more compact to do this than list them in the grid.

However, now I want to add a button to send a user to a details page for any given row.  Since the grid view scrolls horizontally pretty far, I want to give the users an option of viewing a selected row vertically.  I planned to just redirect to another page when the user clicked the link or button (by invoking a script to do the work of getting the row id and redirecting to the details.)

However, I haven't hit on the correct way to add this custom button or line to the GridColumnSettings.  I've tried several configurations and haven't hit on something that works.

Does anyone have any suggestions?

Snippets of my current code are below.  Please see the attached example.png for an illustration of what I would like to do.

Thank you!

============================================

Creating the grid columns in Utilities.cs

 public List<GridColumnSettings> makeApplicationListColumnHeadings()
        {
            IList<GridColumnSettings> columns = new List<GridColumnSettings>
            {
                new GridCommandColumnSettings
                {
                     Commands =
                    {                       
                         new GridEditActionCommand()
                         {
                            Text = "Edit",       
                             UpdateText = "Update",
                             CancelText = "Cancel",
                             },
                         new GridDestroyActionCommand()
                         {                           
                         }
                     },
                    Width = "110px",
                    Filterable = false,
                    Locked = true,
                    Title = "Change"
                },

                 new GridColumnSettings
            {
                Member = "Id",
                Title = "Id",
                Visible = false,
                Width = "15px",
                Filterable = true
            },
           new GridColumnSettings
            {
                Member = "ApplicationName",
                Title = "App",
                Visible = true,
                Sortable = true,
                Width = "250px",
                Filterable = true

            },
             new GridColumnSettings
            {
                Member = "WebApplicationName",
                Title = "Web Name",
                Visible = true,
                Sortable = true,
                Width = "250px",
                Filterable = true

            }, ....

==========

populating the columns list in the applicationList.cshtml.cs

public class ApplicationListModel : PageModel
    {
        private readonly HCApplicationsWeb.Models.AppDbContext db;
        public List<Applications> apps;
        public string message = string.Empty;
        public Utilities u = new Utilities();
        public IList<GridColumnSettings> columns;
        public int Id { get; set; }

        public ApplicationListModel(HCApplicationsWeb.Models.AppDbContext db)
        {
            this.db = db;
            if (apps == null)
            {
                apps = GetList();
            }
            columns = u.makeApplicationListColumnHeadings();
        }
        public void OnGet()
        {            
            if(apps == null || apps.Count < 1)
            {
                apps = GetList();
            }
            if(columns.Count < 1)
            {
                columns = u.makeApplicationListColumnHeadings();
            }
        }

====================

 

Here is the cshtml grid in applicationList.cshtml:

<div id="griddiv">
    @(Html.Kendo().Grid<Applications>(Model.apps)    
    .Name("grid")
    .Pageable()
    .Sortable()
    .Editable(x => x.Mode(GridEditMode.PopUp).TemplateName("ApplicationsEditor").Window( w => w.Width(700)))
    .Scrollable()   
    .Filterable()
    .ToolBar(toolbar=> {
       @* toolbar.Create().IconClass("k-icon k-i-create");
        toolbar.Save().IconClass("k-icon k-i-create");*@
        toolbar.Excel().IconClass("k-icon k-i-download");

    })
    .Excel(excel => excel
    .FileName("HCApplications.xlsx")
    .Filterable(true)
    .AllPages(true)
    .ProxyURL("ApplicationList?handler=Save")
    )
    .Columns(columns => columns.LoadSettings(Model.columns))
    .Resizable(r => r.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Events(events => events.Error("error_handler"))
        .ServerOperation(false)
        .PageSize(100)
        .Read(read => read.Url(Url.Action()+"?handler=Read").Data("forgeryToken"))
        .Update(u => u.Url(Url.Action() +"?handler=UpdatePopUp").Data("forgeryToken"))
        .Destroy(d => d.Url(Url.Action()+"?handler=Destroy").Data("forgeryToken"))
        .Model(model =>{
            model.Id(p => p.Id);
        }
        )

     )
     .Pageable()
)
</div>

 

                             

[Mihaela]

Hello Marianne,

To add a custom column command that redirects to another Razor page with details about the specified record, I would recommend the following approach:

• Add the custom column command in the GridCommandColumnSettings:

IList<GridColumnSettings> columns = new List<GridColumnSettings>
{
                new GridCommandColumnSettings
                {
                     Commands =
                    {                       
                        new GridCustomActionCommand()
                        {
                            Text = "Details",
                            Name = "Custom",
                            Click = { HandlerName = "onDetailsClick" }  
                        },
                         new GridEditActionCommand()
                         {
                            Text = "Edit",       
                             UpdateText = "Update",
                             CancelText = "Cancel",
                             },
                         new GridDestroyActionCommand()
                         {                           
                         }
                     },
                    Width = "110px",
                    Filterable = false,
                    Locked = true,
                    Title = "Change"
                },
                ...
};
         

 

• Add the command "click" event handler after the Grid initialization, get the respective data item, and use the "window.location.href" property to redirect to another Page:

<script>
    function onDetailsClick(e) {
        var dataItem = this.dataItem($(e.currentTarget).closest("tr")); //Get the dataItem
        if (dataItem.Id > 0) {
            window.location.href = '/PageName?Id=' + dataItem.Id;
        }
    }
</script>

Would you please give this example a try and let me know if it works as per your expectations?

Alternatively, you could display the record's details in a popup Window, as demonstrated in the Grid Custom command demo.

 

 

Regards, Mihaela Progress Telerik

[Marianne]

Perfect! I danced all around the correct answer!  I like using this approach because I just feel like I have more flexibility to use backend code to create the columns.  (For example we have to do a grid views going backwards 18 months starting with the prior month and forwards 18 months. )

I was good with the javascript. 

Are there any other features to the custom action command that I can learn about?

THANKS!

[Mihaela]

Thank you for your feedback, Marianne. It is much appreciated!

You can set a Template/TemplateId, IconClass, and HtmlAttributes to the GridCustomActionCommand, as well.