Telerik combo background design - telerik

I couldn't figure how to get the combo box looks like the payment method combo box from this link https://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx#qsf-demo-source
The source they provide doesn't seems to have any different from each other, but I need that filled combobox design from the 4th one. Just doesn't know how to get it.

If you press the View Source, then goto 'PaymentMethods.xml' you will see the method used for assigning (Xml taken directly from this Telerik Demo)
<Items>
<Item Text="American Express" Value="1" ImageUrl="Images/card-types/american-express.png" />
<Item Text="MasterCard" Value="2" ImageUrl="Images/card-types/mastercard.png" />
<Item Text="Visa" Value="3" ImageUrl="Images/card-types/visa.png" />
<Item Text="Visa Electron" Value="4" ImageUrl="Images/card-types/visa-electron.png" />
</Items>
There are other methods for adding images using the ImageUrl attribute (See this Telerik Demo)
Alternatively you might want to use the ItemTemplate should you want further control (See this Telerik Demo) This also allows you to put further details in the drop down list which is particularly useful when you want to display a little more information.
<ItemTemplate>
<asp:Label ID="lblOptionTitle" runat="server" Text='<%# Eval('ItemTitle') %>' Font-Bold="true" />
<asp:Label ID="lblOptionText" runat="server" Text='<%# Eval('ItemText') %>' />
<img id="imgOption" alt="Alternative Text" src='<%# Eval('ImageUrl') %>' />
</ItemTemplate>

Related

RadGrid using OData is returning data but not displaying it

I am using a RadGrid to DataBind to an OData source. Fiddler shows that when the page is loaded a call is made to my OData source and data is returned in JSON format. The RadGrid creates the headers for each column but no data is ever displayed. My code looks exactly like what I find on the web, but nothing seems to work for me. Does anyone have any ideas with what I am doing wrong?
Here is my markup for the RadGrid:
<telerik:RadGrid ID="RadGrid1" runat="server">
<MasterTableView>
<Columns>
<telerik:GridBoundColumn DataField="Id" HeaderText="Id" />
<telerik:GridBoundColumn DataField="BuildingId" HeaderText="Building" />
<telerik:GridBoundColumn DataField="Name" HeaderText="Title" />
<telerik:GridBoundColumn DataField="Capacity" HeaderText="Capacity" />
<telerik:GridBoundColumn DataField="IsActive" HeaderText="Active" />
</Columns>
</MasterTableView>
<ClientSettings>
<DataBinding Location="http://localhost:49937/" ResponseType="JSON">
<DataService TableName="Locations" Type="OData" />
</DataBinding>
</ClientSettings>
</telerik:RadGrid>
And this is a screenshot (via Fiddler) of the data the is being returned:
Thanks for the help.
My guess is that you need to change the ResponseType from JSON to JSONP. The reason is that JSON, or any other http request initiated from javascript is restricted by the same origin policy. But RadGrid allows you to use JSONP to make remote calls to services that support the JSONP data response format.
You can refer to this article for more details
http://www.telerik.com/blogs/radgrid-for-asp-net-ajax-client-side-databinding-to-odata-services

Embedded tabs in RadTabStrip

I'm using Telerik's RadTabStrip and RadMultiPage to create some tabs for a website using Visual Studio 2012. I have a row of three tabs and one of the tabs has two child tabs.
The primary tabs are Notes, Minutes and Admin. Then Notes has two child tabs Us and Them. When the user clicks on Notes, I want it to default to Us with the option of selecting Them.
I would like to do this all on the aspx page and not the code behind. I found some examples that do it in code but it doesn't seem like it should be necessary. However, after hours of searching and fiddling with the control I've come up empty or worse, results that make no sense to me. I found a lot of examples on how to create a RadTabStrip with child tabs...a lot of examples...but none of them explain how to map those tabs and child tabs to a RadPageView. Is it so simple they don't feel the need to write an example of this step? Is it impossible on the aspx side and that's why some of the examples jump into the codebehind? I don't get it.
Here's what I have. I know it doesn't work but at this point I've tried so many different things I don't know which end is up.
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1">
<Tabs>
<telerik:RadTab runat="server" Text="Notes" Selected="true">
<Tabs>
<telerik:RadTab runat="server" Text="Us" Selected="true" />
<telerik:RadTab runat="server" Text="Them" />
</Tabs>
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Minutes" />
<telerik:RadTab runat="server" Text="Admin" />
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server">
<%--UserControl 1 Tab--%>
<telerik:RadPageView ID="RadPageView1" runat="server" CssClass="tabstyle" Selected="true" />
<%--Child 1 Tab--%>
<telerik:RadPageView ID="RadPageView2" runat="server" CssClass="tabstyle">
<uc:ucNote ID="ucNote1" runat="server" />
</telerik:RadPageView>
<%--Child 2 Tab--%>
<telerik:RadPageView ID="RadPageView3" runat="server" CssClass="tabstyle">
<uc:ucNote ID="ucNote2" runat="server" />
</telerik:RadPageView>
<%--UserControl 2 Tab--%>
<telerik:RadPageView ID="RadPageView4" runat="server" CssClass="tabstyle">
<uc:ucMinute ID="ucMinute1" runat="server" />
</telerik:RadPageView>
<%--UserControl 3--%>
<telerik:RadPageView ID="RadPageView5" runat="server" CssClass="tabstyle">
<uc:ucAdmin ID="ucAdmin1" runat="server" />
</telerik:RadPageView>
</telerik:RadMultiPage>
Ok, I think I figured out what was wrong and it turned out to be very minor. I just didn't set all the Selected="true". Once I made sure the Note node and the Us node in the RadTabStrip were selected and the Note node and Us node in the RadMultiPage were selected it started working the way I expected. I'm skeptical that I was that close and the solution was that easy after all the time I put into it but so far it's looking right.

asp RadioButtonList inside nested user control always performing full postback

I have a RadioButtonList control inside a nested user control. When one of its buttons is clicked, i want a panel to be refreshed with an ajax postback. I am using the telerik RadAjaxManager. The problem is that the list always triggers a FULL postback. markup is below
<telerik:RadAjaxManagerProxy runat="server" ID="RadAjaxManagerPRoxy1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="btnAcceptReject">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="pnlControls" UpdatePanelRenderMode="Inline" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>
<asp:RadioButtonList runat="server" ID="btnAcceptReject" RepeatDirection="Horizontal" CssClass="checkboxlist borderless" ValidationGroup="data" AutoPostBack="true" OnSelectedIndexChanged="btnAcceptReject_SelectedIndexChanged">
<asp:ListItem Text="The edition is hereby validated for conformity to standards" Value="0" Selected="True"></asp:ListItem>
<asp:ListItem Text="The edition does not meet standards and still has to be reviewed" Value="1"></asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="vldAcceptReject" ControlToValidate="btnAcceptReject" runat="server" CssClass="text-error" Text="please check an option" ValidationGroup="data"></asp:RequiredFieldValidator>
<asp:Panel runat="server" ID="pnlControls">
I reviewed my code and markup over and over and it does not seem there's anything missing, this should run out of the box! i've been reading a lot online however about issues that controls like RadioButtonList and CheckBoxList have with ajax postbacks. does anyone know how to solve this?
You should move the radio button list inside the pnlControls ajax panel. Then It should not do the postback.

Whats the easiest way to add custom style to the module parameters form at the admin in Joomla?

My simple module using 3 field, 2 text input and a tinymce textarea, but the textarea looks broken. http://img151.imageshack.us/img151/8648/joomla464.jpg
This is my config:
<config>
<fields name="params">
<fieldset name="basic">
<field name="moduleclass_sfx" type="text" default="" label="Module Class Suffix" description="PARAMMODULECLASSSUFFIX" />
<field name="url" type="text" default="" label="Paste the url" description="" />
<field style="clear:both;float:left;background-color:red;" name="description" type="editor" default="default" rows="20" cols="40" />
</fieldset>
</fields>
</config>
ty
You could add your css to
administrator/templates/bluestork/css/template.css (That is if your using the default administration template)
but there is a risk when joomla updates you will lose your css... you could alwasy copiy the template... give it a diffrent name and update the css there. so your copie wont be affected by any joomla update.
so adding your css there you just need to use the right css selector.
Otherwise i would use an artical selector or category selector
<field
name="category_id"
type="category"
description="JGLOBAL_FIELD_CATEGORIES_CHOOSE_CATEGORY_DESC"
extension="com_content"
label="JGLOBAL_FIELD_CATEGORIES_CHOOSE_CATEGORY_LABEL"
show_root="true"
required="true" />
And put what ever content you need in an artical.. you dont have much room to put the editor on the right for the modules configurations anyway.

Telerik RadGrid - How to disable sorting for a Column?

In their documentation Telerik says that there is a way to disable sorting for specific column by using AllowSorting property. I'm looking at Telerik.Web.UI.GridColumn members and there is no AllowSorting property. There is a Sortable property but its protected and has to be overriden. So what do I use to turn off sorting for specific column?
There is a AllowSorting property on GridBoundColumn but in this case I'm using GridTemplateColumn. Is there a way to turn off sorting on GridTemplateColumn?
The AllowSorting attribute is available from the source/markup view in Visual Studio. For example (simplified):
<tr:RadGrid>
<MasterTableView>
<Columns>
<tr:GridBoundColumn DataField="field" HeaderText="Description"
AllowSorting="false" />
</Columns>
</MasterTableView>
</tr:RadGrid>
I don't know if this works for you? I haven't instantiated my grids from the code-behind files yet, so if that's what you are doing, I can't easily help you. But the above works for me.
EDIT:
Ah it was not clear from the original question, that you were using the GridTemplate column. As you are now using the SortExpression-property, doesn't using the same attribute in the markup work for you? So:
<tr:RadGrid>
<MasterTableView>
<Columns>
<tr:GridTemplateColumn HeaderText="Description" DataField="field"
SortExpression="">
<!-- template here etc. -->
</tr:GridTemplateColumn>
</Columns>
</MasterTableView>
</tr:RadGrid>
Okay, I got the desired effect, I turned off sorting by setting GridTemplateColumn's SortingExpression property to blank.
Grid.Columns.FindByUniqueName("Type").SortExpression = string.Empty;
This looks like a hack. Why isn't there an explicit property to turn off sorting? Oh well. This works.
If you know a better way, let me know.
Thanks.
Telerik now has a new property called HeaderButtonType (exists on a template column too!) which can be set to "None" to render a label instead of a linkbutton for the column header text.
As stated in the Telerik Docs:
In case you want to disable sorting for a particular column only, you can configure column's IsSortable property to False:
<telerik:GridViewColumn IsSortable="False" />
Here's an example showing how to disable sorting for a specific column.
Note the AllowSorting property at the Grid level (for all columns).
Then, in the Columns collection, note how it is turned off for that specific column.
<telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True">
<HeaderContextMenu>
<CollapseAnimation Duration="200" Type="OutQuint" />
</HeaderContextMenu>
<MasterTableView>
<RowIndicatorColumn>
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<Columns>
<telerik:GridBoundColumn AllowSorting="False" UniqueName="column">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<FilterMenu>
<CollapseAnimation Duration="200" Type="OutQuint" />
</FilterMenu>
</telerik:RadGrid>
For TemplateColumns, I would try turning off Sorting at the grid level and simply enable it on the columns needed. That way, you won't have to do anything for the TemplateColumn since it will be disabled by default.
You could always supply your own headertemplate with a label as the header instead of a link button if you are using a GridTemplateColumn. A we bit extra work but this works fine. If you are going to disable sorting for all your GridTemplateColumns then your "hack" would be best.

Resources