Hi Team,
I am using RadGrid, in which i have Col1, Col2, Col3, Col4 and Col5. All columns are filterable. I need that when the grid is loaded for first time col4 and col5 should not be visible, but when I right clink on grid header the it should display all columns and I should be able to select col4 and col5 to make columns visible.
can anybody help on this please.
Regards,
Sandy.
I am using RadGrid, in which i have Col1, Col2, Col3, Col4 and Col5. All columns are filterable. I need that when the grid is loaded for first time col4 and col5 should not be visible, but when I right clink on grid header the it should display all columns and I should be able to select col4 and col5 to make columns visible.
can anybody help on this please.
Regards,
Sandy.
12 Answers, 1 is accepted
1
Princy
Top achievements
Rank 2
answered on 04 Oct 2013, 10:39 AM
Hi Sandeep,
You can use the EnableHeaderContextMenu=true of the radgrid to show and hide column ,when you right click on the headers you can have the options to show or hide columns.In order to hide the column in page load you can set its Display="false".
ASPX:
C#:
Thanks,
Princy
You can use the EnableHeaderContextMenu=true of the radgrid to show and hide column ,when you right click on the headers you can have the options to show or hide columns.In order to hide the column in page load you can set its Display="false".
ASPX:
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
EnableHeaderContextMenu
=
"true"
AllowFilteringByColumn
=
"true"
>
C#:
protected
void
Page_Load(
object
sender, EventArgs e)
{
if
(!IsPostBack)
{
RadGrid1.MasterTableView.GetColumn(
"ColumnUniqueName"
).Display =
false
;
}
}
Thanks,
Princy
0
Sandeep
Top achievements
Rank 1
answered on 04 Oct 2013, 11:03 AM
Hi Princy,
Thanks for the quick response, it really worked and solved my issue.
I am having another issue, I am having GridClientSelectColumn in bound columns list, How do I hide this column when I right click on grid header.
Regards,
Sandy.
Thanks for the quick response, it really worked and solved my issue.
I am having another issue, I am having GridClientSelectColumn in bound columns list, How do I hide this column when I right click on grid header.
Regards,
Sandy.
0
Princy
Top achievements
Rank 2
answered on 04 Oct 2013, 11:19 AM
Hi Sandeep,
You can add GridClientSelectColumn,to the columns, this will also be available in the HeaderContextMenu. There you can hide or show the column.PLease try and let me know if any concern.Please find the attached image for the output.
ASPX:
Thanks,
Princy
You can add GridClientSelectColumn,to the columns, this will also be available in the HeaderContextMenu. There you can hide or show the column.PLease try and let me know if any concern.Please find the attached image for the output.
ASPX:
<
telerik:GridClientSelectColumn
UniqueName
=
"GridClientSelectColumn"
></
telerik:GridClientSelectColumn
>
Thanks,
Princy
0
Sandeep
Top achievements
Rank 1
answered on 04 Oct 2013, 11:32 AM
Hi Princy,
I have already added this column. But I dont want to show when user clicks right button on header.
Regards,
Sandy.
I have already added this column. But I dont want to show when user clicks right button on header.
Regards,
Sandy.
0
Princy
Top achievements
Rank 2
answered on 07 Oct 2013, 04:57 AM
Hi Sandeep,
I guess you donot want to show the GridClientSelectColumn in the HeaderContextMenu,please try the following code snippet.
ASPX:
JS:
Thanks,
Princy
I guess you donot want to show the GridClientSelectColumn in the HeaderContextMenu,please try the following code snippet.
ASPX:
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
EnableHeaderContextMenu
=
"true"
>
<
HeaderContextMenu
OnClientItemOpening
=
"OnClientItemOpening"
>
</
HeaderContextMenu
>
<
MasterTableView
>
<
Columns
>
<
telerik:GridClientSelectColumn
UniqueName
=
"GridClientSelectColumn"
>
</
telerik:GridClientSelectColumn
>
. . . . . .
</
Columns
>
</
MasterTableView
>
<
ClientSettings
Selecting-AllowRowSelect
=
"true"
>
</
ClientSettings
>
</
telerik:RadGrid
>
JS:
function
OnClientItemOpening(menu, args) {
var
item = args.get_item();
item.get_items().getItem(0).get_element().style.display =
"none"
;
}
Thanks,
Princy
0
Sandeep
Top achievements
Rank 1
answered on 10 Oct 2013, 06:17 AM
Hi Princy,
Thank you for reply. It has solved my issue.
Regards,
Sandeep Kumar
Thank you for reply. It has solved my issue.
Regards,
Sandeep Kumar
0
Rohit
Top achievements
Rank 1
answered on 15 Jan 2014, 04:00 PM
Hi All,
this is the very helpful to me and its working fine as expected.
Thanks & Regards
Omveer Singh
this is the very helpful to me and its working fine as expected.
Thanks & Regards
Omveer Singh
0
Rohit
Top achievements
Rank 1
answered on 16 Jan 2014, 03:52 PM
Hi All ,
I want this kind of functionality on the button because i have to run application on ipad and there is not option of right click on header.
so how to impliment this approach , i m new user to telerik controls .
thanks .
Omveer singh.
I want this kind of functionality on the button because i have to run application on ipad and there is not option of right click on header.
so how to impliment this approach , i m new user to telerik controls .
thanks .
Omveer singh.
0
Princy
Top achievements
Rank 2
answered on 18 Jan 2014, 05:19 AM
Hi Rohit,
Please have a look into the following sample code snippet to have buttons to obtain HeaderContextMenu:
ASPX:
JS:
C#:
Thanks,
Princy
Please have a look into the following sample code snippet to have buttons to obtain HeaderContextMenu:
ASPX:
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
AutoGenerateColumns
=
"true"
AllowPaging
=
"true"
AllowMultiRowSelection
=
"true"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
EnableHeaderContextMenu
=
"true"
OnItemCreated
=
"RadGrid1_ItemCreated"
>
<
ClientSettings
>
<
ClientEvents
OnHeaderMenuShowing
=
"HeaderMenuShowing"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
JS:
<script type=
"text/javascript"
>
function
ShowMenuClicked(sender, eventArgs) {
var
cellIndex = sender.get_element().parentNode.cellIndex;
$find(
"<%= RadGrid1.ClientID %>"
).get_masterTableView().get_columns()[cellIndex].showHeaderMenu(eventArgs);
}
function
HeaderMenuShowing(sender, eventArgs) {
if
(eventArgs.get_domEvent().target &&
eventArgs.get_domEvent().target.tagName.toLowerCase() ===
"th"
) {
eventArgs.set_cancel(
true
);
}
}
</script>
C#:
protected
void
RadGrid1_ItemCreated(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridHeaderItem)
{
RadButton radButton;
GridHeaderItem headerItem = (GridHeaderItem)e.Item;
for
(
int
i = 0; i < headerItem.Cells.Count; i++)
{
radButton =
new
RadButton();
radButton.Text =
"Show menu"
;
radButton.AutoPostBack =
false
;
radButton.OnClientClicked =
"ShowMenuClicked"
;
headerItem.Cells[i].Controls.Add(radButton);
}
}
}
Thanks,
Princy
0
Abhay
Top achievements
Rank 1
answered on 05 Feb 2015, 05:58 AM
Multiple RadGrid are going to call this same function. All grids are having telerik:GridClientSelectColumn with different unique name. How to find UniqueName of telerik:GridClientSelectColumn in RowSelected event ?
function RowSelected(sender, eventArgs) {
var grid = sender;
var MasterTable = grid.get_masterTableView();
var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
var uniquename=find uniqueName
var cell = MasterTable.getCellByColumnUniqueName(row, uniquename **Or** CallCustomJsFunction);
}
function RowSelected(sender, eventArgs) {
var grid = sender;
var MasterTable = grid.get_masterTableView();
var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
var uniquename=find uniqueName
var cell = MasterTable.getCellByColumnUniqueName(row, uniquename **Or** CallCustomJsFunction);
}
0
Hi Abhay,
A possible solution is to set an identical UniqueNames of GridClientSelectColumns and this way you will be able to loop through all columns and get the correct one. For instance if you have two grid - ProductGrid and CustomersGrid, you can set a UniqueName to the GridClientSelectColumn similar to the following one - ProductClientSelectColumn and CustomersClientSelectColumn. The you can use the following approach to access the column.
Regards,
Kostadin
Telerik
A possible solution is to set an identical UniqueNames of GridClientSelectColumns and this way you will be able to loop through all columns and get the correct one. For instance if you have two grid - ProductGrid and CustomersGrid, you can set a UniqueName to the GridClientSelectColumn similar to the following one - ProductClientSelectColumn and CustomersClientSelectColumn. The you can use the following approach to access the column.
function
OnRowSelected(sender, eventArgs)
{
var
grid = sender;
var
MasterTable = grid.get_masterTableView();
var
row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
var
columnUniqeName;
for
(
var
i = 0; i < MasterTable.get_columns().length; i++) {
if
(MasterTable.get_columns()[i].get_uniqueName().indexOf(
"ClientSelectColumn"
) != -1)
{
columnUniqeName = MasterTable.get_columns()[i].get_uniqueName();
break
;
}
}
}
Regards,
Kostadin
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.
0
Abhay
Top achievements
Rank 1
answered on 12 Feb 2015, 05:18 AM
Hi Kostadin,
Thanks for reply!
It works for me.
Thanks for reply!
It works for me.