Questions on UI for ASP.NET AJAX Forum

2 answers

567 views

RadPageLayout - Alignment of Columns and Space between Rows

Currently, I am working on developing an ASP.Net page with VB.Net code-behind. This new page is being designed using the RadPageLayout because it needs to have a good layout on Desktop PCs and Mobile devices

Right now I am having a problem of getting the columns to be all the way over to the left with only slight padding on the left when being displayed on a Desktop PC at 1920 x 1080 resolution. But it looks good on the iPhone 6S. I need it to look good on all devices.

Also I need help creating some space between the rows. On the Desktop PC, the RadComboBoxes are right next to each other from 1 row to the next.

Please help! Thanks!

Here is the code for the ASP.Net page:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestPage4.aspx.vb" Inherits="TestPage4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Android Store</title>
<style type="text/css">
.comboboxlabel {
color: white;
}
body {
margin: 0;
padding: 0;
}
html {
font-size: 170%;
}
@media (min-width:60em){
html {
font-size: 90%
}

}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1" />

</head>
<body style="background-color: #3A4459">
<form id="form1" runat="server">

<telerik:RadScriptManager runat="server" />

<div>
<telerik:RadPageLayout ID="Radpagelayout1" runat="server" GridType="Fluid" ForeColor="White" ShowGrid="true">
<Rows>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn Span="1" SpanMd="1" SpanSm="10">
Bay
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="2" SpanMd="10" SpanSm="10">
<telerik:RadComboBox ID="rcbbBay" runat="server" MaxHeight="250px" AutoPostBack="true" Width="170px" RenderMode="Lightweight">
<Items>
<telerik:RadComboBoxItem runat="server" Text="A - Bay" Value="A - Bay" />
<telerik:RadComboBoxItem runat="server" Text="B - Bay" Value="B - Bay" />
<telerik:RadComboBoxItem runat="server" Text="C - Bay" Value="C - Bay" />
<telerik:RadComboBoxItem runat="server" Text="D - Bay" Value="D - Bay" />
<telerik:RadComboBoxItem runat="server" Text="E - Bay" Value="E - Bay" />
<telerik:RadComboBoxItem runat="server" Text="F - Bay" Value="F - Bay" />
<telerik:RadComboBoxItem runat="server" Text="G - Bay" Value="G - Bay" />
</Items>
</telerik:RadComboBox>
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn Span="1" SpanMd="1" SpanSm="10">
Column
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="2" SpanMd="10" SpanSm="10">
<telerik:RadComboBox ID="rcbbCol1" runat="server" MaxHeight="250px" Width="170px" RenderMode="Lightweight">
</telerik:RadComboBox>
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn Span="1" SpanMd="1" SpanSm="10">
Row
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="2" SpanMd="10" SpanSm="10">
<telerik:RadComboBox ID="rcbbRow1" runat="server" MaxHeight="250px" Width="170px" RenderMode="Lightweight">
<Items>
<telerik:RadComboBoxItem runat="server" Text="01" Value="01" />
<telerik:RadComboBoxItem runat="server" Text="02" Value="02" />
<telerik:RadComboBoxItem runat="server" Text="03" Value="03" />
<telerik:RadComboBoxItem runat="server" Text="04" Value="04" />
<telerik:RadComboBoxItem runat="server" Text="05" Value="05" />
<telerik:RadComboBoxItem runat="server" Text="06" Value="06" />
<telerik:RadComboBoxItem runat="server" Text="07" Value="07" />
<telerik:RadComboBoxItem runat="server" Text="08" Value="08" />
<telerik:RadComboBoxItem runat="server" Text="09" Value="09" />
<telerik:RadComboBoxItem runat="server" Text="10" Value="10" />
<telerik:RadComboBoxItem runat="server" Text="11" Value="11" />
<telerik:RadComboBoxItem runat="server" Text="12" Value="12" />
<telerik:RadComboBoxItem runat="server" Text="13" Value="13" />
<telerik:RadComboBoxItem runat="server" Text="14" Value="14" />
<telerik:RadComboBoxItem runat="server" Text="15" Value="15" />
<telerik:RadComboBoxItem runat="server" Text="16" Value="16" />
<telerik:RadComboBoxItem runat="server" Text="17" Value="17" />
<telerik:RadComboBoxItem runat="server" Text="18" Value="18" />
<telerik:RadComboBoxItem runat="server" Text="19" Value="19" />
<telerik:RadComboBoxItem runat="server" Text="20" Value="20" />
<telerik:RadComboBoxItem runat="server" Text="21" Value="21" />
<telerik:RadComboBoxItem runat="server" Text="22" Value="22" />
<telerik:RadComboBoxItem runat="server" Text="23" Value="23" />
<telerik:RadComboBoxItem runat="server" Text="24" Value="24" />
<telerik:RadComboBoxItem runat="server" Text="25" Value="25" />
</Items>
</telerik:RadComboBox>
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
</Rows>
</telerik:RadPageLayout>
</div>
</form>
</body>
</html>

PageLayout

answered on 01 Aug 2016

1 answer

120 views

Grid throws exception on edit only

So, I have a grid databound in my code behind. It loads fine, and I built a detail button that works fine. But when I click on edit, I get: "JavaScript runtime error: Sys.WebForms.PageRequestManagerServerErrorException: Selection out of range Parameter name: value" and when I disable Ajax I can see:
[ArgumentOutOfRangeException: Selection out of range
Parameter name: value]
   Telerik.Web.UI.RadComboBox.PerformDataBinding(IEnumerable dataSource) +191
   Telerik.Web.UI.RadComboBox.OnDataSourceViewSelectCallback(IEnumerable data) +509
   System.Web.UI.DataSourceView.Select(DataSourceSelectArguments arguments, DataSourceViewSelectCallback callback) +33
   Telerik.Web.UI.RadComboBox.OnDataBinding(EventArgs e) +1296
   Telerik.Web.UI.RadComboBox.PerformSelect() +37
   System.Web.UI.WebControls.BaseDataBoundControl.DataBind() +30
   Telerik.Web.UI.RadComboBox.DataBind() +71
   System.Web.UI.Control.DataBindChildren() +187
   System.Web.UI.Control.DataBind(Boolean raiseOnDataBinding) +94
   System.Web.UI.Control.DataBind() +15
   System.Web.UI.Control.DataBindChildren() +187
   System.Web.UI.Control.DataBind(Boolean raiseOnDataBinding) +94
   System.Web.UI.Control.DataBind() +15
   System.Web.UI.Control.DataBindChildren() +187
   System.Web.UI.Control.DataBind(Boolean raiseOnDataBinding) +94
   System.Web.UI.Control.DataBind() +15
   System.Web.UI.Control.DataBindChildren() +187
   System.Web.UI.Control.DataBind(Boolean raiseOnDataBinding) +94
   System.Web.UI.Control.DataBind() +15
   System.Web.UI.Control.DataBindChildren() +187
   System.Web.UI.Control.DataBind(Boolean raiseOnDataBinding) +94
   System.Web.UI.Control.DataBind() +15
   System.Web.UI.Control.DataBindChildren() +187
   System.Web.UI.Control.DataBind(Boolean raiseOnDataBinding) +94
   System.Web.UI.Control.DataBind() +15
   System.Web.UI.Control.DataBindChildren() +187
   System.Web.UI.Control.DataBind(Boolean raiseOnDataBinding) +94
   System.Web.UI.Control.DataBind() +15
   System.Web.UI.Control.DataBindChildren() +187
   System.Web.UI.Control.DataBind(Boolean raiseOnDataBinding) +94
   System.Web.UI.Control.DataBind() +15
   System.Web.UI.Control.DataBindChildren() +187
   System.Web.UI.Control.DataBind(Boolean raiseOnDataBinding) +94
   System.Web.UI.Control.DataBind() +15
   Telerik.Web.UI.GridEditFormItem.SetupItem(Boolean dataBind, Object dataItem, GridColumn[] columns, ControlCollection rows) +414
   Telerik.Web.UI.GridItemBuilder.CreateItems(GridGroupingContext group) +998
   Telerik.Web.UI.GridTableView.CreateItems(IEnumerator enumerator, GridColumn[] columns, ControlCollection controls) +211
   Telerik.Web.UI.GridTableView.CreateControlHierarchy(Boolean useDataSource) +2173
   Telerik.Web.UI.GridTableView.CreateChildControls(IEnumerable dataSource, Boolean useDataSource) +865
   System.Web.UI.WebControls.CompositeDataBoundControl.PerformDataBinding(IEnumerable data) +67
   System.Web.UI.WebControls.DataBoundControl.OnDataSourceViewSelectCallback(IEnumerable data) +123
   System.Web.UI.DataSourceView.Select(DataSourceSelectArguments arguments, DataSourceViewSelectCallback callback) +33
   System.Web.UI.WebControls.DataBoundControl.PerformSelect() +138
   Telerik.Web.UI.GridTableView.PerformSelect() +38
   System.Web.UI.WebControls.BaseDataBoundControl.DataBind() +30
   Telerik.Web.UI.GridTableView.DataBind() +382
   Telerik.Web.UI.GridTableView.Rebind() +108
   Telerik.Web.UI.GridCommandEventArgs.ExecuteCommand(Object source) +383
   Telerik.Web.UI.RadGrid.OnBubbleEvent(Object source, EventArgs e) +210
   System.Web.UI.Control.RaiseBubbleEvent(Object source, EventArgs args) +37
   Telerik.Web.UI.GridItem.OnBubbleEvent(Object source, EventArgs e) +147
   System.Web.UI.Control.RaiseBubbleEvent(Object source, EventArgs args) +37
   System.Web.UI.WebControls.LinkButton.OnCommand(CommandEventArgs e) +121
   System.Web.UI.WebControls.LinkButton.RaisePostBackEvent(String eventArgument) +156
   System.Web.UI.WebControls.LinkButton.System.Web.UI.IPostBackEventHandler.RaisePostBackEvent(String eventArgument) +10
   System.Web.UI.Page.RaisePostBackEvent(IPostBackEventHandler sourceControl, String eventArgument) +13
   System.Web.UI.Page.RaisePostBackEvent(NameValueCollection postData) +9665314
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1724

I've been beating my head against this and I can't see a thing wrong with the values I'm getting back from my queries.

My ASPX is:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False"
CellSpacing="0" GridLines="None" AllowPaging="True"
DataMember="ID"
onneeddatasource="RadGrid1_NeedDataSource"
OnUpdateCommand="RadGrid1_UpdateCommand" PageSize="20"
onitemcommand="RadGrid1_ItemCommand">
<MasterTableView DataKeyNames="status,charity,make,model,year,vin,date,id,salePrice,bid,note"
EditMode="EditForms">
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridButtonColumn CommandName="History" Text="History" UniqueName="detailBtn" HeaderText="History" HeaderButtonType="PushButton" AutoPostBackOnFilter="True">
</telerik:GridButtonColumn>
<telerik:GridBoundColumn HeaderText="Charity" ItemStyle-Width="140px" FilterControlAltText="Filter column2 column"
UniqueName="column3" DataType="System.String" DataField="charity" ReadOnly="True">
<ItemStyle Width="140px"></ItemStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="VIN" ItemStyle-Width="140px" FilterControlAltText="Filter column6 column"
UniqueName="column7" DataType="System.String" DataField="vin" >
<ItemStyle Width="140px"></ItemStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Year" ItemStyle-Width="140px" FilterControlAltText="Filter column2 column"
UniqueName="column2" DataType="System.Int32" DataField="year">
<ItemStyle Width="140px"></ItemStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Make" ItemStyle-Width="140px" FilterControlAltText="Filter column column"
UniqueName="column" DataType="System.String" DataField="make">
<ItemStyle Width="140px"></ItemStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Model" ItemStyle-Width="140px" FilterControlAltText="Filter column1 column"
UniqueName="column1" DataType="System.String" DataField="model">
<ItemStyle Width="140px"></ItemStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Last Update" ItemStyle-Width="140px" FilterControlAltText="Filter column1 column"
UniqueName="column5" DataType="System.DateTime" DataField="date" ReadOnly="True">
<ItemStyle Width="140px"></ItemStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Min. Bid" ItemStyle-Width="140px" FilterControlAltText="Filter column1 column"
UniqueName="column8" DataType="System.Decimal" DataField="bid" DataFormatString="{0:C}" >
<ItemStyle Width="140px"></ItemStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Sale Price" ItemStyle-Width="140px" FilterControlAltText="Filter column1 column"
UniqueName="column6" DataType="System.Decimal" DataField="salePrice" DataFormatString="{0:C}" Display="False">
<ItemStyle Width="140px"></ItemStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Notes" ItemStyle-Width="140px" FilterControlAltText="Filter column1 column"
UniqueName="unsoldNotesColumn" DataType="System.String" DataField="note" Display="True">
<ItemStyle Width="140px"></ItemStyle>
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="Latest Status" ItemStyle-Width="240px" AutoPostBackOnFilter="True">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "Status")%>
</ItemTemplate>
<EditItemTemplate>
<telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="updateComboBox" DataTextField="Status"
DataValueField="ID" DataSourceID="LinqDataSource1" SelectedValue='<%#Bind("ID") %>'
>
</telerik:RadComboBox>
</EditItemTemplate>
<ItemStyle Width="240px"></ItemStyle>
</telerik:GridTemplateColumn>
<telerik:GridEditCommandColumn FooterText="EditCommand footer" UniqueName="EditCommandColumn"
HeaderText="Edit" HeaderStyle-Width="100px" UpdateText="Update">
<HeaderStyle Width="100px"></HeaderStyle>
</telerik:GridEditCommandColumn>

</Columns>
<EditFormSettings EditColumn-DataType="System.String">
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>
</MasterTableView>
<FilterMenu EnableImageSprites="False"></FilterMenu>
</telerik:RadGrid>

And I'm calling my query in the "need data source" event.

I'd be very very grateful for any advice!

Grid

answered on 01 Aug 2016

1 answer

371 views

Export Multiple RadGrids to one Excel Sheet

Hi

I am currently trying to export multiple Radgrids all which contain different schemas to excel.

Radgrid 1 does a count status

Radgrid 2 does a count on phases in each status

Radgrid 3 does a detail of each each status and phase

So i want to export all 3 grids to one excel sheet is it possible through Telerik export?

Grid

answered on 01 Aug 2016

1 answer

273 views

AjaxLoadingPanel when page load

Hi

Saw below link, in this page OnAjaxRequest="RadAjaxManager1_AjaxRequest" is called

http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/radajaxloadingpanel/how-to/show-ajaxloadingpanel-on-initial-page-load

My goal is to show loading image in RadTreeList when page loads

OnAjaxRequest="RadAjaxManager1_AjaxRequest" is in master page , how can i use this in ascx page

But in my environment i have like below

<telerik:RadAjaxManagerProxy ID="proxyManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTreeList">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="sectionID" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

<telerik:RadTreeList ID="taskTreeList" runat="server"></telerik:RadTreeList>

Is there any other workaround?

Senthil

AjaxLoadingPanel

answered on 01 Aug 2016

1 answer

101 views

adding additional ol command

Hi. i would like to know how do i create a custom button for a dash bullet point

i added the following to my tool file

i am stuck at the JS portion

Telerik.Web.UI.Editor.CommandList["dash_bullet"] = function (commandName, editor, args) {
// what to type here?
};

Editor

answered on 01 Aug 2016

7 answers

132 views

Dynamic read only column format

I am creating dynamic column the following way:

                Dim TotalColumn As New GridNumericColumn()
                grdContingentDevelopment.MasterTableView.Columns.Add(TotalColumn)
                TotalColumn.DataField = "Total"
                TotalColumn.HeaderText = "Total"
                TotalColumn.SortExpression = "Total"
                TotalColumn.HeaderStyle.HorizontalAlign = HorizontalAlign.Left
                TotalColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Left
                TotalColumn.DataFormatString = "{0:N2}"
                TotalColumn.HeaderStyle.Width = 90
                TotalColumn.ItemStyle.Width = 90
                TotalColumn.ItemStyle.Font.Bold = True

That works fine, however if i add: TotalColumn.ReadOnly = True, most of formats such as DataFormatString or HorizontalAlign stop working

Any ideas?

Grid

answered on 29 Jul 2016

1 answer

111 views

Values is not saving when using 'Tab' to enter the values in radGrid

Issue: I have editable telerik RadGrid in that i have 6 columns.

1st five columns are editable columns and last column is read only column

when i am trying to enter the values using 'TAB'(Navigating to next column using tab), data is not saving in the last row(5th row) but when i am entering data manually(navigating to next column using Mouse), its saving.

I have attached the screen shot of the RadGrid

Sharepoint Integration

answered on 29 Jul 2016

5 answers

374 views

Client Row Template Not Working

Using below code "kendo ui grid groupable" feature is working fine if not using "ClientRowTemplate", but if I enable the ClientRowTemplate the groupable feature working weirdly, I mean the expand/collapse grouped rows feature stops working in this case.

Please help me on this.

Thanks in advance

<div class="demo-section kendo-grid-override">
@(Html.Kendo().Grid<PM.Entities.Model.sp_Sel_WorkOrder_Result>()
    .Name("Grid")
    .Columns(columns =>
    {
    columns.Template(@<text></text>).HeaderTemplate("<input type='checkbox' id='chkOrderAll' title='Select all to Archive' />").Width(35);
        columns.Bound(p => p.WorkOrderNo).Title("Order").Filterable(e => e.Extra(true)).Width(90);
        columns.Bound(p => p.OrderDate).Title("Order Date").Filterable(e => e
        .UI("customDatePicker")
        .Extra(true)
        .Operators(opt => opt.ForDate(dt => dt
                .IsGreaterThan("Greater Than")
                .IsGreaterThanOrEqualTo("Greater Than Or Equal To")
                .IsLessThan("Less Than")
                .IsLessThanOrEqualTo("Less Than Or Equal To")
            ))).Width(120);
        columns.Bound(p => p.CustomerName).Title("Customer").Filterable(e => e.Extra(false)).Width(180);
        columns.Bound(p => p.ParnterName).Title("Partner").Filterable(e => e.Extra(false)).Width(120);
        columns.Bound(p => p.OrderStatus).Title("Order Status").Filterable(e => e
            .UI("orderStatusFilter")
            .Extra(false)
        ).Width(120);
        columns.Bound(p => p.TelcoApprovalStatus).Title("Status Details").Filterable(false).Width(200);
        columns.Bound(clm => clm.Id).Title("Actions").Filterable(false).Sortable(false).Width(200);
    })
    //.ClientRowTemplate(Html.Partial("Order/_OrderTabs").ToHtmlString())
    .DataSource(ds => ds
        .Ajax()
        .Read(read => read.Action("GetAppWorkOrders", "WorkOrder").Data("window.pm.order.filterWorkOrders"))
        .PageSize(PageSize)
    )
    .AutoBind(false)
    .Events(e => e.DataBound("window.pm.order.onDataBound"))
    .Pageable(page => page.PageSizes(PageSizes).Messages(msg => msg.Display("{0} - {1} of {2:n0} items")))
    .Groupable()
    .Scrollable(a => a.Height("auto"))
    .Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
    .Resizable(e => e.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .Filterable(filterable => filterable
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .Contains("Contains")
                .DoesNotContain("Not contains")
                .StartsWith("Starts with")
                .EndsWith("Ends with")
            )
        )
    )
     .NoRecords(NoRecordFound)
)
</div>

Grid

answered on 29 Jul 2016

1 answer

58 views

Persist page using ContentUrl

Hi,

Im using a TabStrip+RadMultiPage with ContentUrl to load local pages. When the page is loaded the first time it has no tabs and the user can create them dynamically using some kind of radtreeview/sitedataitem. Each time I add a new tab/pageview, tabs/pages loaded before lose its content and they are reloaded.

Once they're created, it works good and can navigate from tab to tab without problems until I add other tab.

I've read this Post which explained the same issue in 2012:

http://www.telerik.com/forums/multpage-created-issue

Is there any solution or alternative to this problem?

My English is not very good sorry.

Thanks in advance

TabStrip

answered on 29 Jul 2016

1 answer

102 views

RadPanelBar hid iems depend on user roles

hi all

im working on project with RadPanelBar in master page iwant to hid some items depend on user roles , for example admin most see some items hidden for other users

how to manage this senario

PanelBar

answered on 29 Jul 2016