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

RadGrid customValidation client side JS get edit item values

1 Answer 266 Views
Grid
This is a migrated thread and some comments may be shown as answers.
mqsash
Top achievements
Rank 1
mqsash asked on 15 Apr 2013, 08:48 PM
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

1 Answer, 1 is accepted

Sort by
0
mqsash
Top achievements
Rank 1
answered on 15 Apr 2013, 11:42 PM
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
Tags
Grid
Asked by
mqsash
Top achievements
Rank 1
Answers by
mqsash
Top achievements
Rank 1
Share this question
or