MVC Telerik Grid Checkbox

[Andrew]

We have a checkbox within a Telerik Grid.  It is bound to our ViewModel.

Example View:

@(Html.Telerik().Grid<RoleViewModel>()
        .Name("RoleGrid")
        .DataKeys(k => k.Add(m => m.Role))
        .ToolBar(c => c.SubmitChanges())
        .DataBinding(db => db.Ajax().OperationMode(GridOperationMode.Client)
            .Select("SelectClientSideRole", "User")
            .Update("UpdateClientSideRole", "User"))
        .Columns(c => {
            c.Bound(m => m.Role).Hidden(true);
            c.Bound(m => m.Description).ReadOnly(true);
            c.Bound(m => m.IsInRole)
                .ClientTemplate("<input name='IsInRole<#= Id#>' id='IsInRole<#= Id#>' type='checkbox' <#= IsInRole ? checked='checked' : '' #> />").Title("Is in role");
        })
        .Editable(e => e.Mode(GridEditMode.InCell))
        .ClientEvents(e => e
            .OnDataBinding("roleGrid.onDataBinding")
            .OnRowDataBound("roleGrid.onRowDataBound")
            .OnSubmitChanges("roleGrid.onSubmitChanges")
            .OnComplete("roleGrid.onComplete")
            .OnError("roleGrid.onError")))

Above is our exact code.  The issue with Telerik Test Studio is simulating a checkbox click.  Source code for the checkbox looks like this:

<td class="t-last">
  <input name="IsInRole0" id="IsInRole0" type="checkbox">
</td>

When we hover over the checkbox to simulate the click, the source code changes to the following:

<td class="t-last t-grid-edit-cell">
  <input class="check-box" data-val="true" data-val-required="The IsInRole field is required."
    id="IsInRole" name="IsInRole" type="checkbox" value="false">
  <input name="IsInRole" type="hidden" value="false">
  <span class="field-validation-valid" data-valmsg-for="IsInRole" data-valmsg-replace="true">
  </span>
</td>

When we hover over the checkbox to simulate the click, we loose our unique attribute for the checkbox. The input id attrivute "IsInRole0" changes to "IsInRole".  So when we record our test and then run the test, it fails.  The output of the grid will have multiple rows.

Any help or ideas on how to simulate a test for the checkboxes?

Thanks

[Cody]

Hello Andrew,

I apologize for the delay getting back to you on this.

So when we record our test and then run the test, it fails

I am guess it fails saying "Element not found" or something very similar. I think an easy fix for this is to change the Find Expression to "Name contains IsInRole" should do the trick, or "Name Start with IsInRole". See the attached screen shot to see what that looks like in our Find Expression Editor.

Regards,
Cody
the Telerik team

[Andrew]

As stated in my question, there are multiple rows with the exact code. Therefore we cannot check for IsInRole, as there are more than one row, each row containing a checkbox.  Your suggestion will not work.

[Cody]

Hi Andrew,

As stated in my question, there are multiple rows with the exact code.

My apologies for missing that part. That is my fault.

If we have a list of checkboxes that look the same, which one is the right one? Is there some unique text applied to it? Can you show me the HTML sample having two checkboxes and point out which one would be the right one to click on? Having a more complete example (instead of a single check box example) will really help fully understand how to solve this problem.

Greetings,
Cody
the Telerik team

[Andrew]

Here is the output from the grid:

<table cellspacing="0">
  <colgroup><col><col></colgroup>
  <thead class="t-grid-header">
    <tr>
      <th class="t-header" scope="col" style="display:none">
        <span class="t-link">Role</span>
      </th>
      <th class="t-header" scope="col">
        <span class="t-link">Description</span>
      </th>
      <th class="t-header" scope="col">
        <span class="t-link">Is in role</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="display:none;">Administrator</td>
      <td>Administrator</td>
      <td class="t-last">
        <input name="IsInRole0" type="checkbox">
      </td>
    </tr>
    <tr class="t-alt">
      <td style="display:none;">Manager</td>
      <td>Manager</td>
      <td class="t-last">
        <input name="IsInRole1" type="checkbox">
      </td>
    </tr>
    <tr>
      <td style="display:none;">Professor</td>
      <td>Professor</td>
      <td class="t-last">
        <input name="IsInRole2" type="checkbox" checked="">
      </td>
    </tr>
    <tr class="t-alt">
      <td style="display:none;">Student</td>
      <td>Student</td>
      <td class="t-last"><input name="IsInRole3" type="checkbox">
      </td>
    </tr>
  </tbody>
</table>

Problem is when you hover over any of the checkboxes you get the following regardless if your hovering
over IsInRole0, IsIneRole1 etc. The dom changes when you hover over any of the checkboxes and the ID
becomes IsInRole:

 

<td class="t-last t-grid-edit-cell">
   <input class="check-box" data-val="true" data-val-required="The IsInRole field is required."
    id="IsInRole" name="IsInRole" type="checkbox" value="false">
  <input name="IsInRole" type="hidden" value="false">
  <span class="field-validation-valid" data-valmsg-for="IsInRole" data-valmsg-replace="true">
  </span>
</td>

[Cody]

Hello Andrew,

So let me ask what may sound like a "dumb" question, why are you doing a mouse hover over the element in the first place? Test Studio can directly find the correct checkbox and inject a Click event without doing a mouse hover.

In your HTML sample you didn't give me an example to help clarify which checkbox would be the right one to find and click on (after the ID has changed). I think I've come up with a solution though that will work with just a couple of coded steps:

Step 1) Prior to the hover over, use code to record the absolute tag index of the correct checkbox e.g.
int absTagIndex = Pages.Page.Professor.BaseElement.AbsoluteTagIndex;
Step 2) Perform the mouse hover over the Professor check box
Step 3) Click on the Professor checkbox using the stored absolute tag index e.g.:
ActiveBrowser.Find.ByExpression<HtmlInputCheckBox>("TagIndex=" + absTagIndex).Check(true, true);

Greetings,
Cody
the Telerik team

[Andrew]

Please see attached file.  There is a readme.txt in there with instructions.  I've tried to simulate our project as close as possbile.

Ignore 4B in the instructions.

Thanks,
Andrew

[Plamen]

Hello Andrew,

Thank you for providing the project. The easiest way to overcome the problem you are experiencing is to add the CheckBox elements via the "Add to Project Elements" option from the Elements Menu. This will add them in the Elements Explorer with their correct Find Settings. Then you can use the Step Suggestions to add the "Check" step. See this video demonstrating the process and let me know if you need further assistance. 

Kind regards,
Plamen
the Telerik team

[Andrew]

Thanks for the video and neat tricks.  But this still doesn't work properly. 

From your video example:
After you click the checkboxes the "is dirty" flag does not get set.  Therefore when you click save, nothing happens. 

Example:
The checkbox is not checked.  TestStudio checks the checkbox and then clicks save.  The data that gets posted back to the server does not reflect the checkbox that was clicked. 

[Plamen]

Hi Andrew,

You are right. The changes are not reflected after pressing the Save button. I filed a bug on this which you can track here: Public URL. However while we were trying to find a workaround for you, we also found out that there is a bug in your application. I have tried to check all checkboxes without using Test Studio and without using the mouse(only the keyboard - Tab and Space keys). When I press Tab, the focus goes to the next element which is expected, however when I press Space to check a checkbox, first time it doesn't work. If I press it twice it works, but when all checkboxes are checked and I press the Save button, only the last one is really saved. See this video demonstrating the problem. Also if I press a checkbox multiple times using the mouse(without using Test Studio), sometimes it doesn't work(it doesn't check the checkbox on every click). We believe that this issues are connected to the problem you are experiencing and until they are fixed you'll probably have problems with the Test Studio automation.

The workaround I was able to find is to use a coded steps to check the checkboxes and after every step you need to press the Save button in order to save the change. The code you can use looks like this:

Pages.HomePage.IsInRole2CheckBox.Click();
Manager.Desktop.KeyBoard.KeyPress(Keys.Space);

The first line will click once on the checkbox without actually checking it. It will only set the focus on it. The second line will simulate a Space key press and check the checkbox. After that, record a click on the Save button to save the change. See this video that demonstrates how it works.


All the best,
Plamen
the Telerik team