ColumnMenu events and placement

[Asad]

Hi there

I'm trying to add column menu to my grid but I need to do the following:

1) Add the three dots to the grid toolbar not to each column

2) I need once I click on the apply button to extend the functionality and run some js code, but I can't find any documentation for init, columnMenuOpen or any other event for ColumnMenu for .net core library.

 

Thanks

[Alexander]

Hi Asad,

Thank you for reaching out.

Based on the provided information, I am not exactly certain of the scenario that is being implemented on your end. In this regard, could elaborate more regarding the following:

• Is the Column Menu added to the Toolbar of the Grid? If so, note that adding the built-in column menu to the Grid toolbar is not supported out of the box. 

• Could you please elaborate more on what you specifically mean by "once I click on the apply button to extend the functionality and run some js code".

In addition, providing a code snippet with the current Grid's configuration would be beneficial for the case, as it will help me get a better overall understanding of the current scenario you are utilizing.

That being said, I noticed that there is not a Telerik UI for ASP.NET Core license associated with your account which limits the availability of our support services for the product. In this regard, It is recommended that you either purchase or renew your license in order to gain access to the latest updates, fixes, features, and support regarding the Telerik UI for ASP.NET Core components. More information regarding the currently available plans can be reviewed here:

• Support Plans

Kind Regards,
Alexander
Progress Telerik

[Asad]

Hi Alexander

Unfortunatelly, the reply is late. However, I could manage to add the Option button to the toolbar of the grid and evertything is working fine now. 

For the sake of the community, I'll post the a snippet of the code:

The Grid:

    

@(Html.Kendo().Grid<AdvancedSearchItem>()
    .Name("advanced-search-grid")
    .Columns(col => {
        the list of columns
    })

    .ToolBar(toolbar =>
    {
        toolbar.Excel(); 
    })

    .Excel(excel => excel
        .FileName(Localizer["ExcelFileName"].Value)
        .Filterable(true)
        .AllPages(true)
    )
    .Pageable(pager => pager.PageSizes(new int[] { 10, 25 }))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read =>
            read.Action("Action", "Controller", Model)
            .Type(HttpVerbs.Post))
    )
    .Scrollable()
    .Sortable()
    .Reorderable(r => {
        r.Columns(true);
    })
    .Height(700)
    )

 

To add the Column menu in the grid toolbar, I used this trick:

$("<div class='me-auto'></div><div id='showColumnToolbar' class='toolbar'><span id='showColumn'></span></div>").insertAfter("#advanced-search-grid .k-toolbar a.k-button");

        $("#showColumn").kendoColumnMenu({
            filterable: false,
            sortable: false,
            dataSource: grid.dataSource,
            columns: grid.columns,
            owner: grid,
            componentType: 'modern',
        });

 

Then, I've added a button to do the actual save of the grid options in database.

 

[Alexander]

Hi Asad,

Thank you for sharing your solution with the community. It is greatly appreciated.