Questions on UI for ASP.NET MVC Forum

0 answers

163 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

133 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

391 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

160 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

138 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

107 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

247 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

132 views

MVC kendo Form

Hi,

How to pass antiForgeryToken in MVC Kendo form

Form

answered on 16 Feb 2023

0 answers

153 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

382 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