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

CommandItem custom javascript

15 Answers 296 Views

Grid

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

15 Answers, 1 is accepted

answered on 15 Apr 2009, 05:30 AM

Hello Jon,

A simple approach is to set the EditMode to PopUp which will automatically open up a PopUp Insert form and PopUp Edit form on clicking the AddNewRecordButton and EditButton respectively:

    
            <telerik:RadGrid ID="RadGrid2" runat="server" DataSourceID="SqlDataSource1">            
        
               <MasterTableView CommandItemDisplay="Top" EditMode="PopUp" DataSourceID="SqlDataSource1" > 
        
                   ....

If you are trying to open a RadWindow on clicking the EditButton or AddNewRecordButton then you can follow the approach illustrated in the following demo:
Window Editing

Thanks
Princy.

answered on 15 Apr 2009, 07:47 AM

Hi Princy,

Thanks for that. I'd decided against using a popup for it as people may need to have multiple windows opened from the list.

For a similar reason I'm loath to using a RadWindow in this instance. Yes the page would load into a RadWindow but it's still constrained by the limits of the page.

In addition to altering the Add New and Edit buttons I also need to be able to intercept a click anywhere on a row to open the same window as for the other two but in non-Edit mode. I tried the working with the OnCommand event but couldn't get it to fire - it always did an AJAX call first.

If the worst comes to the worst what is the easiest way of cancelling the InitInsert (or InsertInit) functionality in the AJAX call and changing to trigger a popup IE window?

Regards,

Jon

Accepted

answered on 15 Apr 2009, 01:29 PM

Thanks Sebastian but the problem is that I'm having to use the CommandItemTemplate as below:

    
                                <CommandItemTemplate> 
        
                                    <a href="#" onclick="return ShowInsertForm();">Add New Record</a> 
        
                                </CommandItemTemplate>

By doing that I end up with the somewhat ugly version (height is horrible and no image) as shown in the first to the two examples on your link.

I'd like to get the bottom Add new record button with the functionality shown above - that was why I was asking about the theme as perhaps I can make the anchor template have the + icon in it? I'm hoping that by including the icon it will fix the height issue on the header.

With respect to the rest of the issues I've mucked around with the code from the other link that you mentioned (http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandwindow/defaultcs.aspx?product=grid) and that all works a treat now. It's worth me mentioning that for the DoubleClick event I had a bit of a problem until I realised that I needed both of the DataKeyNames and ClientDataKeyNames fields present - originally I just had DataKeyNames. It maybe worth amending the example in case other people miss that one. and

Accepted

answered on 06 Jun 2009, 10:23 AM

Hi Alan,

Not sure where it went now but here are enough of the parts to get you going with it...

I've come across two quirks, if the form decorator is at the top of the page then the refresh makes the grid move down buy about 5 px when clicked - I think that was a problem outside of all this though.

The other quirk is that for some reason most of my pages using this show half of the refresh text in the VS designer rather than the proper code. Hard to explain but maybe it will happen to you maybe not. When it runs up you don't see the same thing - only when editing in VS. As it works I've never worried about this design time quirk.

JS near top of page

    
                    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
        
                        <script type="text/javascript">  
        
                            function ShowEditForm(id)  
        
                            {  
        
                                OpenFixedSizeWindow("PageForEdits.aspx?EditID=" + id);  
        
                                return false;   
        
                            }  
        
                            function ShowInsertForm()  
        
                            {  
        
                                OpenFixedSizeWindow("PageForInserts.aspx");  
        
                               return false;  
        
                           }  
        
                           function RowClick(sender, eventArgs) {  
        
                               OpenFixedSizeWindow("PageForViews.aspx?EditID=" + eventArgs.getDataKeyValue("IDOFKEYCOLUMNYOUUSE"));  
        
                           }  
        
                        </script> 
        
                    </telerik:RadCodeBlock>

In the above I use a formview control on the edit/insert/details page and simply add a View=x querystring to each of the page calls to determine the default formview mode.

CommandItemTemplate (note that the Add New Record is linked to a _allowEdits codebehind var based on user permissions, you could get rid of if necesary)

    
            <CommandItemTemplate> 
        
                                    <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">  
        
                                        <table class="fullWidth">  
        
                                            <tr> 
        
                                                <td> 
        
                                                    <a href="#" onclick="return ShowInsertForm();" style="visibility:<%=Iif(_allowEdits,"visible","hidden") %>"><img src='[A]<%=Page.ClientScript.GetWebResourceUrl(GetType(RadGrid), "Telerik.Web.UI.Skins." & Theme & ".Grid.AddRecord.gif") %>' alt="" border="0" /> Add new record</a> 
        
                                                </td> 
        
                                                <td align="right">  
        
                                                    <asp:LinkButton ID="LinkButton1" runat="server" CommandName="RebindGrid"><img   
        
                                                        src='<%=Page.ClientScript.GetWebResourceUrl(GetType(RadGrid), "Telerik.Web.UI.Skins." & Theme & ".Grid.Refresh.gif") %>'   
        
                                                        alt="" border="" /> Refresh</asp:LinkButton> 
        
                                                </td> 
        
                                            </tr> 
        
                                        </table> 
        
                                    </telerik:RadCodeBlock> 
        
                                </CommandItemTemplate>

In ClientSettings part of grid

    
            <ClientEvents OnRowClick="RowClick" ></ClientEvents>

Hope this helps,

Jon

answered on 09 Jun 2009, 01:36 PM

Hi Alan,

I actually manually set the theme in the page init function using

.Page.Theme=Session("Theme")

Theme is a session var for them. You need to make sure that the various Theme folders are present in App_Themes along with a skin file in each of them linking the theme to the various controls (http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/skin-vs-theme.aspx).

For this setup though you don't need to use that approach as I seem to remember that the image is in the resource file.

If you use themes normally then there must be a way to detect which one is active at the moment. You'd have thought so anyway ;)

Regards,

Jon

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

CommandItem custom javascript

15 Answers, 1 is accepted