Questions on UI for ASP.NET AJAX Forum

4 answers

107 views

Hi,

I am showing bill register in RADGRID. However if a customer has bought more than one item, then I am adding Bill Total in the "B.AMT" column. But the problem is ,while doing column summary, the bill total is counted as per number of items in case there are more than one item bought by customer. Please find in the attached screenshot.
Here Gopal TODI has bought 2 items of total amt. 66778. But while calculating the summary of B.AMT ,66778 is added twice.

Please look into this.

Regards
Purojit

Grid

answered on 08 Jul 2013

4 answers

169 views

Only 1 edit column on Add New

I have a radgrid in batch edit mode. When I click on add new I only get 1 column to edit even though I have 2 visible columns?

Also the Add New resizes my grid by 1/2 to say Save Changed even though I have plenty of space to keep it all on one line?

Third I can not get any of the command events to fire except BatchEdit Command??

                                                 <telerik:RadGrid ID="dgCompNonGrid" GridLines="None" runat="server" AllowAutomaticDeletes="True"
                                                    AllowAutomaticInserts="True" PageSize="40" Skin="Default" OnItemDeleted="dgCompNonGrid_ItemDeleted" OnItemInserted="dgCompNonGrid_ItemInserted"
                                                    OnItemUpdated="dgCompNonGrid_ItemUpdated" AllowAutomaticUpdates="True" AllowPaging="False"
                                                    AutoGenerateColumns="False" Width="440px" OnBatchEditCommand="dgCompNonGrid_BatchEditCommand" Height="230px">
                                                     <ExportSettings>
                                                         <Pdf>
                                                             <PageHeader>
                                                                 <LeftCell Text="" />
                                                                 <MiddleCell Text="" />
                                                                 <RightCell Text="" />
                                                             </PageHeader>
                                                             <PageFooter>
                                                                 <LeftCell Text="" />
                                                                 <MiddleCell Text="" />
                                                                 <RightCell Text="" />
                                                             </PageFooter>
                                                         </Pdf>
                                                     </ExportSettings>
                                                    <ClientSettings>
                                                        <Selecting AllowRowSelect="True" />
                                                    </ClientSettings>
                                                    <MasterTableView AllowNaturalSort="False" EditMode="Batch" BatchEditingSettings-OpenEditingEvent ="DblClick">
                                                        <BatchEditingSettings EditType="Cell" />
                                                        <CommandItemSettings ExportToPdfText="Export to PDF" />
                                                        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">
                                                        </RowIndicatorColumn>
                                                        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
                                                        </ExpandCollapseColumn>
                                                        <EditFormSettings>
                                                            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                                                            </EditColumn>
                                                        </EditFormSettings>
                                                        <PagerStyle PageSizeControlType="RadComboBox" />
                                                    </MasterTableView>
                                                     <MultiHeaderItemStyle Wrap="False" />
                                                     <ItemStyle Wrap="False" />
                                                    <PagerStyle PageSizeControlType="RadComboBox" />
                                                    <FilterMenu EnableImageSprites="False">
                                                    </FilterMenu>
                                                </telerik:RadGrid>

CODE==================================================================================

           With dgCompNonGrid
                .Columns.Clear()
                .DataSource = Nothing
                .DataSource = ippService.SelectPlanComponentsDetails(iCompID)
            End With

Dim boundColumn As GridBoundColumn

            boundColumn = New GridBoundColumn()
            dgCompNonGrid.MasterTableView.Columns.Add(boundColumn)
            boundColumn.DataField = "ippComponentID"
            boundColumn.UniqueName = "dgippComponentID"
            boundColumn.Display = False
            boundColumn.HeaderText = ""
            boundColumn.ItemStyle.Font.Size = 8
            boundColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Left
            boundColumn.ReadOnly = True

            boundColumn = New GridBoundColumn()
            dgCompNonGrid.MasterTableView.Columns.Add(boundColumn)
            boundColumn.DataField = "ippComponentSeq"
            boundColumn.UniqueName = "dgippComponentSeq"
            boundColumn.Display = False
            boundColumn.HeaderText = ""
            boundColumn.ItemStyle.Font.Size = 8
            boundColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Left

            boundColumn = New GridBoundColumn()
            dgCompNonGrid.MasterTableView.Columns.Add(boundColumn)
            boundColumn.DataField = "ippComponentSrcValue"
            boundColumn.UniqueName = "dgippComponentSrcValue"
            boundColumn.Display = True
            boundColumn.HeaderText = "Value"
            boundColumn.ItemStyle.Font.Size = 8
            boundColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Left

            boundColumn = New GridBoundColumn()
            dgCompNonGrid.MasterTableView.Columns.Add(boundColumn)
            boundColumn.DataField = "ippComponentBonusPct"
            boundColumn.UniqueName = "dgippComponentBonusPct"
            boundColumn.Display = True
            boundColumn.HeaderText = "Bonus %"
            boundColumn.ItemStyle.Font.Size = 8
            boundColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Left

Dim oDeleteColumn As New GridButtonColumn

            With oDeleteColumn
                .UniqueName = "Delete"
                .HeaderText = "Remove"
                .ItemStyle.Font.Size = 8
                .ButtonType = GridButtonColumnType.ImageButton
                .ImageUrl = "~/Images/style7/cancel.gif"
                .Display = True
                .Visible = True
                .CommandName = "Delete"
                .ConfirmText = "Delete this increment?"
                .ConfirmDialogType = GridConfirmDialogType.RadWindow
                .ItemStyle.HorizontalAlign = HorizontalAlign.Left
            End With

dgCompNonGrid.MasterTableView.Columns.Add(oDeleteColumn)

dgCompNonGrid.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top

Grid

answered on 08 Jul 2013

6 answers

234 views

RadButtons not Scrolling inside a Pane/Container.

I have a fairly complex page with RadSplitters/RadPanes/PanelBars/RadGrids and RadButtons. When I expand the RadPanelBar, then scroll, the buttons don't seem to scroll with the page. Locally, in Debug mode, they seem to scroll fine, but when I deploy them to the server, that is when I see the problem. See attached image.

I searched this forum but I didn't see many possible solutions.

thanks

mark

Button

answered on 08 Jul 2013

14 answers

1.9K+ views

[Solved] DatePicker enable/disable clientside

I can't seem to get my datepicker control to properly enable/disable on the client side. I've included my javascript below.

When the function is called, it partially works. The textbox portion of the control is enabled/disabled appropriately. But the popup button seems to always work, regardless of wether the control is enabled/disabled.

What am I doing wrong? I've searched for other answers on this, but they are all really old (more than 2 years) and the api has changed significantly since then.

    
            function ToggleDatePicker(enable) 
        
            { 
        
                var DatePicker = $find('<%= StartDate.ClientID %>'); 
        
                if (!enable) 
        
                { 
        
                    DatePicker.get_dateInput().disable();  
        
                    DatePicker.get_popupButton().onclick = null; 
        
                } 
        
                else 
        
                { 
        
                    DatePicker.get_dateInput().enable();  
        
                    DatePicker.get_popupButton().onclick = function() { DatePicker.togglePopup(); return false; };  
        
                } 
        
            }

Calendar

answered on 08 Jul 2013

3 answers

111 views

Having trouble saving files to a specific location

I have a form that has the following workflow.

1. user fills out form, including optionally uploading a file
2. the information gets saved to the database
3. using the ID of the entry, a new folder is created with that ID number
4. the file is uploaded to that folder
5. the user is redirected to another page

I can't seem to place the file uploading process in the right place. Can someone point me in the right direction of the method to use? Should I move the files in the button click action? Page load? onFileUpload?

AsyncUpload

answered on 08 Jul 2013

6 answers

312 views

[Solved] Is it possible to create a nested grid thorugh client code

Hi, I'm trying to reduce the initial load of my Hierarchical grid. Right now it is about 180kb, I thought if I could create the nested grid on the client when it is needed the initial page load would be small.

I'm using this approach

http://blogs.telerik.com/vladimirenchev/Posts/08-09-09/How_To_Telerik_RadGrid_Master_Detail_client-side_data-binding_using_LINQ_to_SQL_and_WebService.aspx?ReturnURL=%2fvladimirenchev%2fPosts.aspx

Basically I'm using two web services on the client to load my master grid and the nested grid.

Thanks
Chris

Grid

answered on 08 Jul 2013

1 answer

86 views

[Solved] Accessing Appointment details in JavaScript

Hello,

I'm trying to implement some restrictions on dragging and dropping appointments on the scheduler and it looks like the only events to do this are client-side events. How would I access resource values, such as a username to make sure the user is moving his/her own appointment? Would I be able to get the start/end times of the appointment and be able to access the collection of scheduler appointments in JavaScript to make sure they don't overlap?

Thanks,
Matt

Scheduler

answered on 08 Jul 2013

3 answers

52 views

Search button alignment on mobile browser

I'm utilizing the SearchBox on a mobile-centric site, and during my testing I've noticed inconsistencies with the search image/button either being mis-aligned or disappearing when switching the phone from portrait to landscape mode (or vice versa).

The search button is properly aligned after initial load in either orientation. When switching device orientation, the image will either show in the middle of the SearchBox or disappear altogether (seems it might be aligned to the right of the box, but can't be certain). Reloading the page in the new orientation puts the image back in the proper place. Perhaps a CSS issue?

I'm using a Galaxy S3 for testing, Android 4.1.1 with the default browser. I'm not customizing the SearchBox at all, using MetroTouch skin.

SearchBox

answered on 08 Jul 2013

8 answers

300 views

Y Axis Label - text

I have my grid working nicely with x and y values as I want - I just want to add a label on the Y axis to signify what kind of data it is - for example say the graph showed money id like a y axis of £, if the y axis was showing temperature data id like to show centigrade.
Note this label im talking about isnt the actual y axis just a textual label to show what the values relate to.

Cheers
Gregor

Chart (Obsolete)

answered on 08 Jul 2013

2 answers

131 views

[Solved] Drag and drop custom control on RadGrid

Hi,
I have website where people are able to drag and drop custom WebUserControl on a Radgrid. I'm using jQuery-ui to do that but the problem is when i have too much row on my grid, the draggable animation is slow and the control is not moving with the cursor. He teleports to the cursor when we stop moving.

Is there a way to set the Grid's cells "droppable" on the server-side ?

The css class "drag" is on each WebUserControl.
The css class "drop2" is on the <ItemStyle> markup for each columns except the first column.

Javascript :

jQuery.noConflict();

function pageLoad(sender, args) {

jQuery(document).ready(function ($) {

var title;

var col, row, preCol, preRow;

// set the element draggable (WebUserControl)

$(".drag").draggable({

drag: function (event, ui) {

title = this.title;

}

});

// set the element droppable (each cells of RadGrid but not on the first column

$(".drop2").droppable({

drop: function (event, ui) {

col = $(this).parent().children().index($(this));

row = $(this).parent().parent().children().index($(this).parent());

dropped();

alert('Ligne: ' + row + ', Colonne: ' + col);

}

});

// AjaxRequest with cell indexes and control's id <== title property

function dropped() {

$find('<%= RadAjaxManager1.ClientID%>').ajaxRequest("Drop;" + title + ";" + col + ";" + row);

}

});

}

Code-behind :

public partial class WebForm2 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

// Create a List of half day for the next 3 months

List<string> Montableau = new List<string>();

DateTime monHeure = DateTime.Now.AddDays(-1).AddHours(-DateTime.Now.Hour).AddMinutes(-DateTime.Now.Minute).AddSeconds(-DateTime.Now.Second).AddMilliseconds(-DateTime.Now.Millisecond);

while (monHeure < DateTime.Now.AddMonths(3))

{

Montableau.Add(monHeure.ToShortDateString() + " " + monHeure.ToShortTimeString());

monHeure = monHeure.AddHours(12);

}

RadGrid1.DataSource = Montableau;

RadGrid1.DataBind();

for (int i = 0; i < Montableau.Count; i++)

{

RadGrid1.Items[i].Cells[2].Text = Montableau[i];

RadGrid1.Items[i].Cells[3].Text = "";

RadGrid1.Items[i].Cells[4].Text = "";

RadGrid1.Items[i].Cells[5].Text = "";

}

// Creating 2 WebUserControl dynamically

WebUserControl1 ctrl = (WebUserControl1)LoadControl("~/WebUserControl1.ascx");

ctrl.idControl = "wuc9";

ctrl.ID = "wuc9";

ctrl.numeroAffaire = "9";

ctrl.leSite = "Test";

ctrl.idControl = ctrl.ID;

ctrl.couleurFond = Color.Aqua;

Panel2.Controls.Add(ctrl);

WebUserControl1 ctrl2 = (WebUserControl1)LoadControl("~/WebUserControl1.ascx");

ctrl2.idControl = "wuc10";

ctrl2.ID = "wuc10";

ctrl2.numeroAffaire = "10";

ctrl2.leSite = "Test";

ctrl2.idControl = ctrl2.ID;

ctrl2.couleurFond = Color.Lime;

Panel2.Controls.Add(ctrl2);

}

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

{

if (e.Argument.StartsWith("Drop"))

{

string[] mesArg = e.Argument.Split(';');

// Search the control with the id (title attributes)

WebUserControl1 user = this.FindControl(mesArg[1]) as WebUserControl1;

// Search the RadGrid

RadGrid rg = (RadGrid)FindControl("RadGrid1");

if (rg != null)

{

// Add control in the correct cell

if (rg.Items[int.Parse(mesArg[3])].Cells[int.Parse(mesArg[2]) + 2].Controls.Count == 0)

{

rg.Items[int.Parse(mesArg[3])].Cells[int.Parse(mesArg[2]) + 2].Controls.Add(user);

}

else

{

RadAjaxManager1.Alert("Cette case contient deja un control");

}

UpdatePanel1.Update();

}

Thanks !

Grid

answered on 08 Jul 2013

	function ToggleDatePicker(enable)
	{
	var DatePicker = $find('<%= StartDate.ClientID %>');

	if (!enable)
	{
	DatePicker.get_dateInput().disable();
	DatePicker.get_popupButton().onclick = null;
	}
	else
	{
	DatePicker.get_dateInput().enable();
	DatePicker.get_popupButton().onclick = function() { DatePicker.togglePopup(); return false; };
	}
	}