Questions on UI for ASP.NET MVC Forum

2 answers

4.1K+ views

Hi, I am trying to display images in the Grid and nothing I try works. The images are stored on a database and I convert them to a base64 string in the model. If I render the image directly on the page using <img src="data:image/png;base64,@Model.First().Screenshot" /> the image shows up so I don't there is a problem with the model. However, in the grid, my client template renders #=Screenshot# as null. Accessing other properties of the model using #=Name#, for example, renders the proper string. What am I doing wrong?

Here is my view

@model List<ApplicationViewModel>

<img src="data:image/png;base64,@Model.First().Screenshot" />

<div class="container-fluid">
@(Html.Kendo().Grid<ApplicationViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Name);
columns.Bound(c => c.Description);
columns.Bound(c => c.Url);
columns.ForeignKey(c => c.Category, (System.Collections.IEnumerable)ViewBag.cats, "ID", "Category");
columns.Bound(f => f.Screenshot).ClientTemplate("#:Screenshot# <img src='data: image/png; base64,#=Screenshot#' />");
columns.Command(cmd => cmd.Edit());
})
.ToolBar(toolbar =>
{
toolbar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ApplicationTemplate"))
.HtmlAttributes(new { style = "height:90vh; width:100%" })
.Scrollable()
.Sortable()
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("ApplicationRead", "Admin"))
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.ID).Editable(false);
})
.Create(update => update.Action("CreateApplication", "Admin"))
.Update(update => update.Action("UpdateApplication", "Admin"))
.Destroy(update => update.Action("DestroyApplication", "Admin"))
))
</div>
</body>
</html>

Grid

answered on 30 Nov 2017

2 answers

704 views

Setting up DateInput messages in DatePicker?

Hello,

I'm trying to setup a specific display format for a DatePicker when using DateInput. The following works fine functionally:

@(Html.Kendo().DatePicker()
.Format("yyyy-MM-dd")
.DateInput()
.Name("dpSitOpenDate")
.HtmlAttributes(new { style = "width:90%"})
)

My issue with this is that when DateInput() is active, it displays: "Year-Month-Day" before any date is entered. I would prefer it to show "yyyy-mm-dd" instead, so that users know exactly what format is expected of them before they start typing.

I know that a DateInput control by itself has the possibility to enter custom Messages which I believe would have the effect I want, as explained in the Localization example of this page:

https://docs.telerik.com/kendo-ui/controls/editors/dateinput/overview

Is it possible to setup those messages on the DateInput that is embedded in the DatePicker? The only parameter that can seemingly be passed to .DateInput() is a Boolean, so I'm not sure how I could set those messages during creation, and I'm not sure how I would access the DateInput via script either. I know I can access the DatePicker itself via $("#dpSitOpenDate").data("kendoDatePicker") for example, but not the DateInput within it.

Thank you!

DatePicker

answered on 30 Nov 2017

1 answer

123 views

Custom Colouring Column Series based on Line Series

Hi,

I have a Chart with Line and Column Series, programmatically populated from the Sequel server.

My requirement is to custom color the Column series (those bar which appear on the graph per month wise) based on the values of the Line series.

Any column bar whose value is less then the Line series bar to be shown in one color and the values which are more in another color.

Attached is the graph for reference, Thanks in advance for your support in this regards.

Chart

answered on 30 Nov 2017

1 answer

99 views

Time line month view with single day navigation.

In timeline month view, is it possible to navigate a single day, forward and for example see:

- event from 2017-12-02 - 2018.01.02

Scheduler

answered on 30 Nov 2017

5 answers

1.4K+ views

Kendo UI MVC Grid - Inline Editing - Update All Columns

I have a Kendo Grid (MVC) that has multiple Columns.

I have a use case where if Column 1 is edited, the value of Column 2 may change server-side. I'm not seeing the modified values in the grid though.

My Update API handles all of this and returns the updated row. But with inline editing, it seems that if I update Column 1, the other columns aren't refreshing after the Update is finished. So I (the user) has to manually refresh the Grid in order to see Column 2 correctly modified.

What am I doing wrong?

StackOverflow thread with same question: https://stackoverflow.com/q/47354235/590774

Feel free to answer anywhere.

Grid

answered on 30 Nov 2017

2 answers

390 views

DateTime field losing milliseconds in Kendo Grid Update Action

I have a kendo grid with inline editing enabled. One of the field is a datetime field and it is configured to be non-editable. After a update(or delete) action is triggered, the millisecond part of the value of the field is lost in the controller. Is there anyway to avoid it?

Grid

answered on 30 Nov 2017

3 answers

693 views

Grid.Pageable(false) but Grid still show DataSource.PageSize(m) records only

HI

I found there have a problem about Grid.Pageable() and DataSource.PageSize().

If you set Grid.Pageable(false) and Grid becomes unpageable(this is OK)
but DataSource.PageSize(m) setting still applied (Grid still show m records at once, not all records).

I think when Grid.Pageable(false) and Grid should show all records absolutely, RIGHT ?

@(Html.Kendo().Grid(Model.MyList1)
.Name("MyList1Grid")
.Pageable(pageable => pageable.Enabled(false))
...
.DataSource(dataSource =>
{
dataSource.Ajax()
.PageSize(3)
.ServerOperation(false)
.Model(model => model.Id(m => m.UniqueID))
})
...;

*Telerik DevCraft UI for ASP.NET MVC R2 2017 SP1

Best regards

Chris

Grid

answered on 29 Nov 2017

1 answer

119 views

Scroll bar display all the time.

Hello,

We used Kendo UI Editor in our MVC project and realized that scroll bar display all the time even message is very short. Our client asked us to display scroll bar only when it is necessary. Does anyone has solution for it? Thanks in advance.

Editor

answered on 29 Nov 2017

5 answers

335 views

ASP.NET MVC Grid Data Not Displayed

Hi,

I am new to Telerik. I am doing a trial with Telerik Grid using ASP.Net MVC. I couldn't get my grid to display data when the page is loaded. Below are my code blocks:

1. ProductService:

using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using System.Data.Entity; namespace AdmManagerBeta.Models {  public class ProductService : IDisposable {  private static bool UpdateDatabase = false;  private ADMUsersEntities entities;  public ProductService(ADMUsersEntities entities) {  this.entities = entities; }  public IList<ProductViewModel> GetAll() { var result = HttpContext.Current.Session["Products"] as IList<ProductViewModel>;  if (result == null || UpdateDatabase) { result = entities.Products.Select(product => new

ProductViewModel<br>                {<br>                    ProductID = product.ProductID,<br>                    ProductName = product.ProductName<br>

//UnitPrice = product.UnitPrice.HasValue ? product.UnitPrice.Value : default(decimal),<br>                    //UnitsInStock = product.UnitsInStock.HasValue ? product.UnitsInStock.Value : default(short),<br>                    //QuantityPerUnit = product.QuantityPerUnit,<br>                    //Discontinued = product.Discontinued,<br>                    //UnitsOnOrder = product.UnitsOnOrder.HasValue ? (int)product.UnitsOnOrder.Value : default(int),<br>                    //CategoryID = product.CategoryID,<br>                    //Category = new CategoryViewModel()<br>                    //{<br>                    //    CategoryID = product.Category.CategoryID,<br>                    //    CategoryName = product.Category.CategoryName<br>                    //},<br>                    //LastSupply = DateTime.Today<br>                }).ToList();<br><br>                HttpContext.Current.Session["Products"] = result;<br>            }<br><br>            return result;<br>        }<br><br>        public IEnumerable<ProductViewModel> Read()<br>        {<br>            return GetAll();<br>        }<br><br>        public void Create(ProductViewModel product)<br>        {<br>            if (!UpdateDatabase)<br>            {<br>                var first = GetAll().OrderByDescending(e => e.ProductID).FirstOrDefault();<br>                var id = (first != null) ? first.ProductID : 0;<br><br>                product.ProductID = id + 1;<br><br>                if (product.CategoryID == null)<br>                {<br>                    product.CategoryID = 1;<br>                }<br><br>                if (product.Category == null)<br>                {<br>                    product.Category = new CategoryViewModel() { CategoryID = 1, CategoryName = "Beverages" };<br>                }<br><br>                GetAll().Insert(0, product);<br>            }<br>            else<br>            {<br>                var entity = new Product();<br><br>                entity.ProductName = product.ProductName;<br>                entity.UnitPrice = product.UnitPrice;<br>                entity.UnitsInStock = (short)product.UnitsInStock;<br>                entity.Discontinued = product.Discontinued;<br>                entity.CategoryID = product.CategoryID;<br><br>                if (entity.CategoryID == null)<br>                {<br>                    entity.CategoryID = 1;<br>                }<br><br>                if (product.Category != null)<br>                {<br>                    entity.CategoryID = product.Category.CategoryID;<br>                }<br><br>                entities.Products.Add(entity);<br>                entities.SaveChanges();<br><br>                product.ProductID = entity.ProductID;<br>            }<br>        }<br><br>        public void Update(ProductViewModel product)<br>        {<br>            if (!UpdateDatabase)<br>            {<br>                var target = One(e => e.ProductID == product.ProductID);<br><br>                if (target != null)<br>                {<br>                    target.ProductName = product.ProductName;<br>                    target.UnitPrice = product.UnitPrice;<br>                    target.UnitsInStock = product.UnitsInStock;<br>                    target.Discontinued = product.Discontinued;<br><br>                    if (product.CategoryID == null)<br>                    {<br>                        product.CategoryID = 1;<br>                    }<br><br>                    if (product.Category != null)<br>                    {<br>                        product.CategoryID = product.Category.CategoryID;<br>                    }<br>                    else<br>                    {<br>                        product.Category = new CategoryViewModel()<br>                        {<br>                            CategoryID = (int)product.CategoryID,<br>                            CategoryName = entities.Categories.Where(s => s.CategoryID == product.CategoryID).Select(s => s.CategoryName).First()<br>                        };<br>                    }<br><br>                    target.CategoryID = product.CategoryID;<br>                    target.Category = product.Category;<br>                }<br>            }<br>            else<br>            {<br>                var entity = new Product();<br><br>                entity.ProductID = product.ProductID;<br>                entity.ProductName = product.ProductName;<br>                entity.UnitPrice = product.UnitPrice;<br>                entity.UnitsInStock = (short)product.UnitsInStock;<br>                entity.Discontinued = product.Discontinued;<br>                entity.CategoryID = product.CategoryID;<br><br>                if (product.Category != null)<br>                {<br>                    entity.CategoryID = product.Category.CategoryID;<br>                }<br><br>                entities.Products.Attach(entity);<br>                entities.Entry(entity).State = EntityState.Modified;<br>                entities.SaveChanges();<br>            }<br>        }<br><br>        public void Destroy(ProductViewModel product)<br>        {<br>            if (!UpdateDatabase)<br>            {<br>                var target = GetAll().FirstOrDefault(p => p.ProductID == product.ProductID);<br>                if (target != null)<br>                {<br>                    GetAll().Remove(target);<br>                }<br>            }<br>            else<br>            {<br>                var entity = new Product();<br><br>                entity.ProductID = product.ProductID;<br><br>                entities.Products.Attach(entity);<br><br>                entities.Products.Remove(entity);<br><br>                var orderDetails = entities.Order_Details.Where(pd => pd.ProductID == entity.ProductID);<br><br>                foreach (var orderDetail in orderDetails)<br>                {<br>                    entities.Order_Details.Remove(orderDetail);<br>                }<br><br>                entities.SaveChanges();<br>            }<br>        }<br><br>        public ProductViewModel One(Func<ProductViewModel, bool> predicate)<br>        {<br>            return GetAll().FirstOrDefault(predicate);<br>        }<br><br>        public void Dispose()<br>        {<br>            entities.Dispose();<br>        }<br>    }<br>}

2. ProductController.cs:

using AdmManagerBeta.Models; using Kendo.Mvc.Extensions; using Kendo.Mvc.UI; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace AdmManagerBeta.Controllers {  public class ProductController : Controller {  private ProductService productService;  public ProductController() { productService = new ProductService(new ADMUsersEntities()); }  protected override void Dispose(bool disposing) { productService.Dispose();  base.Dispose(disposing); }  public ActionResult Index() {  return View(); }  public ActionResult Editing_Read([DataSourceRequest] DataSourceRequest request) {  return

Json(productService.Read().ToDataSourceResult(request));<br>        }<br><br>        [AcceptVerbs(HttpVerbs.Post)]<br>

public ActionResult Editing_Create([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ProductViewModel> products) { var results = new List<ProductViewModel>();  if (products != null && ModelState.IsValid) {  foreach (var product in

products)<br>                {<br>                    productService.Create(product);<br>                    results.Add(product);<br>                }<br>            }<br><br>

return

Json(results.ToDataSourceResult(request, ModelState));<br>        }<br><br>        [AcceptVerbs(HttpVerbs.Post)]<br>

public ActionResult Editing_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ProductViewModel> products) {  if (products != null && ModelState.IsValid) {  foreach (var product in

products)<br>                {<br>                    productService.Update(product);<br>                }<br>            }<br><br>

return

Json(products.ToDataSourceResult(request, ModelState));<br>        }<br><br>        [AcceptVerbs(HttpVerbs.Post)]<br>

public ActionResult Editing_Destroy([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ProductViewModel> products) {  if (products.Any()) {  foreach (var product in

products)<br>                {<br>                    productService.Destroy(product);<br>                }<br>            }<br><br>

return Json(products.ToDataSourceResult(request, ModelState)); } } } 

3. Index.cshtml:

@using Kendo.Mvc.UI; @(Html.Kendo().Grid<AdmManagerBeta.Models.ProductViewModel>() .Name("Grid"

)<br>    .Columns(columns =><br>    {<br>        columns.Bound(p => p.ProductName);<br>        columns.Bound(p => p.UnitPrice).Width(140);<br>        columns.Bound(p => p.UnitsInStock).Width(140);<br>        columns.Bound(p => p.Discontinued).Width(100);<br>        columns.Command(command => command.Destroy()).Width(150);<br>    })<br>    .ToolBar(toolbar =><br>    {<br>        toolbar.Create();<br>        toolbar.Save();<br>    })<br>    .Editable(editable => editable.Mode(GridEditMode.InCell))<br>    .Pageable()<br>    .Navigatable()<br>    .Sortable()<br>    .Scrollable()<br>    .DataSource(dataSource => dataSource<br>        .Ajax()<br>        .Batch(

true) .PageSize(20) .ServerOperation(false) .Events(events => events.Error("error_handler")) .Model(model => model.Id(p => p.ProductID)) .Create("Editing_Create", "Product") .Read("Editing_Read", "Product") .Update("Editing_Update", "Product") .Destroy("Editing_Destroy", "Product") ) ) <script type="text/javascript"> function error_handler(e) {  if (e.errors) { var message = "Errors:\n"; $.each(e.errors, function (key, value) {  if ('errors' in

value) {<br>                    $.each(value.errors, function() {<br>                        message +=

this + "\n"

;<br>                    });<br>                }<br>            });<br>            alert(message);<br>        }<br>    }<br></script>

4. _Layout.cshtml:

<p><!DOCTYPE html><br><html><br><head><br>    <title>@ViewBag.Title - My Telerik MVC Application</title><br>    <link href=

"https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" rel="stylesheet"> <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.metro.min.css" rel="stylesheet"> <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.dataviz.min.css" rel="stylesheet"> <link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.dataviz.metro.min.css" rel="stylesheet"> <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jszip.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.aspnetmvc.min.js"></script> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script> </head> <body> <header> <div class="content-wrapper"> <div class="float-left"> @Html.ActionLink("your logo here", "Index", "Home") </div> <div class="float-right"> <nav> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("Register", "Index", "Register")</li> <li>@Html.ActionLink("Login", "Index", "Login")</li> <li>@Html.ActionLink("Product", "Index", "Product"

)</li><br>                    </ul><br>                </nav><br>            </div><br>        </div><br>    </header><br>    <div id=

"body"> @RenderSection("featured", required: false) <section class="content-wrapper main-content clear-fix"

><br>            @RenderBody()<br>        </section><br>    </div><br>    <footer><br>        <div class=

"content-wrapper"> <div class="float-left"

><br>                <p>&copy; @DateTime.Now.Year - My Telerik MVC Application</p><br>            </div><br>        </div><br>    </footer><br></body><br></html></p><p></p><p></p><p></p>

Grid

answered on 29 Nov 2017

3 answers

252 views

Need to send column bounded context to html partial

Hi,

I am trying to use editor template in grid and for that i have html partial view but i am unable to find the way to send the bounded context to my partial view. can you please help guys ??

Grid

answered on 29 Nov 2017