function ShowColumnEditor() {
editedCell = this;
//hide text and show column editor in the edited cell
var cellText = this.getElementsByTagName("span")[0];
cellText.style.display = "none";
//display the span which wrapps the hidden checkbox editor
if (this.getElementsByTagName("span")[1]) {
this.getElementsByTagName("span")[1].style.display = "";
}
var colEditor = this.getElementsByTagName("div")[0] || this.getElementsByTagName("input")[0] || this.getElementsByTagName("select")[0];
colEditor.style.display = "";
if (colEditor.tagName == "DIV") {
var _Editor = $find(colEditor.id.replace("_wrapper", ""));
if (colEditor.id.indexOf("_wrapper") != -1) {
// DatePicker is Found
_Editor.get_textBox().focus();
}
else {
_Editor.get_inputDomElement().focus();
}
}
else {
colEditor.focus();
}
}
function HideEditor(editCell, editorType) {
//get reference to the label in the edited cell
var lbl = editCell.getElementsByTagName("span")[0];
switch (editorType) {
case "maskedtextbox":
var dtPickerDIV = editCell.getElementsByTagName("div")[0];
var dtPickerID = editCell.getElementsByTagName("input")[0].id;
var dtPickerClientID = dtPickerID.replace("_text", "");
var dtPicker = $find(dtPickerClientID);
if (lbl.innerHTML != dtPicker.value) {
lbl.innerHTML = dtPicker.value;
editCell.style.border = "1px dashed red";
StoreEditedItemId(editCell);
}
dtPickerDIV.style.display = "none";
break;
case "DatePicker":
var dtPickerDIV = editCell.getElementsByTagName("div")[0];
var dtPickerID = editCell.getElementsByTagName("input")[0].id;
var dtPickerClientID = dtPickerID.replace("_dateInput_text", "");
var dtPicker = $find(dtPickerClientID);
if (lbl.innerHTML != dtPicker.get_textBox().value) {
lbl.innerHTML = dtPicker.get_textBox().value;
editCell.style.border = "1px dashed red";
StoreEditedItemId(editCell);
}
dtPickerDIV.style.display = "none";
break;
..........
Hi im trying to add filtering to my grid, I set the allowfilteringByColumn property to true and when I put a field to filter and push enter the grid is not visible and is a line instead.I'm filling my grid with this store procedure
private void llenagridBaja()
{
try
{
var SSEGUAEntities = new BD_SSEGUAEntities();
var resultado = SSEGUAEntities.spBajaEmpleado1();
if (resultado != null)
{
RadGrid2.DataSource = resultado;
}
}
catch (Exception ex)
{
Alerta(ex.Message);
}
RadGrid2.Visible = true;
RadGrid2.ShowFooter = true;
}
<
telerik:RadGrid
ID
=
"RadGrid2"
runat
=
"server"
AutoGenerateColumns
=
"False"
GridLines
=
"None"
Skin
=
"Sunset"
onitemdatabound
=
"RadGrid2_ItemDataBound"
AllowPaging
=
"True"
AllowSorting
=
"True"
onitemcommand
=
"RadGrid2_ItemCommand"
onpageindexchanged
=
"RadGrid2_PageIndexChanged"
onselectedindexchanged
=
"RadGrid2_SelectedIndexChanged"
AllowFilteringByColumn
=
"True"
>
<
ClientSettings
EnablePostBackOnRowClick
=
"True"
>
<
Selecting
AllowRowSelect
=
"True"
/>
</
ClientSettings
>
<
MasterTableView
>
<
CommandItemSettings
ExportToPdfText
=
"Export to Pdf"
></
CommandItemSettings
>
<
RowIndicatorColumn
>
<
HeaderStyle
Width
=
"20px"
></
HeaderStyle
>
</
RowIndicatorColumn
>
<
ExpandCollapseColumn
>
<
HeaderStyle
Width
=
"20px"
></
HeaderStyle
>
</
ExpandCollapseColumn
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"fiCircuito"
HeaderText
=
"Circuito"
UniqueName
=
"columnCirc"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"nom_edo"
HeaderText
=
"Estado"
UniqueName
=
"columnEdo"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"nom_cd"
HeaderText
=
"Ciudad"
UniqueName
=
"columnCd"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"fiIdSolicitud"
HeaderText
=
"Folio"
UniqueName
=
"columnFolio"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"nom_padre"
HeaderText
=
"Nombre Madre/Padre"
UniqueName
=
"columnPadre"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"nom_menor"
HeaderText
=
"Nombre del Menor"
UniqueName
=
"column1"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
UniqueName
=
"columnIdM"
DataField
=
"fiIdMenor"
Visible
=
"False"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
HeaderText
=
"Fecha"
UniqueName
=
"column4"
DataField
=
"fech_baja"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"ind_baja"
HeaderText
=
"Estatus Empleado"
UniqueName
=
"columnEstatus"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridButtonColumn
ButtonType
=
"ImageButton"
HeaderText
=
"Avisos"
UniqueName
=
"column2"
ImageUrl
=
"~/imgs/new-message-icon.png"
CommandName
=
"Avisos"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridButtonColumn
>
<
telerik:GridButtonColumn
ButtonType
=
"ImageButton"
HeaderText
=
"Actualiza Estado"
UniqueName
=
"column3"
ImageUrl
=
"~/imgs/refresh_document-icon.gif"
CommandName
=
"Actualiza"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridButtonColumn
>
<
telerik:GridBoundColumn
HeaderStyle-HorizontalAlign
=
"Center"
HeaderText
=
"Estatus"
DataField
=
"fcDescEdoSol"
UniqueName
=
"fcDescEdoSol"
Visible
=
"False"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
></
HeaderStyle
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
HeaderText
=
"Adscripción Actual"
UniqueName
=
"columnAdscAct"
DataField
=
"area_Nueva"
Visible
=
"false"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
/>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
HeaderStyle-HorizontalAlign
=
"Center"
HeaderText
=
"Expediente "
DataField
=
"fiExpEmpleado"
UniqueName
=
"EXPEDIENTE"
Visible
=
"False"
>
<
HeaderStyle
HorizontalAlign
=
"Center"
></
HeaderStyle
>
</
telerik:GridBoundColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
protected
override
void
OnPreRender(EventArgs e)
{
base
.OnPreRender(e);
if
(IsExport)
{
const
int
charWidth = 10;
var gridWidth = 0;
foreach
(GridColumn column
in
MasterTableView.Columns)
{
if
(column
is
GridEditableColumn)
{
var columnWidth = 0;
var currentlyExportingTypes = column.CurrentFilterValue.GetTypesFromSeparatedString<DSExportType>();
if
(currentlyExportingTypes.Count > 0 && !currentlyExportingTypes.Contains(_currentlyExportingType.Value) ||
column.HeaderText ==
"#"
|| column.UniqueName ==
"checker"
)
{
column.Visible =
false
;
}
if
(column.Visible)
{
var alignmentCssClassPattern =
new
Regex(
"\\b(?<alignment>ca|la|ra)\\b"
);
var alignmentCssClassPatternMatch = alignmentCssClassPattern.Match(column.HeaderStyle.CssClass);
foreach
(GridDataItem dataItem
in
MasterTableView.Items)
{
var currentColumnWidth = 0;
if
(column
is
GridTemplateColumn)
{
int
labelLengths;
switch
(_currentlyExportingType)
{
case
DSExportType.Excel:
labelLengths =
(from label
in
dataItem[column.UniqueName].Controls.OfType<LiteralControl>().Where(label => !label.Text.StartsWith(
"\r\n"
))
select label.Text.Length).Sum();
currentColumnWidth = labelLengths * charWidth;
break
;
case
DSExportType.Pdf:
labelLengths =
(from label
in
dataItem[column.UniqueName].Controls.OfType<WebControl>().OfType<Label>()
select label.Text.Length).Sum();
var hyperLinkLengths =
(from hyperLink
in
dataItem[column.UniqueName].Controls.OfType<WebControl>().OfType<HyperLink>()
select hyperLink.Text.Length).Sum();
var imageWidths =
(from image
in
dataItem[column.UniqueName].Controls.OfType<WebControl>().OfType<Image>()
select image.Width.Value).Sum();
currentColumnWidth = labelLengths * charWidth + hyperLinkLengths * charWidth + Convert.ToInt32(imageWidths);
break
;
}
}
else
{
// Only for text types, should be check the type more carefully in common case!
currentColumnWidth = dataItem[column.UniqueName].Text.Length * charWidth;
}
if
(columnWidth < currentColumnWidth)
{
columnWidth = currentColumnWidth;
}
if
(alignmentCssClassPatternMatch.Success)
{
switch
(alignmentCssClassPatternMatch.Groups[
"alignment"
].Value)
{
case
"ca"
:
dataItem[column.UniqueName].Style[
"text-align"
] =
"center"
;
break
;
case
"ra"
:
dataItem[column.UniqueName].Style[
"text-align"
] =
"right"
;
break
;
default
:
dataItem[column.UniqueName].Style[
"text-align"
] =
"left"
;
break
;
}
}
dataItem[column.UniqueName].Style.Add(
"white-space"
,
"nowrap"
);
}
foreach
(GridHeaderItem headerItem
in
MasterTableView.GetItems(GridItemType.Header))
{
if
(alignmentCssClassPatternMatch.Success)
{
switch
(alignmentCssClassPatternMatch.Groups[
"alignment"
].Value)
{
case
"ca"
:
headerItem[column.UniqueName].Style[
"text-align"
] =
"center"
;
break
;
case
"ra"
:
headerItem[column.UniqueName].Style[
"text-align"
] =
"right"
;
break
;
default
:
headerItem[column.UniqueName].Style[
"text-align"
] =
"left"
;
break
;
}
}
}
var finalColumnWidth = Math.Max(columnWidth, column.HeaderText.Length * charWidth);
column.HeaderStyle.Width = Unit.Pixel(finalColumnWidth);
gridWidth += finalColumnWidth;
}
}
}
ExportSettings.Pdf.PageWidth = Unit.Pixel(gridWidth + 2 * PdfGridPadding);
_currentlyExportingType =
null
;
}
}
The given method works, but the question is
why in the case of Excel export there is only LiteralControl within dataItem[column.UniqueName
].Controls? Where is the image, for instance? I need different types of controls to properly calculate cell width.
But when I am on image column - dataItem[image_column_unique_name].Controls also returns me only LiteralControls and no any reference to the used image:
<
telerik:GridTemplateColumn
HeaderStyle-CssClass
=
'GridHeaderGreen ra'
ItemStyle-CssClass
=
'ra'
UniqueName
=
"image_column_unique_name"
>
<
ItemTemplate
><
asp:image
runat
=
"server"
ImageUrl
=
"~/images/something.png"
/></
ItemTemplate
>
</
telerik:GridTemplateColumn
>
<
EditFormSettings
EditFormType
=
"Template"
>
<
FormTemplate
>
<
table
style
=
"width: 100%;"
>
<
tr
>
<
td
align
=
"left"
width
=
"25%"
>
<
asp:Label
ID
=
"MadeDteLabel"
runat
=
"server"
Font-Bold
=
"True"
Font-Names
=
"Arial"
Font-Size
=
"X-Small"
Text
=
"Agreement Made:"
></
asp:Label
>
</
td
>
<
td
align
=
"left"
width
=
"25%"
>
<
telerik:RadDatePicker
ID
=
"MadeDatePicker"
runat
=
"server"
Skin
=
"Web20"
>
<
Calendar
runat
=
"server"
UseRowHeadersAsSelectors
=
"False"
UseColumnHeadersAsSelectors
=
"False"
ViewSelectorText
=
"x"
Skin
=
"Web20"
>
</
Calendar
>
<
DateInput
runat
=
"server"
DisplayDateFormat
=
"dd/MM/yyyy"
DateFormat
=
"dd/MM/yyyy"
>
</
DateInput
>
<
DatePopupButton
ImageUrl
=
""
HoverImageUrl
=
""
></
DatePopupButton
>
</
telerik:RadDatePicker
>
</
td
>
<
td
align
=
"left"
width
=
"25%"
>
<
asp:Label
ID
=
"Label2"
runat
=
"server"
Font-Bold
=
"True"
Font-Names
=
"Arial"
Font-Size
=
"X-Small"
Text
=
"RebateType:"
></
asp:Label
>
</
td
>
<
td
align
=
"left"
colspan
=
"2"
width
=
"25%"
>
<
telerik:RadComboBox
ID
=
"RebTypComboBox"
runat
=
"server"
DataTextField
=
"rebateType"
DataValueField
=
"rebateTypeID"
Skin
=
"Web20"
Width
=
"150px"
>
<
Items
>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"--"
Value
=
"0"
Selected
=
"true"
/>
</
Items
>
</
telerik:RadComboBox
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"left"
width
=
"25%"
>
<
asp:Label
ID
=
"RevDteLabel"
runat
=
"server"
Font-Bold
=
"True"
Font-Names
=
"Arial"
Font-Size
=
"X-Small"
Text
=
"Rebate Revision Date:"
></
asp:Label
>
</
td
>
<
td
align
=
"left"
width
=
"25%"
>
<
telerik:RadDatePicker
ID
=
"RevDatePicker"
runat
=
"server"
Skin
=
"Web20"
>
<
Calendar
runat
=
"server"
UseRowHeadersAsSelectors
=
"False"
UseColumnHeadersAsSelectors
=
"False"
ViewSelectorText
=
"x"
Skin
=
"Web20"
>
</
Calendar
>
<
DateInput
runat
=
"server"
DisplayDateFormat
=
"dd/MM/yyyy"
DateFormat
=
"dd/MM/yyyy"
>
</
DateInput
>
<
DatePopupButton
ImageUrl
=
""
HoverImageUrl
=
""
></
DatePopupButton
>
</
telerik:RadDatePicker
>
</
td
>
<
td
align
=
"left"
width
=
"25%"
>
<
asp:Label
ID
=
"Label1"
runat
=
"server"
Font-Bold
=
"True"
Font-Names
=
"Arial"
Font-Size
=
"X-Small"
Text
=
"Rebate Amount:"
></
asp:Label
>
</
td
>
<
td
align
=
"left"
colspan
=
"2"
width
=
"25%"
>
<
telerik:RadNumericTextBox
ID
=
"RebateAmt"
runat
=
"server"
Text='<%# Bind("rebate_amount") %>'
Skin="Web20" Width="70px">
</
telerik:RadNumericTextBox
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"left"
width
=
"25%"
>
</
td
>
<
td
align
=
"left"
width
=
"25%"
>
<
asp:CheckBox
ID
=
"AgentRebApplyAllCB"
runat
=
"server"
AutoPostBack
=
"true"
Font-Names
=
"Arial"
Font-Size
=
"X-Small"
OnCheckedChanged
=
"AgentRebApplyAllCB_CheckedChanged"
Text
=
"Apply To All Ports"
/>
</
td
>
<
td
align
=
"left"
width
=
"25%"
>
</
td
>
<
td
align
=
"left"
colspan
=
"2"
width
=
"25%"
>
<
asp:Label
ID
=
"RebORLabel0"
runat
=
"server"
Font-Bold
=
"True"
Font-Names
=
"Arial"
Font-Size
=
"X-Small"
Text
=
"Rate Terms:"
></
asp:Label
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"left"
width
=
"25%"
>
<
asp:Label
ID
=
"RebAPLabel"
runat
=
"server"
Font-Bold
=
"True"
Font-Names
=
"Arial"
Font-Size
=
"X-Small"
Text
=
"Applicable Port:"
></
asp:Label
>
</
td
>
<
td
align
=
"left"
width
=
"25%"
>
<
telerik:RadComboBox
ID
=
"RebAppPortComboBox"
runat
=
"server"
Skin
=
"Web20"
>
</
telerik:RadComboBox
>
</
td
>
<
td
align
=
"left"
width
=
"25%"
>
</
td
>
<
td
align
=
"left"
colspan
=
"2"
width
=
"25%"
>
<
telerik:RadComboBox
ID
=
"RebTermComboBox"
runat
=
"server"
DataTextField
=
"term_type"
DataValueField
=
"termID"
Skin
=
"Web20"
Width
=
"150px"
>
<
Items
>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"--"
Value
=
"0"
Selected
=
"true"
/>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"Weekly"
Value
=
"1"
/>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"Monthly"
Value
=
"2"
/>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"Quaterly"
Value
=
"3"
/>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"Half Year"
Value
=
"4"
/>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"Yearly"
Value
=
"5"
/>
</
Items
>
</
telerik:RadComboBox
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"left"
width
=
"25%"
>
</
td
>
<
td
align
=
"left"
width
=
"25%"
>
</
td
>
<
td
align
=
"left"
width
=
"25%"
>
</
td
>
<
td
align
=
"left"
colspan
=
"2"
width
=
"25%"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"left"
width
=
"25%"
>
</
td
>
<
td
align
=
"left"
width
=
"25%"
>
</
td
>
<
td
align
=
"left"
width
=
"25%"
>
</
td
>
<
td
align
=
"left"
style
=
"width: 12.5%"
width
=
"12.5%"
>
<
telerik:RadButton
ID
=
"btnUpdate"
CommandName='<%# Iif (TypeOf Container is GridEditFormInsertItem, "PerformInsert", "Update") %>'
runat="server" Skin="Web20" Text='<%# Iif (TypeOf Container is GridEditFormInsertItem, "Insert", "Update") %>'>
</
telerik:RadButton
>
</
td
>
<
td
align
=
"left"
style
=
"width: 12.5%"
width
=
"12.5%"
>
<
telerik:RadButton
ID
=
"btnCancel"
runat
=
"server"
Skin
=
"Web20"
CausesValidation
=
"false"
CommandName
=
"Cancel"
Text
=
"Cancel"
>
</
telerik:RadButton
>
</
td
>
</
tr
>
</
table
>
</
FormTemplate
>
</EditFormSettin
We have a radgrid that gets bound in 2 different ways. This depends on what action has been performed on the page..e.g
1. select comboboxA - will bind radgrid via server side binding using NeedDataSource event
2. select comboboxB - will bind radgrid via page method + client side binding . Below are are the the main 2 javascript functions in use .
function GetDataForGrid() { PageMethods.GetDataForGrid(GetDataForGridBy_Result, GetDataForGridByHeader_Failed);}
function GetDataForGrid_Result(result) {
var tableView = $find("<%=RadGrid.ClientID %>").get_masterTableView();
tableView.set_dataSource(result.Value);
tableView.dataBind();
}
The problem is, after the client side binding, if the user clicks on a certain row we need to do some processing in a server side event - RadGrid_ItemCommand(object sender, GridCommandEventArgs e) ...
However when we obtain the datakey within this server side event, it is always wrong....