Questions on UI for ASP.NET MVC Forum

4 answers

1.2K+ views

How to add Foreign Key Column or Drop Down List in Grid?

I'm trying to add a foreign key column in my grid. I have a backups table that has a pc_id column. I also have a pc table with pc_id and pc_name columns. Right now, my grid is displaying the pc_id because that is the value that is stored in the backups table. However, I want the grid to display the pc_name.

Index.cshtml:

@{

ViewBag.Title = "Backup Dashboard";

}

@model IEnumerable<MayetDashboard.Models.backup>

<h1>Backup</h1>

@(Html.Kendo().Grid(Model)

.Name("Grid")

.Columns(columns =>

{

columns.Bound(c => c.backup_id).Title("Backup ID");

columns.Bound(c => c.pc_id).Title("PC ID");

//columns.ForeignKey(c => c.pc_id, (System.Collections.IEnumerable)ViewData["pc"], "pc_id", "pc_name").Title("PC ID");

columns.Bound(c => c.log_file).Title("Log File").Hidden(true);

columns.Bound(c => c.backup_date).Title("Backup Date");

columns.Bound(c => c.backup_job).Title("Backup Job");

columns.Bound(c => c.backup_result).Title("Backup Result");

columns.Bound(c => c.backup_text).Title("Backup Text").Hidden(true);

columns.Bound(c => c.stamp_date).Title("Stamp Date");

columns.Command(command => { command.Destroy(); });

})

.Pageable()

.Filterable(filter =>

{

filter.Extra(false);

filter.Operators(op =>

{

op.ForString(str =>

{

str.Clear().Contains("Contains");

});

})

.DataSource(dataSource => dataSource

.Server()

.Model(model =>

{

model.Id(p => p.backup_id);

model.Field(p => p.pc_id).DefaultValue(1);

})

.Read(read => read.Action("Index", "Backup"))

.Destroy("backups_Destroy", "Backup")

)

BackupController.cs:

using System;

using System.Linq;

using System.Data;

using System.Collections.Generic;

using System.Web.Mvc;

using System.Web.Routing;

using Kendo.Mvc.Extensions;

using MayetDashboard.Models;

using System.Data.Entity;

using System.IO;

using Telerik.Windows.Zip;

using System.IO.Compression;

using System.Text.RegularExpressions;

using System.Data.SqlClient;

using Kendo.Mvc.UI;

namespace MayetDashboard.Controllers

{

public class BackupService : IDisposable

{

private mayet_dashboardEntities1 db;

public BackupService(mayet_dashboardEntities1 db)

{

this.db = db;

}

public IEnumerable<backup> Read()

{

return db.backups;

}

public void Destroy(backup backup)

{

var entity = new backup

{

backup_id = backup.backup_id,

pc_id = backup.pc_id,

log_file = backup.log_file,

backup_date = backup.backup_date,

backup_job = backup.backup_job,

backup_result = backup.backup_result,

backup_text = backup.backup_text,

stamp_date = backup.stamp_date,

};

db.backups.Attach(entity);

db.backups.Remove(entity);

db.SaveChanges();

}

public void Dispose()

{

db.Dispose();

}

public class BackupController : Controller

{

private BackupService backupService;

public BackupController()

{

backupService = new BackupService(new mayet_dashboardEntities1());

}

protected override void Dispose(bool disposing)

{

backupService.Dispose();

base.Dispose(disposing);

}

public ActionResult Index()

{

return View(backupService.Read());

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Backups_Destroy(backup backup)

{

RouteValueDictionary routeValues;

backupService.Destroy(backup);

routeValues = this.GridRouteValues();

return RedirectToAction("Index", routeValues);

}

public void Update()

{

//GET ALL ZIPPED UP LOG FILES

string[] arrayLogs = Directory.GetFiles(@"\\192.168.222.245\Backups\logs", "*.zip", System.IO.SearchOption.AllDirectories);

var countLogs = arrayLogs.Length;

string tempFolder = @"C:\temp\";

for (int i = 0; i < countLogs; i++)

{

string logItem = arrayLogs[i];

var logDirectory = new FileInfo(logItem).DirectoryName;

//ZipFile.ExtractToDirectory(logItem, @"C:\temp\");

using (System.IO.Compression.ZipArchive archive = ZipFile.OpenRead(logItem))

{

foreach (System.IO.Compression.ZipArchiveEntry entry in archive.Entries)

{

if (entry.FullName.EndsWith(".txt", StringComparison.OrdinalIgnoreCase))

{

entry.ExtractToFile(Path.Combine(tempFolder, entry.FullName), true);

}

//BACKUP_TEXT COLUMN

string backupText = System.IO.File.ReadAllText(tempFolder + "LogFile.txt");

string resultBackupText = Regex.Replace(backupText, @"^\s+$[\r\n]*", string.Empty, RegexOptions.Multiline);

//PC_ID COLUMN

int startPosPcId = resultBackupText.LastIndexOf("Computer/Account: ") + "Computer/Account: ".Length;

int lengthPcId = resultBackupText.IndexOf(" /") - startPosPcId;

string subPcId = resultBackupText.Substring(startPosPcId, lengthPcId);

int finalSubPcId = 0;

if (subPcId == "REA015-PC") finalSubPcId = 1;

else if (subPcId == "REA010-PC") finalSubPcId = 2;

else if (subPcId == "DESKTOP-V4KPLUF") finalSubPcId = 3;

else if (subPcId == "REA014-PC") finalSubPcId = 4;

else if (subPcId == "REA005-PC") finalSubPcId = 5;

else if (subPcId == "REA016-PC") finalSubPcId = 6;

else if (subPcId == "SCOTT-PC") finalSubPcId = 7;

else if (subPcId == "DESKTOP-Q6FFN6U") finalSubPcId = 8;

else if (subPcId == "REA009-PC") finalSubPcId = 9;

else if (subPcId == "ALI-PC") finalSubPcId = 10;

else if (subPcId == "REA006-PC") finalSubPcId = 11;

else if (subPcId == "DESKTOP-0B5GIC0") finalSubPcId = 12;

else if (subPcId == "REA018-PC") finalSubPcId = 13;

else if (subPcId == "EDREAINC-PC") finalSubPcId = 14;

else if (subPcId == "REA013-PC") finalSubPcId = 15;

else if (subPcId == "REA011-PC") finalSubPcId = 16;

else if (subPcId == "JEA-PC") finalSubPcId = 17;

else if (subPcId == "DESKTOP-UHJ55OH") finalSubPcId = 18;

else if (subPcId == "REA019-PC") finalSubPcId = 19;

//BACKUP_DATE COLUMN

int startPosBackupDate = resultBackupText.IndexOf("Backup end: ") + "Backup end: ".Length;

int lengthBackupDate = resultBackupText.IndexOf("Time taken: ") - startPosBackupDate;

string subBackupDate = resultBackupText.Substring(startPosBackupDate, lengthBackupDate);

string resultSubBackupDate = subBackupDate.TrimEnd('\n').TrimEnd('\r');

DateTime finalResultSubBackupDate = DateTime.Parse(resultSubBackupDate);

//BACKUP_JOB COLUMN

int startPosBackupJob = resultBackupText.IndexOf("Iperius Backup Report") + "Iperius Backup Report".Length;

int lengthBackupJob = resultBackupText.IndexOf("Backup start: ") - startPosBackupJob;

string subBackupJob = resultBackupText.Substring(startPosBackupJob, lengthBackupJob);

string resultSubBackupJob = subBackupJob.TrimStart('\r').TrimStart('\n').TrimEnd('\n').TrimEnd('\r');

//BACKUP_RESULT COLUMN

int startPosBackupResult = resultBackupText.IndexOf("Backup result: ") + "Backup result: ".Length;

int lengthBackupResult = resultBackupText.LastIndexOf("Backup start: ") - startPosBackupResult;

string subBackupResult = resultBackupText.Substring(startPosBackupResult, lengthBackupResult);

string resultSubBackupResult = subBackupResult.TrimEnd('\n').TrimEnd('\r');

//INSERT INTO BACKUP TABLE

using (var context = new mayet_dashboardEntities1())

{

var table = new backup

{

pc_id = finalSubPcId,

log_file = logItem,

backup_date = finalResultSubBackupDate,

backup_job = resultSubBackupJob,

backup_result = resultSubBackupResult,

backup_text = resultBackupText,

stamp_date = DateTime.Now

};

context.backups.Add(table);

context.SaveChanges();

}

//MOVE LOG FILE FROM LOGS TO LOGS_PROCESSED FOLDER

string fileName = Path.GetFileNameWithoutExtension(logItem);

string fileExtension = Path.GetExtension(logItem);

Regex rgx = new Regex("[^a-zA-Z0-9 -]");

string fileBackupDate = rgx.Replace(resultSubBackupDate, "");

string fileRename = @"\\192.168.222.245\Backups\logs_processed\\" + fileName + "_" + subPcId + "_" + fileBackupDate + fileExtension;

System.IO.File.Move(logItem, fileRename);

}

pc.cs:

//------------------------------------------------------------------------------

// <auto-generated>

// This code was generated from a template.

//

// Manual changes to this file may cause unexpected behavior in your application.

// Manual changes to this file will be overwritten if the code is regenerated.

// </auto-generated>

//------------------------------------------------------------------------------

namespace MayetDashboard.Models

{

using System;

using System.Collections.Generic;

public partial class pc

{

[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]

public pc()

{

this.backups = new HashSet<backup>();

this.events = new HashSet<@event>();

}

public int pc_id { get; set; }

public string pc_name { get; set; }

public Nullable<int> user_id { get; set; }

public string system { get; set; }

public string service_tag { get; set; }

public Nullable<System.DateTime> purchase_date { get; set; }

public string backup_code { get; set; }

public string systeminfo_dump { get; set; }

[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]

public virtual ICollection<backup> backups { get; set; }

[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]

public virtual ICollection<@event> events { get; set; }

public virtual user user { get; set; }

}

backup.cs:

//------------------------------------------------------------------------------

// <auto-generated>

// This code was generated from a template.

//

// Manual changes to this file may cause unexpected behavior in your application.

// Manual changes to this file will be overwritten if the code is regenerated.

// </auto-generated>

//------------------------------------------------------------------------------

namespace MayetDashboard.Models

{

using System;

using System.Collections.Generic;

public partial class pc

{

[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]

public pc()

{

this.backups = new HashSet<backup>();

this.events = new HashSet<@event>();

}

public int pc_id { get; set; }

public string pc_name { get; set; }

public Nullable<int> user_id { get; set; }

public string system { get; set; }

public string service_tag { get; set; }

public Nullable<System.DateTime> purchase_date { get; set; }

public string backup_code { get; set; }

public string systeminfo_dump { get; set; }

[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]

public virtual ICollection<backup> backups { get; set; }

[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]

public virtual ICollection<@event> events { get; set; }

public virtual user user { get; set; }

}

Thank you!

Grid

answered on 13 Nov 2018

1 answer

875 views

Excel "viewer-only" functionality

Hi support team

Our customer wants to display the content of a simple (i.e. one sheet, simple content, see sample image attached) excel on a ASP.NET MVC rendered page. Is there a way to configure the Spreadsheet component without any menues and additional functionality like editing, copy/paste, etc.?

Or is there a smarter way to provide such "viewer-only" functionality, like loading the excel sheet and display its contet in a Grid component?

Uploading the file is not an issue, we have implemented this already. My question is only about rendering/displaying the content of a excel sheet on a page.

Any advice is highly appreciated.

Regards, Daniel

Spreadsheet

answered on 12 Nov 2018

3 answers

753 views

Controls are not rendering.

Hello,

I created a new C# MVC Application using the template provided by Telerik. for some reason the controls do not render when running the application. I checked the references in the layout page and the web.config files and everything looks correct. I am using vs 2017 and am on 4.6.1 Framework

I have attached a screen shot of how the dropdownlist is rendered(copied code from website)

Thanks,

M. Blake

Installer and VS Extensions

answered on 12 Nov 2018

8 answers

261 views

TreeMap - Unhandled exception kendo.all.min.js 0x800a01b6

Hello, I have a problem with the treemap component in the MVC project, when it displays an exception :

Unhandled exception at line 122, column 18825 in http://localhost:58298/Scripts/kendo/kendo.all.min.js
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'level'

Index:

@(Html.Kendo().TreeMap()

.Name("treeMap")

.DataSource(dataSource => dataSource

.Read(read => read.Action("FrekvenceCestujicich", "Dashboard"))

.Model(m => m.Children("Items"))

)

.ValueField("Value")

.TextField("Name")

.HtmlAttributes(new { style = "height:600px; font-size: 12px;" })

)

Controller :

public class DashboardController : BaseController

{

public ActionResult FrekvenceCestujicich()

{

List<Zastavky> zastavky = new List<Zastavky>();

Zastavky mesto = new Zastavky("mesto", 5111856, new List<Zastavky>());

zastavky.Add(mesto);

mesto.Items.Add(new Zastavky("Plotní", 166313, null));

mesto.Items.Add(new Zastavky("Česká", 125917, null));

mesto.Items.Add(new Zastavky("Celní", 415796, null));

mesto.Items.Add(new Zastavky("Moravská", 512761, null));

mesto.Items.Add(new Zastavky("Smetanova", 333111, null));

mesto.Items.Add(new Zastavky("Náměstí Republiky", 298119, null));

mesto.Items.Add(new Zastavky("Haškova", 131222, null));

mesto.Items.Add(new Zastavky("Nerudova", 256771, null));

mesto.Items.Add(new Zastavky("Dětská nemocnice", 139012, null));

mesto.Items.Add(new Zastavky("Svatoplukova", 431233, null));

mesto.Items.Add(new Zastavky("Jana Žižky", 99019, null));

mesto.Items.Add(new Zastavky("Nová", 76511, null));

mesto.Items.Add(new Zastavky("Kotlářská", 100988, null));

mesto.Items.Add(new Zastavky("Mahenova", 188988, null));

mesto.Items.Add(new Zastavky("U Buku", 36981, null));

mesto.Items.Add(new Zastavky("Kolmá", 88999, null));

mesto.Items.Add(new Zastavky("Divadelní", 889231, null));

mesto.Items.Add(new Zastavky("Koniklecová", 234111, null));

mesto.Items.Add(new Zastavky("Lesní", 31651, null));

mesto.Items.Add(new Zastavky("Mrakodrap", 555122, null));

return Json(zastavky, JsonRequestBehavior.AllowGet);

}

Model :

public class Zastavky

{

public Zastavky(string name, int value, List<Zastavky> items)

{

Name = name;

Value = value;

Items = items;

}

public string Name { get; set; }

public double Value { get; set; }

public List<Zastavky> Items { get; set; }

}

Included javascripts :

"jquery.min.js"

"kendo.all.min.js",

"kendo.aspnetmvc.min.js"

TreeMap

answered on 12 Nov 2018

1 answer

886 views

Grid.Column.title

columns.Bound("").HeaderTemplate("#=getTitleforAllownceColumn(data)#").ClientTemplate("#=getTemplateForAllownceColumn(data)#");
columns.Bound("").Title("#=getTitleforDeductionColumn(data)#") or .HeaderTemplate("#=getTitleforDeductionColumn(data)#").ClientTemplate("#=getTemplateForDeductionColumn(data)#");

I want to set title dynamically through a java script method so that i can iterate through a list of items that i don't have idea how many members will be inside the list and what will be their value and description.

ClientTemplate is hitting the method but title and headertemplate do not

Is there any way i can achieve this.

Grid

answered on 12 Nov 2018

2 answers

597 views

[Solved] Inline Editing for Dropdown when empty returns [Object object]

Trying to implement inline editing. Following is a simplified version.

EmployeeEditor.cshtml inside EditorTemplates folder

@(Html.Kendo().DropDownList()
.Name("ToBranch")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((System.Collections.IEnumerable)ViewData["toBranch"])
)

Employee class

public class Employee

{

public string EmployeeName {get; set;}

[UIHint("EmployeeEditor"]

public string ToBranch {get; set;}

}

View

@Html.Kendo().Grid(Model.Employees)
.Name("BranchGrid")
.Columns(col =>
{
col.Bound(o => o.EmployeeName);
col.Bound(o => o.ToBranch);
col.Command(command => { command.Edit(); });
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Field(o => o.EmployeeName).Editable(false);
})
.Update(update => update.Action("EditingInline_Update", "BranchForm"))
.ServerOperation(false))
.Events(events => events.DataBound("error_handler"))
.Render();

Controller

public ActionResult Index()

{

//Populate a model

ViewData["toBranch"] = branches

return View(model);

}

/////// Important Part

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, Employee model)
{

//// If there was a branch initially say 24 and I change it to 28, I do see model.ToBranch as 28 ( works fine)

//// However, if the branch was initially an empty string and I change it to 28, model.ToBranch is "[Object object]"

}

Can you please tell me why this is happening? This is kind of critical and an urgent reply would be really appreciated

Grid

answered on 09 Nov 2018

1 answer

148 views

bootstrap-v4 PDF export loading bar appears in pdf

When using bootstrap V4 css, the loading bar appears in the exported PDF.

I checked the telerik pdf export demo page which I assume doesn't use V4 and it doesn't have this issue.

I'm getting around this temporarily by setting

.k-loading-pdf-mask {
display: none !important;
}

Grid

answered on 09 Nov 2018

5 answers

668 views

Bootstrap-v4 Theme button issue

I have a site, using the bootstrap-v4 theme (version 2018.3.1017), along with bootstrap version 4.1.3.

When showing the Edit and Delete buttons on a grid, there is no spacing between them (Image attached). If I include the kendo.common.css file, button spacing is corrected, but the pop-up editor window then shows a vertical scroll bar, and the close button is outside of the window.

The css files that are included in the site are:-

bootstrap.css
font awesome/all.css
site.css (default MVC starting css file)
kendo.bootstrap-v4.min.css

What do I need to add / alter to correct the button spacing issue?

Thanks

Grid

answered on 08 Nov 2018

3 answers

168 views

Iicensee issue

Hi Telerik,

I bought one licensee, but system show "You're using a trial version of Telerik UI for asp.net mvc by progress".

can you tell how to resolve this issue?

Thanks

Grady Lu

General Discussions

answered on 08 Nov 2018

8 answers

1.5K+ views

DropDownList with Server Filtering on Bootstrap Modal

Hi there,

We are using Q2 2014 MVC official release and are having an issue with filtering on a dropdownlist when this is on a Twitter Bootstrap modal.

Code sample:

Editor Template:

@model string

@(Html.Kendo().DropDownListFor(m => m)

.DataTextField("Username")

.DataValueField("UserDetailId")

.OptionLabel("-- Please select --")

.Filter("contains")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("Search", "User", new { area = "Search" });

})

.ServerFiltering(true);

})

)

Modal form:

@model SelectUserModel

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4 class="modal-title">Select User</h4>

</div>

@using (Html.BeginForm())

{

if (Html.ViewData.ModelState.Any(m => m.Key == string.Empty))

{

<div class="row">

<div class="form-group col-md-12 alert alert-danger">Error:@Html.ValidationSummary()</div>

</div>

}

<div class="modal-body">

<div class="form-vertical">

<div class="row">

<div class="form-group">

<div class="col-md-6 ">

@Html.LabelFor(model => model.UserDetailId)

@Html.EditorFor(model => model.UserDetailId)

@Html.ValidationMessageFor(model => model.UserDetailId)

</div>

<div class="modal-footer">

@Html.SubmitButton()

@Html.ModalCancelButton()

</div>

}

The dropdownlist renders correctly and works fine in Chrome and Firefox. However, in IE 9-11 the dropdown opens when the arrow is clicked but immediately closes again.

Any ideas?

Thanks,

Paul

DropDownList

answered on 07 Nov 2018