Graphical problem for FilterChecklist

3 posts, 0 answers
  1. Giulio
    Giulio avatar
    5 posts
    Member since:
    Apr 2014

    Posted 16 Apr 2014 Link to this post

    Hi everyone!

    I have created a sharepoint webpart containing a radgrid with a little customized filterchecklist; here's my code.

    .aspx page:

    <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
    <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Assembly Name="Telerik.Web.UI, Version=2014.1.403.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
    <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2014.1.403.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
    <%@ Import Namespace="Microsoft.SharePoint" %>
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="RadGridWebPartUserControl.ascx.cs" Inherits="CheckListFiltering.RadGridWebPart.RadGridWebPartUserControl" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
      <style type="text/css">
      .HoverClass
      
          background-color: aqua;
      }
      .ClickClass
      {
          background-color: yellow;
      }
      .RadFilterMenu_CheckList
      {
          height: 300px;
          width: 200px;
      }
      </style>
      <script type="text/javascript">
          Telerik.Web.UI.RadGrid.prototype._checkListItemsRequestedHandler = function () {
              var items = $find(this._filterCheckListClientID).get_items();
              var count = items.get_count();
              for (var i = 0; i < count; i++) {
                  var value = items.getItem(i).get_value().toString();
                  if (value != "0")
                      items.getItem(i).check();
                  else
                      items.getItem(i).uncheck();
                  items.getItem(i).set_value(items.getItem(i).get_text());
              }
          }
          function RowCreated(sender, eventArgs) {
              var dataItem = eventArgs.get_gridDataItem();
              for (var i = 0; i < dataItem.get_element().cells.length; i++) {
                  dataItem._element.cells[i].onmouseover = function () {
                      this.className = "HoverClass";
                  }
                  dataItem.get_element().cells[i].onmouseout = function () {
                      var cssName = this.selected ? "ClickClass" : this.defaultStatus;
                      this.className = cssName;
                      return;
                  }
                  dataItem.get_element().cells[i].onclick = function (event) {
                      this.selected = this.selected == true ? false : true;
                      var cssName = this.selected ? "ClickClass" : this.defaultStatus;
                      this.className = cssName;
                      return;
                  }
              }
          }
      </script>
      <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
      <telerik:RadGrid runat="server" ID="RadGrid1" AllowFilteringByColumn="true" FilterType="CheckList" EnableLinqExpressions="false"
                       OnNeedDataSource="RadGrid1_NeedDataSource" OnFilterCheckListItemsRequested="RadGrid1_NeedCheckListItems">
        <MasterTableView AutoGenerateColumns="false">
          <Columns />
        </MasterTableView>
        <ClientSettings>
          <ClientEvents OnRowCreated="RowCreated" />
        </ClientSettings>
      </telerik:RadGrid>

    .aspx.cs:

    using System;
    using System.Collections;
    using System.Collections.Generic;
    using System.Data;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using Telerik.Web.UI;
     
    namespace CheckListFiltering.RadGridWebPart
    {
        public partial class RadGridWebPartUserControl : UserControl
        {
            private const int VISIBLE = 1;
            private const int FILTER = 0;
            private const int INVISIBLE = -1;
            private const int UNKNOWN = 99;
            
            private static bool Paging;                          // Paging(true) - Scrolling(false)
            private static DataTable Data = new DataTable();     // Contenuto della griglia
            private static DataTable DataFiltered;               // Contenuto della griglia filtrata
            private static int[,] Status;                        // Struttura ausiliaria utile al riempimento delle "FilterCheckList"
     
             
            // Inizializzazione dello "ScriptManager" (ad ogni caricamento della pagina), dei dati membro e della griglia (solo al caricamento iniziale)
     
            protected override void OnInit(EventArgs e)
            {
                base.OnInit(e);
                ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
                if (scriptManager == null)
                {
                    scriptManager = new RadScriptManager();
                    this.Page.Form.Controls.AddAt(0, scriptManager);
                }           
                if (Data.Rows.Count == 0)
                {
                    DataSet Ds = new DataSet();
                    Ds.ReadXml("C:\\Temp\\App_Data\\data.xml");  // TODO: Read parameter
                    Paging = true;                               // TODO: Read parameter
                    Data = Ds.Tables[0];
                    DataFiltered = Data.Select("").Length != 0 ? Data.Select("", Data.Columns[0].ColumnName + " ASC").CopyToDataTable() : new DataTable();
                    Status = new int[Data.Rows.Count, Data.Columns.Count];
                    for (int i = 0; i < Data.Rows.Count; i++)
                        for (int j = 0; j < Data.Columns.Count; j++)
                            Status[i, j] = VISIBLE;               
                    RadGrid1.Width = 220 * Data.Columns.Count;
                    if (Paging)
                    {
                        RadGrid1.AllowPaging = true;
                        RadGrid1.PagerStyle.AlwaysVisible = true;
                    }
                    else
                    {
                        RadGrid1.ClientSettings.Scrolling.AllowScroll = true;
                        RadGrid1.ClientSettings.Scrolling.ScrollHeight = 300;
                    }
                    for (int i = 0; i < Data.Columns.Count; i++)
                    {
                        GridBoundColumn Column = new GridBoundColumn();
                        RadGrid1.MasterTableView.Columns.Add(Column);
                        Column.DataField = Data.Columns[i].ColumnName;
                        Column.UniqueName = Data.Columns[i].ColumnName;
                        Column.HeaderText = Data.Columns[i].ColumnName;
                        Column.FilterDelay = 200;
                        Column.FilterCheckListEnableLoadOnDemand = true;
                    }
                }
            }
     
     
            // Filtraggio e databinding della griglia
             
            protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
            {
                String filterExpression = Fix_Expression(RadGrid1.MasterTableView.FilterExpression);
                DataFiltered = Data.Select(filterExpression).Length != 0 ? Data.Select(filterExpression, Data.Columns[0].ColumnName + " ASC").CopyToDataTable() : new DataTable();
                Set_Status(filterExpression);
                RadGrid1.DataSource = DataFiltered;
            }
     
     
            // Creazione delle "FilterCheckList"
             
            public void RadGrid1_NeedCheckListItems(object sender, GridFilterCheckListItemsRequestedEventArgs e)
            {
                int col_index = Get_Index(e.Column.UniqueName);
                DataRow[] dr = Data.Select("", Data.Columns[0].ColumnName + " ASC");
                for (int i = 0; i < dr.Length; i++)
                {
                    if (!Status[i, col_index].Equals(INVISIBLE))
                    {
                        RadListBoxItem Item = new RadListBoxItem();
                        Item.Text = Convert.ToString(dr[i][col_index]);
                        Item.Value = Convert.ToString(Status[i, col_index]);
                        bool Found = false;
                        for (int k = 0; k < e.ListBox.Items.Count; k++)
                        {
                            if (e.ListBox.Items[k].Text.Equals(Item.Text))
                            {
                                Found = true;
                                break;
                            }
                        }
                        if (!Found)
                            e.ListBox.Items.Add(Item);
                    }
                }
            }
     
     
            // Utility per la manipolazione della "FilterExpression"
             
            public String Fix_Expression(String filterExpression)
            {
                String newExpression = "";
                for (int i = 0; i < Data.Columns.Count; i++)
                {
                    if ( RadGrid1.MasterTableView.Columns[i].EvaluateFilterExpression().Contains("=") )
                    {
                        String expression = RadGrid1.MasterTableView.Columns[i].EvaluateFilterExpression();
                        String col_name = expression.Substring(expression.IndexOf("[") + 1, expression.IndexOf("]") - expression.IndexOf("[") - 1);
                        String value = expression.Substring(expression.IndexOf("'") + 1, expression.LastIndexOf("'") - expression.IndexOf("'") - 1);
                        filterExpression = filterExpression + " AND ([" + col_name + "] LIKE '" + value + "%')";
                    }
                }
                String[] Expression = filterExpression.Split(new String[] { " AND " }, StringSplitOptions.RemoveEmptyEntries);
                for (int k = 0; k < Expression.Length; k++)
                {
                    if (Expression[k].Contains("LIKE"))
                        Expression[k] = Expression[k].Replace("'%", "'");
                    else
                    {
                        DataRow[] dr = Data.Select("", Data.Columns[0].ColumnName + " ASC");
                        String col_name = Expression[k].Substring(Expression[k].IndexOf("[") + 1, Expression[k].IndexOf("]") - Expression[k].IndexOf("[") - 1);
                        int col_index = Get_Index(col_name);
                        for (int i = 0; i < Data.Rows.Count; i++)
                        {
                            if (Status[i, col_index].Equals(INVISIBLE))
                                Expression[k] = Expression[k].Remove(Expression[k].LastIndexOf(")")) + " OR ([" + col_name + "] = '" + Convert.ToString(dr[i][col_index]) + "'))";
                        }
                    }
                    newExpression = (k != (Expression.Length - 1)) ? newExpression + Expression[k] + " AND " : newExpression + Expression[k];
                }
                return newExpression.Replace("||"," OR ");
            }
     
     
            // Utility per la modifica di "Status" sulla base del valore della "FilterExpression"
     
            public void Set_Status(string filterExpression)
            {
                for (int j = 0; j < Data.Columns.Count; j++)
                {
                    if (!filterExpression.Contains(Data.Columns[j].ColumnName))
                    {
                        for (int i = 0; i < Data.Rows.Count; i++)
                            Status[i, j] = Status[i, j].Equals(FILTER) ? UNKNOWN : Status[i, j];
                    }
                }
                String[] Expression = filterExpression.Split(new String[] { " AND " }, StringSplitOptions.RemoveEmptyEntries);
                for (int k = 0; k < Expression.Length; k++)
                {
                    DataRow[] dr = Data.Select("", Data.Columns[0].ColumnName + " ASC");
                    String col_name = Expression[k].Substring(Expression[k].IndexOf("[") + 1, Expression[k].IndexOf("]") - Expression[k].IndexOf("[") - 1);
                    int col_index = Get_Index(col_name);
                    if ( !Expression[k].Contains("LIKE") )
                    {
                        for (int i = 0; i < Data.Rows.Count; i++)
                        {
                            if ( Expression[k].Contains(Convert.ToString("'" + dr[i][col_index] + "'")) )
                                Status[i, col_index] = Status[i, col_index].Equals(FILTER) ? UNKNOWN : Status[i, col_index];
                            else
                                Status[i, col_index] = FILTER;
                        }
                    }
                }
                for (int i = 0; i < Data.Rows.Count; i++)
                    for (int j = 0; j < Data.Columns.Count; j++)
                    {
                        if (!Is_Filtered(i))
                            Status[i, j] = VISIBLE;
                        if (Is_Filtered(i) && !Status[i, j].Equals(FILTER))
                            Fix_Element(i, j);
                    }
            }
     
     
            // Utility di supporto alla modifica di "Status"
     
            public void Fix_Element(int row_index, int col_index)
            {
                bool Invisible = true;
                DataRow[] dr = Data.Select("", Data.Columns[0].ColumnName + " ASC");
                for (int i = 0; i < dr.Length; i++)
                {
                    if (i != row_index && Convert.ToString(dr[i][col_index]).Equals(Convert.ToString(dr[row_index][col_index])) && !Is_Filtered(i))
                    {
                        Invisible = false;
                        break;
                    }
                }
                Status[row_index, col_index] = Invisible ? INVISIBLE : VISIBLE;
            }
     
     
            // Utility che verifica se una specifica riga della griglia è filtrata o meno
     
            public bool Is_Filtered(int index)
            {
                for (int j = 0; j < Data.Columns.Count; j++)
                {
                    if (Status[index, j].Equals(FILTER))
                        return true;
                }
                return false;
            }
     
     
            // Utility che restituisce l'indice di una colonna della tabella a partire dal suo nome
     
            public int Get_Index(String name)
            {
                for (int j = 0; j < Data.Columns.Count; j++)
                {
                    if (Data.Columns[j].ColumnName.Equals(name))
                        return j;
                }
                return -1;
            }
     
        }
    }

    as you can see in the attached file there's a little graphical problem (double scroll bar and disallignment of button Apply and button Cancel); how can i solve it using css class ".RadFilterMenu_CheckList" or other way?

    Thanks in advance.
    Regards Giulio.
  2. Giulio
    Giulio avatar
    5 posts
    Member since:
    Apr 2014

    Posted 16 Apr 2014 Link to this post

    Sorry, i forgot attached file :D
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 21 Apr 2014 Link to this post

    Hello Giulio,

    As the page you are implementing contains some custom logic it is rather difficult to determine what exactly is causing the problematic filter appearance.
    In this case it will be best if you could send us live url that demonstrates the issue. Thus we will be able to inspect the filter styles locally and do our best to provide proper solution.

    Regards,
    Maria Ilieva
    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.

     
Back to Top