Created js function to edit cells using OnBatchEditClosed and OnBatchEditOpened. The cells appear to "update" fine in terms of numbers and get a little red icon on cell. Yet whenever click save or attempt to edit a second cell get an error that can't read null properties on getElementsByTagName.
Basically anything that involves GridBatchEditing again seems to cause an issue. How to resolve?
//new Object()
class Step4Rec {
constructor() {
this.monthForecast_PreviousVal = "";
this.safetyStock_PreviousVal = 0;
this.qtyPlanned_PreviouisVal = 0
}
};
var step4OriginalData = new Array();
//var DatesStartToEnd = new Array();
var dateHelp = "T00:00:00";//adding z at end means UTC/Greenwich
const DatesToProcessRec = {
processingDate : new Date()
, theYear : 2024
, theMonthNotZeroBased : 1
, theMonthZeroBased : 0
, theDay : 1
};
//OnBatchEditClosed="Step4PlanningEditsClosed" OnBatchEditOpened="Step4PlanningItemOpened"
function Step4PlanningEditsClosed(sender, args) {
let grid = sender;
let masterTableView = grid.get_masterTableView();
let dataItems = masterTableView.get_dataItems();
let todayDate = new Date();
let modMonth = todayDate.getMonth();
let modDay = 1;
let modYear = todayDate.getYear();
try {
for (var i = 0; i < dataItems.length; i++) {
let monthForecast = dataItems[i].get_cell("MonthForecast").innerText;
let safetyStock = parseInt(dataItems[i].get_cell("SafetyStock").innerText);
let qtyPlanned = parseInt(dataItems[i].get_cell("QtyPlanned").innerText);
if (i < dataItems.length - 3)
safetyStock = 2;
else
safetyStock = 0;
if (safetyStock > 0) {
let getCurrentMthRecord = monthForecast.split("/");
let theYear = getCurrentMthRecord[1];
let theMonth = MonthConversion(getCurrentMthRecord[0]);
let theCurrentMthRecordDate = new DateConversion(theMonth, theYear);
let revert = false;
for (let j = 1; j <= safetyStock && safetyStock != 0 && revert == false; j++) {
//last month can't have a stock value other then 0 as there are no more records
if (j + i < dataItems.length - 1) {
let expectedMonth = new Date(theCurrentMthRecordDate.setMonth(theCurrentMthRecordDate.getMonth() + 1));
let nextMonthForecast = dataItems[i+j].get_cell("MonthForecast").innerText;
let getNextMthRecord = nextMonthForecast.split("/");
let theNextYearOfRec = getNextMthRecord[1];
let theNextMonthOfRec = MonthConversion(getNextMthRecord[0]);
theNextRecordMthRecordDate = new DateConversion(theNextMonthOfRec, theNextYearOfRec);
//console.log(theNextRecordMthRecordDate.toString() + "|" + expectedMonth.toString());
if (theNextRecordMthRecordDate.getTime() === expectedMonth.getTime()) {
let safetyStockToAdd = parseInt(dataItems[j + i].get_cell("QtyPlanned").innerText);
qtyPlanned += safetyStockToAdd;
}
else {
revert = true;
}
}
else {
revert = true;
}
}
if (revert == true) {
for (let k = 0; k < step4OriginalData.length; k++) {
//console.log(dataItems[k].get_cell("MonthForecast").innerText .toString() + " | " + step4OriginalData[k].monthForecast.toString())
if (dataItems[k].get_cell("MonthForecast").innerText == step4OriginalData[k].monthForecast) {
dataItems[k].get_cell("SafetyStock").innerText = step4OriginalData[k].safetyStock.toString();
dataItems[k].get_cell("QtyPlanned").innerText = step4OriginalData[k].qtyPlanned.toString();
}
}
throw new Error("Invalid number of safety stock months specified. If safety stock months is greater then 0, please be sure following months are included in previous forecast steps.");
//alert("Invalid number of safety stock months specified. If safety stock months is greater then 0, please be sure following months are included in previous forecast steps.");
}
dataItems[i].get_cell("QtyPlanned").innerText = qtyPlanned;
}//end if
//else it should be 0 or less (technically only 0) and just keep the number that is in the box that was sent on close
}//end for
console.log("before save changes call");
//saveChangesToGrid();
//console.log("after save changes call");
} catch (error) {
console.log(error.toString());
alert(error.toString());
}
}// end function
function DateConversion(month, year) {
//console.log("month: " + month.toString() + " | year: " + year.toString());
return new Date(year.toString() + "-" + ("0" + month.toString()).slice(-2) + "-01" + dateHelp);
}
function MonthConversion(str3LtrMonth) {
switch (str3LtrMonth.toLowerCase()) {
case "jan": return 1;
case "feb": return 2;
case "mar": return 3;
case "apr": return 4;
case "may": return 5;
case "jun": return 6;
case "jul": return 7;
case "aug": return 8;
case "sep": return 9;
case "oct": return 10;
case "nov": return 11;
case "dec": return 12;
default: throw new Error("month value not found");
}
}
function Step4PlanningItemOpened(sender, args) {
step4OriginalData.length = 0;
let grid = sender;
let masterTableView = grid.get_masterTableView();
let dataItems = masterTableView.get_dataItems();
let itemCellQtyPlanned = args.get_cell("QtyPlanned");
let itemCellValue = sender.get_batchEditingManager().getCellValue(itemCellQtyPlanned);
let rowItem = args.get_row();
//assuming monthfrecast is in column 1 (first column)
let itemCellMonthForecast = rowItem.children[0].innerText.toString();
//console.log("::setup::");
for (let i = 0; i < dataItems.length; i++) {
let recordStep4 = new Step4Rec();
recordStep4.monthForecast = dataItems[i].get_cell("MonthForecast").innerText;
recordStep4.safetyStock = dataItems[i].get_cell("SafetyStock").innerText;
recordStep4.qtyPlanned = dataItems[i].get_cell("QtyPlanned").innerText;
//attempt to input missing data another way
if ((recordStep4.qtyPlanned == undefined || recordStep4.qtyPlanned == "") && recordStep4.monthForecast.toString() == itemCellMonthForecast.toString() ) {
recordStep4.qtyPlanned = itemCellValue;
}
step4OriginalData.push(recordStep4);
//console.log(recordStep4.monthForecast.toString() + " | " + recordStep4.safetyStock.toString() + " | " + recordStep4.qtyPlanned.toString());
}
/*
console.log("::output::");
for (var od = 0; od < step4OriginalData.length; od++) {
console.log("od: " + od.toString());
console.log(step4OriginalData[od].monthForecast.toString() + " | " + step4OriginalData[od].safetyStock.toString() + " | " + step4OriginalData[od].qtyPlanned.toString());
}
*/
}
<telerik:RadWizardStep
ID="StepAggregateDemand"
Title="4. Aggregate Demand"
StepType="Step"
Enabled="false"
Active="false"
runat="server">
<telerik:RadAjaxPanel ID="RadAjaxPanelAggregateDemand" runat="server" AsyncPostBackTimeout="20000" LoadingPanelID="RadAjaxLoadingPanelAggregateDemand">
<div style="height:30px">
<span>
<telerik:RadButton ID="RadButtonNextStepAggregateDemand" Skin="Default" Text="Next" CssClass="button_buttonNext" Width="80px" Height="22px" ToolTip="Click to see next destination" runat="server" ButtonType="LinkButton" OnClientClicking="OnNextClicking"></telerik:RadButton>
<telerik:RadButton ID="RadButtonPreviousStepAggregateDemand" Skin="Default" Text="Previous" CssClass="button_buttonPrevious" Width="80px" Height="22px" ToolTip="Click to see previous destination" runat="server" ButtonType="LinkButton" OnClientClicking="OnPreviousClicking" ></telerik:RadButton>
</span>
</div>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanelAggregateDemand" AsyncPostBackTimeout="1200" runat="server" Skin="Default" Modal="true" />
<telerik:RadGrid
AutoGenerateColumns="false"
ID="RadGridAggregateDemand"
CssClass="CenterAll"
RenderMode="Lightweight"
AllowFilteringByColumn="false"
AllowSorting="false"
OnItemDataBound="RadGridAggregateDemand_ItemDataBound"
OnItemCommand="RadGridAggregateDemand_ItemCommand"
ShowFooter="true"
runat="server"
PageSize="100"
OnBatchEditCommand="RadGridAggregateDemand_BatchEditCommand">
<ExportSettings>
<Excel Format="Xlsx" />
</ExportSettings>
<GroupingSettings CaseSensitive="false" />
<ClientSettings EnableRowHoverStyle="false" AllowKeyboardNavigation="true" >
<ClientEvents OnBatchEditClosed="Step4PlanningEditsClosed" OnBatchEditOpened="Step4PlanningItemOpened" />
</ClientSettings>
<MasterTableView
AutoGenerateColumns="false"
EditMode="Batch"
CommandItemDisplay="TopAndBottom"
DataKeyNames="MonthForecast"
Name="MonthForecast"
AllowFilteringByColumn="false"
ShowFooter="true"
AllowSorting="false">
<BatchEditingSettings EditType="Cell" OpenEditingEvent="Click" />
<CommandItemSettings
ShowAddNewRecordButton="false"
ShowRefreshButton="false"
ShowCancelChangesButton="true"
ShowSaveChangesButton="false"
/>
<CommandItemTemplate>
<telerik:RadButton runat="server" ID="ResetButton" autopostback="false" Text="Reset to Last Save" ToolTip="Reset to Last Save" style="float: right;" OnClientClicked="cancelChangesToGrid" Width="170px"><Icon PrimaryIconCssClass="rgIcon rgCancelIcon" /></telerik:RadButton>
<telerik:RadButton runat="server" ID="SaveChangesButton" AutoPostBack="false" Text="Save Changes" ToolTip="Save Changes" style="float: right;" OnClientClicked="saveChangesToGrid" Width="145px"><Icon PrimaryIconCssClass="rgIcon rgSaveIcon" /></telerik:RadButton>
</CommandItemTemplate>
<Columns>
<telerik:GridBoundColumn UniqueName="MonthForecast" DataField="MonthForecast" HeaderText="MonthForecast" ReadOnly="true" HeaderTooltip=""></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="PPPY_1Month" DataField="PPPY_1Month" HeaderText="PPPY_1Month" ReadOnly="true" DataFormatString="{0:N0}" HeaderTooltip="" Aggregate="Sum"></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="PPY_1Month" DataField="PPY_1Month" HeaderText="PPY_1Month" ReadOnly="true" DataFormatString="{0:N0}" HeaderTooltip="" Aggregate="Sum" ></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="PY_1Month" DataField="PY_1Month" HeaderText="PY_1Month" ReadOnly="true" DataFormatString="{0:N0}" HeaderTooltip="" Aggregate="Sum" ></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="Composite" DataField="Composite" HeaderText="Composite" ReadOnly="true" DataFormatString="{0:N0}" HeaderTooltip="This is the sum of the previous sales (from 12 months ago) of the Key Product Master and the Contributing Product Masters, based on the levels of contribution assigned in the Style Demand Composite." Aggregate="Sum" ></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="Months1Perc" DataField="Months1Perc" HeaderText="∆ 1 Month %" ReadOnly="true" DataFormatString="{0:N0}" HeaderTooltip="This measures the difference between the py 1 month (based on when this report is run) and the same 1 month 2 years ago. This is based on the Key Product Master and proportional contribution from the Contributing Product Masters."></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="Months3Perc" DataField="Months3Perc" HeaderText="∆ 3 Months %" ReadOnly="true" DataFormatString="{0:N0}" HeaderTooltip="This measures the difference between the py 3 months (based on when this report is run) and the same 3 months 2 years ago. This is based on the Key Product Master and proportional contribution from the Contributing Product Masters."></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="Months6Perc" DataField="Months6Perc" HeaderText="∆ 6 Months %" ReadOnly="true" DataFormatString="{0:N0}" HeaderTooltip="This measures the difference between the py 6 months (based on when this report is run) and the same 6 months 2 years ago. This is based on the Key Product Master and proportional contribution from the Contributing Product Masters."></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="PY_PPYPerc" DataField="PY_PPYPerc" HeaderText="∆ PY/PPY %" ReadOnly="true" DataFormatString="{0:N0}" HeaderTooltip="This measures the difference between 2 year and 3 years rolling."></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="MPPY_MPPPYPerc" DataField="MPPY_MPPPYPerc" HeaderText="∆ 3MPPY/3MPPPY %" ReadOnly="true" DataFormatString="{0:N0}" HeaderTooltip="This measures the difference between a 2 year ago 3 months and 3 years ago 3 months."></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="PlannedPerc" DataField="PlannedPerc" HeaderText="∆ Planned %" ReadOnly="false" DataFormatString="{0:N0}" HeaderTooltip="The suggested value that appears in this field is the stored value else based on ∆ 6 Months % (default min 0, default max 50)"></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="SafetyStock" DataField="SafetyStock" HeaderText="Safety Stock %" ReadOnly="false" DataFormatString="{0:N0}" HeaderTooltip="Default to 10%"></telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="QtyPlanned" DataField="QtyPlanned" HeaderText="Qty Planned" ReadOnly="false" DataFormatString="{0:N0}" HeaderTooltip="This Is the aggregate forecasted demand for this product master For Each month." Aggregate="Sum" ></telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadAjaxPanel>
<br />
<asp:ImageButton ID="ImgExcelOutputAggregateDemand" ImageAlign="Left" ImageUrl="images/excel-2010-icon.gif" OnClick="ExcelOutputAggregateDemand" runat="server" CssClass="ImageButtons" Visible="True" />
<br />
</telerik:RadWizardStep>
Hi Telerik team,
Some of our customers are experiencing span or br tags being
added into the HTML when they are backspacing to adjust space or combine
paragraphs. It happens on Chrome and Firefox browsers only ( please see attachments for HTML ).
Chrome browser:
Span tag is added automatic if you use backspace key to
combine paragraphs. “<span style="???;">”, style can be
background color, font size of or letter spacing. We cannot reproduce it on
Telerik demo site.
Firefox browser:
If you combine the last paragraph, <br
class="t-last-br" /> will added in the paragraph element. This
issue can reproduce it on Telerik demo site too.
We tried a few things but we still cannot solve it.
1. We tried version 2020.2.617.40 and 2020.3.1021
2. Set rendermode to classic or lightweight
3. Force to clear all Editor css files ( radEditor.CssFiles.Clear() );
4. Changed new line mode to P, BR and div
Please be advised if there a solution for it!
Thanks in advance,
Lan
So i have the following ItemTemplate defined for a RadGrid
<telerik:GridTemplateColumn DataField="Description" HeaderText="Description">
<ItemTemplate>
<iframe>
<telerik:RadEditor ID="ContentEditor1" onClientLoad="OnClientLoad" CssClass="Modal-Scroll2" Enabled="false" ToolsFile="~/ToolsFileEmpty.xml" runat="server" EditModes="Preview" NewLineMode="br" ContentFilters="DefaultFilters" Width="100%" >
<CssFiles>
<telerik:EditorCssFile Value="~/css/EditorStyles.css" />
</CssFiles>
</telerik:RadEditor>
</iframe>
</ItemTemplate>
</telerik:GridTemplateColumn>
However, when this renders on the page, the editor content appears in the wrong place:
and the end result is a bunch of empty iframes:
Ideas?
-Mark
I have blocks of HTML that are entered (usually copy and pasted in from email messages) by users of our system. We don't know what this content will contain, or if the content (html) is even completed (maybe the copied part of a HTML message). For that reason we display the content in a radeditor. This content is read-only, so we set the Enabled property of the RadEditor to "false". However when we do that, the content is no longer displayed in an iframe, despite using ContentAreaMode="Iframe".
When the editor is Enabled, it renders like this instead:
The reason that we are trying to have the content rendered in an IFRAME is because this content sometimes includes CSS/Styles that modify the content in the parent container.
For instance today we discovered this HTML embedded into a <style> tag.
div { display: block !important; visibility: visible !important; opacity: 1 !important }
And this caused all kinds of rendering problems on the page because it forced a ton of modal popup <div>'s to become visible that should be hidden.
Thanks for your help!
-Mark
I recently discovered your "Mentions" feature in WinForms and am looking to produce a WebForms version of this. I did get close to creating this functionality; very close, actually. Building it within the RadEditor has proven to be problematic, as the HTML created by the Editor tended to wreak havoc on my code. It was pretty granular, in that I used character counts to track and locate "tagged"/"mentioned" users.
Is there a WebForms version of this coming soon? If not, can you offer some guidance on how to overcome some issues the Editor creates?
Hello,
Is any standard method to disable edit in the HTML mode available?
HTML mode must be visible to show output code, but now allowed for users to edit using it, only using Design.
Thank you.
Hello, At this time 3 edit modes are available. I wanted to add "Preview Accepted" mode, which will work like Preview + will show content as already Accepted. Because it is very helpful for user to be sure that after Accept all will be fine.
Alternative option to show button in the View tab of the RibbonBar, but Mode toolbox div is more preferable place.
Thank you.
Hello, as I read from https://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/track-changes-and-comments/track-changes#supported-commands only some track change commands are available.
For example, Delete row or column is not tracking.
So, I wanted to create workaround, which cancels row deletion and instead remove content of the cells (in TrackChange mode just mark as deleted).
I just have the following idea, but it is not delete text:
function OnClientCommandExecuting(editor, args) {
var commandName = args.get_commandName();
var tool = args.get_tool();
var value = args.get_value();
if (commandName === "DeleteRow") {
args.set_cancel(true);
var range = editor.getSelection().getRange();
var tableRow = range.commonAncestorContainer;
while (tableRow && tableRow.tagName !== "TR") {
tableRow = tableRow.parentNode;
}
if (tableRow) {
var cells = tableRow.cells;
for (var i = 0; i < cells.length; i++) {
var cellContent = cells[i].innerHTML;
var cellRange = editor.get_document().createRange();
cellRange.selectNodeContents(cells[i]);
editor.getSelection().selectRange(cellRange);
editor.executeCommand("Backspace", false, true);
}
}
}
}
Any ideas to fix? Is it more easy solution? May be add to TR attribute "data-del" and define it in css? Is it possible to resolve it in backend?
Thank you!
Hello,
Is any way to return:
1. Html with Track Change marks and comments to store it in the database for next edit session?
2. Auto accepted html.
I tried in cs: RadEditor1.Content - but it return content without changes, RadEditor1.GetHtml(EditorStripHtmlOptions.AcceptTrackChanges) - but also track changes were not accepted.
Can you provide any example, please?
Thank you!
Hello,
We are not able to open hyperlinks which are in the content area of the RadEditor. We are experiencing this behavior in our code as well as on your demo site. Here is how to replicate the issue on the demo site.
a) Go to the overview page on the RadEditor demo site: http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
b) Clear all content in the RadEditor
c) Click on the <html> tab for the RadEditor
d) Enter the following hyperlink into the content area: <a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>
e) Click on the Preview tab of the RadEditor
f) Click on the hyperlink for d) above. This will not take the browser to the hyperlink which was added into the content area
This behavior is consistent between Google Chrome, Firefox, Edge, Safari and IE
Please advise.