This is a migrated thread and some comments may be shown as answers.

Popup Scheduler from a grid button

2 Answers 114 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 30 Jan 2019, 12:31 PM

     I am trying to achieve this:

1. I have a master page (this has an AjaxManager)

2. I have a content page (this has an AjaxManager Proxy)

3. I have a RadGrid (GrdEnquiries) on the content page with a button labelled "Add Viewing" (BtnAddViewing). This grid contains details of people enquiring about leasing real estate properties.

4. The Add Viewing Button has a command argument matching the row ID of the grid (GrdEnquiries)

I want to be able to click the Add Viewing button and load a scheduler with an Advanced Form open in Insert Mode. The form is populated using a look up from the database to get the ID of the record passed from the command argument. When the INSERT button on the form is clicked I want the viewing to be added to the Appointments Table in the database, the window to close, and code executed in the grid to refresh the grid so that I can hide btnAddViewing and replace it with another button allowing me to display the appointment details in a Popup.

I have tried several examples both the demos for RadGrid and RadScheduler but I cannot work out how to do it. I have the code for:

1. Adding the command argument.

2. Opening a rad window and displaying the command argument.

3. Adding my scheduler form.

I cannot find an event that fires when the INSERT button is clicked so I am stuck. Can anyone provide me with the bit I am missing please?

This is my code for opening the page inside the window:

<telerik:RadCodeBlock ID="RadCodeBlock3" runat="server">
    <script type="text/javascript">
        function ShowInsertForm(id, rowIndex) {
            var grid = $find("<%=grdRightmove.ClientID%>");
            var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
            grid.get_masterTableView().selectItem(rowControl, true);
            window.radopen("viewing_arrange_popout.aspx?id=" + id, "UserListDialog2");
            return false;
        }
        function refreshGrid(arg) {
            if (!arg) {
                find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("RebindRightMove");
            } else {
                find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("RebindAndNavigateRightMove");
            }
        }
    </script>
</telerik:RadCodeBlock>

This is the Window Manager on the content page (I use UserListDialog2):

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Bootstrap">
    <Windows>
        <telerik:RadWindow RenderMode="Classic" ID="UserListDialog" runat="server" Title="Interactions" Width="1000" height="800" ReloadOnShow="true" ShowContentDuringLoad="false" Modal="true" VisibleStatusbar="False" Skin="Bootstrap" Animation="FlyIn" AutoSize="True" Behaviors="Close" AnimationDuration="600" AutoSizeBehaviors="Height">
        </telerik:RadWindow>
        <telerik:RadWindow ID="UserListDialog2" runat="server" Title="Viewing" Height="800px"
                           Width="800px" ReloadOnShow="true" ShowContentDuringLoad="false"
                           Modal="true" VisibleStatusbar="False">
        </telerik:RadWindow>
 
    </Windows>
</telerik:RadWindowManager>

 

My grid markup (I've removed some columns for clarity):

<telerik:RadGrid ID="grdRightmove" runat="server" AllowPaging="True" AllowSorting="True" Skin="Bootstrap" AutoGenerateColumns="False" Culture="en-GB" ShowFooter="True" MasterTableView-AllowMultiColumnSorting="True" PageSize="50" AllowFilteringByColumn="True" DataSourceID="SqlDataSourceEnquiries" EnableViewState="False" Width="100%" GroupingEnabled="False">
            <ClientSettings>
                <Selecting AllowRowSelect="True"></Selecting>
                <Scrolling AllowScroll="False" UseStaticHeaders="True"/>
                <Resizing ResizeGridOnColumnResize="true" AllowResizeToFit="true" AllowColumnResize="True" AllowRowResize="True" EnableRealTimeResize="True"></Resizing>
                <ClientEvents OnRowDblClick="RowDblClick"></ClientEvents>
            </ClientSettings>
            <MasterTableView DataKeyNames="Id, ApplicationID, ViewingBooked" CommandItemDisplay="Top" AllowMultiColumnSorting="True"  AllowFilteringByColumn="True" AllowSorting="True" >
                <PagerStyle AlwaysVisible="True"/>
               <Columns>
                    <telerik:GridBoundColumn DataField="Id" DataType="System.Int32" HeaderText="Id" ReadOnly="True" SortExpression="Id" UniqueName="Id" Visible="False" AllowFiltering="False" AllowSorting="False"/>
               <telerik:GridTemplateColumn DataField="Id" HeaderText="Viewing<br>Booked" SortExpression="Id" UniqueName="ViewingBooked" Groupable="False" AllowFiltering="False" AllowSorting="False">
                    <ItemTemplate>
                        <asp:Label ID="lblViewingBooked" runat="server"></asp:Label>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn DataField="Id" HeaderText="Actions" SortExpression="Id" UniqueName="ResendInvite" Groupable="False" AllowFiltering="False" AllowSorting="False">
                        <ItemTemplate>
                           <telerik:RadButton ID="btnAddViewing" runat="server" Text="Add Viewing"/>
                       </ItemTemplate>
 
                    </telerik:GridTemplateColumn>
               </Columns>
            </MasterTableView>
        </telerik:RadGrid>

 

Item Created looks like this:

If TypeOf e.Item Is GridDataItem Then
            dim theID as Integer=CType(e.Item.OwnerTableView.DataKeyValues(e.Item.ItemIndex)("Id"), Integer)
            dim theViewingBooked as Boolean=CType(e.Item.OwnerTableView.DataKeyValues(e.Item.ItemIndex)("viewingBooked"), Boolean)
            Dim lblViewingBooked As Label = DirectCast(e.Item.FindControl("lblViewingBooked"), Label)
            if theViewingBooked=true then
                lblViewingBooked.Text="<i class='fas fa-check-circle 2x'></i>"
            else
                lblViewingBooked.Text="<i class='far fa-times-circle 2x'></i>"
            End If
 
            Dim thisDataItem as griddataitem=ctype(e.Item,griddataitem)
            dim theApplicationId as Integer=CType(thisDataItem.GetDataKeyValue("ApplicationID"), Integer)
            Dim btnAddViewing As Radbutton = DirectCast(e.Item.FindControl("btnAddViewing"), RadButton)
            btnAddViewing.Attributes("href") = "javascript:void(0);"
            btnAddViewing.Attributes("onclick") = [String].Format("return ShowInsertForm('{0}','{1}');", theApplicationId, e.Item.ItemIndex)
        End If

 

The page I am putting into the Radwindow is this:

<script type="text/javascript">
            function CloseAndRebind(args)
            {
                GetRadWindow().BrowserWindow.refreshGrid(args);
                GetRadWindow().close();
            }
  
            function GetRadWindow()
            {
                var oWindow = null;
                if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog
                else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)
  
                return oWindow;
            }
  
            function CancelEdit()
            {
                GetRadWindow().close();
            }
        </script>
 
        <asp:Label ID="lblApplicationID" runat="server" Text=""></asp:Label>
         
         <telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedDate="2012-04-16"
                                      Height="1000px" Width="1500px" DataSourceID="DADDataSource"
                                      DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start" DataEndField="End" OverflowBehavior="Auto" ShowAllDayRow="True" Skin="Bootstrap" StartInsertingInAdvancedForm="True" DayEndTime="21:00:00" DayView-DayEndTime="21:00:00" DayView-WorkDayEndTime="21:00:00" DayStartTime="07:00:00" DayView-DayStartTime="07:00" DayView-WorkDayStartTime="07:00" MultiDayView-DayEndTime="21:00" MultiDayView-DayStartTime="07:00" MultiDayView-WorkDayEndTime="21:00" MultiDayView-WorkDayStartTime="07:00" WeekView-DayEndTime="21:00" WeekView-DayStartTime="07:00" WeekView-WorkDayEndTime="21:00" WeekView-WorkDayStartTime="07:00" WorkDayEndTime="21:00:00" WorkDayStartTime="07:00:00" Culture="en-GB" TimelineView-StartTime="07:00" MinutesPerRow="15" HoursPanelTimeFormat="HH:mm tt" DataDescriptionField="Description" DataReminderField="Reminder" RowHeight="30px" EnableDescriptionField="True" RenderMode="Classic" ViewStateMode="Enabled" AdvancedForm-Modal="True" Reminders-Enabled="True" ExportSettings-FileName="TasksExport" Localization-AdvancedNewAppointment="New Task" Localization-AdvancedEditAppointment="Edit Task" Localization-AdvancedSubjectRequired="Please provide task subject" Localization-ConfirmDeleteText="Are you sure you want to delete this task?" EnableRecurrenceSupport="False" GroupBy="Date, Staff" GroupingDirection="Horizontal" TimelineView-UserSelectable="False" MultiDayView-UserSelectable="False">
                    <ExportSettings FileName="TasksExport" OpenInNewWindow="True" Pdf-PaperSize="A4" Pdf-AllowPrinting="True" Pdf-FontType="Embed"/>
                    <AdvancedForm Modal="true"></AdvancedForm>
                    <Reminders Enabled="true"></Reminders>
                    <AgendaView UserSelectable="true" ResourceMarkerType="Block"/>
                    <WeekView UserSelectable="true"/>
                    <DayView UserSelectable="true"/>
                    <MultiDayView UserSelectable="false"/>
                    <Localization AdvancedEditAppointment="Edit Task" AdvancedNewAppointment="New Task" AdvancedSubjectRequired="Please provide task subject" ConfirmDeleteText="Are you sure you want to delete this task?"/>
                    <TimelineView UserSelectable="false"/>
                    <MonthView UserSelectable="true"/>
                    <ResourceTypes>
                        <telerik:ResourceType KeyField="ID" Name="Staff" TextField="Name" ForeignKeyField="UserID"
                                              DataSourceID="UsersDataSource"></telerik:ResourceType>
                        <telerik:ResourceType KeyField="ID" Name="AssignedByID" TextField="Name" ForeignKeyField="AssignedByID"
                                              DataSourceID="AssignedByDataSource"></telerik:ResourceType>
                    </ResourceTypes>
                     
                    <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
                    <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
                </telerik:RadScheduler>
                <asp:SqlDataSource ID="DADDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:INTERPROPConnectionString %>"
                                   SelectCommand="SELECT * FROM [UserTasks]" InsertCommand="INSERT INTO [UserTasks] ([Subject], [Description], [Start], [End], [AssignedByID], [UserID], [Reminder], [Annotations]) VALUES (@Subject, @Description, @Start, @End, @AssignedByID, @UserID, @Reminder, @Annotations)"
                                   UpdateCommand="UPDATE [UserTasks] SET [Subject] = @Subject, [Description] = @Description, [Start] = @Start, [End] = @End, [AssignedByID] = @AssignedByID, [UserID] = @UserID,  [Reminder] = @Reminder, [Annotations] = @Annotations WHERE [ID] = @ID"
                                   DeleteCommand="DELETE FROM [UserTasks] WHERE [ID] = @ID">
                    <DeleteParameters>
                        <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
                    </DeleteParameters>
                    <UpdateParameters>
                        <asp:Parameter Name="Subject" Type="String"></asp:Parameter>
                        <asp:Parameter Name="Description" Type="String"></asp:Parameter>
                        <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
                        <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
                        <asp:Parameter Name="AssignedByID" Type="Int32"></asp:Parameter>
                        <asp:Parameter Name="UserID" Type="Int32"></asp:Parameter>
                        <asp:Parameter Name="Reminder" Type="String"/>
                        <asp:Parameter Name="Annotations" Type="String"/>
                        <asp:Parameter Name="ID" Type="Int32"/>
                    </UpdateParameters>
                    <InsertParameters>
                        <asp:Parameter Name="Subject" Type="String"></asp:Parameter>
                        <asp:Parameter Name="Description" Type="String"></asp:Parameter>
                        <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
                        <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
                        <asp:Parameter Name="AssignedByID" Type="Int32"></asp:Parameter>
                        <asp:Parameter Name="UserID" Type="Int32"/>
                        <asp:Parameter Name="Reminder" Type="String"/>
                        <asp:Parameter Name="Annotations" Type="String"/>
                    </InsertParameters>
                </asp:SqlDataSource>
                <asp:SqlDataSource ID="UsersDataSource" runat="server"
                                   ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:INTERPROPConnectionString %>"
                                   SelectCommand="SELECT * FROM [Users] WHERE Active=1  AND UseDad=1 ORDER BY Name">
                </asp:SqlDataSource>
                <asp:SqlDataSource ID="AssignedByDataSource" runat="server"
                                   ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:INTERPROPConnectionString %>"
                                   SelectCommand="SELECT * FROM [Users] WHERE Active=1 AND UseDad=1  ORDER BY Name">
                </asp:SqlDataSource>
         
 
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />

 

Code behind for pop up:

Private Sub ArrangeViewingPopoutWindowLoadEvent(sender As Object, e As EventArgs) Handles Me.Load
            If Not IsPostBack Then
                ' Sanity check to make sure the ID is being passed through
                lblApplicationID.Text=request.QueryString("id")
                RadScheduler1.ShowAdvancedInsertForm(DateTime.Now)
 End If
        End Sub
 
    
    Private Sub RadScheduler1_FormCreated(sender As Object, e As SchedulerFormCreatedEventArgs) Handles RadScheduler1.FormCreated
        If e.Container.Mode = SchedulerFormMode.AdvancedInsert Then
            ' This will read information from the enquiry record and populate the controls with (for example) name/address/phone number in description
             
        End If
    End Sub

 

The button code (which I don't really want as I want the insertion of the appointment to trigger a close/grid rebind) is:

Private Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click
        ' THIS BIT SHOULD CLOSE THE WINDOW AND REBIND THE ENQUIRIES GRID
        ' IDEALLY I WANT THIS TO HAPPEN AFTER THE INSERT (WHICH DOESN'T HAPPEN) SO THEY DON'T HAVE TO PRESS ANOTHER BUTTON!
        ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CloseAndRebind(Rebind);", True)
    End Sub

I feel like this is ALMOST there but I am missing something obvious and I am now going bald pulling my hair out and my forehead is getting flatter from banging it on my desk.

Can anyone please help?

Screenshots to show flow if it helps are attached:

Thank you ...

Nick

 

 

2 Answers, 1 is accepted

Sort by
0
david
Top achievements
Rank 1
answered on 08 Feb 2019, 06:51 PM

We do it like this

1) add an event to the grid 
 OnItemCreated="RadGrid1_ItemCreated"

2) add the control

   <telerik:GridTemplateColumn HeaderText="Edit" UniqueName="changeAppointTemplate" AllowFiltering="false">
                <ItemTemplate>
                    <asp:HyperLink ID="changeAppoint" runat="server" ImageUrl="~/images/iCal-Metro-icon.png" ToolTip="Change Appointment"></asp:HyperLink>
                </ItemTemplate>
                <ItemStyle Width="25px" HorizontalAlign="Center" />
            </telerik:GridTemplateColumn>

3) hook up the JS function to the control

 protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            
            HyperLink changeAppointlnk = e.Item.FindControl("changeAppoint") as HyperLink;
            changeAppointlnk.Attributes["href"] = "#";
            changeAppointlnk.Attributes["onclick"] = string.Format("return AppointmentEdit('{0}');", e.Item.ItemIndex);
}
}

4) call the scheduler advanced form

     function AppointmentEdit(rowIndex) {
            var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
            mtv.selectItem(mtv.get_dataItems()[rowIndex].get_element());
            var selectedRows = mtv.get_selectedItems();
            var row = selectedRows[0];
            var aid = mtv.getCellByColumnUniqueName(row, "ID");
            var ID = aid.innerHTML;
            var cid = mtv.getCellByColumnUniqueName(row, "ClientID");
            var ClientID = cid.innerHTML;
            var oWindow = window.radopen("CalenderAdvancedForm.aspx?Mode=Edit&Agenda=true&AppointmentID=" + ID + "&ClientID=" + ClientID, "Edit Calendar Event");
            oWindow.Maximize();
            oWindow.SetTitle("Edit Appointment");
            oWindow.Center();
        }

 

 

0
david
Top achievements
Rank 1
answered on 08 Feb 2019, 06:53 PM

this works

   <telerik:GridTemplateColumn HeaderText="Edit" UniqueName="changeAppointTemplate" AllowFiltering="false">
                <ItemTemplate>
                    <asp:HyperLink ID="changeAppoint" runat="server" ImageUrl="~/images/iCal-Metro-icon.png" ToolTip="Change Appointment"></asp:HyperLink>
                </ItemTemplate>
                <ItemStyle Width="25px" HorizontalAlign="Center" />
            </telerik:GridTemplateColumn>

 add an event to the grid -->OnItemCreated="RadGrid1_ItemCreated"

 protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
 {
        if (e.Item is GridDataItem)
        {
            
            HyperLink changeAppointlnk = e.Item.FindControl("changeAppoint") as HyperLink;
            changeAppointlnk.Attributes["href"] = "#";
            changeAppointlnk.Attributes["onclick"] = string.Format("return AppointmentEdit('{0}');", e.Item.ItemIndex);
}
}


        function AppointmentEdit(rowIndex) {
            var mtv = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
            mtv.selectItem(mtv.get_dataItems()[rowIndex].get_element());
            var selectedRows = mtv.get_selectedItems();
            var row = selectedRows[0];
            var aid = mtv.getCellByColumnUniqueName(row, "ID");
            var ID = aid.innerHTML;
            var cid = mtv.getCellByColumnUniqueName(row, "ClientID");
            var ClientID = cid.innerHTML;
            var oWindow = window.radopen("CalenderAdvancedForm.aspx?Mode=Edit&Agenda=true&AppointmentID=" + ID + "&ClientID=" + ClientID, "Edit Calendar Event");
            oWindow.Maximize();
            oWindow.SetTitle("Edit Appointment");
            oWindow.Center();
        }

Tags
Grid
Asked by
Nick
Top achievements
Rank 1
Answers by
david
Top achievements
Rank 1
Share this question
or