Filter EmptyMessage

[Albert Shenker]

Is there a way to have the FilterControl display an "EmptyMessage"?

[Vessy]

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

[Albert Shenker]

Is there a way of doing that in a client-side bound grid?

[Vessy]

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

[Albert Shenker]

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 = '';
}
});

}

 

[Vessy]

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