Hello,
I am working on a project with a RadGrid.
In the RadGrid, each column has a filter.
The grid has a DetailView.
The requirements of my project are as follows:
Daniel.
I am working on a project with a RadGrid.
In the RadGrid, each column has a filter.
The grid has a DetailView.
The requirements of my project are as follows:
- All data in rows should not be word wrapped.
- Each column’s width should be equal to that column’s content.
The same rules should also apply to DetailView.
Daniel.
9 Answers, 1 is accepted
0
Jayesh Goyani
Top achievements
Rank 2
answered on 28 Jul 2014, 06:23 PM
Hello,
Please add below property in your column.
Let me know if any concern.
Thanks,
Jayesh Goyani
Please add below property in your column.
<
ItemStyle
Wrap
=
"false"
/>
Let me know if any concern.
Thanks,
Jayesh Goyani
0
Daniel
Top achievements
Rank 1
answered on 29 Jul 2014, 01:39 PM
Hello Jayesh Goyani,
Thank you for your response.
Since my RadGrid’s content is dynamic, I put the code:
into the appropriate event:
Unfortunately it did not help; instead it "cut" the data.
Besides, it still does not fill the requirement of my project: a column’s width should be equal to the width of its content.
I have attached a video that showing the problems I have: [Row content get “Cut”],
MasterTableView’s columns’ width and DetailView’s columns’ width are both very wide, regardless of content.
Video link: [Columns width are very wide].
I’ll be glad to get a solution.
Thank you,
Daniel.
Thank you for your response.
Since my RadGrid’s content is dynamic, I put the code:
<
ItemStyle
Wrap
=
"false"
/>
into the appropriate event:
Private
Sub
RadGrid1_ColumnCreated(sender
As
Object
, e
As
GridColumnCreatedEventArgs)
Handles
RadGrid1.ColumnCreated
e.Column.ItemStyle.Wrap =
False
End
Sub
Unfortunately it did not help; instead it "cut" the data.
Besides, it still does not fill the requirement of my project: a column’s width should be equal to the width of its content.
I have attached a video that showing the problems I have: [Row content get “Cut”],
MasterTableView’s columns’ width and DetailView’s columns’ width are both very wide, regardless of content.
Video link: [Columns width are very wide].
I’ll be glad to get a solution.
Thank you,
Daniel.
0
Princy
Top achievements
Rank 2
answered on 31 Jul 2014, 04:59 AM
Hi Daniel,
You can try the resizeToFit method to resizes the column to fit the widest cell's content without wrapping.
For the DetailTables to have this effect you can set the hierarchy load mode to client and add this javascript function to your scripts:
JS:
Here on hierarchy expanded event we take the index of the detailed table that is being expanded (indexOfDetailedTable) and after that also take the number of columns that are in this detailed table (numberOfColumns variable). Finally, we iterate through all the columns, except the last one and apply the resizeToFitmethod. The reason to not include the last column is that it can only take all the remaining space and can't get any smaller.
NOTE: This approach works for only one level of hierarchy.
Thanks,
Princy
You can try the resizeToFit method to resizes the column to fit the widest cell's content without wrapping.
For the DetailTables to have this effect you can set the hierarchy load mode to client and add this javascript function to your scripts:
JS:
function
onHierarchyExpanded(sender, eventArgs) {
var
indexOfDetailedTable = eventArgs.get_itemIndexHierarchical();
var
numberOfColumns = sender.get_detailTables()[indexOfDetailedTable].get_columns().length;
for
(
var
i = 0; i < numberOfColumns-1; i++) {
sender.get_detailTables()[indexOfDetailedTable].get_columns()[i].resizeToFit();
}
}
Here on hierarchy expanded event we take the index of the detailed table that is being expanded (indexOfDetailedTable) and after that also take the number of columns that are in this detailed table (numberOfColumns variable). Finally, we iterate through all the columns, except the last one and apply the resizeToFitmethod. The reason to not include the last column is that it can only take all the remaining space and can't get any smaller.
NOTE: This approach works for only one level of hierarchy.
Thanks,
Princy
0
Daniel
Top achievements
Rank 1
answered on 31 Jul 2014, 09:47 AM
Hi Princy,
Thank you for your answer!
Indeed I added the code as you suggested:
ASPX:
However, it doesn’t work unless I add the following code to my project:
Then, it works.
Unfortunately, there is another problem: the filters get “cut”. Please see the problem in the following video:
[video link]
I'd love to get a solution for the filters too. That will really be a perfect solution!!
Thank you very much,
Daniel.
Thank you for your answer!
Indeed I added the code as you suggested:
ASPX:
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function pageLoad() {
var grid = $find("<%= RadGrid1.ClientID %>");
var columns = grid.get_masterTableView().get_columns();
for (var i = 0; i <
columns.length
; i++) {
columns[i].resizeToFit();
}
}
function onHierarchyExpanded(sender, eventArgs) {
var
indexOfDetailedTable
=
eventArgs
.get_itemIndexHierarchical();
var
numberOfColumns
=
sender
.get_detailTables()[indexOfDetailedTable].get_columns().length;
for (var
i
=
0
; i < numberOfColumns - 1; i++) {
sender.get_detailTables()[indexOfDetailedTable].get_columns()[i].resizeToFit();
}
}
</script>
</
telerik:RadCodeBlock
>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
MasterTableView-EnableHeaderContextMenu
=
"true"
Height
=
"700px"
Width
=
"1150px"
Skin
=
"Web20"
MasterTableView-HierarchyLoadMode
=
"Client"
>
<
ClientSettings
>
<
Scrolling
AllowScroll
=
"True"
></
Scrolling
>
<
Resizing
AllowColumnResize
=
"true"
ResizeGridOnColumnResize
=
"true"
AllowResizeToFit
=
"true"
/>
<
ClientEvents
OnHierarchyExpanded
=
"onHierarchyExpanded"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
However, it doesn’t work unless I add the following code to my project:
RadGrid1.ClientSettings.Scrolling.UseStaticHeaders =
True
Then, it works.
Unfortunately, there is another problem: the filters get “cut”. Please see the problem in the following video:
[video link]
I'd love to get a solution for the filters too. That will really be a perfect solution!!
Thank you very much,
Daniel.
0
Princy
Top achievements
Rank 2
answered on 01 Aug 2014, 03:45 AM
Hi Daniel,
Please try setting the following CSS for your Grid:
CSS:
Thanks,
Princy
Please try setting the following CSS for your Grid:
CSS:
<style type=
"text/css"
>
div.RadGrid .rgFilterRow td
{
<%-- Adjust the padding according to how you need--%>
padding-right
:
30px
;
}
</style>
Thanks,
Princy
0
Daniel
Top achievements
Rank 1
answered on 03 Aug 2014, 11:32 AM
Hi Princy,
Thanks for your response.
I used the CSS code you gave me, but it does not affect the filter fields - see video.
I would like to have something like this pseudo cod:
I’ll be glad to get a solution for this problem.
Thank you,
Daniel.
Thanks for your response.
I used the CSS code you gave me, but it does not affect the filter fields - see video.
I would like to have something like this pseudo cod:
CONST MININUM = 70px;
CONST MAXINUM = 500px;
CONST FILTER_BUTTON_SIZE = 20px;
For each column
in
columns
Column.resizeToFit();
if
(Column_Width < MININUM)
{
Column_Width = MININUM;
}
else
if
(FilterButtonSize>MAXINUM)
{
Column_Width = MAXINUM;
}
Filter_TextBox.Width = Column_Width - Filter_Button_Size;
Next
I’ll be glad to get a solution for this problem.
Thank you,
Daniel.
0
Princy
Top achievements
Rank 2
answered on 04 Aug 2014, 07:08 AM
Hi Daniel,
Please take a look at the following code library which will shows how to make the filtering controls (textboxes, RadNumericTextBoxes, RadDatePickers) resize in real time together with the RadGrid columns.
How to make RadGrid Filtering Controls Resize Together with the Columns
Thanks,
Princy
Please take a look at the following code library which will shows how to make the filtering controls (textboxes, RadNumericTextBoxes, RadDatePickers) resize in real time together with the RadGrid columns.
How to make RadGrid Filtering Controls Resize Together with the Columns
Thanks,
Princy
0
Daniel
Top achievements
Rank 1
answered on 04 Aug 2014, 12:04 PM
Hi Princy,
Thanks for your response!
The link you gave me is a partial solution. When the column’s width is particularly small, it’s very hard to insert data, and certainly not possible to see what the user enters – see video.
So I have tried to limit the minimum column’s width by the following JS code:
This solution works!!! The only question I still have is how to write the following code in JS? This code is similar to the code in your code-library project.
Thank you,
Daniel.
Thanks for your response!
The link you gave me is a partial solution. When the column’s width is particularly small, it’s very hard to insert data, and certainly not possible to see what the user enters – see video.
So I have tried to limit the minimum column’s width by the following JS code:
function
pageLoad() {
var
grid = $find(
"<%= RadGrid1.ClientID %>"
);
var
columns = grid.get_masterTableView().get_columns();
var
MAX_WIDTH = 500;
var
MIN_WIDTH = 70;
for
(
var
i = 0; i < columns.length; i++) {
var
element = columns[i].get_element();
columns[i].resizeToFit();
if
(element.clientWidth < MIN_WIDTH) {
grid.get_masterTableView().resizeColumn(i, MIN_WIDTH);
}
else
if
(element.clientWidth > MAX_WIDTH)
grid.get_masterTableView().resizeColumn(i, MAX_WIDTH);
}
This solution works!!! The only question I still have is how to write the following code in JS? This code is similar to the code in your code-library project.
e.Column.FilterControlWidth = Unit.Percentage(60)
Thank you,
Daniel.
0
Princy
Top achievements
Rank 2
answered on 06 Aug 2014, 04:55 AM
Hi Daniel,
You can access the filter textbox in clientside and set its width as follows:
JS:
Thanks,
Princy
You can access the filter textbox in clientside and set its width as follows:
JS:
<script type=
"text/javascript"
>
function
pageLoad() {
var
grid = $find(
"<%= _RadGrid1.ClientID %>"
);
var
tableView = grid.get_masterTableView();
var
columns = grid.get_masterTableView().get_columns();
//access the filter row
var
filterRow
=
$telerik.$(grid.get_element()).find(
".rgFilterRow"
);
var
MAX_WIDTH = 500;
var
MIN_WIDTH = 70;
for
(
var
i = 0; i < columns.length; i++) {
var
element = columns[i].get_element();
columns[i].resizeToFit();
if
(element.clientWidth < MIN_WIDTH) {
grid.get_masterTableView().resizeColumn(i, MIN_WIDTH);
//access the filter textbox for the columns
var
txtfilter
=
$telerik.findElement(filterRow[0], columns[i]._data.UniqueName)
if
(txtfilter !=
null
) {
//set width
txtfilter.style.width = MIN_WIDTH;
}
}
else
if
(element.clientWidth > MAX_WIDTH) {
grid.get_masterTableView().resizeColumn(i, MAX_WIDTH);
var
txtfilter = $telerik.findElement(filterRow[0], columns[i]._data.UniqueName)
if
(txtfilter !=
null
) {
txtfilter.style.width = MAX_WIDTH;
}
}
}
}
</script>
Thanks,
Princy