This is a migrated thread and some comments may be shown as answers.

FilterMenu Customization issue

9 Answers 15 Views
Filter
This is a migrated thread and some comments may be shown as answers.
Pradip
Top achievements
Rank 1
Pradip asked on 15 Apr 2014, 01:00 PM
Hi,

I want to customize filter-menu according to column.
there are 4 columns in my rad-grid and all that columns contains filter-menu , I want to customise all of them filter-menu.

issue is when i customize first column(filter-menu) using unique-id of column , changes apply to all filter-menu on rad-grid.
another issue is when i put customize code for more than one column, filter-menu drop-down stops working.

following code i used.....


    protected void RadGridUserActionLog_Init(object sender, System.EventArgs e)
        {
            foreach (GridColumn column in RadGridUserActionLog.Columns)
            {             
                if (column.UniqueName == "Date")
                {
                    GridFilterMenu menu = RadGridUserActionLog.FilterMenu;
                    int i = 0;

                    while (i < menu.Items.Count)
                    {
                        if (menu.Items[i].Text == "IsNull" || menu.Items[i].Text == "NotIsNull")
                        {
                            i++;
                        }
                        else
                        {
                            menu.Items.RemoveAt(i);
                        }
                    }                    
                }
                              

                if (column.UniqueName == "Username")
                {
                    GridFilterMenu defaultmenu = RadGridUserActionLog.FilterMenu;
                    int i = 0;

                    while (i < defaultmenu.Items.Count)
                    {
                        if (defaultmenu.Items[i].Text == "NoFilter" || defaultmenu.Items[i].Text == "EqualTo" || defaultmenu.Items[i].Text == "NotEqualTo" || defaultmenu.Items[i].Text == "GreaterThan" || defaultmenu.Items[i].Text == "LessThan" || defaultmenu.Items[i].Text == "GreaterThanOrEqualTo" || defaultmenu.Items[i].Text == "LessThanOrEqualTo")
                        {
                            i++;
                        }
                        else
                        {
                            defaultmenu.Items.RemoveAt(i);
                            
                        }
                        RadGridUserActionLog.FilterMenu.DataBind();
                    }
                }
             }          
        }

9 Answers, 1 is accepted

Sort by
0
Pradip
Top achievements
Rank 1
answered on 15 Apr 2014, 01:03 PM
image of rad-grid..
there are three filter-menu, and i want to customize them all.
0
Genady Sergeev
Telerik team
answered on 18 Apr 2014, 08:18 AM
Hi Pradip,

Please take a look at the customize filter menu help article, which describes a possible approach.

I hope that this helps.

Regards,
Genady Sergeev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Pradip
Top achievements
Rank 1
answered on 21 Apr 2014, 06:39 AM
i already checked it, it works fine only for one column.
While i have 3 columns in my rad-grid and i want to customize filter-menu  for all of them individually , as i mention above.
0
Shinu
Top achievements
Rank 1
answered on 21 Apr 2014, 07:42 AM
Hi Pradip,

Please have a look into the sample code snippet which works fine at my end. Try to replicate the issue in the provided code or please provide your full code for further help.

ASPX:
<telerik:RadGrid ID="radgrdOrders" runat="server" AllowFilteringByColumn="true" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" OnInit="radgrdOrders_Init">
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" UniqueName="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CustomerID" UniqueName="CustomerID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="EmployeeID" UniqueName="EmployeeID">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:
protected void radgrdOrders_Init(object sender, EventArgs e)
{
    GridFilterMenu menu = radgrdOrders.FilterMenu;
    int Counter = 0;
    while (Counter < menu.Items.Count)
    {
        if (menu.Items[Counter].Text == "NoFilter" || menu.Items[Counter].Text == "Contains" || menu.Items[Counter].Text == "EqualTo" || menu.Items[Counter].Text == "GreaterThan" || menu.Items[Counter].Text == "LessThan")
        {
            Counter++;
        }
        else
        {
            menu.Items.RemoveAt(Counter);
        }
    }
}

Thanks,
Shinu.
0
Pradip
Top achievements
Rank 1
answered on 22 Apr 2014, 12:04 PM
Thanks Shinu for your reply,

Yes, code which suggested by you is working but I have 3 column and want to customize individually.
All three colums should have different filter-menu.

Suppose for "date" column  there should be only "GreaterThan" and "LessThan" item display in filter-menu,
same as  for "username" column there should be only "NoFilter" and "EqualTo" item display in filter-menu.
0
Shinu
Top achievements
Rank 1
answered on 23 Apr 2014, 07:19 AM
Hi Pradip,

Please take a look at the sample code snippet. I have customized the filter menu for two column. Try and let me know if any concern.

ASPX:
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource" AllowFilteringByColumn="true" EnableLinqExpressions="false">
    <MasterTableView DataKeyNames="ID">
        <Columns>
            <telerik:GridBoundColumn UniqueName="ID" DataField="ID" HeaderText="ID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Number" HeaderText="Number" UniqueName="Number" DataType="System.Int16">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <Scrolling AllowScroll="false" />
        <ClientEvents OnFilterMenuShowing="filterMenuShowing" />
    </ClientSettings>
    <FilterMenu OnClientShown="MenuShowing" />
</telerik:RadGrid>

C#:
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    dynamic data = new[] {
        new { ID = 1, Name = "Name1", Number=123},
        new { ID = 2, Name = "Name2", Number=456},
        new { ID = 3, Name = "Name3", Number=789},
        new { ID = 4, Name = "Name4", Number=123},
        new { ID = 5, Name = "Name5", Number=258}
    };
    RadGrid1.DataSource = data;
}

JS:
<script type="text/javascript">
    var column = null;
    var columnName = null;
    function MenuShowing(sender, args) {
        if (column == null) return;
        if (columnName == null) return;
        var menu = sender; var items = menu.get_items();
        if (columnName == "Name") {
            var i = 0;
            while (i < items.get_count()) {
                if (!(items.getItem(i).get_value() in { 'StartsWith': '', 'Contains': '' })) {
                    var item = items.getItem(i);
                    if (item != null)
                        item.set_visible(false);
                }
                else {
                    var item = items.getItem(i);
                    if (item != null)
                        item.set_visible(true);
                } i++;
            }
        }
        else {
            if (columnName == "Number") {
                var j = 0;
                while (j < items.get_count()) {
 
                    if (!(items.getItem(j).get_value() in { 'EqualTo': '', 'NotEqualTo': '' })) {
                        var item = items.getItem(j);
                        if (item != null)
                            item.set_visible(false);
                    }
                    else {
                        var item = items.getItem(j);
                        if (item != null)
                            item.set_visible(true);
                    } j++;
                }
            }
        }
        column = null;
        columnName = null;
    }
 
    function filterMenuShowing(sender, eventArgs) {
        column = eventArgs.get_column();
        columnName = eventArgs.get_column().get_uniqueName();
    }
</script>

Thanks,
Shinu
0
Pradip
Top achievements
Rank 1
answered on 24 Apr 2014, 07:07 AM
Hi Shinu,

Code which you posted is working fine , But one issue arise because of it.
Blank space is display in filter-menu at the place of items which we set as visible false.

I give you screenshot of it.

thanks
0
Shinu
Top achievements
Rank 1
answered on 24 Apr 2014, 09:48 AM
Hi Pradip,

Unfortunately, I'm unable to replicate the issue at my end. Can you please provide your full code snippet and the version you are using.

Thanks,
Shinu
0
Pradip
Top achievements
Rank 1
answered on 24 Apr 2014, 12:57 PM
Hi Shinu,

Now issue is resolved using following jquery script.
$(".rmItem").each(function () {
              if ($(this).find("a").attr("style") == "width: auto; display: none;") {
                  $(this).hide();
              }
          });

Thank you very much for your help

Thanks,
Pradip
Tags
Filter
Asked by
Pradip
Top achievements
Rank 1
Answers by
Pradip
Top achievements
Rank 1
Genady Sergeev
Telerik team
Shinu
Top achievements
Rank 1
Share this question
or