Horizontal scroll whitespace in the bottom of the RadGrid - c#

I am retrieving data from database using RadGrid. I have more columns in my RadGrid, so I need to show RadGrid horizontal scroll to keep the page from expanding but disable the vertical scroll so height of the grid should expand to always display all rows in the grid. I got the result but there is whitespace in the bottom of the RadGrid.
My UI of the RadGrid:
<table style="table-layout: fixed;" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="false" PagerStyle-AlwaysVisible="true"
CellPadding="0" CellSpacing="0" GridLines="None" Skin="Metro" CssClass="RadGrid_CBGrid"
HorizontalAlign="Left" AutoGenerateColumns="False" OnItemCommand="RadGrid1_ItemCommand"
OnDataBound="RadGrid1_DataBound">
<ClientSettings>
<Selecting CellSelectionMode="SingleCell"></Selecting>
<Scrolling AllowScroll="true" UseStaticHeaders="True"></Scrolling>
</ClientSettings>
<MasterTableView HierarchyLoadMode="Client" DataKeyNames="EmpID" AllowMultiColumnSorting="true"
Name="Parent">
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
</RowIndicatorColumn>
<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
</ExpandCollapseColumn>
<Columns>
<telerik:GridBoundColumn DataField="EmpID" EmptyDataText="NA" HeaderText="Emp ID"
UniqueName="EmpID">
</telerik:GridBoundColumn>
and so on......
-------------------
</Columns>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column">
</EditColumn>
</EditFormSettings>
</MasterTableView>
<FilterMenu EnableImageSprites="False">
</FilterMenu>
</telerik:RadGrid>
</td>
</tr>
</table>
If I changed ClientSettings-Scrolling-AllowScroll="true" in RadGrid and
I got the result and there is NO whitespace in the bottom of the RadGrid BUT Horizontal scroll bar is NOT coming in my RadGrid.
So can anybody please give me the solution.

Or if you don't want to worry about hieght calculation do this!
// radgrid scroll horizontal only
<ClientSettings AllowDragToGroup="True" AllowGroupExpandCollapse="true">
<Scrolling AllowScroll="true" />
<ClientEvents OnGridCreated="GridCreated" />
</ClientSettings>
function GridCreated(sender, args) {
$('.rgDataDiv').removeAttr('style');
$('.rgDataDiv').attr('style', 'overflow-x: scroll;');
}

Just change overflow-x property value of data grid to scroll , instead of applying auto. If you have this issue in IE9.

Related

Missing ComboBox on Grid Item Edit

I new to telerik and fighting my way up the learning curve.
I have a RadGrid that I'm populating with a linq query. I'm using a
GridTemplateColumn with a ComboBox for new and edit of one of the fields. The problem is the ComboBox doesn't show on the insert or edit screen. The fields set as GridDropDownColumn do show on the insert or edit. I need GridTemplateColumn solution because I need to run some code once the dropdown list has been selected.
What am I missing here? I'm trying to work from a Telerik example. It's the Release field that is giving me the problem.
<telerik:RadGrid RenderMode="Lightweight" ID="grdData" runat="server"
AllowPaging="true"
AllowSorting="true"
AutoGenerateColumns="false"
AllowAutomaticInserts="true"
AllowAutomaticUpdates="true"
OnNeedDataSource="grdData_OnNeededDataSource"
OnItemDataBound="grdData_OnItemDataBound"
OnUpdateCommand="grdData_OnUpdateCommand" >
<ClientSettings>
<Selecting AllowRowSelect="True" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
</ClientSettings>
<SelectedItemStyle BackColor="LightYellow" />
<MasterTableView Width="100%"
DataKeyNames="TID"
EditMode="EditForms"
AutoGenerateColumns="false"
InsertItemDisplay="Top"
CommandItemDisplay="Top"
InsertItemPageIndexAction="ShowItemOnFirstPage">
<Columns>
<telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
<telerik:GridBoundColumn DataField="TID" UniqueName="TID"
HeaderText="TID" ReadOnly="true"></telerik:GridBoundColumn>
<telerik:GridDropDownColumn UniqueName="Employee" ListDataMember="Employee"
SortExpression="Employee" ListTextField="Employee" ListValueField="Employee"
HeaderText="Employee" DataField="Employee"
DropDownControlType="RadComboBox"
EnableEmptyListItem="true" EmptyListItemText="Make a choice" EmptyListItemValue=""
/>
<telerik:GridDropDownColumn UniqueName="Job" ListDataMember="Job"
SortExpression="Job" ListTextField="Job" ListValueField="Job"
HeaderText="Job" DataField="Job"
DropDownControlType="RadComboBox"
EnableEmptyListItem="true" EmptyListItemText="Make a choice" EmptyListItemValue=""
/>
<telerik:GridTemplateColumn UniqueName="Release"
HeaderText="Release"
HeaderStyle-HorizontalAlign="Center"
SortExpression="Release"
ItemStyle-Width="170px" HeaderStyle-Width="80px"
DataField="Release" >
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "Release")%>
</ItemTemplate>
<telerik:EditItemTemplate>
<telerik:RadComboBox runat="server" ID="rcbRelease"
AutoPostBack="true"
EnableLoadOnDemand="true"
DataTextField="Release"
DataValueField="Release"
Text='<% #Bind("Release")%>'
EnableEmptyListItem="true"
EmptyListItemText="Make a choice"
EmptyListItemValue="NR"
OnDataBinding="rcbRelease_OnDataBinding"
></telerik:RadComboBox>
</telerik:EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="ComponentJob" UniqueName="ComponentJob" HeaderText="ComponentJob"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Operation" UniqueName="Operation" HeaderText="Operation"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Quantity" UniqueName="Quantity" HeaderText="Quantity"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Priority" UniqueName="Priority" HeaderText="Priority"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Status" UniqueName="Status" HeaderText="Status"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="LastEdit" UniqueName="LastEdit" HeaderText="LastEdit"></telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
I think your having trouble with the ComboBox because you have EnableLoadOnDemand=true but you have not subscribed to the ItemsRequested event. See Load On Demand Overview for details.
Since you mention your new to the controls, you might want to get the ComboBox LoadOnDemand working outside of the grid first.
Try removing the telerik namespace/prefix from the EditItemTemplate declaration:
Change this:
<telerik:EditItemTemplate>
<%-- RadComboBox --%>
</telerik:EditItemTemplate>
To this:
<EditItemTemplate>
<%-- RadComboBox --%>
</EditItemTemplate>
Also, please share with us which documentation were you following so that we can double check and report the documentation error.

hide panel based on grid view row selection in same page on server side

I have below GridView with radio button as column. I want to hide or display panel based on GridView row selection that will be rendering outside of GridView in same page.
Below is my GridView:
<table style="width: 95%; margin-top: 10px;" class="transferCertsTbl">
<tr style="width: 95%">
<td colspan="2">
<asp:GridView ID="gvClearpassCertInfo" runat="server" AutoGenerateColumns="False" GridLines="None"
CellSpacing="1" CellPadding="1"
Width="95%" BorderWidth="0"
AllowSorting="True"
PageSize="30"
OnRowDataBound="gvClearpassCertInfo_RowDataBound"
CssClass="data responsive">
<Columns>
<asp:TemplateField HeaderText="Select" SortExpression="">
<ItemTemplate>
<asp:RadioButton ID="radioChkCert" runat="server" onclick="RadioCheck(this);" /><input type="hidden" id="hdnCertId" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "CertId") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CertificateID" HeaderText="Certificate ID" HeaderStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="partID" HeaderText="Part Number" HeaderStyle-HorizontalAlign="Center"/>
<asp:BoundField DataField="BaseLicense" HeaderText="Base License" Visible="false" />
</Columns>
<EmptyDataRowStyle CssClass="AlternatingRowStyle" />
<HeaderStyle CssClass="HeaderStyle" HorizontalAlign="Center" />
<RowStyle HorizontalAlign="Center" />
<AlternatingRowStyle HorizontalAlign="Center" />
<PagerSettings Visible="False" />
</asp:GridView>
</td>
</tr>
</table>
But I am not sure how to display or hide based on row selection in GridView on server side only.
Could any one please help on this that would be very grateful to me?
You can do the following:
For the radio button tag add autopostback=true and OnCheckedChanged="radioChkCert_CheckedChanged" like this:
<asp:RadioButton ID="radioChkCert" runat="server" onclick="RadioCheck(this);" autopostback="true" OnCheckedChanged="radioChkCert_CheckedChanged"/>
in the codebehind add the function:
protected void radioChkCert_CheckedChanged(object sender, EventArgs e)
{
radiobutton radiobtn = (radiobutton)sender;
string txt = (((Label)radiobtn.Parent.FindControl("l1")).Text); //l1 is the id of a label in the gridview
if ((txt == "CertainCode")) {
Certainpanel.Visible = true;
}
}
Note:
I used the label's text to control which panel to show, in your case choose it depending on which control and it's value.
I converted from vb.net to C# tell me if there is an error

Obout grid coming empty

I have a obout grid in which right now i have included only one column.When I set the datasource and data bind it the grid shows as empty at runtime.I was doing it with the normal gridview(asp) earlier and it was working fine.I replaced the normal gridview with the obout - now its coming as empty.
<obout:Grid ID="gvReport" runat="server" Serialize="false" ShowTotalNumberOfPages="false" AllowPaging="true"
ShowLoadingMessage="false" FolderStyle="~/styles/premiere_blue" AllowPageSizeSelection="false" EnableRecordHover="true"
AllowGrouping="false" AutoGenerateColumns="false" AllowFiltering="false" FilterType="ProgrammaticOnly"
AllowAddingRecords="false" AllowColumnReordering="false" AllowRecordSelection="true" AllowMultiRecordSelection="true" ShowRecordsPerPage="false" AllowColumnResizing="true" ShowColumnsFooter="false" ShowHeader="true" ShowFooter="true" AllowSorting="true" GenerateRecordIds="True" ViewStateMode="Inherit" KeepSelectedRecords="true" CallbackMode="false"
EmbedFilterInSortExpression="true" Width="100%" PageSize="10" OnRowDataBound="GridView_RowDataBound" OnDataBound="GridView_DataBound" OnDataSourceNeeded="GridDataSourceNeededEvent">
<ScrollingSettings ScrollHeight="260" EnableVirtualScrolling="true" UsePagingForVirtualScrolling="true" /><Columns>
<obout:Column ID="colName" DataField="Name" Width="200px" Wrap="true" HeaderText="Content Name"
ShowFilterCriterias="false">
<TemplateSettings FilterTemplateId="tplNameFilter" />
<FilterOptions>
<obout:FilterOption IsDefault="true" Type="Contains" />
</FilterOptions>
</obout:Column>
</Columns>
<Templates>
<obout:GridTemplate runat="server" ID="tplNameFilter" ControlID="NameFilter">
<Template>
<obout:OboutTextBox runat="server" ID="NameFilter" Width="100%">
</obout:OboutTextBox>
</Template>
</obout:GridTemplate>
</Templates>
<TemplateSettings HeadingTemplateId="tplHeading" />
<PagingSettings PageSizeSelectorPosition="Bottom" Position="Bottom" ShowRecordsCount="True" />
<FilteringSettings InitialState="Hidden" FilterPosition="Top" FilterLinksPosition="Top" />
</obout:Grid>
Code:
gvReport.DataSource = reportData;
gvReport.DataBind();
While debugging the table has all the values but they are not getting assigned to the grid.Previously in place of obout I had normal gridview and it was working fine.
You must remove
OnDataSourceNeeded="GridDataSourceNeededEvent"
you can't have an OnDataSourceNeeded event togheter with gvReport.DataSource

change Width Gridview While containing 100 words;

HTML
<asp:GridView ID="GridView1" runat="server" GridLines="Vertical" Width="825px" AutoGenerateColumns="False"
DataSourceID="LinqDataSource1">
<Columns>
<asp:BoundField DataField="Title" HeaderText="Title" ReadOnly="True"
SortExpression="Title" />
<asp:BoundField DataField="Body" HeaderText="Body" ReadOnly="True" ItemStyleWidth="1"
SortExpression="Body"></asp:BoundField>
</Columns>
</asp:GridView>
<asp:LinqDataSource ID="LinqDataSource1" runat="server"
ContextTypeName="DataClassesDataContext"
Select="new (Title, Body)" TableName="PrivateMessages">
</asp:LinqDataSource>
Code
GridView1.Columns[1].ItemStyle.Width = 1;
i would like Fixed Columns[1].width=1 ; While Body containing 100 words;
This Code Does Not Change Width Gridview?
It's not necessary to change the GridView with drag and drop. You have to just select its edges and you can change it.

GridView, Child GridView, extra column won't disappear?

I'm building a GridView control which encapsulates a child gridview. The child gridview holds a div tag which is displayed when the user selects a row in the parent gridview. However, even though the contents is hidden i.e. the div tag, an extra column is added - how do I get rid of the extra column. In the tutorial it states that by adding a </td></td> and starting a new row <tr> this should happen but it does (I also noticed that the author turned off gridlines so my assumption is that he in fact has this problem also). Here is the gridview, oh and I set the visible state of the itemtemplate to 'true' but then the javascript could (not) find it.
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" DataKeyNames="PublicationID"
DataSourceID="ObjectDataSource1" Width="467px" OnRowDataBound="GridView1_RowDataBound"
Font-Names="Verdana" Font-Size="Small">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="PublicationSelector" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="State" HeaderText="State" SortExpression="State" />
<asp:TemplateField HeaderText="Owners">
<ItemTemplate>
<asp:Label ID="Owners" runat="server"></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
<asp:TemplateField>
<ItemTemplate >
</td></tr>
<tr>
<td colspan="7">
<div id="<%# Eval("PublicationID") %>" style="display: none; position: relative">
<asp:GridView ID="GridView2_ABPubs" runat="server" AutoGenerateColumns="false" Width="100%"
Font-Names="Verdana" Font-Size="small">
<Columns>
<asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Apart from the extra column in the master gridview it works fine.
Just for completeness, here is a to the original article (for some reason it didn't like my <a href> tag so it's copy and paste).
To get rid of the extra column, just set its css style to display: none. You can do this by applying a CssClass to the TemplateField containing the nested grid:
<asp:TemplateField HeaderStyle-CssClass="hidden-column" ItemStyle-CssClass="hidden-column" FooterStyle-CssClass="hidden-column">
Here is the definition of the CssClass I used:
<style type="text/css">
.hidden-column {
display: none;
}
</style>
Note: the markup will still be in the html but at least it won't be visible.
Tested under IE 8.0, Google Chrome 2.0 and Opera 10.0
Update: To eliminate the double border, just put the id and the style on the <tr> instead of the <div>:
<tr id="<%# Eval("PublicationID") %>" style="display: none; position: relative">
<td colspan="7">
<div>
...
... and change the display in the javascript from block to table-row:
div.style.display = "table-row"; // not a div anymore!!
Looks like you have unbalanced tags in your <ItemTemplate>:
<ItemTemplate >
</td></tr> <<---- These look unbalanced
<tr>
<td colspan="7">
<div id="<%# Eval("PublicationID") %>" style="display: none; position: relative">
<asp:GridView ID="GridView2_ABPubs" runat="server" AutoGenerateColumns="false" Width="100%"
Font-Names="Verdana" Font-Size="small">
<Columns>
<asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</ItemTemplate>
I don't see an opening tag for these tr, td tags:
...
<ItemTemplate >
</td></tr>
...
Just checked and the author of the article seems to have the same issue in the generated source of the page.

Categories