Telerik Forums
UI for ASP.NET AJAX Forum
23 answers
1.5K+ views
Hello,

I've encountered a puzzling issue with the RadGrid when using static headers and scrolling. Initially, when there is no scrolling necessary, the grid renders as expected (see image 1).

However, once I add a new record that causes scrolling to occur, the grid expands horizontally, causing a horizontal scrollbar in the window, and the grid rows are no longer aligned with their headers (see image 2).

Oddly enough, the grid realigns itself when I move the cursor over one of the drop-down template items (see image 3).

Here is my grid definition:
<telerik:RadGrid ID="dtgUses" runat="server" AllowSorting="true" AllowMultiRowEdit="true"
                        AllowFilteringByColumn="true" PageSize="5" AutoGenerateColumns="false" ShowFooter="true"
                        EnableHeaderContextMenu="true" Width="96%" EnableHeaderContextFilterMenu="true"
                        OnPreRender="dtgUses_PreRender" OnNeedDataSource="dtgUses_NeedDataSource" OnItemDataBound="dtgUses_ItemDataBound"
                        OnItemCommand="dtgUses_ItemCommand" AllowCustomPaging="true">
                        <ClientSettings AllowGroupExpandCollapse="true">
                            <Scrolling AllowScroll="true" ScrollHeight="125px" UseStaticHeaders="true" />
                        </ClientSettings>
                        <PagerStyle Mode="NextPrevAndNumeric" />
                        <MasterTableView DataKeyNames="Id" GroupLoadMode="Server" AllowNaturalSort="true"
                            ShowGroupFooter="true" ItemStyle-Wrap="false" CommandItemDisplay="Top" CommandItemSettings-ShowRefreshButton="False"
                            EditMode="InPlace" IsFilterItemExpanded="false" FooterStyle-Wrap="false" TableLayout="Fixed">
                            <Columns>
                                <telerik:GridTemplateColumn UniqueName="Use" HeaderText="Occupancy" HeaderButtonType="TextButton"
                                    HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="125px" SortExpression="UseCodeDescr">
                                    <ItemTemplate>
                                        <%# Eval("UseCodeDescr")%>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <telerik:RadComboBox runat="server" ID="cbUseCode" DataTextField="Descr" DataValueField="Id"
                                            Width="100%" />
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn UniqueName="Quality" HeaderText="Grade" HeaderButtonType="TextButton"
                                    HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="70px" SortExpression="QualityShortDescr">
                                    <ItemTemplate>
                                        <%# Eval("QualityShortDescr")%>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <telerik:RadComboBox runat="server" ID="cbQuality" DataTextField="Descr" DataValueField="Id"
                                            Width="100%" />
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn UniqueName="Condition" HeaderText="Cond" HeaderButtonType="TextButton"
                                    HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="70px" SortExpression="ConditionShortDescr">
                                    <ItemTemplate>
                                        <%# Eval("ConditionShortDescr")%>
                                    </ItemTemplate>
                                    <EditItemTemplate>
                                        <telerik:RadComboBox runat="server" ID="cbCondition" DataTextField="Descr" DataValueField="Id"
                                            Width="100%" />
                                    </EditItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn DataField="EffectiveYearBuilt" HeaderButtonType="TextButton"
                                    HeaderStyle-HorizontalAlign="Right" HeaderText="Eff. Year" HeaderStyle-Width="50px"
                                    SortExpression="EffectiveYearBuilt" UniqueName="EffectiveYearBuilt" DataType="System.Int16">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="YearRemodeled" HeaderButtonType="TextButton"
                                    HeaderStyle-HorizontalAlign="Right" HeaderText="Remodel Year" HeaderStyle-Width="75px"
                                    SortExpression="YearRemodeled" UniqueName="YearRemodeled" DataType="System.Int16"
                                    FooterText="Total Area:" FooterStyle-HorizontalAlign="Right">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="ActualArea" HeaderButtonType="TextButton" ItemStyle-HorizontalAlign="Right"
                                    HeaderStyle-HorizontalAlign="Right" HeaderText="Actual Area" HeaderStyle-Width="50px"
                                    ReadOnly="true" SortExpression="ActualArea" UniqueName="ActualArea" Aggregate="Sum"
                                    FooterAggregateFormatString="{0:G}" DataType="System.Decimal" FooterStyle-HorizontalAlign="Right">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="Percent" HeaderButtonType="TextButton" DataType="System.Decimal"
                                    HeaderStyle-HorizontalAlign="Right" HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Right"
                                    HeaderText="% of Section" SortExpression="Percent" UniqueName="PercentOfSection"
                                    DataFormatString="{0:P}" ReadOnly="true">
                                </telerik:GridBoundColumn>
                                <telerik:GridButtonColumn UniqueName="Delete" CommandName="Delete" ButtonType="ImageButton"
                                    HeaderStyle-Width="20px" ImageUrl="~/skins/GovernBlue/Telerik/Grid/Delete.gif"
                                    ConfirmText="Are you sure you want to delete this use?" ItemStyle-HorizontalAlign="Center"
                                    ShowInEditForm="true" />
                            </Columns>
                        </MasterTableView>
                    </telerik:RadGrid>


What I'd really like is for the grid to maintain its alignment at all times (see image 4). The grid works just fine without static headers, but I need to keep the static headers because that is part of the requirement. I've spent hours researching these forums and tried countless solutions that have been suggested in other threads to no avail. Is there something I'm missing here? Thanks!
SMc
Top achievements
Rank 2
Iron
Veteran
Iron
 updated answer on 02 Jul 2021
1 answer
89 views

Hello,

In the day view, I want to show in the same day (column) an appointment that overlaps 2 days.

Example:  The first shift start "day 1" at 20:00 and stop "day 2" at 04:00. but I want to show it in a single day (column)

I did try to put those values: DayStartTime at 20:00 and DayEndTime at 04:00, but it does not work.

Is there any solution possible to achieve that?

Regards,

Maxime

Peter Milchev
Telerik team
 answered on 02 Jul 2021
1 answer
376 views

Hi.

We are changing the computer where we develop and we want to transfer our DevCraft License from the old computer to the new one. Can you help us with this?

Also we need the link to download the correct versions of telerik components

Telerik.reporting: 12.0.18.416

Telerik.reportviewer: 12.0.18.416

Telerik.web.ui: 2015.2.826.40

Telerik.web.ui.skins: 2015.2.826.40

Telerik.web.device.detector: 2015.2.826.40

Thanks!!!

Karina
Telerik team
 answered on 01 Jul 2021
1 answer
168 views

I have a radgrid with a Master and one Details table.  When scrolling, only the Master data scrolls.  How can I have both scroll at same time from the single horizontal scroll bar?  Not sure if it makes a difference but I am expanding and collapsing the details data client-side with the OnRowClick event and I am using frozen columns.

Thanks!

Attila Antal
Telerik team
 answered on 01 Jul 2021
0 answers
118 views
After the BatchEditCommand is ran for the update command the grid rebinds as it should but all the fields that were edited are still marked as edited.  Any ideas as to why?  I do edit several cells client-side (gridBatchEditManager.changeCellValue(cell, value)) and then using the built in save button of the grid to call BatchEditCommand.  Everything is updated properly in my sql database but the grid itself does not refresh as I would expect.  If I click the grids "Refresh" button it comes back properly.
Jerry
Top achievements
Rank 2
Iron
Iron
 asked on 30 Jun 2021
0 answers
134 views

Hi Team,

We are migrated from RadGrid Migration to RadGrid Ajax suite.

We are trying to select a row and click on Accept or Reject it ,as per requirement.

Click Event is not triggered for the Accept or Reject Button of RadGrid as have observed for Click Event there is an RadGridNamespace.AsyncRequest observed in Classic Controls.
RadGrid Code For Classic Control:

                        <asp:ImageButton ID="AcceptButton" CausesValidation="false" CommandName="Accept" ImageUrl="~/RadControls/Grid/Skins/Test/Img/AcceptButton.gif" runat="server" />
                        <asp:ImageButton ID="RejectButton" CausesValidation="false" CommandName="Reject" ImageUrl="~/RadControls/Grid/Skins/Test/Img/RejectButton.gif" runat="server"  />
<input name="ctl00$ContentPlaceHolder$ctl00$ctl00$masterControl$TestRadGrid$ctl01$ctl02$ctl00$AcceptButton" id="ctl00_ContentPlaceHolder_ctl00_ctl00_masterControl_TestRadGrid_ctl01_ctl02_ctl00_AcceptButton" style="border-width: 0px;" onclick="RadGridNamespace.AsyncRequest('ctl00$ContentPlaceHolder$ctl00$ctl00$masterViewControl$TestRadGrid$ctl01$ctl02$ctl00$AcceptButton', '', 'ctl00_ContentPlaceHolder_ctl00_ctl00_masterViewControl_TestRadGrid', event); return false;" type="image" src="../RadControls/Grid/Skins/Test/Img/AcceptButton.gif">

JavaScript Code:

 this.Control.onclick = function() {
        if (I20.Owner.Owner.Owner.EnableAJAX) {
            if (I20.Owner.Owner == I20.Owner.Owner.Owner.o1o) {
                RadGridNamespace.AsyncRequest(I20.UID, I20.Owner.Owner.Owner.MasterTableView.UID + "\x21" + I20.Owner.i2v.UniqueName, I20.Owner.Owner.Owner.ClientID);
            } else {
                RadGridNamespace.AsyncRequest(I20.UID, I20.Owner.Owner.UID + "!" + I20.Owner.i2v.UniqueName, I20.Owner.Owner.Owner.ClientID);
            }
        } else {
            var O2j = I20.Owner.Owner.Owner.ClientSettings.PostBackFunction;
            if (I20.Owner.Owner == I20.Owner.Owner.Owner.o1o) {
                O2j = O2j.replace("{0}", I20.UID).replace("{1}", I20.Owner.Owner.Owner.MasterTableView.UID + "!" + I20.Owner.i2v.UniqueName);
            } else {
                O2j = O2j.replace("\x7b0}", I20.UID).replace("{1}", I20.Owner.Owner.UID + "!" + I20.Owner.i2v.UniqueName);
            }
            eval(O2j);
        }


RadGrid Code For Ajax Suite after Migration :

<input name="ctl00$ContentPlaceHolder$ctl00$ctl00$masterControl$TestRadGrid$ctl01$ctl02$ctl00$AcceptButton" id="ctl00_ContentPlaceHolder_ctl00_ctl00_masterControl_TestRadGrid_ctl01_ctl02_ctl00_AcceptButton" style="border-width: 0px;"  type="image" src="../RadControls/Grid/Skins/Test/Img/AcceptButton.gif">

JavaScript :

But For AjaxSuite control of RadGrid, I have changed RadGridNamespace to Telerik.Web.UI ,but still no luck.

    this.Control.onclick = function() {
        if (I20.Owner.Owner.Owner.EnableAJAX) {
            if (I20.Owner.Owner == I20.Owner.Owner.Owner.o1o) {
                Telerik.Web.UI.AsyncRequest(I20.UID, I20.Owner.Owner.Owner.MasterTableView.UID + "\x21" + I20.Owner.i2v.UniqueName, I20.Owner.Owner.Owner.ClientID);
            } else {
                Telerik.Web.UI.AsyncRequest(I20.UID, I20.Owner.Owner.UID + "!" + I20.Owner.i2v.UniqueName, I20.Owner.Owner.Owner.ClientID);
            }
        } else {
            var O2j = I20.Owner.Owner.Owner.ClientSettings.PostBackFunction;
            if (I20.Owner.Owner == I20.Owner.Owner.Owner.o1o) {
                O2j = O2j.replace("{0}", I20.UID).replace("{1}", I20.Owner.Owner.Owner.MasterTableView.UID + "!" + I20.Owner.i2v.UniqueName);
            } else {
                O2j = O2j.replace("\x7b0}", I20.UID).replace("{1}", I20.Owner.Owner.UID + "!" + I20.Owner.i2v.UniqueName);
            }
            eval(O2j);
        }
    };

when we click on AcceptButton or RejectButton , page is getting Refreshed. Click event is not triggerred.

Can anyone help me to Resolve issue?

 

Sachita
Top achievements
Rank 1
Iron
Iron
Iron
 asked on 30 Jun 2021
1 answer
235 views

I am displaying the items inside the RadListbox. Somehow the item are displaying horizontally rather than vertically. Below is my code:

<telerik:RadAjaxPanel runat="server" CssClass="demo-container demo-content"> <telerik:RadListBox RenderMode="Auto" ID="lstFolder" runat="server" Height="200px" Skin="Vista"> </telerik:RadListBox> </telerik:RadAjaxPanel>

code behind, .cs class, I am binding the RadListBox with data from the database:

private void bindFolder() { using (TrustedSystemContext dbContext = new TrustedSystemContext()) { lstBox.DataSource = dbContext.BoxInfo.ToList(); lstBox.DataTextField = "FolderName"; lstBox.DataValueField = "FolderId"; lstBox.DataBind(); } }

These are the items in the database:

the items are displaying like so:

I want Folder1, Folder 2 to display vertically rather than on one line.

anhy hel will be appreciated.

 

 

 

 

Peter Milchev
Telerik team
 answered on 30 Jun 2021
0 answers
105 views

Hi Community,

I am forced to find a way to upload multiple files to an Amazon S3 Bucket. Therefore I am using an ASP.Net Webform with Telerik UI Ajax.
In short, this should be the solution:
The easiest way would be to select all files which should be uploaded. At first, all these files should be ziped.
This created zip-file should be transfered to the amazon s3 bucket.

Here I got some issues.
-> All my uploaded files got prefixes, which makes it hard to address them on the bucket. How do I Upload files via RadCloudUpload without any prefixes, just the pure filename?

Next issue:
-> Am I right that I am not able to create this zipfile on the local client machine?
What would be a proper workaround? The 'classic' RadAsyncUpload used a temp folder to collect these uploads. Unfortunately the asyncUploader is not able to address the Amazon S3 bucket.

Thank you in advance for your help.

cp-it
Top achievements
Rank 2
 asked on 30 Jun 2021
0 answers
182 views

Hi,

Is there any way to get the mouse x,y of the dock as it's being dragged?   I have javascript examples that use dataTransfer, and have tried adapting them to dock events, OnClientDragStarted, OnClientDrag and OnClientDragEnd.   But OnClientDragStarted, which does provide access to the "OriginalEvent", does not have dataTransfer defined. And OnClientDrag provides no access to the "OriginalEvent".

Can you provide some direction?  Or is just not possible.

Dave

 

 

Dave
Top achievements
Rank 1
Iron
Veteran
Iron
 asked on 29 Jun 2021
1 answer
151 views

Hi,
I have a Telerik rad grid, where I can enter negative and positive values. When I enter a positive value in the cell I need to display the cell value in "Green" color.  In GridTemplateColumn am using RadNumericTextBox

Please note that I need to achieve this through the client-side and not through code-behind.

 

 

Attila Antal
Telerik team
 answered on 29 Jun 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?