I have a Dev express grid - is there anything else i need to code that would control the size of the cells? they are way too large, like 2 inches wide. But I reduce the width here and it makes no Change.
</DataItemTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="PAYSOURCE" VisibleIndex="1" Caption="Paysource" Width="20%">
<CellStyle HorizontalAlign="Left"></CellStyle>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="GROUPING" VisibleIndex="2" Caption="Grouping" Width="20%">
<CellStyle HorizontalAlign="Left"></CellStyle>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn VisibleIndex="3" FieldName="OTC_NON_COVER" Caption="OTC Non-Cover" Width="10%">
<PropertiesTextEdit DisplayFormatString="C"></PropertiesTextEdit>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn VisibleIndex="4" FieldName="RX_NON_COVER" Caption="Rx Non-Cover" Width="10%">
<PropertiesTextEdit DisplayFormatString="C"></PropertiesTextEdit>
</dx:GridViewDataTextColumn>
<dx:GridViewDataColumn VisibleIndex="5" FieldName="APPLY_NON_COVERED_RULES" Caption="Apply Non Covered Rule" Width="10%">
<CellStyle HorizontalAlign="Center"></CellStyle>
</dx:GridViewDataColumn>
I read on Dev Express that you'll have to resize the container as a whole to make those columns narrower. Can't post the link, it is secure link, just google dev express Grid View and you should get the online documentation for it.
There should be a way to set the column headings statically in the grid, then you can name them as you please and make them as short as you need.
You can use the GridView.BestFitColumns() method.
More
Related
I created a GridView that is somewhat responsive. After i scale the browser to a certain point it doesnt stack like it would on a mobile device. what do i need to add to my gridViews to get them to display nicely on a mobile device?
<section id="no-more-gridView">
<asp:GridView ID="GridView1" CssClass="table table-bordered table-hover table-responsive-xl w-100 align-self-auto" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Height="296px" Width="886px" AllowSorting="True" BorderStyle="Groove" HorizontalAlign="Center" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<AlternatingRowStyle BackColor="#CCFFFF" />
<Columns>
<asp:BoundField DataField="Row#" HeaderText="Row#" SortExpression="Row#" />
<asp:BoundField DataField="Number" HeaderText="Number" SortExpression="Number" />
<asp:BoundField DataField="Person" HeaderText="Person" SortExpression="Person" />
<asp:BoundField DataField="Reason" HeaderText="Reason" SortExpression="Reason" />
<asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" />
<asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
</Columns>
<HeaderStyle HorizontalAlign="Center" CssClass="table table-primary"/>
</asp:GridView>
</section>
As noted, by defualt, bootstrap should be working.
To allow that gridview to REALLY crunch down, and re-size REALLY nice?
I suggest this:
class="table table-hover table-fixed">
The fixed really does a great job - it seeks to try and fix the column sizes.
Thus on a 1920 BIG monitor, I get this:
But, resized as VERY small - easy to fit on a phone? You get this:
Now we gone from 1920 down to 517 pixels.
I don't think you can get much better crunching down then say the above. And if you need smaller yet, then I don't think bootstrap or any responsive framework going to help you all that much.
So, I did above with this:
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" class="table table-hover table-fixed">
I do find that table-fixed seems to do about the best here, but you could try a few other settings:
Say this:
class="table table-responsive"
So give both a try. The last one is quite much what most use - and it also does a really great job at re-sizing.
I want to update my ASPx grid view footer for that I need to access TotalSummary on server side can any one help me on same.
I am fetching data as expected but after delete i need to update current value present in Aspx Grid view
ASPX
<td>
<dx:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" cellstyle-horizontalalign="Center" OnHtmlFooterCellPrepared="grid_HtmlFooterCellPrepared"
KeyFieldName="Ref_ID" OnCustomCallback="grid_CustomCallback" SettingsPager-Mode="ShowAllRecords" Width="100%">
<Columns>
<dx:GridViewDataColumn FieldName="Ref_ID" VisibleIndex="0" Caption="Process No" CellStyle-CssClass="align-text-left"></dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="Depot" VisibleIndex="0"></dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="CostCenter" VisibleIndex="1"></dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="GL" VisibleIndex="3"></dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="Customer" VisibleIndex="4"></dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="PriceGroup" VisibleIndex="5"></dx:GridViewDataColumn>
</Columns>
<Settings ShowFooter="true" />
<TotalSummary>
<dx:ASPxSummaryItem FieldName="ProductValueLC" ShowInGroupFooterColumn="ProductValueLC" SummaryType="Sum" DisplayFormat="Total: {0:###,##.00}" />
<dx:ASPxSummaryItem FieldName="ProductValueSR" ShowInGroupFooterColumn="ProductValueSR" SummaryType="Sum" DisplayFormat="Total: {0:###,##.00}" />
<dx:ASPxSummaryItem FieldName="QTYInPieces" ShowInGroupFooterColumn="QTYInPieces" SummaryType="Sum" DisplayFormat="Total: {0}" />
</TotalSummary>
<Settings ShowGroupPanel="true" />
</dx:ASPxGridView>
</td>
I want to update current value which is present in grid
The DevExpress docs contains several approaches to access TotalSummary on server side. One way it´s appropriate for your case is a GridView event called CustomSummaryCalculate.
I have created a GridView in Visual Studio 2010.
The information displayed in the GridView is controlled by a dropdown list.
Can I add a "Show all" option to the dropdown list so that the GridView shows all the data?
This is what I have so far...
Dropdown list
<asp:DropDownList ID="DropDownList2" runat="server"
DataSourceID="dorpDownList2" DataTextField="Type" DataValueField="Type" AppendDataBoundItems="true"
AutoPostBack="True">
<asp:ListItem Value="0" Text="Select a type"></asp:ListItem>
</asp:DropDownList>
GridView code
<asp:GridView ID="GridView1" runat="server" AllowSorting="True"
AutoGenerateColumns="False" DataSourceID="SqlDataSource1" ShowHeaderWhenEmpty="True" emptydatatext="No data was found.">
<Columns>
<asp:BoundField DataField="OrgName" HeaderText="Organisation"
SortExpression="OrgName" />
<asp:BoundField DataField="ProjectTitle" HeaderText="Project title"
SortExpression="ProjectTitle" />
<asp:BoundField DataField="Type" HeaderText="Type"
SortExpression="Type" />
<asp:BoundField DataField="Amount"
HeaderText="Amount" SortExpression="Amount"
DataFormatString="{0:c}" />
<asp:HyperLinkField DataNavigateUrlFields="OrgName"
DataNavigateUrlFormatString="orgDetails.aspx?OrgName={0}"
HeaderText="Details" Text="Organisation details" />
</Columns>
</asp:GridView>
SqlDataSource1
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:MyConnectionString %>"
SelectCommand="SELECT [OrgName], [ProjectTitle], [Type], [Amount] FROM [tabRequest] WHERE [Type] = #Type">
</asp:SqlDataSource>
I can obviously add "Show all" to the drop down list using asp:ListItem but how do I add the functionality to make that actually show all the results?
Any help would be greatly appreciated.
Thanks,
James
The easiest way is via the Configure Data Source context menu. You already have a parameter, as you move through the configuration process you come to a dialog called Define Parameters. You should see "Type" listed in the Parameters list. Select it and change the Parameter source to "Control" and when prompted specify the DDL.
The trick is that you need to effectively remove the condition on your select where clause when Type is 0. This is easily done with an IF statement.
I'm making a pretty simple polling app. Users text a certain number with the values 'yes' or 'no' and the results show up live via AJAX on a projector. There are five different items to vote on (all yes or no).
Right now I have a SQL View that returns [poll_name, vote_value, value_count] where vote_value is either 'yes' or 'no'.
Using RadHtmlChart, I'm trying to display a stacked BarChart with a bar for each poll_name, a red bar for no votes and a blue bar for yes votes. I tried to alter the code from the BarChart example and merge it with the SqlDataSource example:
<asp:SqlDataSource ID="sqlResults" runat="server" ConnectionString="<%$ ConnectionStrings:MyDB %>"
SelectCommand="select poll_name, vote_value, value_count from vw_sms_pollResults order by poll_id" />
<tel:RadScriptManager runat="server" ID="rsmScriptManager" />
<tel:RadAjaxPanel runat="server" ID="rapPanel" LoadingPanelID="ralpLoadingPanel" EnableAJAX="true">
<tel:RadHtmlChart runat="server" ID="rhcResults" Width="800" Height="500" Transitions="true" DataSourceID="sqlResults">
...
<PlotArea>
<Appearance>
<FillStyle BackgroundColor="White" />
</Appearance>
<XAxis DataLabelsField="poll_name">
<MajorGridLines Visible="false" />
<MinorGridLines Visible="false" />
</XAxis>
<YAxis AxisCrossingValue="0">
<MajorGridLines Visible="false" />
<MinorGridLines Visible="false" />
</YAxis>
<Series>
<tel:BarSeries Stacked="true" DataFieldY="value_count">
<Appearance FillStyle-BackgroundColor="Red" />
</tel:BarSeries>
</Series>
</PlotArea>
</tel:RadHtmlChart>
</tel:RadAjaxPanel>
Unfortunately, I end up with twice as many bars as I want: a 'yes' and a 'no' for each poll_name, they're all the same color (obviously), and they're not stacked. Ideally I would be able to tell it create a new BarSeries for each value of (ie, group by) vote_value.
How should I go about either massaging the data or changing my markup to fix this? In the future I'd like to allow an arbitrary number of responses, so I'm loathe to changing my query to simply have a 'yes_count' and 'no_count' columns, but I may have to in the meantime.
To stack series, you need at least two: http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/stackedseries/defaultcs.aspx
One should have the YES votes for its values (i.e., the field provided in the DataFieldY property should have that number for each item on the x-axis). The other should provide the same for the NO votes.
Thus, you should have something like:
<Series>
<tel:BarSeries Stacked="true" DataFieldY="value_count_Yes">
<Appearance FillStyle-BackgroundColor="Red" />
</tel:BarSeries>
<tel:BarSeries Stacked="true" DataFieldY="value_count_No">
<Appearance FillStyle-BackgroundColor="Blue" />
</tel:BarSeries>
</Series>
I am not sure how your data is structured, so I am not sure how you can obtain this data. Perhaps you can generate a dynamic field in the SQL query itself that subtracts the yes votes from the total votes if that's what you have.
I've researched these questions thoroughly on Stackoverflow and on Telerik but still have not figured out the solution to these questions. Here's what I am trying to do. I have a RadGrid control that is databound using Linq. Based on the user's row selection I'd like to query additional information from the database and drop it into another control (let's assume that other control is a Rad Listview for the moment). I'd like to do this all clientside without having to post the whole page back to the server. Separately I'm trying to put a button on the page to send the row selection back to the server to trigger some action in the code-behind.
I'd love it if someone could show me how to do the following:
Get the user row selection using Javascript and populate key values from that selection in another control (Using Telerik client-side row selection, not the usual asp.net select link)
Make an Ajax request using the key value(s) from the previous question to retrieve some additional information from the database. I'm assuming that I will be using Linq on the server side to handle this request. Refresh another control to display that info.
Put a button on the page to post the key value from the first question back to the server where it will be caught and stored in a variable.
I realize there's a fair amount of overlap in items 1-3 above but I hope that by breaking it out as I did I'll be better able to understand the mechanics of how client and server side code interacts in an asp.net + telerik environment.
Here are some related posts that I found helpful:
Getting cell values for selected
rows client side
Telerik button
/ client side events
//I'd post other links my my SO reputation score does not permit me to do so
Here's some code from my page. The relevant key value from my grid is the package tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is the Header
<!-- Begin Navigation -->
<div id="navigation">
This is the Navigation
</div>
<!-- End Navigation -->
<!-- Begin Faux Columns -->
<div id="faux">
<!-- Begin Left Column -->
<div id="leftcolumn">
This is the left column
<telerik:RadTreeView ID="RadTreeView1" Runat="server" Skin="Telerik">
<Nodes>
<telerik:RadTreeNode runat="server" Expanded="True" Text="My Account">
<Nodes>
<telerik:RadTreeNode runat="server" Text="Inventory">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Protection Plan">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Addresses">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Profile">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Alert Preferences">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Supplies">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
</div>
<!-- End Left Column -->
<!-- Begin Content Column -->
<div id="content">
This is the main body where the inventory stuff goes
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<%--Needed for JavaScript IntelliSense in VS2010--%>
<%--For VS2008 replace RadScriptManager with ScriptManager--%>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<script type="text/javascript">
//Put your JavaScript code here.
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<telerik:RadTabStrip ID="RadTabStrip1" runat="server"
ontabclick="RadTabStrip1_TabClick" SelectedIndex="2" AutoPostBack="True"
Skin="Vista">
<Tabs>
<telerik:RadTab runat="server" Text="Pending">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="In Storage">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Returned" Selected="True">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True"
CellSpacing="0" GridLines="None" AutoGenerateColumns="False"
Skin="Vista" Width="654px">
<ClientSettings>
<Selecting AllowRowSelect="True" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
<ClientEvents OnGridCreated="GridCreated" OnRowSelected="RowSelected"></ClientEvents>
</ClientSettings>
<Columns>
<telerik:GridClientSelectColumn FilterControlAltText="Filter column column"
UniqueName="column0" CommandName="SelectRow">
</telerik:GridClientSelectColumn>
<telerik:GridBoundColumn DataField="Tag"
FilterControlAltText="Filter column2 column" HeaderText="Tag"
UniqueName="column1">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Name"
FilterControlAltText="Filter column3 column" HeaderText="Name"
UniqueName="column3">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Received" DataType="System.DateTime"
EmptyDataText="Not Received" FilterControlAltText="Filter column4 column"
HeaderText="Received" UniqueName="column4" DataFormatString="{0:MM/dd/yy}">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Shipped" EmptyDataText="In Storage"
FilterControlAltText="Filter column5 column" HeaderText="Shipped"
UniqueName="column5" DataFormatString="{0:MM/dd/yy}">
</telerik:GridBoundColumn>
<telerik:GridRatingColumn FilterControlAltText="Filter column1 column"
HeaderText="Condition" ItemCount="3" UniqueName="column1">
</telerik:GridRatingColumn>
</Columns>
<SelectedItemStyle BackColor="White" />
If you are talking true client-side scripting, the grid should pass off the selection to a web service, and populate the next control via its client-side API (if the RadListView supports client-side binding, which I'm not sure that it does). It's definitely possible, but a lot more work than the solution below. However:
If you want to postback to the server anyway, why populate the listview on the client-side? Any client-side populated data is lost (because it isn't stored in viewstate), and so client-side binding doesn't help if you are posting back to the server to store a variable. The easiest way since you are doing telerik is to set the ClientSettings.EnablePostBackOnRowClick="true" on the grid, and the ClientSettings.Selecting.AllowRowSelect="true" in markup or code. Then, Wrap these two controls in a RadAjaxPanel, so that when the postback happens, you can handle it all through code.
When clicking on the row of the grid, it posts back, the events all work on the server side, the value is stored in your variable (as long as its stored in session, cache, viewstate), and then you can populate the listview.
HTH.