Client-side object model

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 29 Dec 2020 14:08 by ADMIN

Matthew

Created on: 25 Aug 2016 14:19

Category: UI for ASP.NET AJAX

Type: Feature Request

Client-side object model

Would be really nice if there was a clearly defined client-side object model for the radGrid. We created a function like the one below by deconstructing the header menu. The jQuery selectors to find the container and affected dropdown lists are really hacky and very brittle.  Reliance on magic strings means that upgrading to future versions is likely to break code like this.

Ideally we should be able to reference (and alter) a client-side filter operators collection like this: grid.headerMenu.filterOperators

function headerMenuShowing(sender, args) {
    var $container = jQuery("div[id^='" + sender.get_id() + "_rghcMenu']");
    var $lists = $container.find("ul.rcbList");
    var gridCol = args.get_gridColumn();
    var dataType = gridCol.get_dataType();
    switch (dataType) {
        case "System.String":
            $lists.find("li:contains('GreaterThan')").hide();
            $lists.find("li:contains('LessThan')").hide();
            $lists.find("li:contains('IsEmpty')").hide();
            $lists.find("li:contains('NotIsEmpty')").hide();
            break;
        case "System.Int32":
        case "System.Int64":
        case "System.Double":
        case "System.Decimal":
        case "System.DateTime":
            $lists.find("li:contains('GreaterThan')").show();
            $lists.find("li:contains('LessThan')").show();
            break;
    }
}

1 comment

ADMIN

Doncho

Posted on: 29 Dec 2020 14:08

Hello,

The HeaderContextMenu used in RadGrid is an internally used RadMenu control, and more precisely a RadContextMenu Object.

A reference to the context menu object is passed In the event arguments of the OnHeaderMenuShowing client-side event of the RadGrid. (eventArgs.get_menu())

The desired customization of the filter menu options can be achieved by getting a client-side reference to the embedded RadComboBox controls inside the filter menu and hide some of their items. Check out how to Get Client-side Reference to a Control Object.

Here is a sample solution based on the client-side API of the RadMenu and the RadComboBox:

<script>    
    function OnHeaderMenuShowing(sender, args) {
        var menu = args.get_menu();
        var filterMenuContainer = menu.findItemByValue("FilterMenuParent");
        if (filterMenuContainer) {
            var firstCondCombo = filterMenuContainer.findControl("HCFMRCMBFirstCond");
            var secondCondCombo = filterMenuContainer.findControl("HCFMRCMBSecondCond");
        }
        var dataType = args.get_gridColumn().get_dataType();
        if (dataType == "System.String") {
            if (firstCondCombo) {
                firstCondCombo.findItemByText("GreaterThan").set_visible(false);
                firstCondCombo.findItemByText("LessThan").set_visible(false);
                firstCondCombo.findItemByText("IsEmpty").set_visible(false);
                firstCondCombo.findItemByText("NotIsEmpty").set_visible(false);
            }
            if (secondCondCombo) {
                secondCondCombo.findItemByText("GreaterThan").set_visible(false);
                secondCondCombo.findItemByText("LessThan").set_visible(false);
                secondCondCombo.findItemByText("IsEmpty").set_visible(false);
                secondCondCombo.findItemByText("NotIsEmpty").set_visible(false);
            }
        }
    }
</script>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource"
    AllowFilteringByColumn="true" FilterType="HeaderContext">
    <ClientSettings>
        <ClientEvents OnHeaderMenuShowing="OnHeaderMenuShowing" />
    </ClientSettings>
    <MasterTableView AutoGenerateColumns="true" DataKeyNames="ID" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true">
    </MasterTableView>
</telerik:RadGrid>

C# code for binding sample data to the RadGrid:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = Enumerable.Range(1, 20).Select(x => new { ID = x, Name = "Name " + x });
}

Kind regards,
Doncho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.