Questions on UI for ASP.NET MVC Forum

2 answers

145 views

Dropdown kendo select item update another field

Hello,

I need help for the following issue:

this is the dropdown list -

@Html.Kendo().DropDownListFor(m => m.PoLine[nr].ActivityId).DataTextField("Value").DataValueField("Key").DataSource(source =>
{
source.Read(read =>
{
read.Action(@MVC.Budget.Budget.ActionNames.GetActivity, MVC.Budget.Name)
.Type(HttpVerbs.Post)
.Data("function () { return filterSubCategory('" + categoryId.Replace("\\", "\\\\") + "','" + subCategoryId.Replace("\\", "\\\\") + "'," + @current.ActivityId + "," + @nr + "); }");
})
.ServerFiltering(true);
}).Enable(true).AutoBind(false).CascadeFrom(subCategoryId).Events(ev => { ev.Change("function(e){ var item = this.dataItem(); return true; return onchangeDivFromItemText(item,'" + string.Format(idReplace, "activity") + "')}"); }).HtmlAttributes(new { @class = "combo_date", style = "width:170px;" })

and this is the field where I want to be updated -

@Html.UbiLabelValues(Model.RefMarketList.Where(item => item.Key.HasValue && item.Key.Value == Model.PoLine[nr].MarketId).FirstOrDefault().Value, LabelFor: "MarketName", className: "MarketName")

where UbiLabelValues returns -

string s = "<label for='{1}' {1} >{0}</label>";
s = string.Format(s, text, LabelFor, className);
return new MvcHtmlString(s);

I want to know how to change ev.Change of dropdown in order to referentiate the field with the new value selcted from dropdown.

DropDownList

General Discussions

answered on 27 Feb 2023

1 answer

127 views

How to implement hierarchy in the Data Grid with multiple key fields

Hello,

I need to implement hierarchical data grid where the relationship between parent-child records is two fields. Can you provide an example of how to establish the relationship in the grid using multiple key fields, please?

Thank you.

Patrick

Grid

answered on 22 Feb 2023

1 answer

95 views

How to customized MonthView Header of GanttChart Timeline Header?

Hi there!

I would like to customize the header of GanttChart timeline, like

if it is WeekView, "2023/2" in 1st line and "1" , "8" (← it will be the first day of week) in 2nd line or

if it is MonthlyView, "2023/Q1" in 1st line and "2", "3" (← it will be the month number like "2" means Feburay) in 2nd line.

let me know how should I customize to that.

I think that I should use "Views.MonthView.MonthHeaderTemplate" function, but I have no idea how I used it.

I found this API from this following link, but I can't get detail info because it had died.

ASP.NET MVC Gantt - API Reference - Telerik UI for ASP.NET MVC

Could you please share me if there is any link in which explaination for gantt API info, how to use or which parameter should be passed.

Gantt

Timeline

View

answered on 20 Feb 2023

1 answer

232 views

Kendo UI Column Chart data binding not working

In MVC application I am using Kendo column charts and I have the data as below.

Type	Percentage	Date	Color
A	25.5	2/12	#2456C7
B	70	2/13	#2456C8
B	50	2/14	#2456C8
B	55.5	2/15	#2456C8
A	60.3	2/13	#2456C8

I want to create a column chart with this data, chart should be categorized by Date and there should be multiple columns depending on the type.

I wrote the below code snippet but it isn't working, cannot see the data on UI.

 @(Html.Kendo().Chart<EntitiesA.Report>
                ()
                .Name("Report")
                .Title("ReportA")
                .Legend(legend => legend
                .Position(ChartLegendPosition.Top)
                )
                .DataSource(dataSource => dataSource
                    .Read(read => read.Action("MethodReport", "ReportController"))
                    .Group(group => group.Add(model => model.Type))
                    .Sort(sort => sort.Add(model => model.Date).Ascending())
                )
                .Series(series =>
                {
                    series.Column(model => model.Percentage)
                        .Name("#= group.value # (Percentage)").CategoryField("Date").ColorField("Color");
                })
                .Legend(legend => legend
                    .Position(ChartLegendPosition.Bottom)
                )
                .CategoryAxis(axis => axis
                    .Labels(labels => labels.Format("MM/DD"))
                )
                .ValueAxis(axis => axis.Numeric()
                                .Labels(labels => labels.Format("{0:N0}"))
                                .MajorUnit(20)
                                .Max(100)
                                .Line(line => line.Visible(false))
                )
                .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0:N0}")
                )
                )

I don't see any data in the graph it is blank how to fix it, am I missing any logic or piece of code.

Chart

answered on 20 Feb 2023

2 answers

127 views

MVC kendo Form

Hi,

How to pass antiForgeryToken in MVC Kendo form

Form

answered on 16 Feb 2023

0 answers

134 views

Kendo grid ClientTemplate is throwing error

Client Template logic:

Working syntax:

columns.Template(@<text></text>).Title("Source").ClientTemplate("<a class='clslnkSome' data-healtharticleheading =#=HealthArticleHeading#>LINK</a>").Width(150);

Error giving syntax:

columns.Template(@<text></text>).Title("Source1").ClientTemplate("<div>#= (HealthArticleSource == null) ? 'N/A' : HealthArticleSource #</div><div>#= (HealthArticleAuthor == null && HealthArticleSource =='GuidingCare') ? 'N/A' :(HealthArticleSource !='GuidingCare')?'<a class=\\'clslnkSome\\' data-healtharticleheading =#=HealthArticleHeading# >LINK</>' : HealthArticleAuthor #</div>").Width(150);

Error:

Uncaught Error: Invalid template:'<tr class="k-master-row" data-uid="#=data.uid#" role='row'><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['HealthArticleHeading'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['HealthArticleHeading'] ? '<span class="k-dirty"></span>' : '' ##= (HealthArticleHeading == null) ? 'N/A' : HealthArticleHeading #</td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['HealthShortDesc'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['HealthShortDesc'] ? '<span class="k-dirty"></span>' : '' ##=articleDescription(HealthShortDesc,HealthArticleHeading)#</td><td role='gridcell'><a class='clslnkSome' data-healtharticleheading =#=HealthArticleHeading#>LINK</a></td><td role='gridcell'><div>#= (HealthArticleSource == null) ? 'N/A' : HealthArticleSource #</div><div>#= (HealthArticleAuthor == null && HealthArticleSource =='GuidingCare') ? 'N/A' :(HealthArticleSource !='GuidingCare')?'<a class=\'clslnkSome\' data-healtharticleheading =#=HealthArticleHeading# >LINK</>' : HealthArticleAuthor #</div></td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['HealthArticleTypeName'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['HealthArticleTypeName'] ? '<span class="k-dirty"></span>' : '' #<div id='ArticleTypeToolTip' style='width:100%;height:100%;cursor:pointer;display: flex; align-items: center;' title='<span style=font-weight:bold;text-align:center;>Readability Details</span><div style=text-align:left;>ReadabilityLevel =#= (ReadabilityLevel==''||ReadabilityLevel==null||ReadabilityLevel=='Undefined') ? 'N/A' : ReadabilityLevel#</div>' class='hOverHealthArticleTypeCls'>#= (HealthArticleTypeName==null)? 'N/A': HealthArticleTypeName #</div></td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['HealthArticleDate'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['HealthArticleDate'] ? '<span class="k-dirty"></span>' : '' ##= (HealthArticleDate == ''||HealthArticleDate==null) ? 'N/A' : kendo.toString(HealthArticleDate, 'MM/dd/yyyy hh:mm:ss tt')#</td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['Status'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['Status'] ? '<span class="k-dirty"></span>' : '' #<div class='status#:Status#'>#=Status#</div></td><td style="display:none"class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['ExteranlHealthArticleId'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['ExteranlHealthArticleId'] ? '<span class="k-dirty"></span>' : '' ##:data.ExteranlHealthArticleId==null?'':data.ExteranlHealthArticleId#</td><td role='gridcell'><a style="#=((DeleteFlag == true)||(item && item.length > 0 && item[0].IsAdd == false && HealthArticleSource !='GuidingCare'))? 'pointer-events: none; opacity: 0.5;':'' #" class='icon-action-button-regular clslnkResend' id='lnkResend' data-healtharticleid='#=HealthArticleId#' data-healtharticleheading ='#=HealthArticleHeading#' data-healtharticletext='#:HealthArticleText#' data-healthfile='#=HealthFile#' data-filedocumentguid='#=FileDocumentGuid#'><span class='f18 ItemPR5'><i class='far fa-reply-all fa-flip-horizontal'></i></span></a> </td><td role='gridcell'> <a style="#=(HealthFile == null || HealthFile == '') ? 'pointer-events: none; opacity: 0.5;':''#" class='icon-action-button-regular' target="_blank" onclick ="CallAtcmntNewWindow(this);"><span class='f18 ItemPR5'><i class='far fa-download'></i> </span></a><input type='hidden' value='/download.ashx?Article=#=HealthFile#&DocumentGuid=#=FileDocumentGuid#' /></td></tr>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr class="k-master-row" data-uid="'+(data.uid)+'" role=\'row\'><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['HealthArticleHeading'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['HealthArticleHeading'] ? '<span class="k-dirty"></span>' : '' )+''+( (HealthArticleHeading == null) ? 'N/A' : HealthArticleHeading )+'</td><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['HealthShortDesc'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['HealthShortDesc'] ? '<span class="k-dirty"></span>' : '' )+''+(articleDescription(HealthShortDesc,HealthArticleHeading))+'</td><td role=\'gridcell\'><a class=\'clslnkSome\' data-healtharticleheading ='+(HealthArticleHeading)+'>LINK</a></td><td role=\'gridcell\'><div>'+( (HealthArticleSource == null) ? 'N/A' : HealthArticleSource )+'</div><div>'+( (HealthArticleAuthor == null && HealthArticleSource =='GuidingCare') ? 'N/A' :(HealthArticleSource !='GuidingCare')?'<a class=\'clslnkSome\' data-healtharticleheading =)+'=HealthArticleHeading'; >LINK</>' : HealthArticleAuthor ;$kendoOutput+='</div></td><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['HealthArticleTypeName'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['HealthArticleTypeName'] ? '<span class="k-dirty"></span>' : '' )+'<div id=\'ArticleTypeToolTip\' style=\'width:100%;height:100%;cursor:pointer;display: flex; align-items: center;\' title=\'<span style=font-weight:bold;text-align:center;>Readability Details</span><div style=text-align:left;>ReadabilityLevel ='+( (ReadabilityLevel==''||ReadabilityLevel==null||ReadabilityLevel=='Undefined') ? 'N/A' : ReadabilityLevel)+'</div>\' class=\'hOverHealthArticleTypeCls\'>'+( (HealthArticleTypeName==null)? 'N/A': HealthArticleTypeName )+'</div></td><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['HealthArticleDate'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['HealthArticleDate'] ? '<span class="k-dirty"></span>' : '' )+''+( (HealthArticleDate == ''||HealthArticleDate==null) ? 'N/A' : kendo.toString(HealthArticleDate, 'MM/dd/yyyy hh:mm:ss tt'))+'</td><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['Status'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['Status'] ? '<span class="k-dirty"></span>' : '' )+'<div class=\'status'+$kendoHtmlEncode(Status)+'\'>'+(Status)+'</div></td><td style="display:none"class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['ExteranlHealthArticleId'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['ExteranlHealthArticleId'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.ExteranlHealthArticleId==null?'':data.ExteranlHealthArticleId)+'</td><td role=\'gridcell\'><a style="'+(((DeleteFlag == true)||(item && item.length > 0 && item[0].IsAdd == false && HealthArticleSource !='GuidingCare'))? 'pointer-events: none; opacity: 0.5;':'' )+'" class=\'icon-action-button-regular clslnkResend\' id=\'lnkResend\' data-healtharticleid=\''+(HealthArticleId)+'\' data-healtharticleheading =\''+(HealthArticleHeading)+'\' data-healtharticletext=\''+$kendoHtmlEncode(HealthArticleText)+'\' data-healthfile=\''+(HealthFile)+'\' data-filedocumentguid=\''+(FileDocumentGuid)+'\'><span class=\'f18 ItemPR5\'><i class=\'far fa-reply-all fa-flip-horizontal\'></i></span></a> </td><td role=\'gridcell\'> <a style="'+((HealthFile == null || HealthFile == '') ? 'pointer-events: none; opacity: 0.5;':'')+'" class=\'icon-action-button-regular\' target="_blank" onclick ="CallAtcmntNewWindow(this);"><span class=\'f18 ItemPR5\'><i class=\'far fa-download\'></i> </span></a><input type=\'hidden\' value=\'/download.ashx?Article='+(HealthFile)+'&DocumentGuid='+(FileDocumentGuid)+'\' /></td></tr>';}return $kendoOutput;'
at Object.compile (kendo.all.js:238:31)
at Object.d [as template] (jquery.min.js?v=20221123162512:2:3873)
at init._tmpl (kendo.all.js:70999:37)
at init._templates (kendo.all.js:71153:45)
at init._continueInit (kendo.all.js:65634:22)
at new init (kendo.all.js:65621:26)
at HTMLDivElement.<anonymous> (kendo.all.js:2520:36)
at Function.each (jquery.min.js?v=20221123162512:2:2898)
at n.fn.init.each (jquery.min.js?v=20221123162512:2:846)
at e.fn.<computed> [as kendoGrid] (kendo.all.js:2519:30)
compile @ kendo.all.js:238
d @ jquery.min.js?v=20221123162512:2
_tmpl @ kendo.all.js:70999
_templates @ kendo.all.js:71153
_continueInit @ kendo.all.js:65634
init @ kendo.all.js:65621
(anonymous) @ kendo.all.js:2520
each @ jquery.min.js?v=20221123162512:2
each @ jquery.min.js?v=20221123162512:2
e.fn.<computed> @ kendo.all.js:2519
eval @ VM5042:2
n @ kendo.aspnetmvc.js:900
eval @ VM5042:2
(anonymous) @ jquery.min.js?v=20221123162512:2
globalEval @ jquery.min.js?v=20221123162512:2
Ha @ jquery.min.js?v=20221123162512:3
append @ jquery.min.js?v=20221123162512:3
(anonymous) @ jquery.min.js?v=20221123162512:3
Y @ jquery.min.js?v=20221123162512:3
html @ jquery.min.js?v=20221123162512:3
(anonymous) @ jquery.min.js?v=20221123162512:4
i @ jquery.min.js?v=20221123162512:2
fireWith @ jquery.min.js?v=20221123162512:2
y @ jquery.min.js?v=20221123162512:4
c @ jquery.min.js?v=20221123162512:4
XMLHttpRequest.send (async)
send @ jquery.min.js?v=20221123162512:4
ajax @ jquery.min.js?v=20221123162512:4
n.fn.load @ jquery.min.js?v=20221123162512:4
eval @ VM5030:20
i @ jquery.min.js?v=20221123162512:2
add @ jquery.min.js?v=20221123162512:2
n.fn.ready @ jquery.min.js?v=20221123162512:2
eval @ VM5030:2
(anonymous) @ jquery.min.js?v=20221123162512:2
globalEval @ jquery.min.js?v=20221123162512:2
Ha @ jquery.min.js?v=20221123162512:3
append @ jquery.min.js?v=20221123162512:3
(anonymous) @ jquery.min.js?v=20221123162512:3
Y @ jquery.min.js?v=20221123162512:3
html @ jquery.min.js?v=20221123162512:3
(anonymous) @ jquery.min.js?v=20221123162512:4
i @ jquery.min.js?v=20221123162512:2
fireWith @ jquery.min.js?v=20221123162512:2
y @ jquery.min.js?v=20221123162512:4
c @ jquery.min.js?v=20221123162512:4
XMLHttpRequest.send (async)
send @ jquery.min.js?v=20221123162512:4
ajax @ jquery.min.js?v=20221123162512:4
n.fn.load @ jquery.min.js?v=20221123162512:4
eval @ VM4781:366
dispatch @ jquery.min.js?v=20221123162512:3
r.handle @ jquery.min.js?v=20221123162512:3

Grid

asked on 14 Feb 2023

14 answers

349 views

Scheduler times have 16px offset when an event starts at 12:00AM

When the scheduler has an event that starts at the cuttoff time for your scheduler-table, the entire table shifts up 16px to accommodate (show) that there is in fact an event there, however the div with class="k-scheduler-times" is not shifted.

For example, my scheduler is setup for 00:00 to 24:00. If I have an event that is starting at 24:00, my table looks perfect until I scroll down to the bottom and the 23:00 - 24:00 time slot becomes visible. Once it is on-screen, the events table all move up by 16px and the grids no longer line up with the scheduler-times.

Please provide a fix, that when this is triggered, to also inlcude the "k-Scheduler-times" to be shifted up in sync with the scheduler-table.

See attached photos.

Thank you,

Rob

Scheduler

answered on 13 Feb 2023

2 answers

411 views

Multi Filterable with client template

Can I please get an example of how to use the multi-filter option (.Filterable(f => f.Multi(true))) when the column is using a ClientTemplate.

WIth the code below I get [Object] [Object] in the column filter drop down. The client template is parse out an array of hyperlinks from the model.

columns.Bound(e => e.Reports).Title("Open <br />Reports").Filterable(f => f.Multi(true)).Width(120).ClientTemplate("#=openReport(Reports)#");

Grid

answered on 10 Feb 2023

0 answers

171 views

jQuery ooxml.Workbook.sheets merge without range name

Note that this is Workbook.sheets and not Spreadsheet, but I couldn't select a more relevant tag nor create my own.

I am having an issue merging cells that are in an existing sheet in a workbook. My attempt to use mergedCells after the sheet has been created has a roadblock, I can't seem to get the range name in string format as documented for the mergedCells option in Workbook.sheet:

mergedCells: ["A6:A8"]

I have the logic to determine which cells' indexes I want to merge, but only the indexes. I can't figure out a way to get the range in an Excel cell name. In the following example, ignoring how I got the index values, I can't merge the cells based on index where indexA is the column and indexB1 and indexB2 are rows.

let indexA = 0;
let indexB1 = 5;
let indexB2 = 7;
sheet.mergedCells = [[{indexA, indexB1},{indexA,indexB2}]]

I have attached a picture of the types of cells I want to merge, my loop first hits A6 through A8 and determines the indexes are to be merged because all the cells' values equal "Boat". Any help is appreciated, and I will try to provide more detail if needed, but it is difficult to provide much more because of the nature of the system I am on.

Thanks in advance.

Grid

Spreadsheet