Simple Hide /Show client side event for Insert /Edit

[Farhan]

Hi,

 I have a simple problem but have been having a frustrating time figuring this out. I have a html table which has two rows 'trExistingCustomer' and 'trNewCustomer'. I have an edit popup form on the grid. I want to show a certain row and hide the other based on what command the grid is trying to do (Inset / Edit). I use Jquery in a RadCodeBlack to do this, I am firing a function on the ClientEvent OnPopUpShowing. how I can I check if this was triggered from Insert comand or Edit command in the javascript. I already tried using the function onCommand (Please see code) I saw another example and thought this might be the relevant function but this is not working and it displays all rows. Can someone please show an example in code how to check for the calling command in the popup function or onCommand to do this right? Also is there a list of all client side events asscociated with the edit form and the grid somewhere, I think that would be helpful to know. Any help is appreciated

HTML table in Edit popup form in RadGrid

   <table id="tblEditPopup" style="width:100%; height:100%">
     <tr id="trExistingCustomer" >
                              <td align="right">
                                 Select Existing Customer:
                              </td>
                              <td>
                                  <telerik:RadComboBox  ID="cboxCustomers" runat="server" AutoPostBack="true" DataSourceID="CustomerObjectDataSource" DataTextField="CustomerName" DataValueField="customer_id"  SelectedValue='<%# Bind("customer_id") %>' >

                                  </telerik:RadComboBox>
                              </td>
                               <td align="right">
                                 Abbreviation:
                               </td>
                              <td>
                                 <asp:TextBox ID="txtCustAbbreviation" runat="server" Text='<%# Bind("CustomerAbbrev") %>' ></asp:TextBox>
                               </td>
                            </tr>

                            <tr id="trNewCustomer" >
                               <td align="right">
                                  Customer Name:
                               </td>
                               <td>
                                 <asp:TextBox ID="txtCustomerName" runat="server" Text='<%# Bind("CustomerName") %>' ></asp:TextBox>
                               </td>
                               <td align="right">
                                 Abbreviation:
                               </td>
                               <td>
                                 <asp:TextBox ID="txtNewAbbreviation" runat="server" Text='<%# Bind("CustomerAbbrev") %>'  ></asp:TextBox>
                               </td>
                            </tr>



                            <tr>
                               <td align="right">
                                  City:
                               </td>
                               <td>
                                 <asp:TextBox ID="txtCity" runat="server" Text='<%# Bind("City") %>' ></asp:TextBox>
                               </td>
                               <td align="right">
                                 State:
                               </td>
                               <td>
                                   <telerik:RadComboBox ID="cboxStates" runat="server" DataSourceID="StatesObjectDataSource" DataTextField="description" DataValueField="description" AutoPostBack="false"  SelectedValue='<%# Bind("State") %>'>

                                   </telerik:RadComboBox>
                               </td>
                            </tr>

                            <tr>
                              <td align="center" colspan="4" style="" >
                                 <asp:Button ID="BtnSubmit"  Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'  />
                                 <asp:Button ID="BtnCancel" Text="Cancel" runat="server" CausesValidation="false" CommandName="Cancel" />
                              </td>
                            </tr>

                        </table>


GRID's CLIENT SIDE EVENTS
 <ClientSettings>
                <ClientEvents OnPopUpShowing="PopUpShowing" OnCommand="onCommand"  />
   </ClientSettings>

JAVASCRIPT

 <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">

       var popUp;
                function PopUpShowing(sender, eventArgs) {
                    popUp = eventArgs.get_popUp();

                     //This works when the popup comes up but how can I tell if its called from the Edit or Insert command??
                        $('#trExistingCustomer').css('display', 'block');
                        $('#trNewCustomer').css('display', 'none');


                }

        //This seems a more logical place to put this but this does not work , is there another command I should be checking for??
         function onCommand(sender, args) {

                    if (args.get_commandName() == "InitInsert")
                   {
                        $('#trExistingCustomer').css('display', 'block');
                        $('#trNewCustomer').css('display', 'none');
                   }

                   else if(args.get_commandName() == "InitEdit") {
                        $('#trExistingCustomer').css('display', 'block');
                        $('#trNewCustomer').css('display', 'none');
                   }

   </script>
        </telerik:RadCodeBlock>

[Farhan]

Hi,

  I have had no replies to my issue? Can someone from the Telerik team please respond and help me out here, its very critical that I understand how I can use client side events on the edit popup form on the grid...I could use some help here

[Princy]

Hello Farhan,

You can try the code in 'OnCommand' client event and use the approach mentioned in the following code library  to retrieve editor values on client:
Retrieving grid editor value client side

Hope this helps,
Princy.

[Marin]

Hi Farhan,

 You can use either one of the events to check whether insert or edit command has been fired. Below you can find the proper code. Also more information on the client-side API of the grid can be found in these help topics:
Getting Familiar with Client-side API
RadGrid Class Members
GridTableView Class Members

function onCommand(sender, args)
                {
                    if (args.get_commandName() == "InitInsert")
                    {
                        //insert command
                    }
                    else if (args.get_commandName() == "Edit")
                    {
                        //edit command
                    }
                }

                function popupShowing(sender, args)
                {
                    if (sender._editIndexes.length !=0 )
                    {
                        //edit command
                    }
                    else if (sender.get_masterTableView().get_isItemInserted())
                    {
                        //insert command
                    }
                }

Hope this helps.

Regards,
Marin
the Telerik team

[Farhan]

Hi, after a couple of frustrating hours I got it to work yesterday using the
(sender.get_masterTableView().get_isItemInserted())

in popupshowing client side event. It would have made more sense to do it in the OnCommand event but it never worked for me I was doing the same thing, checking to see if the command is in Edit but running the same Jquery lines to hide and show the rows did nothing. I ended up finding the other event to get it to work. I am now trying to clear the value of a text box but cant get that to work
I have tried but none of these are working. I even tried replacing the textbox and trying it with a RadTextbox using (please see below)

//this throws error The name 'txtNewAbbreviation' does not exist in the current context

 

var txtAbbrev = $find("<%=txtNewAbbreviation.ClientID%>");

 

txtAbbrev.set_value("");


//Have also tried this replacing the txtAbbrev with Rad Textbox and still doesnt work

$telerik.$('#txtNewAbbreviation).val('')

 

 

   $('#txtCity').attr('value', '');

    

   $('#txtCity').val('');

[Marin]

Hello Farhan,

 The server controls in ASP.NET render a different client-side ID depending on the page structure and whether it is a postback or not. That is why the $("server-id") function does not always work. You need the client-side id of the HTML element to find those controls. Especially if the textbox is inside some other control or template. If you are using RadTextBox on way to get its ID will be to handle the OnLoad event of the control and then assign the whole client-side object (which is the "sender" argument of the handler) to a global variable that you can later access in other functions. Note that you also need to put the client-side code in a RadCodeBlock so that the <%= %> tags can be evaluated correctly.

<telerik:RadGrid runat="server" ID="RadGrid1" ... >
.....
<ItemTemplate>

    <telerik:RadTextBox runat="server" ID="RadTextBox1">
                                <ClientEvents OnLoad="txbLoad" />
                            </telerik:RadTextBox>
....
</ItemTemplate>
</telerik:RadGrid>

<telerik:RadCodeBlock runat="server">

            <script type="text/javascript">

            var txb1;

                function txbLoad(sender, args)

                {

                    txb1 = sender;

                    debugger;

                }

 

                function otherFunction()

                {

                    if (txb1)

                    {

                        //txb1 is the client-side object of the RadTextBox
                                txb1.set_value("");

                    }

                }

            </script>

        </telerik:RadCodeBlock>

Hope this helps.Best wishes,
Marin
the Telerik team

[Farhan]

Hi Marin

   Thanks for your reply that helped me a bit, I was also having some difficulty trying to access the control to set its text value I ended up using 

 

var txtnew = $('[id$=txtNewCustomer');
txtnew.text = "New Text";

This works for me since the control was inside a Masterpage and the ID was changed on the client side in the browser, hope that helps someone else as well.