Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Graphical problem for FilterChecklist

2 Answers 98 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Giulio
Top achievements
Rank 1
Giulio asked on 16 Apr 2014, 05:15 PM
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 Answers, 1 is accepted

Sort by
0
Giulio
Top achievements
Rank 1
answered on 16 Apr 2014, 05:18 PM
immagine.jpg
Sorry, i forgot attached file :D
0
Maria Ilieva
Telerik team
answered on 21 Apr 2014, 12:46 PM
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.

 
Tags
Grid
Asked by
Giulio
Top achievements
Rank 1
Answers by
Giulio
Top achievements
Rank 1
Maria Ilieva
Telerik team
Share this question
or