[Solved] Filtering with Azure

[Tishawn]

Hello very impressed with the these tools I pretty much went through many of the documentation. I have slight problem. I'm targeting the tutorial where i'm using azure mobile services - retrieving table data and adding them to RadDataGrid.
 
works great shows table with all data.

Now I'm trying to add a filter - using a text box with user input text to filter out data in the tables.. Nothing's happening. I'm still fairly new to xaml. Any help with this would be appreciated.

I tried the Filtering sample that's on the site and while it's very informative it's using a list to add the information  I'm getting my data from azure mobile service table.


Thank you for looking into this? Maybe a sample can help?

[Rosy Topchiyska]

Hi Tishawn,

Thank you for contacting us.

Unfortunately, I could not completely understand what difficulties you experience with the filtering. 
Could you please elaborate a bit more on:

1. What is the scenario you wish to accomplish?
2. What is the problem with the filtering and could you please point us to the examples have you used?

I look forward to your reply.

Regards,
Rosy Topchiyska
Telerik

 

 

[Tishawn]

Thank you for responding.

yeah I kinda didn't do a good job of explaining.

I'm trying create filterable Telerik Grid with information from windows azure table. I'm able retrieve information from my azure table and fill the telerik grid but can't seem filter it.

is there a sample I can view.. Any help would be appreciated. Thanks.

[Rosy Topchiyska]

Hi Tishawn,

Thank you for writing.

If you use typed columns, then you have the filtering functionality enabled out of the box. Please could you verify that the RadDataGrid.UserFilterMode is set to Enabled and DataGridColumn.CanUserFilter properties are set to true. The filtering is not related directly to the ItemsSource of the RadDataGrid as the RadDataGrid handles these internally.

The only column type that does not support filtering is the DataGridTemplateColumn. In this case, you can take a look at this article from our online documentation: Create Custom Filtering Control

I hope this helps.

Regards,
Rosy Topchiyska
Telerik

 

 

[Tishawn]

Yes that filtering works fine. The filtering I'm trying to use is from the Filter UI Xaml Windows 8 Grid Demo Here's the screenshot of the demo - The one where you can type in the text box and columns change based on the text inputed by the user.

Here's what I have in my code

Xaml

​<Border BorderBrush="Gray" BorderThickness="2">
<Grid Margin="0,424,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ComboBox x:Name="selectedColumnList" SelectionChanged="selectedColumnList_SelectionChanged" ItemsSource="{Binding Columns,ElementName=dataGrid}" Margin="10" BorderThickness="0">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<TextBox Grid.Column="1" x:Name="FilterText" HorizontalAlignment="Stretch" Margin="10" TextChanged="TextBox_TextChanged" IsTextPredictionEnabled="False"/>
<Button Grid.Column="2" BorderThickness="0" Click="Button_Click" VerticalAlignment="Stretch" Margin="8" HorizontalAlignment="Right">
<Button.Content>
<TextBlock>
<Run FontWeight="Bold" FontFamily="Segoe UI Symbol">
&#xE0A4;
</Run>
<Run FontWeight="Normal">
Clear Filter
</Run>
</TextBlock>
</Button.Content>
</Button>
</Grid>
</Border>
<telerikGrid:RadDataGrid Grid.Row="1" UserFilterMode="Disabled" x:Name="dataGrid" AutoGenerateColumns="False" ItemsSource="{Binding Data,Source={StaticResource deviceTable }}" FontSize="16">
<telerikGrid:RadDataGrid.Columns>
<telerikGrid:DataGridTextColumn PropertyName="FirstName" Header="firstName"/>
<telerikGrid:DataGridTextColumn PropertyName="LastName" Header="lastName"/>
<telerikGrid:DataGridTextColumn PropertyName="MobileDevice" Header="mobileDevice"/>
<telerikGrid:DataGridTextColumn PropertyName="MobileNumber" Header="mobileNumber"/>

</telerikGrid:RadDataGrid.Columns>
</telerikGrid:RadDataGrid>


c#


MobileServiceClient client;
IMobileServiceTable<DeviceProperties> devicestable;
string choiceText;
string FirstName;
string LastName;
string MobileNumber;

public class DeviceProperties // TechBloggers
{
public int id { get; set; }
[DataMember(Name = "First Name")]
public string FirstName { get; set; }
[DataMember(Name = "Last Name")]
public string LastName { get; set; }
[DataMember(Name = "Mobile Number")]
public string MobileNumber { get; set; }
[DataMember(Name = "Mobile Device")]
public string mobileDevice { get; set; }

}


public MainPage()
{
this.InitializeComponent();
var warningSuppression = this.Dispatcher.RunAsync(CoreDispatcherPriority.Low, () => this.InitializeSelectedColumnListSelection());
this.dataGrid.Columns.CollectionChanged += this.Columns_CollectionChanged;
MobileServiceClient client;
IMobileServiceTable<DeviceProperties> devicestable;
this.Loaded += MainPage_Loaded;

}

private void Columns_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
var warningSuppression = this.Dispatcher.RunAsync(CoreDispatcherPriority.Low, () => this.InitializeSelectedColumnListSelection());
}

private void InitializeSelectedColumnListSelection()
{
if (selectedColumnList.Items.Count > 0)
{
selectedColumnList.SelectedIndex = 0;
}
}


private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
this.dataGrid.FilterDescriptors.Clear();
string text = ((TextBox)sender).Text;

if (!string.IsNullOrEmpty(text))
{
this.dataGrid.FilterDescriptors.Add(new DelegateFilterDescriptor() { Filter = new EmployeeSearchFilter(text, selectedColumnList.SelectedItem as DataGridTypedColumn) });
}
}



private class EmployeeSearchFilter : IFilter
{
private string matchString;

private DataGridTypedColumn column;

public EmployeeSearchFilter(string match, DataGridTypedColumn column)
{
this.matchString = match;
this.column = column;
}

public bool PassesFilter(object item)
{
var model = item as DeviceProperties;

if (column == null)
{
return false;
}

switch (column.PropertyName)
{
case "FirstName":
return model.FirstName.Contains(this.matchString);//,//, StringComparison.OrdinalIgnoreCase);
case "LastName":
return model.LastName.Contains(this.matchString);//, StringComparison.OrdinalIgnoreCase);
case "MobileDevice":
return model.mobileDevice.Contains(this.matchString);//, StringComparison.OrdinalIgnoreCase);
case "MobileNumber":
return model.MobileNumber.Contains(this.matchString);//, StringComparison.OrdinalIgnoreCase);

default:
break;
}

return false;
}
}

Basically im getting my Data from Azure adding it to a table and now trying to filter the data with a text box like in the Grid Filtering Demo.

Hope this code show's what i'm trying to do.

[Rosy Topchiyska]

Hello Tishawn,

I have attached a project where I have modified the code snipped you have sent us to demonstrate how to perform external filtering. Please, take a look and let us know if this works for you.

Regards,
Rosy Topchiyska
Telerik