Gridview and Repeater extremely slow to load with spellchecker - RapidSpell Web ASP.NET - Forum

Hi Dave, are you saying there are 1500 RapidSpellWebLauncher controls on the page, or is just one row editable at a time?

Best
Jim

Thanks - so the thing about the Server Controls is that they each have their own chunk of Javascript/HTML, and there isn't much sharing of common code. So multiply it by 1,500 and you have a lot of code to download to the browser.

In v4 we added the ability to do it from Javascript, which is not only simpler, but also more efficient as there is no duplication of code.

https://keyoti.com/produ...mples/JSmode/Dialog.htm

You add

<script src="RapidSpell-DIALOG.js"></script>

to the page, and it automatically finds all textboxes to spell check, unless you want to explicitly block/check certain textboxes.

You trigger the spell check with

<input type="button" onclick="rapidSpell.dialog_spellCheck()" value="Spell Check" />


there should be next to no overhead with regard to the page loading.

Best
Jim

Sorry Jim - ignore my post of 2:08PM today, I've just found the version 4 Repeater demo. I'll go through that and get back to you if I have any problems. Thank you for your help so far.

Thanks Jim. I removed the AYT.js.
However, just a first attempt, but running the spellchecker, it finishes immediately with the message "The spelling check is complete". I'm suspecting there may be an issue with the ID of the textbox parameters of the input button. I have added nothing to the vb code behind and haven't yet implemented userdictionary paths. Here's what I have (Repeater is simplified):

<script src="../../../../Scripts/Keyoti_RapidSpell_Web_Common/RapidSpell-DIALOG.js"></script>


<script type="text/javascript">
rapidSpell.setParameterValue("default", "ConsiderationRange", 500);

//client side function to highlight text box being checked, called when spell checker starts a
//new text box.
function Ondialog_startedcheckingtextbox(src, textBox) {
debugger;
//highlight current text box
textBox.style.border = "2px solid blue";
}

function Ondialog_finishedcheckingtextbox(src, textBox) {
//remove highlights on all text boxes
for (var i = 0; i < rsw_rapidSpellControls.length; i++) {
textBox = document.getElementById(rsTCInt[rsw_rapidSpellControls[i]].tbName);
textBox.style.borderWidth = '';
textBox.style.borderStyle = '';
textBox.style.borderColor = '';
}
}


//- Called when spell checking is finished
function NotifyDone(src, tb, complete) {
if (complete) {
alert("Spellcheck complete.");
//do whatever else
} else {
if (!confirm("You didn't finish spell checking, are you sure you want to cancel the spell check?")) {
//restart the spell checker - see userguide for this function's pattern
setTimeout("rapidSpell.dialog_spellCheck(true, tb)", 1); //Let the window close before reopening it
}
}
}

//- Called when corrections are made
function NotifyCorrection(src, tb, wordStart, oldWord, newWord) {
//write changes to correctionBox
document.getElementById("correctionBox").setAttribute("value", "'" + oldWord + "' at pos. " + wordStart + " changed to '" + newWord + "'");
}


//this function is for SPELLCHECKING changes to Entry, Target and Exit levels
function NotifyCorrection(src, tbName, wordStart, oldWord, newWord){
var n = tbName.indexOf("txt");
var res = tbName.substring(0, n + 3);
var hfName = res + "_flagChange"
document.getElementById(hfName).value = '1';
document.getElementById('<%= hdnOutcomeChanged.ClientID%>').value = 1;
}

rapidSpell.addEventListener('dialog_startedcheckingtextbox', Ondialog_startedcheckingtextbox);
rapidSpell.addEventListener('dialog_finishedcheckingtextbox', Ondialog_finishedcheckingtextbox);
rapidSpell.addEventListener('dialog_finishedcheckingtextbox', NotifyDone);
rapidSpell.addEventListener('dialog_correction', NotifyCorrection);
</script>


<input type="button" onclick="rapidSpell.dialog_spellCheck(true, ['txtEntryLevel', 'txtTargetLevel', 'txtExitLevel'])" value="Spell check" style="width: 90px; font-size: 12px" class="Button" />


<asp:Repeater ID="rptrEntryLevel" runat="server">
<ItemTemplate>
<td>
<asp:TextBox ID="txtEntryLevel" runat="server" Font-Size="11px" Height="60px"
Text='<%# Container.DataItem("EntryLev")%>' TextMode="MultiLine"
Width="140px" CssClass="normalText"></asp:TextBox>
</td>

<td>
<asp:TextBox ID="txtTargetLevel" runat="server" Font-Size="11px" Height="60px"
Text='<%# Container.DataItem("TargetLev")%>' TextMode="MultiLine"
Width="140px" CssClass="normalText"></asp:TextBox>
</td>

<td>
<asp:TextBox ID="txtExitLevel" runat="server" Font-Size="11px" Height="60px"
Text='<%# Container.DataItem("ExitLev")%>' TextMode="MultiLine"
Width="140px" CssClass="normalText"></asp:TextBox>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>

Thanks Jim. So we removed references to the Repeater textboxes in the input button as you suggested:
<input type="button" onclick="rapidSpell.dialog_spellCheck()" value="Spell check" style="width: 90px; font-size: 12px" class="Button" />

...and then blocked checking of the other textboxes that it appeared to want to check (which it was checking successfully actually). (Interestingly it didn't seem to want to check several small SingleLine textboxes on the TabContainer)
rapidSpell.setParameterValue("default", "ConsiderationRange", 500);

rapidSpell.dialog_popupURL = " ~/helper/popup.aspx";

rapidSpell.dialog_ignoreTextBoxIds[rapidSpell.dialog_ignoreTextBoxIds.length] = '<%= txtAims.ClientID %>';
rapidSpell.dialog_ignoreTextBoxIds[rapidSpell.dialog_ignoreTextBoxIds.length] = '<%= txtMon.ClientID %>';
rapidSpell.dialog_ignoreTextBoxIds[rapidSpell.dialog_ignoreTextBoxIds.length] = '<%= txtSession.ClientID %>';
rapidSpell.dialog_ignoreTextBoxIds[rapidSpell.dialog_ignoreTextBoxIds.length] = '<%= txtAssess.ClientID %>';

..so it should now just check the Repeater but when we run the spellchecker, it opens the popup dialog, and the dialog box is blank. The very first textbox in the first repeater row is highlighted in blue. And that's it.

Any other suggestions as to what we're doing wrong?

Before I do that (quite a big job!) - you mentioned previously that: "If you wanted to just spell check a group of textboxes (like a row), then a different approach is to identify the textbox IDs via Javascript...."
So we do actually want to check three neighbouring textboxes in each Repeater row. Do you have an example of how to identify the textbox IDs via Javascript within the spellchecking script?

Many thanks Jim. We'll try that.
So I guess the idea is to wrap each row in an element with an ID like a Panel or UpdatePanel rather than get the row ID (ItemIndex)?

Thanks Jim. We've managed to get the ClientIDs via a bit of JQuery script.
However, when we click the spellcheck button, a modal popup appears but it is completely empty. Also the first textbox in the Repeater is highlighted in blue as it should be. Basically the popup is not being loaded with any content and I cannot see why. We've copied all the Keyoti_RapidSpell_Web_Common scripts into a folder in the project. Any ideas?

Here is the relevant code on our page with simplified Repeater:

<script type="text/javascript" src="../../../../Scripts/Keyoti_RapidSpell_Web_Common/RapidSpell-DIALOG.js"></script>

<script type="text/javascript">
function getContainedTextFields() {

var ids = [];
var numberOfBoxesToCheck = $('.cssRptrTB').length;
for (i = 0; i < numberOfBoxesToCheck; i++) {
var txbID = $('.cssRptrTB').eq(i).attr('ID');
ids[ids.length] = txbID;
}
return ids;
}

</script>


<script type="text/javascript">
rapidSpell.setParameterValue("default", "ConsiderationRange", 500);

function Ondialog_startedcheckingtextbox(src, textBox) {
// debugger;
//highlight current text box
textBox.style.border = "2px solid blue";
}

function Ondialog_finishedcheckingtextbox(src, textBox) {
//remove highlights on all text boxes
for (var i = 0; i < rsw_rapidSpellControls.length; i++) {
textBox = document.getElementById(rsTCInt[rsw_rapidSpellControls[i]].tbName);
textBox.style.borderWidth = '';
textBox.style.borderStyle = '';
textBox.style.borderColor = '';
}
}


function NotifyCorrection(src, tb, wordStart, oldWord, newWord){
var n = tb.indexOf("txt");
var res = tb.substring(0, n + 3);
var hfName = res + "_flagChange"
document.getElementById(hfName).value = '1';
document.getElementById('<%= hdnOutcomeChanged.ClientID%>').value = 1;
}


rapidSpell.addEventListener('dialog_startedcheckingtextbox', Ondialog_startedcheckingtextbox);
rapidSpell.addEventListener('dialog_finishedcheckingtextbox', Ondialog_finishedcheckingtextbox);
rapidSpell.addEventListener('dialog_correction', NotifyCorrection);


</script>




<input type="button" id='dialogBT' onclick="els = getContainedTextFields(); rapidSpell.dialog_spellCheck(true, els)"
value="Spell check" style="width: 90px; font-size: 12px" class="Button" />


<asp:Repeater ID="rptrLevels" runat="server">
<ItemTemplate>
<tr style="vertical-align: top" id="rptrDataRow">
<td>
<asp:TextBox ID="txtEntry" runat="server" Font-Size="11px" Height="60px"
Text='<%# Container.DataItem("EntryLev")%>' TextMode="MultiLine" ToolTip="255 characters limit"
Width="140px" CssClass="cssRptrTB"></asp:TextBox>
</td>


<td>
<asp:TextBox ID="txtTarget" runat="server" Font-Size="11px" Height="60px"
Text='<%# Container.DataItem("EntryLev")%>' TextMode="MultiLine" ToolTip="255 characters limit"
Width="140px" CssClass="cssRptrTB"></asp:TextBox>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>

Many thanks Jim. However I have already tried exactly that earlier today in your demo Repeater_Automatic_RSWL. It worked fine. We did it exactly as you have done and which is exactly as we have it in our own project.

Could there be a conflict with the other Keyoti spellcheckers throughout our project which have all been implemented with the Server Control method and which continue to work fine? Or could it be that we haven't yet set the URL to the userdictionary folder?

As I say, with this new JavaScript implementation, the dialog window opens but none of the controls are loaded into it so we are just seeing a blank modaldialog popup.

Thanks Jim. Nothing of significance in F12 console. I've checked and double-checked between the amended demo Repeater_Automatic_RSWL which works fine and our own project and can see no difference. I'm really at a loss!