We found that applying css class to radgrid did not apply the required style completely.
So we took the css classes from telerik folder and overrided them in our css file like this
.RadGrid_ourCustomSkin,
.RadGrid_ourCustomSkin .rgMasterTable,
.RadGrid_ourCustomSkin .rgDetailTable,
.RadGrid_ourCustomSkin .rgGroupPanel table,
.RadGrid_ourCustomSkin .rgCommandRow table,
.RadGrid_ourCustomSkin .rgEditForm table,
.GridToolTip_ourCustomSkin
{
font:12px/16px "segoe ui",arial,sans-serif;
}
please refer the attachment.In my szenario i have a table. Inside this table there is an RadToolBar with two RadComboBoxes.
My problem is the handling of the Related ComboBoxes, after a postback. After the postback the second RadComboBox lost there
Datasource. What I try to do is to set second RadComboBox clientside in the pageLoad Function.
Depending of the value in the first RadComboBox (that i got in the pageLoad function) i try to refresh the datasource for the second RadComboBox.
Here is my code snippet:
| <script type="text/javascript"> |
| //global variables for the countries and cities comboboxes |
| var RadGrid1; |
| var WTypesCombo; |
| var CDecisonCombo; |
| //------------------------------------------------------------------------ |
| function GetGridObject(sender, eventArgs) { |
| RadGrid1 = sender; |
| } |
| //------------------------------------------------------------------------ |
| function pageLoad() { |
| // initialize the global variables |
| // in this event all client objects |
| // are already created and initialized |
| WTypesCombo = $find('<%=rdtbWl.FindItemByText("rtbWTypes").FindControl("rcbWTypes").ClientID %>'); |
| CDecisonCombo = $find('<%=rdtbWl.FindItemByText("rtbCDecision").FindControl("rcbCDecision").ClientID %>'); |
| //Get the selected type |
| //this will only triggert if a submit event exists |
| var SelectedIndex = document.getElementById("<%= SelectedWType.ClientID %>").value; |
| if (SelectedIndex != "0") { |
| //HERE REFRESH THE SECOND RADCOMBOBOX |
| CDecisonCombo.requestItems(SelectedIndex.get_text(), false); |
| } |
| } |
| //------------------------------------------------------------------------ |
| function OnClientSelectedIndexChanged(sender, eventArgs) { |
| var item = eventArgs.get_item(); |
| //the first item is always the item to show all rows |
| //we can not use a value because all values are identical. Only text are unique |
| if (item.get_index() == "0") { |
| //Set worklist type in hidden field to store in session, when the submit event is fired |
| document.getElementById("<%= SelectedWType.ClientID %>").value = item.get_index(); |
| } |
| else { |
| //Set worklist type in hidden field to store in session, when the submit event is fired |
| document.getElementById("<%= SelectedWType.ClientID %>").value = item.get_text(); |
| } |
| CDecisonCombo.set_text("Loading..."); |
| // if a Worklisttyp is selected |
| if (item.get_index() > 0) { |
| // this will fire the ItemsRequested event of the |
| // combobox passing the WtypID as a parameter |
| CDecisonCombo.requestItems(item.get_text(), false); |
| } |
| else { |
| // the -Select a continent- item was chosen |
| CDecisonCombo.set_text(" "); |
| CDecisonCombo.clearItems(); |
| } |
| } |
| //------------------------------------------------------------------------ |
| function ItemsLoaded(combo, eventArqs) { |
| if (combo.get_items().get_count() > 0) { |
| // pre-select the first item |
| combo.set_text(combo.get_items().getItem(0).get_text()); |
| combo.get_items().getItem(0).highlight(); |
| } |
| } |
| //------------------------------------------------------------------------ |
| </script> |
| </telerik:RadCodeBlock> |
| <table cellpadding="0" cellspacing="0" border="0" width="100%"> |
| <tr> |
| <td> |
| <telerik:RadToolBar ID="rdtbWl" runat="server" |
| Style="display: block; float: none" Visible="true" |
| Width="100%" OnClientButtonClicked="OnClientButtonClicking" |
| OnButtonClick="rdtbWl_ButtonClick" |
| OnClientMouseOver="clientMouseOver" |
| OnClientMouseOut="clientMouseOut" |
| meta:resourcekey="rdtbWlResource1"> |
| <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> |
| <Items> |
| <telerik:RadToolBarButton Value="rtbWTypes" Text="rtbWTypes"> |
| <ItemTemplate> |
| <telerik:RadComboBox ID="rcbWTypes" |
| runat="server" |
| CssClass="DefaultText" |
| OnClientSelectedIndexChanged="OnClientSelectedIndexChanged" |
| DataTextField="Shorttext" |
| DataValueField="Shorttext" |
| HighlightTemplatedItems="True"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </ItemTemplate> |
| </telerik:RadToolBarButton> |
| <telerik:RadToolBarButton Value="rtbCDecision" Text="rtbCDecision"> |
| <ItemTemplate> |
| <telerik:RadComboBox ID="rcbCDecision" |
| runat="server" |
| CssClass="DefaultText" |
| OnClientItemsRequested="ItemsLoaded" |
| OnItemsRequested="rcbCDecision_ItemsRequested"> |
| <CollapseAnimation Duration="200" Type="OutQuint" /> |
| </telerik:RadComboBox> |
| </ItemTemplate> |
| </telerik:RadToolBarButton> |
| <telerik:RadToolBarButton Text="rtbColumnSetDecision" |
| Value="rtbColumnSetDecision" |
| runat="server" PostBack="false" |
| meta:resourcekey="RadToolBarButtonResource4" > |
| </telerik:RadToolBarButton> |
| <telerik:RadToolBarButton Text="rtbCDecisionExecute" |
| Value="rtbCDecisionExecute" |
| runat="server" PostBack="true"> |
| </telerik:RadToolBarButton> |
| </Items> |
| </telerik:RadToolBar> |
| </td> |
| </tr> |
| </table> |
| <%--store the selected Type--%> |
| <asp:HiddenField ID="SelectedWType" runat="server" Value="0"/> |
| $(":text[id*=Company]").val(""); |
| <telerik:GridTemplateColumn DataField="PricePerBottle" |
| DataType="System.Decimal" HeaderText="£/Bottle" |
| SortExpression="PricePerBottle" UniqueName="PricePerBottle"> |
| <ItemTemplate> |
| <asp:Label ID="PricePerBottleLabel" runat="server" |
| Text='<%# ConstClass.getCurrencyPrice(Eval("PricePerBottle"))%'> |
| </asp:Label> |
| </ItemTemplate> |
| <HeaderStyle HorizontalAlign="Right" Width="70px" /> |
| <ItemStyle HorizontalAlign="Right" /> |
| </telerik:GridTemplateColumn> |