Telerik Forums
UI for ASP.NET AJAX Forum
3 answers
289 views
Hi,

I am new to using Ajax and need some help in the following scenario. I have a 'Add' button and a grid with 'Edit' button column inside a radajaxpanel.I need a modal pop to open when the Add or Edit buttons are clicked to add/update records to the grid. Can someone please help with an example? The Master page has the following code. I suppose another Script Manager is not required on my page then.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Outer.master.cs" Inherits="WebApp.Outer" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <script src="Scripts/jquery.1.5.2.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <div id="divHeader">
        <h1>
            PROJECT TITLE</h1>
    </div>
    <div id="divCommonInfo">
        <span>
            <div id="divLoginStatus">
                <asp:LoginStatus ID="LoginStatus1" runat="server" />
            </div>
        </span>
    </div>
    <div id="content_wrapper">
        <!--Start Content Wrapper-->
        <div id="divMenu">
            <telerik:RadMenu ID="RadMenu1" runat="server" DataSourceID="SiteMapDataSource1" OnPreRender="RadMenu1_PreRender">
            </telerik:RadMenu>
        </div>
        <div id="divBreadCrumb">
            <asp:SiteMapPath ID="SiteMapPath1" runat="server">
            </asp:SiteMapPath>
        </div>
        <br />
        <div id="content">
            <div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </div>
        <div id="footer">
            <small>Copyright ©</small>
        </div>
    </div>
    <!--End Content Wrapper-->
    </form>
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
</body>
</html>
The code for the page is below. I need the section to have a modal popup open when the 'Add Customer' button or the 'Edit' column button is clicked.

<%@ Page Title="" Language="C#" MasterPageFile="~/Outer.Master" AutoEventWireup="true"
    CodeBehind="Customers.aspx.cs" Inherits="WebApp.Maintenance.Customers" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>Customers</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <telerik:RadAjaxLoadingPanel ID="loadingPanel1" runat="server" />
    <telerik:RadAjaxPanel ID="pnlMain" runat="server" EnableAJAX="true" LoadingPanelID="loadingPanel1">
        <div id="divMessage" style="height: 20px; width: 100%; font-weight: bold">
            <asp:Label ID="lblMessage" runat="server" EnableViewState="false"></asp:Label>
        </div>
        <h2>
            Customers</h2>
        <telerik:RadButton ID="btnAddCustomer" runat="server" Text="Add Customer">
        </telerik:RadButton>
        <telerik:RadGrid ID="rgCustomers" runat="server" DataSourceID="dsCustomers" AutoGenerateColumns="False"
            CellSpacing="0" GridLines="None" OnDeleteCommand="rgCustomers_OnDeleteCommand"
            OnEditCommand="rgCustomers_OnEditCommand" OnItemDataBound="rgCustomers_ItemDataBound">
            <MasterTableView DataKeyNames="CustomerID" DataSourceID="dsCustomers" CommandItemDisplay="Top">
                <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
                <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>
                <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                    <HeaderStyle Width="20px"></HeaderStyle>
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridButtonColumn ButtonType="ImageButton" ImageUrl="~/Images/Edit.gif" CommandName="Edit"
                        ShowFilterIcon="false" UniqueName="Edit" HeaderStyle-Width="30" />
                    <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" UniqueName="Delete"
                        ShowFilterIcon="false" ImageUrl="~/Images/Delete.gif" Text="Delete" ConfirmText="Are you sure you want to delete this customer?"
                        HeaderStyle-Width="30" />
                    <telerik:GridBoundColumn DataField="CustomerID" DataType="System.Int32" FilterControlAltText="Filter CustomerID column"
                        HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" UniqueName="CustomerID"
                        Visible="false">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="CompanyName" FilterControlAltText="Filter CompanyName column"
                        HeaderText="Company Name" SortExpression="CompanyName" UniqueName="CompanyName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="CompanyReference" FilterControlAltText="Filter CompanyReference column"
                        HeaderText="Company Reference" SortExpression="CompanyReference" UniqueName="CompanyReference">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn HeaderText="Contact" UniqueName="Contact" SortExpression="Contact"
                        FilterControlAltText="Filter Contact column">
                        <ItemTemplate>
                            <%# Eval("ContactFirstName") %>
                            <%# Eval("ContactLastName") %></ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="Email" FilterControlAltText="Filter Email column"
                        HeaderText="Email" SortExpression="Email" UniqueName="Email">
                    </telerik:GridBoundColumn>
                    <telerik:GridCheckBoxColumn DataField="IsActive" HeaderText="Is Active" SortExpression="IsActive"
                        UniqueName="IsActive" ShowFilterIcon="false">
                    </telerik:GridCheckBoxColumn>
                </Columns>
            </MasterTableView>
            <FilterMenu EnableImageSprites="False">
            </FilterMenu>
            <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
            </HeaderContextMenu>
        </telerik:RadGrid>
        <asp:SqlDataSource ID="dsCustomers" runat="server" ConnectionString="<%$ ConnectionStrings:RoomBookerConnectionString %>"
            SelectCommand="SELECT Customer.* FROM Customer ORDER BY CompanyName"></asp:SqlDataSource>
    </telerik:RadAjaxPanel>
  
    <!-- Add /  Edit Pop-up -->
  
</asp:Content>
Tsvetina
Telerik team
 answered on 14 Nov 2011
1 answer
72 views
Hi friends ,
i am using RadScheduler to show the appointments.I have given the value VisibleAppointmentsPerDay="3".When i have more than 3 appointments.i am getting show more link button.If i click on that button it's showing day view.
i have written OnClientTimeSlotClick="TimeslotClick" event which will display the appointments in RadWindow.TimeslotClick event is working only when i click otherthar more button

My requirement is when i click on more button then also i have fire OnClientTimeSlotClick="TimeslotClick".
How can i implement this....?


This my function in Javascript

 function TimeslotClick(sender, eventArgs) {
          
            ViewMenuDetailsDialog(eventArgs._time.format("MM/dd/yyyy"));

        }

ViewMenuDetailsDialog in this function i have displayed all the appointments in RadWindow


Thanks
Anwar
Plamen
Telerik team
 answered on 14 Nov 2011
2 answers
85 views
Hello there.
Am trying your product and so far its been amazing.
Am more a web developer than a web designer and i liked very much your demo site.
I would like to know how i could duplicate / reuse the layout used there
Jayesh Goyani
Top achievements
Rank 2
 answered on 14 Nov 2011
1 answer
98 views

Hello,
after installing the Hot Fix for Microsoft Knowledge Base article number(s) 2553048 for Sharepoint 2010 SP1 i receive this error on default page.

Webpage error details

Message: ASP.NET Ajax client-side framework failed to load.
Line: 196
Char: 34
Code: 0
URI: http://srv-sp2010:30000/Pagine/default.aspx

Message: 'Sys' is undefined
Line: 223
Char: 1
Code: 0
URI: http://srv-sp2010:30000/Pagine/default.aspx

Message: 'Sys' is undefined
Line: 1371
Char: 1
Code: 0
URI: http://srv-sp2010:30000/Pagine/default.aspx

Message: 'Type' is undefined
Line: 2
Char: 1
Code: 0
URI: http://srv-sp2010:30000/_layouts/sp.core.debug.js?rev=Qp5K7ycU%2FEY9IvE0KOi7zQ%3D%3D

Message: Object doesn't support this property or method
Line: 5
Char: 3
Code: 0
URI: http://srv-sp2010:30000/_layouts/cui.debug.js?rev=%2BhQl2NTQMTydPivdG%2Bq%2FdA%3D%3D

I use in my master page:
<telerik:RadScriptManager ID="ScriptManager"  runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="true" EnableScriptLocalization="true"/>
 if i change with scriptmanager i don't have error.
<asp:ScriptManager ID="ScriptManager"  runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="true" EnableScriptLocalization="true"/>

I use Telerik version 2010.1.309.35

Thanks.

Marin
Telerik team
 answered on 14 Nov 2011
1 answer
93 views
I have a grid where I display records from a parent table.
When I edit the item I want to display a list of the parents child objects. I can do that easily by hooking in the itemdatabound and populating a listbox.
What I then want to do is allow people to add items and for the in form edit in the grid to save the child items as well as the parent.

Do I have to resort to a completely custom update and insert code or can I use some of the automatic updating and inserting functionality.
Veli
Telerik team
 answered on 14 Nov 2011
3 answers
76 views

         Hi i am using External Edit in RadDock for custom pop up. But i am facing one problem here, RadSchedulerRecurrenceEditor is not working properly i.,e calendar pop up is not showing at  "End by" option in IE,Mozilla and chrome too. For understanding purpose please look into your live demo link http://demos.telerik.com/aspnet-ajax/scheduler/examples/raddock/defaultcs.aspx . Kindly help me out from this problem ASAP, i am facing the same since 20days. For your easy understanding i am attaching the screen shot with red cross mark.

Thanks
Maddela.
Kate
Telerik team
 answered on 14 Nov 2011
1 answer
114 views
How can I have in a null values?

With all the respect, I used this for a while (click on edit option of the grid):

http://www.tedit.net/sampleviewer/srcview.aspx?path=SingleTable.src&file=SingleTable.aspx

If the field on the database allows nulls, when you create the DropDownColumn it automatically adds the first option which is the null value. No manually code.

Is there an option or sample for doing this in Telerik´s grid? i.e. no manual code for having an option in the dropdownlist for those fields which allow null values. I will load the options(data) for the dropdownlist from an sqlserver table.

Cheers.
Iana Tsolova
Telerik team
 answered on 14 Nov 2011
3 answers
85 views
I have a RadUpload configured with RadProgroess, everything works just fine in development and I can upload files up to 100MB (my limit) and the progress bar appears as it should.

However in production (IIS7) when uploading any files large than around 30MB the progress area does not appear at all?

Any advice would be appreciated.
Genady Sergeev
Telerik team
 answered on 14 Nov 2011
1 answer
214 views
Hi All

I have a RadDateTime Picker which is enabled / disabled based on the value of a checkbox,
I have just changed the enable disable event from server side to client side, this has caused a problem with the onclick event that i add to the DatePopUpButton on Page Load server side?
Page Load:
  
RadDateTimePicker1.DatePopupButton.Attributes.Add("onclick","Myevent(event, '" + RadDateTimePicker1.ClientID + "');return false;")
  
function Myevent(e, pickerID) {
    var datePicker;
    datePicker = $find(pickerID);
  
    var textBox = datePicker.get_textBox();
    var popupElement = datePicker.get_popupContainer();
  
    var dimensions = datePicker.getElementDimensions(popupElement);
    var position = datePicker.getElementPosition(textBox);
    var popOffset = (dimensions.height - position.y)
                          
    if (popOffset <= 0) {
                          
        datePicker.showPopup(position.x, position.y - dimensions.height);
  
    } else {
                              
        datePicker.showPopup(position.x, position.y - dimensions.height + popOffset);
    }
  
}

The problem is that now when the DatePopupButton is clicked the calendar momentarily appear then disappear??

I have seen another post HERE with a similar problem however i would rathe not use this solution as i want to use the approach that i already have as i have found this more reliable.

Does anybody have any idea why this is happening and how i can cure it please?

Many Thanks

Best Regards

Cush
Princy
Top achievements
Rank 2
 answered on 14 Nov 2011
2 answers
575 views
Hi,

I have a radcombobox named radComboSource. In the javascript I have some functions.  I am calling SRC_Changed()  on
OnClientDropDownClosing event. In the function I'm checking for some condition.  In that condition I have to enable/disable other two radcomboxes(radSTT, radTYP)  that has checkboxes in it. 

In the SRC_Changed()  event I am able to enable the radSTT and radTYP. But still the items and checkboxes in it are still disabled. I want the items and the checkboxes also to be enabled in the SRC_Changed() javascript event. Could you please help me achieve this.

Thanks,
Raji

<telerik:RadComboBox ID="radComboSource" runat="server" AllowCustomText="true"                                                                                    
                                                                                EnableLoadOnDemand="True" OnClientBlur="OnClientBlur"
OnClientDropDownClosing="SRC_Changed"
                                                                                    OnClientDropDownOpening="OnClientDropDownOpening" OnClientSelectedIndexChanging="OnClientSelectedIndexChanging"
                                                                                    Width="300px" onkeypress="return false;" Font-Size="X-Small" OnClientLoad="OnClientLoadHandler" >
                                                                                    <Items>
                                                                                        <telerik:RadComboBoxItem runat="server" Text="PENDING" Value="APP" />
                                                                                        <telerik:RadComboBoxItem runat="server" Text="FAA GMF" Value="FAA" />
                                                                                        <telerik:RadComboBoxItem runat="server" Text="NTIA GMF" Value="NTIA" />
                                                                                        <telerik:RadComboBoxItem runat="server" Text="CANADA" Value="CAN" />
                                                                                        <telerik:RadComboBoxItem runat="server" Text="CARSAM" Value="CSM" />
                                                                                        <telerik:RadComboBoxItem runat="server" Text="FCC AM" Value="AM" />
                                                                                        <telerik:RadComboBoxItem runat="server" Text="FCC FM" Value="FM" />
                                                                                        <telerik:RadComboBoxItem runat="server" Text="FCC TV" Value="TV" />
                                                                                        <telerik:RadComboBoxItem runat="server" Text="ARINC" Value="ARI" />
                                                                                        <telerik:RadComboBoxItem runat="server" Text="UNICOM" Value="UNI" />
                                                                                        <telerik:RadComboBoxItem runat="server" Text="AGENDA" Value="AGN" />
                                                                                    </Items>
                                                                                    <ItemTemplate>
                                                                                        <asp:CheckBox ID="chkSource" runat="server" onclick="collectSelectedItems();" Text='<%# DataBinder.Eval(Container, "Text") %>' />
                                                                                    </ItemTemplate>
                                                                                </telerik:RadComboBox>

Javascript:

function collectSelectedItems() {
            var combo = $find("<%= radComboSource.ClientID%>");
            var items = combo.get_items();

            var selectedItemsTexts = "";
            var selectedItemsValues = "";

            var itemsCount = items.get_count();
            for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {
                var item = items.getItem(itemIndex);
                var checkbox = getItemCheckBox(item);
                if (checkbox.checked) {
                    selectedItemsTexts += item.get_text() + ", ";
                    selectedItemsValues += item.get_value() + ", ";
                }
            }
            selectedItemsTexts = selectedItemsTexts.substring(0, selectedItemsTexts.length - 2);
            selectedItemsValues = selectedItemsValues.substring(0, selectedItemsValues.length - 2);
            //Set the text of the RadComboBox with the texts of the selected Items, separated by ','.
            combo.set_text(selectedItemsValues);
            document.getElementById("<%= radComboSource.ClientID%>").value = selectedItemsValues;           
        }

        function getItemCheckBox(item) {
            //Get the 'div' representing the current RadComboBox Item.
            var itemDiv = item.get_element();
            //alert(itemDiv);

            //Get the collection of all 'input' elements in the 'div' (which are contained in the Item).
            var inputs = itemDiv.getElementsByTagName("input");

            for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) {
                var input = inputs[inputIndex];

                //Check the type of the current 'input' element.
                if (input.type == "checkbox") {
                    return input;
                }
            }

            return null;
        }

function SRC_Changed(item) {
            var combo = $find("<%= radComboSource.ClientID%>");
            var items = combo.get_items();

            var itemsCount = items.get_count();
            for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {
                var item = items.getItem(itemIndex);
                var checkbox = getItemCheckBox(item);
                if (checkbox.checked) {
                    var comboSTT = $find("<%= radComboSTT.ClientID %>");
                    var comboTYP = $find("<%= radComboTYP.ClientID %>");
                    var lblSTT = document.getElementById("<%= lblSTT.ClientID %>");
                    var lblTYP = document.getElementById("<%= lblTYP.ClientID %>");
                    var lblDAT = document.getElementById("<%= lblDAT.ClientID %>");
                   
                    if ((item.get_value() == "FAA") || (item.get_value() == "NTIA") || (item.get_value() == "CAN") || (item.get_value() == "CSM") || (item.get_value() == "AM") || (item.get_value() == "FM") || (item.get_value() == "TV") || (item.get_value() == "ARI") || (item.get_value() == "UNI")) {
                        comboSTT.set_enabled(false);
                        document.getElementById('<%= txtSTT.ClientID%>').disabled = true;
                        lblSTT.style.background = 'LightGray'
                        
                        var itemsSTT = comboSTT.get_items();

                        var itemsCountSTT = itemsSTT.get_count();
                        for (var itemIndSTT = 0; itemIndSTT < itemsCountSTT; itemIndSTT++) {
                            var itemSTT = itemsSTT.getItem(itemIndSTT);
                            var checkboxSTT = getItemCheckBox(itemSTT);
                            if (checkboxSTT.checked) {
                                checkboxSTT.checked = false;
                            }
                        }
                        comboSTT.set_text("");

                        comboTYP.set_enabled(false);
                        document.getElementById('<%= txtTYP.ClientID%>').disabled = true;
                        lblTYP.style.background = 'LightGray'
                       
                        var itemsTYP = comboTYP.get_items();

                        var itemsCountTYP = itemsTYP.get_count();
                        for (var itemIndTYP = 0; itemIndTYP < itemsCountTYP; itemIndTYP++) {
                            var itemTYP = itemsTYP.getItem(itemIndTYP);
                            var checkboxTYP = getItemCheckBox(itemTYP);
                            if (checkboxTYP.checked) {
                                checkboxTYP.checked = false;
                            }
                        }
                        comboTYP.set_text("");

                                           }
                    else if ((item.get_value() == "APP") || (item.get_value() == "AGN")) {

                        comboSTT.set_enabled(true);
                        document.getElementById('<%= txtSTT.ClientID%>').disabled = false;
                        lblSTT.style.background= 'white';

                        comboTYP.set_enabled(true);
                        document.getElementById('<%= txtTYP.ClientID%>').disabled = false;
                        lblTYP.style.background = 'white';
                       
                     }
                }
            }
        }

Dimitar Terziev
Telerik team
 answered on 14 Nov 2011
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
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
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?