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

RadGrid and Google-like filtering

18 Answers 244 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dariusz
Top achievements
Rank 1
Dariusz asked on 25 Oct 2011, 11:44 AM
Hello,
I'd like to add google-like filtering to my grid just like it is in the example.
Here are my current radgrid columns:
<MasterTableView TableLayout="Fixed" CommandItemDisplay="Top" DataKeyNames="indeks">
                <CommandItemTemplate>
                    <asp:Button ID="DownloadPDF" runat="server" Width="64px" CommandName="ExportToPdf" CssClass="pdfButton" />
                    <asp:Image ID="Image1" runat="server" ImageUrl="/Images/banner.png" AlternateText="York" Width="100%" />
                </CommandItemTemplate>
                    <Columns>
                        <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="indeks" Display="false"
                            DataType="System.String" FilterListOptions="VaryByDataType" ForceExtractValue="None"
                            HeaderText="Indeks" ReadOnly="True" SortExpression="ProductID" UniqueName="ProductID">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn Aggregate="Count"
                            HeaderText="Indeks" HeaderStyle-HorizontalAlign="Center"
                            DataField="indeks" UniqueName="indeks"
                            SortExpression="indeks"
                            FilterControlWidth="100%" HeaderStyle-Width="50px" CurrentFilterFunction="Contains" ShowFilterIcon="false"
                            AutoPostBackOnFilter="true"
                            ItemStyle-HorizontalAlign="Center">
                            <ItemTemplate>
                                <asp:HyperLink ID="targetControl" runat="server" Enabled="false" Text='<%# Eval("indeks") %>'></asp:HyperLink>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn HeaderText="EAN" DataField="EAN" HeaderStyle-HorizontalAlign="Center" UniqueName="EAN"
                            SortExpression="EAN" HeaderStyle-Width="60px" FilterControlWidth="100%"
                            AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" ItemStyle-HorizontalAlign="Center" />
                        <telerik:GridNumericColumn HeaderText="Sztuk w kartonie" DataField="sztwkart" HeaderStyle-HorizontalAlign="Center" UniqueName="sztwkart" SortExpression="sztwkart"
                            FilterControlWidth="100%" HeaderStyle-Width="30px" ShowFilterIcon="false" ItemStyle-HorizontalAlign="Center" AutoPostBackOnFilter="true" />
                        <telerik:GridBoundColumn HeaderText="Rozmiar kartonu" DataField="rozmiarkart" HeaderStyle-HorizontalAlign="Center"
                            UniqueName="rozmiarkart" SortExpression="rozmiarkart" HeaderStyle-Width="70px"
                            FilterControlWidth="100%" ShowFilterIcon="false" ItemStyle-HorizontalAlign="Center" AutoPostBackOnFilter="true" />
                        <telerik:GridTemplateColumn HeaderText="ZdjÄ™cia" HeaderStyle-Width="120px" HeaderStyle-HorizontalAlign="Center"
                         ItemStyle-HorizontalAlign="Center" AllowFiltering="false">
                            <ItemTemplate>
                                <telerik:RadRotator runat="server" ID="itemsRotator" OnDataBinding="RadRotator_OnDataBinding" Width="168px" Height="128px"
                                 ItemWidth="128px" ItemHeight="128px">
                                    <ItemTemplate>
                                        <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%#Eval("zdjecie") %>'
                                           AutoAdjustImageControlSize="false" Width="128px" Height="128px" ResizeMode="Fit" ImageAlign="Middle"/>
                                    </ItemTemplate>
                                </telerik:RadRotator>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn AllowFiltering="false" AllowSorting="false" DataField="Fiszka" HeaderStyle-HorizontalAlign="Center" UniqueName="fiszka" HeaderText="Fiszka"
                            HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center" ShowFilterIcon="false" />
                    </Columns>
                </MasterTableView>

I can't do google-like filtering like in the example because it would clean my current columns (non-standard ones as you can see).
Also using FilterTemplate somehow didn't work for me. Maybe I did something wrong, but currently I don't have any idea what should my approach be. 

Also please note that all my data for the grid is from asp:SqlDataSource .
I saw many threads about it but I couldn't use any of the solutions.

Any ideas how should I start without losing my current columns if I want to achieve same effect as in the example?

Regards
Darek

18 Answers, 1 is accepted

Sort by
0
Iana Tsolova
Telerik team
answered on 28 Oct 2011, 09:44 AM
Hi Dariusz,

If you want to use the current columns, the best approach for achieving your goal is defining the FilterTemplate for each of the column. What are the issues you are facing when implementing this functionality?

All the best,
Iana Tsolova
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Dariusz
Top achievements
Rank 1
answered on 28 Oct 2011, 10:17 AM
Hi Iana,

FilterTemplate approach is a completely different thing than I want to achieve.
Because with using FilterTemplate I have only Combobox...

Your Google-like example is like a TextBox integrated with ComboBox and that's the thing I'd like to have.

as for the problems with FilterTemplate - I have already solved them but it's still not the thing I'd like to have.

Regards
Darek
0
Iana Tsolova
Telerik team
answered on 28 Oct 2011, 03:21 PM
Hello Dariusz,

Our online demo uses RadComboBox as well. Here are properties used to make it look like a textbox:

combo.ShowToggleImage = false;
combo.EnableLoadOnDemand = true;
combo.AutoPostBack = true;
combo.MarkFirstMatch = true;
combo.Height = Unit.Pixel(100);
combo.ItemsRequested += this.list_ItemsRequested;
combo.SelectedIndexChanged += this.list_SelectedIndexChanged;
cell.Controls.AddAt(0, combo);
cell.Controls.RemoveAt(1);

And instead of the server-side SelectedIndexChanged, you can use its client-side counterpart to fire the filtering command as in the FilterTemplates demo.

All the best,
Iana Tsolova
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Dariusz
Top achievements
Rank 1
answered on 31 Oct 2011, 10:05 AM
Ok, I managed to create such combobox column uing FilterTemplate:

<telerik:GridBoundColumn HeaderText="EAN" DataField="EAN" HeaderStyle-HorizontalAlign="Center" UniqueName="EAN"
                            SortExpression="EAN" HeaderStyle-Width="60px" FilterControlWidth="100%"
                            AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" ItemStyle-HorizontalAlign="Center" >
                        <FilterTemplate>
                            <telerik:RadComboBox ID="rcbContinents" runat="server" ShowToggleImage="false" EnableLoadOnDemand="true" OnItemsRequested="list_ItemsRequested"
                                AutoPostBack="true" MarkFirstMatch="true" Skin="Office2007" OnSelectedIndexChanged="rcbContinents_SelectedIndexChanged" DataTextField="EAN"
                                DataValueField="EAN" OnPreRender="rcbContinents_PreRender">
                            </telerik:RadComboBox>
                        </FilterTemplate>   
                        </telerik:GridBoundColumn>

with events:

protected void rcbContinents_PreRender(object sender, EventArgs e)
        {
            if (ViewState["EAN"] != null)
            {
                (sender as RadComboBox).SelectedValue = ViewState["EAN"].ToString();
                (sender as RadComboBox).Text = ViewState["EAN"].ToString();
            }
        }
 
protected void rcbContinents_SelectedIndexChanged(object o, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
        {
            ViewState["EAN"] = (o as RadComboBox).SelectedValue;
 
            RadGrid1_NeedDataSource(o, null);
        }
 
protected void list_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
        {
            ((RadComboBox)o).DataSource = GetDataTable("SELECT DISTINCT " + ((RadComboBox)o).DataTextField + " FROM katalog_produktow WHERE " + ((RadComboBox)o).DataTextField + " LIKE '" + e.Text + "%'");
            ((RadComboBox)o).DataBind();
        }

now as you can see I'm trying to get the value from combobox into the ViewState["EAN"] but I have a problem with this. In short - whatever I'll pick from the combo - the filtering doesn't work. I'm sure it's because of my RadGrid1_NeedDataSource event:

protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            string tmp = "select b1.indeks, b1.EAN, b1.sztwkart, b1.rozmiarkart, b1.fiszka from katalog_produktow b1";
            if (ViewState["EAN"] != null)
            {
                if (ViewState["EAN"].ToString() != "")
                {
                    tmp += " where b1.EAN = '" + ViewState["EAN"] + "'";
                }
            }
            tmp += " order by b1.indeks";
            RadGrid1.DataSource = GetDataTable(tmp);
        }

this event is fired before rcbContinents_SelectedIndexChanged so here the ViewState will be empty. How should I fix it?
0
Iana Tsolova
Telerik team
answered on 31 Oct 2011, 11:15 AM
Hi Dariusz,

Is the grid or Page ViewState disabled? Can you share the full page code + code-behind for further check?

All the best,
Iana Tsolova
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Dariusz
Top achievements
Rank 1
answered on 02 Nov 2011, 12:48 PM
Hi Iana,

I'm posting the code...
The column I'm currently trying to add Google-like feature is called "EAN".

I hope that the code is not messed too much... I'm still a beginner.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Catalog.ascx.cs" Inherits="SitefinityWebApp.Custom.Widgets.Catalog" %>
 
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
 
    <style type="text/css">
        .pdfButton
        {
            height: 64px;
            background: url('Files/Images/pdf.png') no-repeat center;
            cursor: pointer;
            border: 0;
        }
    </style>
 
    <div>
     
        <telerik:RadAjaxPanel ID="RadAjaxPanel2" LoadingPanelID="RadAjaxLoadingPanel1" runat="server">
            <telerik:RadGrid AutoGenerateColumns="False" ID="RadGrid1" AllowPaging="True" AllowSorting="True" AllowFilteringByColumn="True"
            runat="server" Skin="WebBlue" OnNeedDataSource="RadGrid1_NeedDataSource" EnableLinqExpressions="false"
                OnItemCreated="RadGrid1_ItemCreated" OnItemCommand="RadGrid1_ItemCommand"
                 OnPreRender="RadGrid1_PreRender" ExportSettings-FileName="Catalogue">
                <PagerStyle Mode="NextPrevAndNumeric" />
                <GroupingSettings CaseSensitive="false" />
                <ExportSettings IgnorePaging="true" OpenInNewWindow="true">
                    <Pdf PageHeight="210mm" PageWidth="297mm" PageTitle="York" DefaultFontFamily="Arial Unicode MS"
                        PageBottomMargin="20mm" PageTopMargin="20mm" PageLeftMargin="60mm" PageRightMargin="20mm" />
                </ExportSettings>
                <MasterTableView TableLayout="Fixed" CommandItemDisplay="Top" DataKeyNames="indeks">
                <CommandItemTemplate>
                    <asp:Button ID="DownloadPDF" runat="server" Width="64px" CommandName="ExportToPdf" CssClass="pdfButton" />
                    <asp:Image ID="Image1" runat="server" ImageUrl="Files/Images/banner.png" AlternateText="York" Width="100%" />
                </CommandItemTemplate>
                    <Columns>
                        <telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="indeks" Display="false"
                            DataType="System.String" FilterListOptions="VaryByDataType" ForceExtractValue="None"
                            HeaderText="Indeks" ReadOnly="True" SortExpression="ProductID" UniqueName="ProductID">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn Aggregate="Count"
                            HeaderText="Indeks" HeaderStyle-HorizontalAlign="Center"
                            DataField="indeks" UniqueName="indeks"
                            SortExpression="indeks"
                            FilterControlWidth="100%" HeaderStyle-Width="50px" CurrentFilterFunction="Contains" ShowFilterIcon="false"
                            AutoPostBackOnFilter="true"
                            ItemStyle-HorizontalAlign="Center">
                            <ItemTemplate>
                                <asp:HyperLink ID="targetControl" runat="server" Enabled="false" Text='<%# Eval("indeks") %>'></asp:HyperLink>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn HeaderText="EAN" DataField="EAN" HeaderStyle-HorizontalAlign="Center" UniqueName="EAN"
                            SortExpression="EAN" HeaderStyle-Width="60px" FilterControlWidth="100%"
                            AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" ItemStyle-HorizontalAlign="Center" >
                        <FilterTemplate>
                            <telerik:RadComboBox ID="rcbContinents" runat="server" ShowToggleImage="false" EnableLoadOnDemand="true" OnItemsRequested="list_ItemsRequested"
                                MarkFirstMatch="true" Skin="Office2007" OnSelectedIndexChanged="rcbContinents_SelectedIndexChanged" DataTextField="EAN"
                                DataValueField="EAN" OnPreRender="rcbContinents_PreRender">
                            </telerik:RadComboBox>
                        </FilterTemplate>   
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderText="Sztuk w kartonie" DataField="sztwkart" HeaderStyle-HorizontalAlign="Center" UniqueName="sztwkart" SortExpression="sztwkart"
                            FilterControlWidth="100%" HeaderStyle-Width="30px" ShowFilterIcon="false" ItemStyle-HorizontalAlign="Center" AutoPostBackOnFilter="true"
                            CurrentFilterFunction="Contains" />
                        <telerik:GridBoundColumn HeaderText="Rozmiar kartonu" DataField="rozmiarkart" HeaderStyle-HorizontalAlign="Center"
                            UniqueName="rozmiarkart" SortExpression="rozmiarkart" HeaderStyle-Width="70px"
                            FilterControlWidth="100%" ShowFilterIcon="false" ItemStyle-HorizontalAlign="Center" AutoPostBackOnFilter="true" />
                        <telerik:GridTemplateColumn HeaderText="ZdjÄ™cia" HeaderStyle-Width="120px" HeaderStyle-HorizontalAlign="Center"
                         ItemStyle-HorizontalAlign="Center" AllowFiltering="false">
                            <ItemTemplate>
                                <telerik:RadRotator runat="server" ID="itemsRotator" OnDataBinding="RadRotator_OnDataBinding" Width="168px" Height="128px"
                                 ItemWidth="128px" ItemHeight="128px">
                                    <ItemTemplate>
                                        <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%#Eval("zdjecie") %>'
                                           AutoAdjustImageControlSize="false" Width="128px" Height="128px" ResizeMode="Fit" ImageAlign="Middle"/>
                                    </ItemTemplate>
                                </telerik:RadRotator>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn AllowFiltering="false" AllowSorting="false" DataField="Fiszka" HeaderStyle-HorizontalAlign="Center" UniqueName="fiszka" HeaderText="Fiszka"
                            HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center" ShowFilterIcon="false" />
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
            </telerik:RadAjaxPanel>
 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
 
    </div>
    <!-- content end -->
 
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="0" Transparency="20" Skin="WebBlue"/>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Charting;
using Telerik.Web.UI;
using System.Data.SqlClient;
using System.Collections.Generic;
using Telerik.Sitefinity.Web;
using Telerik.Sitefinity.Modules.Pages;
 
 
namespace SitefinityWebApp.Custom.Widgets
{
    public partial class Catalog : System.Web.UI.UserControl
    {
        public static DataTable GetDataTable(string query)
        {
            SqlConnection conn = new SqlConnection(@"data source=CLEARED");
            SqlDataAdapter adapter = new SqlDataAdapter();
            adapter.SelectCommand = new SqlCommand(query, conn);
 
            DataTable myDataTable = new DataTable();
 
            conn.Open();
            try
            {
                adapter.Fill(myDataTable);
            }
            finally
            {
                conn.Close();
            }
            return myDataTable;
        }
 
        protected void rcbContinents_PreRender(object sender, EventArgs e)
        {
            if (ViewState["EAN"] != null)
            {
                (sender as RadComboBox).SelectedValue = ViewState["EAN"].ToString();
                (sender as RadComboBox).Text = ViewState["EAN"].ToString();
            }
        }
 
        protected void rcbContinents_SelectedIndexChanged(object o, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
        {
            ViewState["EAN"] = (o as RadComboBox).SelectedValue;
 
            RadGrid1_NeedDataSource(o, null);
        }
 
        protected void list_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
        {
            ((RadComboBox)o).DataSource = GetDataTable("SELECT DISTINCT " + ((RadComboBox)o).DataTextField + " FROM katalog_produktow WHERE " + ((RadComboBox)o).DataTextField + " LIKE '" + e.Text + "%'");
            ((RadComboBox)o).DataBind();
        }
 
        protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            string tmp = "select b1.indeks, b1.EAN, b1.sztwkart, b1.rozmiarkart, b1.fiszka from katalog_produktow b1";
            if (ViewState["EAN"] != null)
            {
                if (ViewState["EAN"].ToString() != "")
                {
                    tmp += " where b1.EAN = '" + ViewState["EAN"] + "'";
                }
            }
            tmp += " order by b1.indeks";
            RadGrid1.DataSource = GetDataTable(tmp);
        }
 
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                if (!this.IsDesignMode())
                {
                    string title = new PageManager().GetPageNode(new Guid(SiteMapBase.GetCurrentProvider().CurrentNode.Key)).GetFullPath("/");
                }
            }
        }
 
        bool isPdfExport = false;
        GridDataItem obecnyitem;
 
        protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
        {
            if (e.CommandName == RadGrid.ExportToPdfCommandName)
                isPdfExport = true;
        }
 
        protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (isPdfExport)
                FormatGridItem(e.Item);
            if (isPdfExport && e.Item.RowIndex == 0)
                e.Item.Visible = false;
            if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
                obecnyitem = (GridDataItem)e.Item;
        }
 
        protected void RadRotator_OnDataBinding(object sender, EventArgs e)
        {
            string tmp = obecnyitem["ProductID"].Text;
 
            RadRotator radrotator = (RadRotator)obecnyitem.FindControl("itemsRotator");
 
            SqlConnection sqlconn = new SqlConnection();
            sqlconn.ConnectionString = @"data source=CLEARED";
            sqlconn.Open();
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = sqlconn;
            cmd.CommandText = "select count(1) from katalog_zdjecia where indeks = '" + tmp + "'";
 
            int tmp1 = System.Convert.ToInt32(cmd.ExecuteScalar());
 
            sqlconn.Close();
            cmd.Dispose();
            sqlconn.Dispose();
 
            SqlDataSource sqldatsrc = new SqlDataSource();
            sqldatsrc.ConnectionString = @"data source=CLEARED";
            sqldatsrc.ProviderName = "System.Data.SqlClient";
            sqldatsrc.SelectCommand = "select indeks, zdjecie from katalog_zdjecia where indeks = '" + tmp + "'";
            radrotator.DataSource = sqldatsrc;
 
            if (tmp1 > 1)
                radrotator.RotatorType = RotatorType.Buttons;
            else
            {
                radrotator.Width = new Unit("128px");
                radrotator.RotatorType = RotatorType.AutomaticAdvance;
            }
 
        }
 
        protected void FormatGridItem(GridItem item)
        {
            //item.Style["color"] = "#000000";
 
            if (item is GridDataItem)
            {
                item.Style["vertical-align"] = "middle";
                item.Style["text-align"] = "center";
            }
 
            switch (item.ItemType) //Mimic RadGrid appearance for the exported PDF file
            {
                case GridItemType.Item: item.Style["background-color"] = "#FFFFFF"; break;
                case GridItemType.AlternatingItem: item.Style["background-color"] = "#DAE2E8"; break;
            }
 
            if (item is GridCommandItem)
            {
                item.PrepareItemStyle(); //needed to span the image over the CommandItem cells
            }
        }
 
        protected void RadGrid1_PreRender(object sender, EventArgs e)
        {
            if (isPdfExport)
            {
                RadGrid1.MasterTableView.TableLayout = GridTableLayout.Auto;
                 
                RadGrid1.MasterTableView.GetColumn("indeks").HeaderStyle.Width = Unit.Pixel(100);
                RadGrid1.MasterTableView.GetColumn("EAN").HeaderStyle.Width = Unit.Pixel(100);
                RadGrid1.MasterTableView.GetColumn("sztwkart").HeaderStyle.Width = Unit.Pixel(100);
                RadGrid1.MasterTableView.GetColumn("rozmiarkart").HeaderStyle.Width = Unit.Pixel(100);
                RadGrid1.MasterTableView.GetColumn("fiszka").Visible = false;
            }
        }
    }
}

0
Iana Tsolova
Telerik team
answered on 03 Nov 2011, 12:49 PM
Hi Dariusz,

Try setting AutoPostback for the RadComboBox to true. And in its SelectedIndexChanged event, instead of trying to call the NeedDataSource event, invoke it by calling Rebind() for the grid.

Best wishes,
Iana Tsolova
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Dariusz
Top achievements
Rank 1
answered on 03 Nov 2011, 01:05 PM
did that, and the result is:

When I click on the Google-like ComboBox the RadGrid1_NeedDataSource event is called. Inside ViewState["EAN"] is empty so it's binding to a normal full table.

Then list_ItemsRequested event is called and it's getting items for ComboBox.

Then I see the initial list (I didn't enter anything yet).

No matter which letter I enter same 2 events as above are called but then in the second event I have less elements (thanks to the LIKE in my sql command ).

I pick my option and I see it called:

1. RadGrid1_NeedDataSource (so the ViewState is still empty)
2. rcbContinents_SelectedIndexChanged (the ViewState is set)
3. rcbContinents_PreRender (to make the selected text visible in ComboBox)

So the ViewState is being set after the RadGrid got the datasource. When I used RadGrid1.DataBind(); at the end of point 2 (when the ViewState has been set) nothing happened.
0
Accepted
Iana Tsolova
Telerik team
answered on 03 Nov 2011, 01:25 PM
Hi Dariusz,

Can you confirm that the PageViewState is enabled? Or try modifying the code as below:
protected void rcbContinents_SelectedIndexChanged(object o, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
{
    ViewState["EAN"] = (o as RadComboBox).SelectedValue;
    RadGrid1.DataSource = null;
    RadGrid1.Rebind();
}


All the best,
Iana Tsolova
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Dariusz
Top achievements
Rank 1
answered on 03 Nov 2011, 01:32 PM
Thank you so much Iana  :)

The RadGrid1.DataSource = null; did the trick :)
It is working now properly as it should.

I wonder something. Is it normal that when I click on RadComboBox to see the list of items - the RadGrid_NeedDataSource even it called ?
0
Dariusz
Top achievements
Rank 1
answered on 03 Nov 2011, 02:13 PM
Another little bug:

when I click ComboBox for the first time... it's showing like 1 result for a sec or two... then the whole list appears. When I do it second time, the list is ok.

What could be the reason of that lag ?

Here's the video showing what's te problem:
http://www.mediafire.com/?bn0baaa3bhdtlt5
0
Iana Tsolova
Telerik team
answered on 03 Nov 2011, 04:22 PM
Hello Dariusz,

The only case where the NeedDataSource can fire before the SelectedIndexChanged event is if the grid or Page or some of the parent controls for the grid have disabled ViewState. Otherwise this behavior is considered as not normal. You can find more infromation on the RadGrid lifecycle here.

Regarding the video, I tried to open it but to no avail. Can you try making it with Jing?

Kind regards,
Iana Tsolova
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Dariusz
Top achievements
Rank 1
answered on 04 Nov 2011, 03:24 PM
Here are the movies made with Jing:
http://www.mediafire.com/?7s6g43c8rxw60hc

First movie (local) shows how it looks like when I'm running it from Visual Studio 2010 - it looks ok, but when I use the filter column for the first time - you can see a little lag and after a while it opens fast. Next time it's fast too.

Second movie (remote) shows same widget but on my production server. First problem is same as above but additionally my RadComboBox items are listed in strange way. They should be one per line. Here we can see it's next element next to the previous one.

Have no idea what could be the reason for both problems.

But I also have 3rd problem with that.

As you can see - I had to adjust ComboBox's width to fit in 100% in the filtertemplate - ok. But now when I want to select new element - I can't see them because the list has the same width as the textbox before clicking, so the element are not fully visible. Is it possible to make the ComboBox list have more width than the textbox that makes it appear?

Cheers
Darek
0
Iana Tsolova
Telerik team
answered on 07 Nov 2011, 10:51 AM
Hello Dariusz,

For the first issue: It is rather expected. Because when you first focus the RadComboBox the ItemsRequested serve-side event is fired which takes some time to get the data from database and populate the items on the client. When you focus the RadComboBox for the second time, the ItemsRequested event is not fired because the Text of the RadComboBox is not changed and it displays the already loaded items.

Regarding the second problem: It is definitely caused by some css. You can try inspecting the elements with Firebug for Firefox or Web Developer for IE for instance, to see what css is applied to the RadComboBox dropdown and its items. The problematic css class might be in some common css file, so try removing reference to any custom css rules and see if the issue persists.

You can use the DropDownWidth property of the RadComboBox to set the desired width for your case and overcome the issue you are facing.

All the best,
Iana Tsolova
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Dariusz
Top achievements
Rank 1
answered on 08 Nov 2011, 11:11 AM
Hello again Iana,

So for the 1st issue - well, ok but it doesn't look too good. I'd like to see at least a message that it's loading or something like that.
But instead - how can I load all elements so when I first focus RadComboBox they appear immediately ?

I tried doing it with RadGrid1_PreRender:

GridFilteringItem filterItem = (GridFilteringItem)RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)[0];
                RadComboBox txtBox = (RadComboBox)filterItem.FindControl("rcbIndeks");
                txtBox.DataSource = GetDataTable("SELECT DISTINCT " + txtBox.DataTextField + " FROM katalog_produktow");
                txtBox.DataBind();

It worked well (I didn't notice any loading delay) but noticed another problem. After doing DataBind I noticed that RadComboBox has set Text value which is 1st result from the DataSource (even though I disabled MarkFirstMatch and also tried clearing Text and SelectedValue) - it was still there.


As for the 2nd problem - ok, I'll check my CSS :) thanks for the direction.
Also thank you for letting me know about the DropDownWidth property :)

Additional question - is it possible to make my Grid multilanguage ?
I'd like to detect current url (like if it contains /en/ then engligh, /ru/ then russian, /pl/ polish) and set titles according to it? I believe I have to set all the titles server-side but how can I detect the url and will I have to make all the controls dynamically ?

Regards
Darek
0
Iana Tsolova
Telerik team
answered on 09 Nov 2011, 01:39 PM
Hello Dariusz,

Are you calling the code snippet on each page load? If that is true then the page load as whole can be affected. To show a loading message in the RadComboBox you can enable virtual scrolling instead. See this demo for more information.
Regarding the text issue, you can try deleting it explicitly and see if it works for you.

For the RadGrid location: You can achieve it by adding global resources for the desired languages. Then you only need to change the Culture property for the grid or foe the application as all. Find more information below:
http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/localization/defaultcs.aspx
http://www.telerik.com/help/aspnet-ajax/grid-localization-global-resources.html

Best wishes,
Iana Tsolova
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Dariusz
Top achievements
Rank 1
answered on 09 Nov 2011, 02:03 PM
Hello Iana,

As for the grid language - that's what I was looking for, thank you.

But the last issue still remains.

I understand that you solved all my problems with RadGrid. The last problem is about RadComboBox and items loading.
Should I move my question to the ComboBox section ?
0
Iana Tsolova
Telerik team
answered on 09 Nov 2011, 04:27 PM
Hi Dariusz,

Indeed, I would suggest that you post the questions in the RadComboBox forums, where you can refer this thread as a history.

Let me know if any other issues arise.

Best wishes,
Iana Tsolova
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Tags
Grid
Asked by
Dariusz
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
Dariusz
Top achievements
Rank 1
Share this question
or