I am trying to enable horizontal scrolling in telerik grid
I followed the example from demo.telerik.com but had no luck
Here is my code . can anyone help me with this .
by the way I am using telerik Grid In DNN with DnnGrid
<div class="panel-body">
<div>
<dnn:dnngrid allowfilteringbycolumn="true"
currentfilterfunction="Contains"
onitemdatabound="grd_ItemDataBound"
oncolumncreated="grd_ColumnCreated"
cssclass="grid"
id="grdWaitingForCommand"
runat="server"
autogeneratecolumns="true"
allowmultirowselection="false"
onitemcommand="grd_ItemCommand"
width="800px">
<ClientSettings EnablePostBackOnRowClick="true">
<Scrolling AllowScroll="True"
UseStaticHeaders="True"
SaveScrollPosition="true"></Scrolling>
<Selecting AllowRowSelect="True" />
</ClientSettings>
<HeaderStyle Width="225px"></HeaderStyle>
<MasterTableView >
<Columns>
<dnn:GridTemplateColumn
UniqueName="IndexColumn"
HeaderText="ردیف"
AllowFiltering="false">
<ItemTemplate>
<asp:Label ID="numberLabel" runat="server" Width="30px" />
</ItemTemplate>
<HeaderStyle Width="30px" />
</dnn:GridTemplateColumn>
</Columns>
</MasterTableView>
</dnn:dnngrid>
</div>
</div>
I had the same requirement. From our side the first part was to set the correct properties of the grid using the demo from Telerik. The next part was a javascript function, that was executing when the grid was created.
grid.ClientSettings.ClientEvents.OnGridCreating = "ShowHorizontalScroll"
The function sets overflow style to auto. You also may want to hide the vertical scrollbar because from what I remember, Telerik enables both horizontal and vertical scrollbars if you enable the feature.
The fix may not work in some browsers. The solution, that works for us, currently works on Chrome. Small changes may be needed to the styling if IE.
Now I saw, that the width of your column is smaller than the width of the grid. You can reduce the width of the grid or increase the width of the column and you should see the scroll.
Related
I have a gridview with templatefield columns. The TemplateFields are something like this:
<asp:TemplateField HeaderText="Title" SortExpression="name" meta:resourcekey="BoundFieldResource1">
<ItemTemplate>
<asp:Label ID="lblTitle" runat="server" Text='<%# Bind("Name") %>' meta:resourcekey="BoundFieldResource1"></asp:Label>
</ItemTemplate>
</TemplateField>
I have to add a custom attribute for to the header of this columns so I removed HeaderText and added the following:
<Headertemplate>
<asp:Label ID="lblTitleHeading" runat="server" Text="Title" data-custom="tbl-th_title_heading"></asp:Label>
</Headertemplate>
My problem is when I do this, it will break the sorting of that column and I cannot click on the header to sort it anymore, I tried changing the asp:Label to asp:LinkButton but that didn't do anything.
I would appreciate your answers.
Ok I just found out how to do this, I just needed to change the Label to LinkButton and add CommandName="Sort" and CommandArgument="name" (or any SortExpression)
<Headertemplate>
<asp:LinkButton ID="lblTitleHeading" runat="server" Text="Title" data-custom="tbl-th_title_heading" CommandName="Sort" CommandArgument="name"></asp:LinkButton>
I follow this demo on how to create grid with my custom New Item control. I have quite easy question - where do I define New record button, just like this one in demo?
If the RadGrid's attribute AllowAutomaticInserts is set to True, and the grid is using a declarative data source, you'll get the default "Add New" button and behavior. This is what's happening in the demo you linked. You can control its appearance in several ways.
The "command items" (add, delete, edit, etc.) associated with the grid are controlled by the grid's CommandItemTemplate element. By default the look of this element will be based on the skin you have applied to the Telerik controls. It can also be controlled with various style elements.)
The CommandItemTemplate can be customized to show custom buttons, nonstandard text, and so forth. Here's an example from Telerik's documentation on it. Note that the CommandName attribute determines what function is performed by the button.
<CommandItemTemplate>
Custom command item template
<asp:LinkButton Style="vertical-align: bottom" ID="btnEditSelected" runat="server"
CommandName="EditSelected" Visible='<%# RadGrid1.EditIndexes.Count == 0 %>'><img style="border:0px" alt="" src="../../DataEditing/Img/Edit.gif" /> Edit Selected Customers</asp:LinkButton>
<asp:LinkButton ID="btnUpdateEdited" runat="server" CommandName="UpdateEdited" Visible='<%# RadGrid1.EditIndexes.Count > 0 %>'><img style="border:0px" alt="" src="../../DataEditing/Img/Update.gif" /> Update Customers</asp:LinkButton>
<asp:LinkButton ID="btnCancel" runat="server" CommandName="CancelAll" Visible='<%# RadGrid1.EditIndexes.Count > 0 || RadGrid1.MasterTableView.IsItemInserted %>'><img style="border:0px" alt="" src="../../DataEditing/Img/Cancel.gif" /> Cancel editing</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" CommandName="InitInsert" Visible='<%# !RadGrid1.MasterTableView.IsItemInserted %>'><img style="border:0px" alt="" src="../../DataEditing/Img/AddRecord.gif" /> Add new Customer</asp:LinkButton>
<asp:LinkButton ID="LinkButton4" runat="server" CommandName="PerformInsert" Visible='<%# RadGrid1.MasterTableView.IsItemInserted %>'><img style="border:0px" alt="" src="../../DataEditing/Img/Insert.gif" /> Add this Customer</asp:LinkButton>
<asp:LinkButton ID="LinkButton5" OnClientClick="javascript:return confirm('Delete all selected customers?')"
runat="server" CommandName="DeleteSelected"><img style="border:0px" alt="" src="../../DataEditing/Img/Delete.gif" /> Delete Selected Customers</asp:LinkButton>
<asp:LinkButton ID="LinkButton6" runat="server" CommandName="Re bindGrid"><img style="border:0px" alt="" src="../../DataEditing/Img/Refresh.gif" /> Refresh customer list</asp:LinkButton>
<br />
</CommandItemTemplate>
Also, the grid's MasterTableView contains an attribute, CommandItemDisplay, which can be used to control the button placement - values are None, Top, TopAndBottom, or Bottom:
<MasterTableView CommandItemDisplay="Top" ....>
I am trying to find a way to bind a data table to a tab panel (within a tabcontainer and template) without doing it on page_init or page_load. OR Binding a data table to a gridview then binding that gridview to the tab panel. I know how to bind a data table to a gridview so that's the easy part. I have to be able to - on click of a button - add or create multiple tabs in that tab container.
I want the user to be able to click a button, run some queries and then make the tab container visible and bind the data from a data table to a panel at that time (then the panel to the tab container). Do this multiple times.
Can someone provide an example or explain how I can accomplsih this? Is Update Panel my answer and where can I find some good examples?
UPDATE
I found that it was very easy to bind data to a gridview within Ajax tabs. Of course you needed you script manager ajax reference declared in the asp page and web.config file. You also need to add the ajax css style to an existing style sheet. i tried using a seperate one and it didn't work.
ASP HTML
<AjaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"
Visible="false" ScrollBars="Both"
CssClass="Tab2" Width="1326px" Height="464px" >
<AjaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Empty" Enabled="true" ScrollBars="Both" CssClass="Tab2">
<ContentTemplate>
<div style="overflow:auto;width:1287px; height: 418px;">
<font color="white" size="1" face="Verdana">
<asp:GridView ID="SalesOrderView1" runat="server" BackColor="White" BorderColor="#DEDFDE"visible="False"BorderStyle="None" BorderWidth="1px"
CellPadding="4" ForeColor="Black"
GridLines="Vertical" HorizontalAlign="Center">
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</div>
</font>
</ContentTemplate>
</AjaxToolkit:TabPanel>
<AjaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Empty" ScrollBars="Both" CssClass="Tab2">
<ContentTemplate >
</AjaxToolkit:TabContainer>
C# Code to bind data to the gridview on click button event.
SalesOrderView1.Visible = true;
TabPanel1.Visible = true;
TabPanel1.HeaderText = Order_List[multi_order_count];
I'm using GridView and there is a dropdownlist in header cell for filtering.
<gm:GridView ID="routePlanGridView" runat="server" AutoGenerateColumns="False"
AllowPaging="true" PageSize="20" GridLines="Both" ShowFooter="true" CssClass="grid"
DataKeyNames="RoutePlanId" OnSorting="routePlanGridView_Sorting"
AllowSorting="true" OnPageIndexChanging="routePlanGridView_PageIndexChanging"
OnSelectedIndexChanging="routePlanGridView_SelectedIndexChanging"
OnRowDataBound="routePlanGridView_RowDataBound"
OnRowEditing="routePlanGridView_RowEditing"
OnRowUpdating="routePlanGridView_RowUpdating">
<HeaderStyle CssClass="gridHeaderFooter" />
<FooterStyle CssClass="gridHeaderFooter" />
<RowStyle CssClass="gridRow" />
<AlternatingRowStyle CssClass="gridRowAlternate" />
<Columns>
<asp:TemplateField SortExpression="SPName">
<HeaderTemplate>
SP Name<br />
<asp:DropDownList ID="spNameFilterDDL" runat="server" CssClass="gridControl" AutoPostBack="true" DataSourceID="SPNameSDS" DataTextField="SPName" OnDataBound="filterDDL_DataBound" OnSelectedIndexChanged="spNameFilterDDL_SelectedIndexChanged" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="spNameLabel" runat="server" Text='<%# Bind("SPName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<...15 more...>
</Columns>
</gm:GridView>
and there are relevant event handlers for sorting and paging.
Now the problem is if I put "SP Name" text in a link button, page crashes when link clicked, otherwise no link produced to sort.
If I remove Header Template fields (all of them) and put a text with HeaderText attribute of TemplateField it works as expected. Is there a way to put them together? I need that dropdown and also sorting.
Thanks.
sorry, forgot to insert the code correctly - here:
<asp:LinkButton runat="server" Text="SP Name" CommandName="Sort" CommandArgument="SPName" ></asp:LinkButton>
You need to use a link button for your header text. So in place of "SP Name", use . It should work if you are handling sorting.
Trying to update RadDock (open/close it) by putting it in UpdatePanel however no luck....I'm getting the following response.
189|error|500|Invalid JSON primitive: {"Top":179,"Left":583,"DockZoneID":"","Collapsed":false,"Pinned"
:false,"Resizable":false,"Closed":false,"Width":"300px","Height":null,"ExpandedHeight":0,"Index":-1}
.|
Here is the code:
<asp:UpdatePanel ID="upanelDock" runat="server">
<ContentTemplate>
<telerik:RadDock ID="RadDock1" runat="server" Width="300px">
<TitlebarTemplate>
<h2>
this is a dock</h2>
</TitlebarTemplate>
<ContentTemplate>
some content here
<br />
some content here
<br />
some content here
<br />
</ContentTemplate>
</telerik:RadDock>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lbtnUpdate" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:LinkButton ID="lbtnUpdate" runat="server" OnClick="lbtnUpdate_Click">update</asp:LinkButton>
Code behind:
protected void lbtnUpdate_Click(object sender, EventArgs e)
{
if (this.RadDock1.Closed)
this.RadDock1.Closed = false;
else
this.RadDock1.Closed = true;
}
What am I doing wrong here?
UPDATE: You are not doing anything wrong in your code. I was able to duplicate this problem using both UpdatePanel and RadAjaxManager. According to Telerik support, this is a "limitation" in the RadDock control. More like a bug in my opinion.
Here's what it says in their Support Page Forum: Non-docked Docks cloned plus Invalid JSON primitive
The RadDock control is not a standard
control and there are some limitations
when it is updated via ajax. If you
want to update a RadDock via ajax you
should update all RadDockZones and all
RadDocks should be docked.
The error you experience is due to
that you update a floating RadDock
with AJAX. When dragging the dock you
move it outside the update panel and
this causes AJAX not working properly
as it attempts to recreate the dock at
the place it was previously located.
In this way two docks with the same id
appear on the page and this leads to
an exception. This is a common problem
for all controls which could be moved
in the DOM.
I was able to make your code work by wrapping the RadDock inside a RadDockZone and setting the DockMode property to "Docked". If however, I drag the dock out of the zone, leave it floating and click the "Update" button, the error reappears.
<asp:UpdatePanel ID="upanelDock" runat="server">
<ContentTemplate>
<telerik:RadDockZone runat="server">
<telerik:RadDock ID="RadDock1" runat="server" Width="300px"
DockMode="Docked">
<TitlebarTemplate>
<h2>
this is a dock
</h2>
</TitlebarTemplate>
<ContentTemplate>
some content here
<br />
some content here
<br />
some content here
<br />
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lbtnUpdate" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:LinkButton ID="lbtnUpdate" runat="server"
OnClick="lbtnUpdate_Click">update</asp:LinkButton>
I have a couple RadDocks floating inside a RadDockLayout. Ajax works if I update the RadDock, the RadDockLayout, or the main panel that wraps the RadDockLayout through the RadAjaxManager object.
Ex:
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="mainPanel" />
</UpdatedControls>
</telerik:AjaxSetting>