FilterMenu Customization issue

10 posts, 0 answers
  1. Pradip
    Pradip avatar
    9 posts
    Member since:
    Nov 2011

    Posted 15 Apr 2014 Link to this post

    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();
                        }
                    }
                 }          
            }

  2. Pradip
    Pradip avatar
    9 posts
    Member since:
    Nov 2011

    Posted 15 Apr 2014 Link to this post

    image of rad-grid..
    there are three filter-menu, and i want to customize them all.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 18 Apr 2014 Link to this post

    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.

     
  5. Pradip
    Pradip avatar
    9 posts
    Member since:
    Nov 2011

    Posted 21 Apr 2014 Link to this post

    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.
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 Apr 2014 in reply to Pradip Link to this post

    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.
  7. Pradip
    Pradip avatar
    9 posts
    Member since:
    Nov 2011

    Posted 22 Apr 2014 in reply to Shinu Link to this post

    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.
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Apr 2014 in reply to Pradip Link to this post

    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
  9. Pradip
    Pradip avatar
    9 posts
    Member since:
    Nov 2011

    Posted 24 Apr 2014 in reply to Shinu Link to this post

    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
  10. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 24 Apr 2014 in reply to Pradip Link to this post

    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
  11. Pradip
    Pradip avatar
    9 posts
    Member since:
    Nov 2011

    Posted 24 Apr 2014 in reply to Shinu Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017