Extra space at the end of a Telerik RadGrid - asp.net

I have a Telerik RadGrid on my aspx web page. I notice that when I run my web application I get an extra space at the end as the below picture illustrates. I'm not sure why this shows up, I checked the markup and there is no extra column, hidden or otherwise, after the last column with the Drop link. I also looked at the RadGrid properties and there's nothing there that seems to indicate that there's anything additional that is being rendered. That extra space does not show up in the visual designer, so I'm not sure what is causing it. Any help is appreciated.
Markup for the RadGrid is shown below:
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" OnItemCreated="RadGrid1_ItemCreated"
OnDeleteCommand="RadGrid1_DeleteCommand" GridLines="None" AllowSorting="True"
Skin="Web20" PageSize="20" FooterStyle-Wrap="false" >
<MasterTableView EditFormSettings-PopUpSettings-Modal="True" EditMode="PopUp" DataSourceID="SqlDataSource1"
AutoGenerateColumns="False" DataKeyNames="ID" ShowFooter="True" AllowPaging="True">
<Columns>
<telerik:GridBoundColumn DataField="Date Submitted" DataType="System.DateTime" HeaderText="Date Submitted"
ReadOnly="True" SortExpression="Date Submitted" UniqueName="Date Submitted">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ReqCategory" HeaderText="ReqCategory" SortExpression="ReqCategory"
UniqueName="ReqCategory" Visible="False">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Title" HeaderText="Title" SortExpression="Title"
UniqueName="Title">
</telerik:GridBoundColumn>
<%-- <telerik:GridBoundColumn DataField="Description" HeaderText="Description"
SortExpression="Description" UniqueName="Description">
</telerik:GridBoundColumn>--%>
<telerik:GridBoundColumn DataField="Owner" HeaderText="Owner" SortExpression="Owner"
UniqueName="Owner">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Requestor" HeaderText="Requestor" SortExpression="Requestor"
UniqueName="Requestor">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Status" HeaderText="Status" SortExpression="Status"
UniqueName="Status">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Requested Completion" HeaderText="Requested Completion"
SortExpression="Requested Completion" UniqueName="Requested Completion">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Estimated Completion" HeaderText="Estimated Completion"
SortExpression="Estimated Completion" UniqueName="Estimated Completion">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Ticket Submitted By" HeaderText="Ticket Submitted By"
SortExpression="Ticket Submitted By" UniqueName="Ticket Submitted By">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="View Ticket" UniqueName="TemplateViewColumn">
<ItemTemplate>
<asp:HyperLink ID="ViewLink" runat="server" Text="View"></asp:HyperLink>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Edit Ticket" UniqueName="TemplateEditColumn">
<ItemTemplate>
<asp:HyperLink ID="EditLink" runat="server" Text="Edit"></asp:HyperLink>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridButtonColumn HeaderText="Drop Ticket" Text="Drop" CommandName="Delete"
UniqueName="Drop" ConfirmText="Are you sure you want to drop this ticket?" ConfirmTitle="Drop Ticket" ConfirmDialogType="RadWindow">
</telerik:GridButtonColumn>
</Columns>
<EditFormSettings>
<PopUpSettings Modal="True"></PopUpSettings>
</EditFormSettings>
</MasterTableView>
</telerik:RadGrid>

I usually run into this when a width value for each column that does not add up to the width value of the RadGrid or leaving width values out altogether..
Try entering width values for each column but leave out the width value for the one column that would usually be the longest. In this case, I would choose the Title column.

Got it, turns out I was setting the ColumnSpan to an arbitrary number, 2 in this case, in the code-behind where the RadGrid is generated and it was causing that additional space to appear at the end. I was doing this to test another issue that has since been resolved. The snippet of code that was causing this is as follows and is commented out in my code now.
footerItem.Cells(2).ColumnSpan = 2

Related

How can I add a check box column in my radGrid? And how do I show the expand button?

I'm learning Telerik and I have the following design I'm trying to do translated into English (I don't need you to help me translate, just with the design components):
So far I have this:
How can I add the check box? Also how do I get rid of those 3 blank columns before the columns that I created myself?
Here is my HTML code so far:
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" Width="483px">
<asp:Label ID="TreatmentCenter" Text="Treatment Center: " runat="server"></asp:Label>
<telerik:RadDropDownList RenderMode="Lightweight" DefaultMessage="Select City" DataTextField="City" ID="DDL1" runat="server"></telerik:RadDropDownList>
<br />
<telerik:RadGrid RenderMode="Lightweight"
ID="RadGrid1" runat="server" AutoGenerateColumns="False"
ShowGroupPanel="True" Height="148px" Width="462px">
<MasterTableView EnableHierarchyExpandAll="true" DataKeyNames="OrderID">
<DetailTables>
<telerik:GridTableView EnableHierarchyExpandAll="true" DataKeyNames="ProductID" runat="server">
<ParentTableRelation>
<telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID" />
</ParentTableRelation>
<Columns>
<telerik:GridCheckBoxColumn>
</telerik:GridCheckBoxColumn>
<telerik:GridBoundColumn SortExpression="ProductName" HeaderText="Product Name" HeaderButtonType="TextButton"
DataField="ProductName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="ProductID" HeaderText="Product ID" HeaderButtonType="TextButton"
DataField="ProductID">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
DataField="Quantity">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="Price" HeaderText="Price" HeaderButtonType="TextButton"
DataField="Price">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="Procurer" HeaderText="Procurer" HeaderButtonType="TextButton"
DataField="Procurer">
</telerik:GridBoundColumn>
</Columns>
</telerik:GridTableView>
</DetailTables>
<Columns>
<telerik:GridBoundColumn SortExpression="OrderID" HeaderText="Order ID" HeaderButtonType="TextButton"
DataField="OrderID">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="DateOfOrder" HeaderText="Date Of Order" HeaderButtonType="TextButton"
DataField="DateOfOrder">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="OrderName" HeaderText="Order Name" HeaderButtonType="TextButton"
DataField="OrderName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="OrderAddress" HeaderText="Order Address" HeaderButtonType="TextButton"
DataField="OrderAddress">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings Scrolling-AllowScroll="true">
<Scrolling AllowScroll="true" />
<Resizing AllowRowResize ="true" EnableRealTimeResize="true" ResizeGridOnColumnResize="false" />
</ClientSettings>
<GroupingSettings ShowUnGroupButton="true" />
</telerik:RadGrid>
</telerik:RadAjaxPanel>
I can't read the arabic text so I am not sure how similar you need things to be (e.g., do you need them in RTL too), but I suggest the following:
inspect the rendering and control structure of your sample
try adding the controls you need and reorder them like any simple HTML elements
Here are some examples:
just add a checkbox:
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" Width="93px">
<telerik:RadCheckBox runat="server" ID="rchb1" Text="label text goes here"></telerik:RadCheckBox>
<%--<asp:Label ID="TreatmentCenter" Text="Treatment Center" runat="server"></asp:Label>--%>
<telerik:RadDropDownList RenderMode="Classic" DefaultMessage="Select City" DataTextField="City" ID="DDL1" runat="server"></telerik:RadDropDownList>
Note: RadCheckbox only supports Lightweight RenderMode so other Telerik buttons should either use their Lightweight mode too, or you should go with an asp:Checkbox and use the AssociatedControlID of the asp:Label.
On the grid columns - since AutoGenerateColumns is false, these columns are, most likely, only present on the design-time surface. Try running the page in the browser to see whether this is the case. If they are still present, review the code-behind in case events like Page_Init add programmatically columns to your grid.
Also, note that grouping adds elements (columns) to visually distinguish grouping.
As for the buttons - just wrap them in div elements, e.g.:
<div>
<telerik:RadButton ID="Confirm" Text="Confirm" runat="server" />
<telerik:RadButton ID="MainPage" Text="Main Page" runat="server" />
</div>
<telerik:RadButton ID="PosterPrintTitle" Text="Poster Print Title" runat="server" />
<telerik:RadButton ID="PrintInvoice" Text="Print Invoice" runat="server" />
The GridCheckBoxColumn is for bit bound data. If you want to use checkboxes for multiselection, you have to use the GridTemplateColumn
<telerik:GridTemplateColumn UniqueName="CheckBoxColumn">
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" />
</ItemTemplate>
</telerik:GridTemplateColumn>
As for the first two columns, they will not render once you run it. They are placeholders for the DetailTables
Figured it out
<Columns>
<telerik:GridClientSelectColumn UniqueName="GridClientSelectColumn1" />
</Columns>

How to get rows which selected by user in telerik rad grid?

I hava a Rad Grid like this :
<tel:GeneralRadGrid ID="MainGridView" runat="server" AllowMultiRowSelection="True"
OnItemCommand="MainGridView_OnItemCommand"
GroupingEnabled="false"
OnItemCreated="MainGridView_OnItemCreated"
MasterTableView-CommandItemSettings-ShowAddNewRecordButton="false"
DataSourceID="GridDataSource">
<MasterTableView DataKeyNames="Id">
<Columns>
<telerik:GridClientSelectColumn runat="server" UniqueName="ClientSelectColumn" >
</telerik:GridClientSelectColumn>
<telerik:GridBoundColumn DataField="mNumber" HeaderText="<%$Resources:Public,Number%>" UniqueName="Number" HeaderStyle-Width="10%" FilterControlWidth="80%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
<telerik:GridBoundColumn DataField="Name" HeaderText="<%$Resources:Public,NikName%>" UniqueName="Name" HeaderStyle-Width="17%" FilterControlWidth="80%" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
</Columns>
</MasterTableView>
<ExportSettings IgnorePaging="True" ExportOnlyData="True"></ExportSettings>
</tel:GeneralRadGrid>
I added AllowMultiRowSelection="True" and <telerik:GridClientSelectColumn runat="server" UniqueName="ClientSelectColumn" > </telerik:GridClientSelectColumn>
for selecting multi rows, but i can not get selected rows,
How can i do it?
Where do you want to get the selected rows - on the client or on the server?
On the client you can use the get_selectedItems() method on the RadGrid client-side object.
On the server you can use the SelectedItems property which returns a GridItemsCollection.

Server side tick box selection using a Telerik radgrid in asp.net (C#)

I'm trying to save my tickbox selection for a radgrid. I noticed Telerik had a tutorial on this as stated here: http://www.telerik.com/help/aspnet-ajax/grid-selecting-row-with-checkbox-server-side.html however this does not work for me and I think it's because I'm using advanced binding (i.e. OnNeedDataSource event). My radgrid looks like so:
<telerik:RadGrid ID="batchGrid" runat="server"
AllowFilteringByColumn="True" AllowSorting="True"
CellSpacing="0" GridLines="None" OnNeedDataSource="batchGrid_NeedDataSource"
EnableViewState="False" AutoGenerateColumns="True" OnColumnCreated="batchGrid_ColumnCreated"
OnExportCellFormatting="batchGrid_ExportCellFormatting">
<ExportSettings ExportOnlyData="true" HideStructureColumns="true" >
<Excel Format="Html"/>
</ExportSettings>
<ClientSettings AllowColumnsReorder="True" EnablePostBackOnRowClick="false" >
<Selecting AllowRowSelect="false"/>
<Resizing AllowResizeToFit="true" />
</ClientSettings>
<MasterTableView NoMasterRecordsText="No batch found containing this part, with the current filters">
<Columns>
<telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn" AllowFiltering="false" Reorderable="false" >
<ItemTemplate>
<asp:CheckBox ID="MyCheckBox" runat="server" OnCheckedChanged="ToggleRowSelection" AutoPostBack="true" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="headerChkbox" runat="server" OnCheckedChanged="ToggleSelectedState" AutoPostBack="true" />
</HeaderTemplate>
</telerik:GridTemplateColumn>
</Columns>
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>
</MasterTableView>
<FilterMenu EnableImageSprites="False" ></FilterMenu>
</telerik:RadGrid>
Currently ToggleRowSelection and ToggleSelectedState don't do anything, just declare a string that's not used and I put breakpoints on them so in debug mode I can tell when they're entered. However if I ever click a tick box in the radgrid, batchGrid_NeedDataSource is called before either which is really what I need to fix.
Sorry if this has been asked before, I had a search but people tended to either save the tick box selection client side or use simple data binding.
Thanks
I tried your exact code and got the calls to ToggleRowSelection and ToggleSelectedState in the code-behind to work by removing EnableViewState="False" from the RadGrid's definition. Everything else can stay the same.

Telerik grid don't show correct item when using custom datasource

I got a weird problem with the Telerik grid component... I'm talking about the webform RadGrid.
I'm doing some evaluation, and right now I'm trying to use my own business logic and data layer to feed the grid (FYI, using NHibernate behind the scene).
I managed to get paging, filtering and ordering working just fine... the only thing is that what I see when filtering, is not what my business layer extracted... mmmm.
I made myself clear. Here's the code
aspx
<telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" GridLines="None" AllowFilteringByColumn="True"
AllowPaging="True" AllowSorting="True" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"
AllowAutomaticUpdates="True" OnNeedDataSource="RadGrid1_NeedDataSource" AutoGenerateColumns="False" AllowCustomPaging="True"
EnableLinqExpressions="True" >
<MasterTableView DataKeyNames="CountryID" EditMode="Batch" >
<BatchEditingSettings EditType="Cell" />
<Columns>
<telerik:GridBoundColumn DataField="CountryID" FilterControlAltText="Filter CountryID column"
HeaderText="ID" ReadOnly="True" SortExpression="CountryID" UniqueName="CountryID">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Description" FilterControlAltText="Filter Name column"
HeaderText="Name" SortExpression="Description" UniqueName="Description">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="IsUE" DataType="System.Byte" FilterControlAltText="Filter IsUE column"
HeaderText="Is UE" SortExpression="IsUE" UniqueName="IsUE">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="VatApply" DataType="System.Byte" FilterControlAltText="Filter VatApply column"
HeaderText="Vat Apply" SortExpression="VatApply" UniqueName="VatApply">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="IsActive" DataType="System.Byte" FilterControlAltText="Filter Active column"
HeaderText="Active" SortExpression="IsActive" UniqueName="IsActive">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Continent" FilterControlAltText="Filter Continent column"
HeaderText="Continent" SortExpression="Continent" UniqueName="Continent">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="FlgDazi" DataType="System.Byte" FilterControlAltText="Filter FlgDazi column"
HeaderText="FlgDazi" SortExpression="FlgDazi" UniqueName="FlgDazi">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="PCHost" FilterControlAltText="Filter PCHost column"
HeaderText="PCHost" SortExpression="PCHost" UniqueName="PCHost" Visible="False">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Status" FilterControlAltText="Filter Status column"
HeaderText="Status" SortExpression="Status" UniqueName="Status" Visible="False">
</telerik:GridBoundColumn>
<telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"
ConfirmTitle="Delete" HeaderText="Delete" HeaderStyle-Width="50px" ButtonType="ImageButton"
CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
</telerik:GridButtonColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
and, in the code behind I have
protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
var csa =
new CountryServiceAdv(new SqlServerDataContext(ConnStr, GeoData.Context.GeoDataContext.GetAssemblies()), logAppenders);
var rg = sender as RadGrid;
int startRowIndex = rg.CurrentPageIndex * rg.PageSize;
int maximumRows = rg.PageSize;
var countries = csa.GetCountries(startRowIndex, maximumRows, GetSortExpression(rg), rg.MasterTableView.FilterExpression);
rg.DataSource = countries;
rg.VirtualItemCount = csa.Count(rg.MasterTableView.FilterExpression);
}
The 2 csa's method work like a charm.
I don't have any other RadGrid's event handler implemented, I do everything in the NeedDataSource event.
Too bad, despite the right values I have for both rg.DataSource and rg.VirtualItemCount, in my grid I see less items. Example: given a filter for wich I extract 69 items, given 10 items per page as the grid settings, I get just 5 items in the first page and none in the next pages (the paginator works right, I have the right number of pages).
One more info. If I add this line of code in the NeedDataSource event handler
rg.MasterTableView.FilterExpression = "";
I get the first page right but obviously, deleting the filter, next action like pagination or ordering, will result in the loss of the filter condition.
Any clues?
The only thing I can find in Telerik's documentation is that you may need to handle the ItemCommand event, or other event, and reset your filter.
http://www.telerik.com/help/aspnet-ajax/grid-custom-option-for-filtering.html
And here are the list of events that may give you some more explanation on where you need to intercept and reapply a filter
http://www.telerik.com/help/aspnet-ajax/grid-getting-familiar-with-server-side-api.html

Is it possible to make some of the bounded fields in a grid view invisible via CSS?

I have a standard grid view, which contains a number of bounded fields and template fields, out of these I would like to make 4 columns invisible.
I know the css for this is visibility:hidden; but I do not know how to apply it to just these 4 columns, I have tried using the ControlStyle-CssClass property but it seems to apply the css to the whole table.
Is there a way to apply this css only to these 4 columns, also the plan is after I manage this is to write some Javascript for a button to switch the visibility on and off, so if you could please use some CSS/tags etc which can be easily changed client side it would be a huge plus.
A example:
<asp:GridView ID="gwFoo" runat="server" AutoGenerateColumns="False" DataKeyNames="Id"
Width="631px" OnRowDataBound="gwFoo_RowDataBound"
CssClass="customerDataTable" AllowSorting="True">
<Columns>
<asp:BoundField DataField="type" HeaderText="Type" SortExpression="type" />
<asp:TemplateField HeaderText="Number" SortExpression="id">
<ItemTemplate>
<asp:HyperLink ID="hlNumber" runat="server">[hlNumber]</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="product" HeaderText="Product" SortExpression="product" />
<asp:BoundField DataField="startDate" HeaderText="Start Date" SortExpression="startDate" />
<asp:BoundField DataField="endDate" HeaderText="End Date" SortExpression="endDate" />
<asp:BoundField DataField="isActive" HeaderText="Is Active ?" SortExpression="isActive" />
<asp:BoundField DataField="markedForActivation" HeaderText="Marked for Activation ?" SortExpression="markedForActivation" />
<asp:BoundField DataField="status" HeaderText="Status" SortExpression="status" />
<asp:TemplateField HeaderText="Parent Order" SortExpression="Foo">
<ItemTemplate>
<asp:HyperLink ID="hlFoo" runat="server">[hlFoo]</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Parent Document" SortExpression="Foo">
<ItemTemplate>
<asp:HyperLink ID="hlFoo" runat="server">[hlFoo]</asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="createdDate" HeaderText="Created Date" <itemstyle Visible="false"></itemstyle> SortExpression="createdDate" />
<asp:BoundField DataField="createdBy" HeaderText="Created By" SortExpression="createdBy" />
<asp:BoundField DataField="lastUpdated" HeaderText="Last Updated" SortExpression="lastUpdated" />
<asp:BoundField DataField="lastUpdatedBy" HeaderText="Last Updated By" SortExpression="lastUpdatedBy" />
</Columns>
</asp:GridView>
give the columns a class and set the class css to visiblity:hidden;
Using Visible="false" will works
ie
<asp:BoundField Visible="false" DataField="status" HeaderText="Status" SortExpression="status" />
I solved the problem, in a way in which I can also switch the invissibility on and off from a button.
First I refactored the bounded fields I wanted to hide in this manner:
<asp:BoundField DataField="createdBy" HeaderText="Created By" SortExpression="createdBy" >
<ItemStyle CssClass="fooClass"></ItemStyle>
</asp:BoundField>
The class fooClass is a empty css class, I used it only so that all the <td> </td> elements which are generated by the bounded field share a common class, thus allowing the jquery script I wrote bellow to hide or show them.
<script> $(".fooClass").hide(); </script>
// or
<script> $(".fooClass").show(); </script>

Resources