Questions on UI for ASP.NET MVC Forum

1 answer

159 views

Grid Column and Toolbar Template methods are Obsolete in Kendo.MVC dll

I am upgrading a .NET application from .NET 4.5 to .NET 6.0. As part of the upgrade have upgraded the Kendo.MVC dll as well from Version 2018.3.911.545 to 2022.1.119.0

In existing application we use Telerik grid and we use their template methods to define custom templates for Grid, toolbar and footer as shown below

pCol.Template( pT => { } ).Title( "" )
.Width( "3%" )
.ClientTemplate(
" #if (ExcludeFromWorkbook == false && ExcludeBtnExcludeFromWorkbookOnRow == false) {#" +
"<a class='btn btn-success btn-xs' id='btnIncludeExcludeInd_\"#=Id#\"' title='Row Included in Workbook, Click to Exclude from Workbook' onclick='onIncludeExcludeClick(this)'> <i class='fa fa-plus-square'></i> </a> #}"
+ "if (ExcludeFromWorkbook == true && ExcludeBtnExcludeFromWorkbookOnRow == false) {# " +
"<a class='btn btn-danger btn-xs' id='btnIncludeExcludeInd_\"#=Id#\"' title='Row Excluded from Workbook, Click to Include in Workbook' onclick='onIncludeExcludeClick(this)'> <i class='fa fa-minus-square'></i> </a> #}"
+ "else{# #}#"
)
.HtmlAttributes( new {style = "text-align: center;"} )
.ClientFooterTemplate( "#=conditionalSum('ExcludeFromWbBtn')#" );

.ToolBar(toolbar =>
{
if (userCanEdit) //if user has edit rights show save and rest of toolbar template
{
toolbar.Template(@<text>
<div class="toolbar" id="toobarid1">
<input type="type" onblur="checkCommentField(this);" onkeypress="checkCommentField(this);" name="name" value="" class="k-textbox" id="componentComment" maxlength="500" placeholder="Edit values and add comment to enable Save..." style="width: 480px" />
@item.SaveButton()
</div>
</text>);
}
}) //e

But in the upgraded dll am unable to find the below method definitions

public virtual GridTemplateColumnBuilder<TModel> Template(Action<TModel> templateAction) in GridColumnFactory
public void Template(Func<Grid<T>, object> template); in GridToolBarCommandFactory
public GridBuilder<T> TableHtmlAttributes(object attributes); in GridBuilder

Kindly let me know whats the equivalent methods available in the new dll to substitute the old ones and the new way of implementing our existing logic.

Grid

answered on 03 Mar 2023

0 answers

169 views

MVC Kendo Spreadsheet local data bidding Create/Update/Delete

0

I use Kendo Spreadsheet widget with local data binding in MVC. How can I set the datasource to the spreadsheet to do create, update and delete operation?

I know this example,

https://demos.telerik.com/aspnet-mvc/spreadsheet/datasource

but ajax remote binding is not fine for me, because the excel file has a realy complex header with many merged cells. And remote data fills the first row which overwrite header files. So I use this example:

https://www.telerik.com/forums/loading-data-into-a-specific-row-in-kendo-spreadsheet

After using it data liested in the proper rows, but it's very slow.

So please give me some information to resolve this issue. A have to save modifications of the spreadsheet.

Here I list a simple example of how I bind the data:

ViewModel:

public int ID { get; set; }
    public int Name { get; set; }
    public string Status { get; set; }
}

Action in controller:

public ActionResult Index()
{
    List<ViewModel> model = service.GetData();
    return View(model);
}

View cshtml:

@model List<Namespace.Model.ViewModel>

@section body {

    @(Html.Kendo().Spreadsheet()
        .Columns(3)
        .Name("DataExcel")
        .HtmlAttributes(new { style = "width:auto; height: 770px;" })
        .Toolbar(false)
        .Sheetsbar(false)
        .Events(e => e
            .Select("Scripts.onSelect"))
        .Sheets(sheets =>
        {
            sheets.Add()
            .Name("DataSheet")
            .Columns(columns =>
            {
                // Megbízott neve és státusza + Tantárgy neve
                columns.Add().Width(50);
                columns.Add().Width(100);
                columns.Add().Width(100);
            }).Rows(rows =>
            {
                foreach (var dataRow in Model)
                {
                    rows.Add().Height(50).Cells(cells =>
                    {
                        // Megbízott státusza
                        cells.Add()
                            .Value(dataRow.ID)
                            .VerticalAlign(SpreadsheetVerticalAlign.Center)
                            .Color("black");

                        // Tantárgy neve
                        cells.Add()
                            .Value(dataRow.Name)
                            .VerticalAlign(SpreadsheetVerticalAlign.Center)
                            .Color("black");

                        // Órakeret
                        cells.Add()
                            .Value(dataRow.Status)
                            .VerticalAlign(SpreadsheetVerticalAlign.Center)
                            .Color("black")
                            .Bold(true);
                    }
                }
            });
        })
    )
}

Spreadsheet

asked on 02 Mar 2023

1 answer

136 views

Grid PopUp Shows Hidden Fields on mobile

I have a grid with popup editing. The grid is using a custom editor. The grid has the mobile attribute set.

When adding a record on a mobile(ipad) the editor is showing the hidden fields that accompany the kendo components. See Screen prints

Grid

answered on 02 Mar 2023

1 answer

411 views

How can I download an older version of Kendo UI ASP.NET MVC

I need and older version of UI for ASP.NET MVC, more exactly 2021.3.1207 which does not have so many changes on widgets and is compatible with jQuery 3.6.0.

I need trial version just to see if I can upgrade from 2017 version and jQuery from 1.10.2 without much effort and rewriting code.

Thanks

Grid

answered on 28 Feb 2023

2 answers

164 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

145 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

116 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

253 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

135 views

MVC kendo Form

Hi,

How to pass antiForgeryToken in MVC Kendo form

Form

answered on 16 Feb 2023

0 answers

156 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