Filter EmptyMessage

6 posts, 0 answers
  1. Albert Shenker
    Albert Shenker avatar
    586 posts
    Member since:
    Mar 2004

    Posted 16 Mar 2017 Link to this post

    Is there a way to have the FilterControl display an "EmptyMessage"?
  2. Vessy
    Admin
    Vessy avatar
    2245 posts

    Posted 17 Mar 2017 Link to this post

    Hi Albert,

    A possible approach to achieve the target result is given in the following forum thread:
    http://www.telerik.com/forums/text-in-filter-box-in-radgrid

    Please, give it a try and let us know in case you need further assistance on this matter.

    Regards,
    Vessy
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Albert Shenker
    Albert Shenker avatar
    586 posts
    Member since:
    Mar 2004

    Posted 17 Mar 2017 Link to this post

    Is there a way of doing that in a client-side bound grid?
  4. Vessy
    Admin
    Vessy avatar
    2245 posts

    Posted 20 Mar 2017 Link to this post

    Hi Albert,

    Yes, you can achieve it on the client-side by accessing the filter textbox client-side object via standard jQuesry methods. For example, you can do it in the Grid's GridCreated event handler:
    <telerik:RadGrid ID="RadGrid1" runat="server" ShowGroupPanel="False" AllowSorting="True" AllowFilteringByColumn="true" RenderMode="Classic"
        AllowPaging="True" AllowFiltering="True" AutoGenerateColumns="False" Skin="Bootstrap" PageSize="5"
        OnNeedDataSource="RadGrid1_NeedDataSource">
        <ClientSettings>
            <ClientEvents OnGridCreated="gridCreated"/>
        </ClientSettings>
        <MasterTableView CommandItemDisplay="Top">
            <CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false" ShowRefreshButton="false" />
            <Columns>
                <telerik:GridBoundColumn DataField="EmployeeCode" FilterControlAltText="Filter EmployeeCode column"
                    HeaderText="Emp ID" SortExpression="EmployeeCode" UniqueName="EmployeeCode">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="EmployeeName" FilterControlAltText="Filter EmployeeName column"
                    HeaderText="Emp Name" ReadOnly="True" SortExpression="EmployeeName" UniqueName="EmployeeName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="JobTitle" FilterControlAltText="Filter JobTitle column"
                    HeaderText="Job Title" SortExpression="JobTitle" UniqueName="JobTitle">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    <script type="text/javascript">
        function gridCreated(sender, args) {
            var filters = $telerik.$(".rgFilterBox");
            var targetFilter;
     
            for (var i = 0; i < filters.length; i++) {
                if (filters[i].id.endsWith("EmployeeName")) {
                    targetFilter = filters[i];
                    targetFilter.value = "Search";
                    break;
                }
            }
            $telerik.$(targetFilter).blur(function () { SetMessage(targetFilter); });
            $telerik.$(targetFilter).focus(function () { ClearMessage(targetFilter) });
        }
     
        function ClearMessage(obj) { 
            obj.value = "";
        }
     
        function SetMessage(obj) {
             obj.value = "Search";
        }
     
    </script>


    Regards,
    Vessy
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Albert Shenker
    Albert Shenker avatar
    586 posts
    Member since:
    Mar 2004

    Posted 10 May 2018 in reply to Vessy Link to this post

    I ended up creating the following function. This seems like an awful lot of code for something which would be easier to set with a FilterControlEmptyMessage property :)

    function SetFilterTextboxEmptyMessage(grid, columnName, emptyMessage) {
    var filters = $telerik.$(".rgFilterBox");
    var targetFilter;
    for (var i = 0; i < filters.length; i++) {
    var filterId = filters[i].id;
    if (filterId.endsWith(columnName) && filterId.indexOf(grid.get_id()) >= 0) {
    targetFilter = filters[i];
    targetFilter.value = emptyMessage;
    targetFilter.style.color = 'gray';
    targetFilter.style.fontStyle = 'italic';
    break;
    }
    }
    $telerik.$(targetFilter).blur(function() {
    if (targetFilter.value == '') {
    targetFilter.value = emptyMessage;
    targetFilter.style.color = 'gray';
    targetFilter.style.fontStyle = 'italic';
    }
    });
    $telerik.$(targetFilter).focus(function() {
    if (targetFilter.value == emptyMessage) {
    targetFilter.value = '';
    targetFilter.style.color = '';
    targetFilter.style.fontStyle = '';
    }
    });

    }

     

  6. Vessy
    Admin
    Vessy avatar
    2245 posts

    Posted 15 May 2018 Link to this post

    Hi,

    Thank you for sharing your solution with us, Albert - I am glad you have managed to find a way to achieve the target behavior. I cannot help but agree with you that such a feature will be very useful, so if you decide you can submit a request for it in our Feedback portal here:
    https://feedback.telerik.com/Project/108/Feedback/List/Feature%20Request


    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top