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

CommandItem custom javascript

15 Answers 261 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 14 Apr 2009, 08:33 PM
Hi All,

I'm happy with the Add New Item button that the grid puts at the top of the page but would like to put some custom javascript in to open a new window when it's clicked rather than doing an inline edit.

I've seen the Command Item Template help page however that discusses adding in new buttons. 

Is there a way to change the javascript for the default "Add new item" Command button OR is there a way to create a new button and style it the same way as that default button?

I'll also need similar functionality for the Edit button although am not so worried with that as it's a plain old anchor style button...

Many Thanks,

Jon

15 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
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.
0
Jon
Top achievements
Rank 1
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
0
Accepted
Sebastian
Telerik team
answered on 15 Apr 2009, 07:55 AM
Hello Jon,

I think that the integration example linked below covers most of the functionality you requested:

http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandwindow/defaultcs.aspx?product=grid

Review the description/code snippets in the demo as well as the linked KB article under the Description section for more details. You can also modify/extend the solution to cover your additional requirements.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jon
Top achievements
Rank 1
answered on 15 Apr 2009, 11:38 AM
Thanks Sebastian,

I'll have a look now and see if I can adapt it to open as a new IE window.

In the meantime, if I create the "Add new record" button, how do I get the icon to change depending on the theme?  I want it to look like the normal preset "Add new record" button.

Regards,

Jon
0
Sebastian
Telerik team
answered on 15 Apr 2009, 12:46 PM
Hello Jon,

The 'Add new record' button is common for all grid embedded skins as you can test on the following online demo of RadGrid using the skin chooser on top:

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/commanditem/defaultcs.aspx

Therefore, if you design this exact type of button it should be complaint with the grid skins.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jon
Top achievements
Rank 1
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> 
                        <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

0
Jon
Top achievements
Rank 1
answered on 16 Apr 2009, 11:29 AM
Hi All,

Anyone know the solution to this?  Essentially I want to use the plus icon from the bottom of the two grids shown in this link - http://demos.telerik.com/aspnet-ajax/grid/examples/programming/commanditem/defaultcs.aspx -, I want to use the image in a custom command. 

Ideally I'd attach my custom command to the standard Add new record button.  Otherwise I think I may need to use the GetWebResourceUrl approach - is that right?

Regards,

Jon
0
Accepted
Sebastian
Telerik team
answered on 17 Apr 2009, 03:38 PM
Hello Jon,

One possible option is to make a copy of this default button and add it as image button in your command item template as discussed previously. The other option would be to fetch the image button url directly from the embedded grid skins, for example:

<asp:ImageButton id="btnAdd" runat="server" ImageUrl='<%= Page.ClientScript.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Outlook.Grid.AddRecord.gif") %>''

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Jon
Top achievements
Rank 1
answered on 17 Apr 2009, 08:29 PM
Hi Sebastian,

Not to worry - I eventually figured it out and posted an answer to myself into the code examples - which you moved into the forums ;)

Thanks anyway,

Have a good weekend.

Cheers,

Jon
0
Alan
Top achievements
Rank 1
answered on 06 Jun 2009, 04:46 AM
Jon,

Can you send me the link to your solution?

Thanks,

Alan
0
Jon
Top achievements
Rank 1
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> 
                                        <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
0
Alan
Top achievements
Rank 1
answered on 09 Jun 2009, 02:24 AM
Jon,

Thanks for posting this.  Unfortunately, I get the following error when I try to compile in debug:

Compiler Error Message: CS0118: 'Telerik.Web.UI.RadGrid' is a 'type' but is used like a 'variable'

Have you seen that before?

Thanks,

Alan
0
Jon
Top achievements
Rank 1
answered on 09 Jun 2009, 08:10 AM
Hi Alan,

No I'm afraid that I haven't. 

It must be something to do with the image setup so I'd suggest removing that to see.  If you get it working without try putting the image code onto a separate page on it's own and seeing if you get an image.

I assume tat you realised that Theme is a variable in my app that stores the current theme name.

Cheers,

Jon

0
Alan
Top achievements
Rank 1
answered on 09 Jun 2009, 12:15 PM
Thanks for the reply Jon.  I got most of it working.  Would you mind sharing the code to detect the selected Theme?  I removed that from your snippet to get me going, but I can't find a reference in the Telerik guides to do what you've done to detect the theme.  I appreciate your help.

Alan
0
Jon
Top achievements
Rank 1
answered on 09 Jun 2009, 01:36 PM
Hi Alan,

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

Me

 

.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

 

Tags
Grid
Asked by
Jon
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Jon
Top achievements
Rank 1
Sebastian
Telerik team
Alan
Top achievements
Rank 1
Share this question
or