[Solved] RadGrid customValidation client side JS get edit item values

[mqsash]

Hi

I'm trying to implement a clientside custom validation for my rad grid, and while I have managed to write the javascript function that gets called when the custom validator is fired, I am not sure how to access the edit form controls inside the function.

Here's a stripped down version of my markup. 
Basically the grid has a "location" column and a "Storage Location" column and I use a FormTemplate based edit form for the insert/edit.
When inserting a record, I need to validate that only one of these two is selected.

<telerik:RadGrid

  SkinID="myTemplate"

  ID="myGrid"

  runat="server"

  DataSourceID="myDataSourceID"

  OnInsertCommand="OnInserting"

  OnUpdateCommand="OnUpdating">

   

  <MasterTableView

    DataKeyNames="myDataKey">

   

    <CommandItemSettings

      AddNewRecordText="Assign Location" />

 

    <EditFormSettings

      CaptionFormatString="Edit Location"

      InsertCaption="Add New Location"

      EditFormType="Template">

 

      <FormTemplate>

        <!--   Begin Edit Item Table Template   -->

 

          <table id="Table10">

 

            <tr>

              <td>

                <des:LocalizableLabel

                  ID="Location"

                  runat="server"

                  Text="Location"></des:LocalizableLabel>

              </td>

              <td>

 

                <aec:TelerikAutoCompleteBox

                  ID="locationsAutoComplete"

                  runat="server"

                  DataSourceID="sqlLocationAutocomplete"

                  DataTextField="Name"

                  DataValueField="Location_ID"

                  Filter="Contains"

                  TextSettings-SelectionMode="Single"

                  InputType="Text">

                </aec:TelerikAutoCompleteBox>

 

              </td>

            </tr>

 

            <tr>

              <td>

                <des:LocalizableLabel

                  ID="StorageLocation"

                  runat="server"

                  Text="Storage Location"></des:LocalizableLabel>

              </td>

              <td>

                <aec:TelerikDropDown

                  runat="server"

                  DataField="Storage_Location"

                  DataTextField="Storage_Location"

                  DataValueField="Storage_Location"

                  DataSourceID="sqlStorageLocation"

                  ID="storageLocationDropDown">

                </aec:TelerikDropDown>

               

                  <asp:CustomValidator

                    runat="server"

                    ID="customValidator1"

                    ClientValidationFunction="EquipmentLocation_ClientValidate"

                    OnServerValidate="validateLocation"

                    ControlToValidate="storageLocationDropDown"

                    ErrorMessage="Must select either Location or Storage Location."

                    Display="static">

                   </asp:CustomValidator>

              </td>

            </tr>

        </table>

        <AERadGrid:EditFormSaveCancelButtons

          ID="locationAssignEditFormButtons"

          runat="Server">

        </AERadGrid:EditFormSaveCancelButtons>

        <!--   End Edit Item Table Template   -->

 

      </FormTemplate>

 

    </EditFormSettings>

 

    <Columns>

      <telerik:GridBoundColumn

        UniqueName="Location_Name"

        HeaderText="Location"

        DataField="Location_Name">

      </telerik:GridBoundColumn>

 

      <telerik:GridBoundColumn

        UniqueName="Storage_Location"

        HeaderText="Storage Location"

        DataField="Storage_Location">

      </telerik:GridBoundColumn>

 

    </Columns>

  </MasterTableView>

</telerik:RadGrid>

Here's the JS

function EquipmentLocation_ClientValidate(source, args) {

    //get a reference to the calling validator control
    var CustomValidator1 = source.id;

    /* get the values of the location auto complete and the storage location ddl and compare.*/
    var storageLocation = args.Value;
    var location = ?? //GET the value out of the autocomplete box....how?

}

Now the JS function does get called as expected, in which I want to check the selected values in the autocomplete and the dropdown and allow only one to be selected. The value of the drop down is directly available in the args, but I'm not sure how I can get the value out of the autocompletebox on the edit form.

How do we get it?

Thanks

[mqsash]

I finally got the javascript function to work using the following code. Let me know if there is a better way to get the value of the autocompletebox.

function EquipmentLocation_ClientValidate(source, args) {

  var locationAutoCompleteID = source.id.replace("customValidator1", "locationsAutoComplete");
  var locationAutoCompleteValue = $("#" + locationAutoCompleteID).text();
  var storageLocationValue = args.Value;

  if (locationAutoCompleteValue.trim().length > 0 && storageLocationValue.trim().length > 0) {
    args.IsValid = false;
  }
  else {
    args.IsValid = true;
  }

}

Thanks