Rank 1
I want to design a grid that should contain 4 columns, first column is data column with dynamic image, second & third column is Data column and the fourth column is image button column, the column contains 4 images like rename, edit, delete, etc..
Refer the attached image as i described above.
When i click the fourth column each image i want to do a different operations.
How do i achive this in WPF rad GridView? suggest me a better approach.
I am using WPF 3.5
15 Answers, 1 is accepted
You may try to handle the Click event of each of those image buttons defined in the column.
Maya
the Telerik team
Rank 1
Thanks for your prompt reply.
I think my post is not having a clear requiremnt, i have modified my post little bit.
My issue is, first i want to design a grid like image i have attached, i am not able to design a Grid with multiple image in one column and also a text and image in same colum like first cell in the attached image. The attached image is a web page, that i have taken a screen shot.
Basically, you may predefine the CellTemplate of this particular column. It may look something like:
<telerik:GridViewDataColumn> <telerik:GridViewDataColumn.CellTemplate> <DataTemplate> //Here you may define your images and textBox-es </DataTemplate> </telerik:GridViewDataColumn.CellTemplate></telerik:GridViewDataColumn>Kind regards,
Maya
the Telerik team
Rank 1
Thanks Maya, let me try your suggesition and get back to you
Rank 1
Your suggesition works great maya.
Now i am not able to get a cells from the Grid, to attach a click even for the image.
According to this post, we can set the selected cell, but i want to get the cell from the grid
DataGridCell cell = null;
DataGridCellsPresenter presenter = null;
dgAnalysisList.UpdateLayout();
dgAnalysisList.ScrollIntoView(rowContainer, dgAnalysisList.Columns[column]);
presenter = GetVisualChild<DataGridCellsPresenter>(rowContainer);
cell = (DataGridCell)presenter.ItemContainerGenerator.ContainerFromIndex(column)
This code is used for WPF 4.0 WPF inbuild datagrid to get the Cells, but this is not supported in Telerik grid view. Is there any code equal to this available for telerik control?
In order to provide you with an appropriate solution, I would need a bit more details about the exact scenario you want to achieve. What is your purpose of getting a particular cell ? Do you aim at getting the element inside or just its value ? Any relevant information would be helpful.
Maya
the Telerik team
Rank 1
//DataGridTemplateColumn
imagecolumn = new GridViewDataColumn();
//imagecolumn.HeaderStyle = style;
imagecolumn.Header = "Action";
imagecolumn.IsFilterable = false;
textcolumn.IsSortable = false;
//StringBuilder
cellTemp = new StringBuilder();
cellTemp.Append("<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\">");
cellTemp.Append("<StackPanel Orientation=\"Horizontal\">");
cellTemp.Append("<Image Name=\"imgCopy\" Source=\"/ClientApp;Component/Assets/createcopy.gif\" Margin=\"10,0,10,0\" Cursor=\"Hand\" Width=\"20\" Height=\"20\" ToolTip=\"Create Copy: for scenario analysis\" />");
cellTemp.Append("<Image Name=\"imgShare\" Source=\"/ClientApp;Component/Assets/share.gif\" Margin=\"0,0,10,0\" Cursor=\"Hand\" Width=\"20\" Height=\"20\" ToolTip=\"Share: with another registered user\" />");
cellTemp.Append("<Image Name=\"imgRename\" Source=\"/ClientApp;Component/Assets/rename.gif\" Margin=\"0,0,10,0\" Cursor=\"Hand\" Width=\"20\" Height=\"20\" ToolTip=\"Rename: analysis\" />");
cellTemp.Append("<Image Name=\"imgDelete\" Source=\"/ClientApp;Component/Assets/delete.gif\" Margin=\"0,0,10,0\" Cursor=\"Hand\" Width=\"20\" Height=\"20\" ToolTip=\"Remove: analysis\" />");
cellTemp.Append("</StackPanel>");
cellTemp.Append("</DataTemplate>");
//StringReader
stringReader = new StringReader(cellTemp.ToString());
//XmlReader
xmlReader = XmlReader.Create(stringReader);
imagecolumn.CellTemplate = (DataTemplate)XamlReader.Load(xmlReader);
AnalysisListGridView.Columns.Add(imagecolumn);
Now i want attach a MouseButtonEventHandler to do a each operation like rename, edit, delete, etc.. so that when an appropriate image is clicked i can do my operations
Rank 1
So that when an appropriate image is clicked i can do my operations
Actually, I would recommend you to take advantage of the simplicity of usage in this case and the elegance of the RadButton. You may define a picture inside each of them and just handle their Click events. Thus you will not need to handle the mouse button events and check exactly which image has been clicked. Still you will be able to define all of them in the CellTemplate just like the images.
You may take a look at the RadButtons in our demos.
Maya
the Telerik team
The link I posted in my previous post is pointing at our examples for Silverlight. This is the link towards the same demos for WPF. Furthermore, you may take a look at our online documentation of the topic of RadButton.
Maya
the Telerik team
Rank 1
I have implemeted like this & and it works great now. Thanks for your tips and tricks
var imgcopy = cell2.ChildrenOfType<Image>().Where(c => c.Name.ToLower().Equals("imgcopy")).ToList();
imgcopy.FirstOrDefault().MouseLeftButtonUp -= new MouseButtonEventHandler(copycell_MouseLeftButtonUp);
imgcopy.FirstOrDefault().MouseLeftButtonUp += new MouseButtonEventHandler(copycell_MouseLeftButtonUp);
Rank 1
Is it possible to send the full code to attach the event to the images? On which event we need to place the mouse button event handler stuff.
Thanks,
Ramasamy
Rank 1
this.AnalysisListGridView.Loaded += new RoutedEventHandler(AnalysisListGridView_Loaded);
void AnalysisListGridView_Loaded(object sender, RoutedEventArgs e)
{
this.AnalysisListGridView.SelectedItems.Clear();
for (int j = 0; j < this.AnalysisListGridView.Items.Count; j++)
{
//Name column
GridViewCell cell1 = GetCell(j, 1);
// Getting the ContentPresenter of myListBoxItem
ContentPresenter myContentPresenter1 = FindVisualChild<ContentPresenter>(cell1) as ContentPresenter;
TextBlock txb = myContentPresenter1.Content as TextBlock;
txb.MouseLeftButtonUp -= new MouseButtonEventHandler(editcell_MouseLeftButtonUp);
txb.MouseLeftButtonUp += new MouseButtonEventHandler(editcell_MouseLeftButtonUp);
//Action column
GridViewCell cell2 = GetCell(j, 5);
//Refered from the Telerik blog: http://blogs.telerik.com/vladimirenchev/posts/09-02-03/easy_programmatic_ui_customization_for_wpf_and_silverlight.aspx
this.AnalysisListGridView.BringIndexIntoView(j);
var imgcopy = cell2.ChildrenOfType<Image>().Where(c => c.Name.ToLower().Equals("imgcopy")).ToList();
imgcopy.FirstOrDefault().MouseLeftButtonUp -= new MouseButtonEventHandler(copycell_MouseLeftButtonUp);
imgcopy.FirstOrDefault().MouseLeftButtonUp += new MouseButtonEventHandler(copycell_MouseLeftButtonUp);
Rank 1
Thanks for posting the code. Is it possible to get the code for GetCell() function?
Thanks,
Ramasamy
Rank 1
public GridViewCell GetCell(int row, int column)
{
GridViewRow rowContainer = GetRow(row);
if (rowContainer != null)
{
GridViewCell cell = null;
GridViewCellsPanel presenter = null;
if (cell == null)
{
AnalysisListGridView.UpdateLayout();
AnalysisListGridView.ScrollIntoView(rowContainer, AnalysisListGridView.Columns[column]);
presenter = GetVisualChild<GridViewCellsPanel>(rowContainer);
AnalysisListGridView.SelectedItem = AnalysisListGridView.Items[row];
GridViewRow row1 = AnalysisListGridView.ItemContainerGenerator.ContainerFromItem(AnalysisListGridView.SelectedItem) as GridViewRow;
row1.Cells[column].Focus();
row1.BeginEdit();
cell = row1.Cells[column] as GridViewCell;
}
return cell;
}
return null;
}