Questions on UI for ASP.NET MVC Forum

6 answers

1.1K+ views

Passing the Multiselect values to Grid in MVC

Hello,

I have been trying to bind the Multiselect values to the grid using Telerik. I am able to get the multiselect values using Server Binding from the controller. But unable to show those values in the grid below that Multiselect.

Can anyone please help me with this? Anything would help. Thank you.

Grid

answered on 17 Aug 2017

1 answer

219 views

Ability to alter the delete confirmation prompt

When deleting an item a prompt message will appear:

if a single occurrence: "Are you sure you want to delete this event?" <Delete> <Cancel>

if recurrence: "Do you want to delete only this event occurrence or the whole series?" <Delete current occurrence> <Delete the series>

I would like to add in the title of the event to the prompt text so the user can verify her/she is deleting the proper event.

Scheduler

answered on 17 Aug 2017

2 answers

140 views

Sortable Panel Click event

Hi,

I am trying to get a click event on my sortable panels and I am not having the best of luck. Basically I have 3 columns (i.e. #main-content1) that can have 1 - 4 panels in each column and I need to go to a specific page based on what panel is clicked.

I am using the following:
@(Html.Kendo().Sortable()
.For("#main-content1")
.ConnectWith("#main-content2,#main-content3")
.Cursor("move")
.PlaceholderHandler("placeholder")
.HintHandler("hint")
)
@(Html.Kendo().Sortable()
.For("#main-content2")
.ConnectWith("#main-content1,#main-content3")
.Cursor("move")
.PlaceholderHandler("placeholder")
.HintHandler("hint")
)
@(Html.Kendo().Sortable()
.For("#main-content3")
.ConnectWith("#main-content1, #main-content2")
.Cursor("move")
.PlaceholderHandler("placeholder")
.HintHandler("hint")
)

This is what I am using to render the tiles:
@helper renderTiles(IPublishedContent Section)
{
var title = Section.GetPropertyValue<string>("Title", String.Empty);
var link = Section.GetPropertyValue<string>("link", String.Empty);
var id = Section.GetPropertyValue("Icon", -1);
<div id = "blogs" class="widget">
<h3>@title<span class="collapse k-icon k-i-arrowhead-n"></span></h3>
<div class="widget-image">
@if(ImageId != -1)
{
<img src="@Umbraco.TypedMedia(id).Url" alt="=@Umbraco.TypedMedia(id).Name"/>
}
</div>
</div>
}

I have tried the following:
$(document).ready(function ()
{
$("#blogs").on("click", function (e)
{
alert("Hello");
});
}
But I only get an alert on the first panel in the first column.

Any ideas/pointers would be appreciated.
Thanks

Sortable

answered on 17 Aug 2017

3 answers

7.6K+ views

How Add icon class to custom.Command

Hello,

I have a command column, and I'd like to add a custom command within it, not in a separate column:

columns.Command(command =>

{

command.Edit();

command.Destroy();

command.Custom("Copy").Click("CopyPOLine").HtmlAttributes(new { @class = "k-copy-icon"});

}).Width(175);

The above renders this:

<a class="k-button k-button-icontext k-grid-Copy" href="#"><span class=" "></span>Copy</a>

I cannot figure out how to add a custom class to the <span> tag inside the <a> tag so I can specify the image to display. I see how you can create a columns.Template to accomplish this, but that would be in a new column and I want all command buttons to be within the same column.

Side Note in the above: the HtmlAttributes class specified doesn't get appended to the class list in the <a> tag either...it looks like it generates a new class of "k-grid-NAME_OF_COMMAND". So HtmlAttributes has no affect on class???

Is there a way to accomplish this?

Grid

answered on 16 Aug 2017

1 answer

632 views

Cannot read property 'getHours' of undefined

getting the error in the title when i try to view any 'view' of the scheduler other than 'month'. Below is my scheduler code:

@using Kendo.Mvc.UI;
<div>
@(Html.Kendo().Scheduler<CoBRAMVC4Portal.Areas.Admin.Models.ExerciseCalendarModel>()
.Name("exSched")
.Date(System.DateTime.UtcNow.Date)
.Views(views =>
{
views.DayView();
views.WorkWeekView();
views.WeekView();
views.MonthView(monthView => monthView.Selected(true));
})
.Timezone("Etc/UTC")
.Editable(false)
.Group(group => { group.Resources("ExerciseGUID"); group.Date(true); })
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.ProjectGUID);
m.Field(f => f.ExerciseLevelGUIDs);
m.Field(f => f.IncidentCategoryGUIDs);
})
.Read(read => read.Action("_GetExerciseListCalendarAsDates", "Exercise", new { area = "Admin", id = ViewContext.RouteData.Values["id"] }).Type(HttpVerbs.Get))
)
.Events(e =>
{
e.DataBound("scheduler_dataBound");
e.DataBinding("scheduler_dataBinding");
})
.EventTemplate("<div class='media' style='margin:0px;'>" +
"<div class='media-body' style='padding:5px 0 0;margin:0px;'><h5 title='#=title#' style='padding:0 8px 5px;margin:0px;' class='media-heading'>#= title #</h5></div>" +
"<div class='media-right'><a class='btn btn-default btn-xs' title='" + CoBRALocalization.MVC.RootResource.OpenLink + "' href='" + Url.Action("ExerciseView", "Exercise", new { area = "Admin" }, Request.Url.Scheme) + "?StaticGUID=#=StaticGUID#' >" +
"<span class='fa fa-folder-open'></span></a></div>" +
"</div>")
)
</div>
<script>
function scheduler_dataBound(e) {
}

function scheduler_dataBinding(e) {
//Handle the dataBinding event.
}
</script>

everything works fine in the month view

Scheduler

answered on 16 Aug 2017

1 answer

686 views

ASP .NET MVC - Kendo Grid with in-cell Cascading DropDown List

Hey there guys and girls, i am try to implement a cascading dropdown list in a grid. I want values in the second list to be dictated by the users choice from the first list and the third list should be dictated by the users choice from the second list. The examples i have seen online are not clear on how the filter fuctions are called, so i am quite confused and i don't know how to proceed. Here is my code.

Here are the objects

PlanScriptVM.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace P2I_UI.Models.ViewM

{

public class PlanScriptureVM

{

public int PlanScriptureID { get; set; }

public int MaterialCategoryID { get; set; }

// public virtual List<MaterialCategoryVM> Materials { get; set; }

public int ProductID { get; set; }

// public virtual List<ProductVM> Products { get; set; }

public int ProductTypeID { get; set; }

// public virtual List<ProductTypeVM> ProductTypes { get; set; }

public int TotalCalculation { get; set; }

public int AdultEOY { get; set; }

public int YouthEOY { get; set; }

public int ChildrenEOY { get; set; }

public int TotalProjection { get; set; }

public int AdultQ1 { get; set; }

public int YouthQ1 { get; set; }

public int ChildrenQ1 { get; set; }

public int AdultQ2 { get; set; }

public int YouthQ2 { get; set; }

public int ChildrenQ2 { get; set; }

public int AdultQ3 { get; set; }

public int YouthQ3 { get; set; }

public int ChildrenQ3 { get; set; }

public int AdultQ4 { get; set; }

public int YouthQ4 { get; set; }

public int ChildrenQ4 { get; set; }

}

MaterialCategory.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace P2I_UI.Models

{

public class MaterialCategory

{

public int MaterialCategoryID { get; set; }

public string MaterialCategoryName { get; set; }

public bool Active { get; set; }

}

Products.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace P2I_UI.Models

{

public class Product

{

public int ProductID { get; set; }

public string ItemNumber { get; set; }

public int ProductTypeID { get; set; }

public int MaterialCategoryID { get; set; }

public bool Active { get; set; }

}

ProductType.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace P2I_UI.Models

{

public class ProductType

{

public int ProductTypeID { get; set; }

public string ProductTypeName { get; set; }

public bool Active { get; set; }

}

Controller

using Kendo.Mvc.Extensions;

using Kendo.Mvc.UI;

using System.Collections.Generic;

using System.Data;

using System.Linq;

using System.Web.Mvc;

namespace P2I_UI.Controllers

{

public class ScriptureController : Controller

{

readonly string defaultController = "PlanBudget";

P2IApiActions actions = new P2IApiActions();

public List<MaterialCategory> GetMaterial()

{

var materialCategories = new List<MaterialCategory>();

materialCategories.Add(new MaterialCategory { MaterialCategoryID = 1, MaterialCategoryName="Bible", Active = true});

materialCategories.Add(new MaterialCategory { MaterialCategoryID = 2, MaterialCategoryName = "E&D", Active = true });

materialCategories.Add(new MaterialCategory { MaterialCategoryID = 3, MaterialCategoryName = "P&A", Active = true });

return materialCategories;

}

public List<Product> GetProducts()

{

var products = new List<Product>();

products.Add(new Product { ProductID = 1, ItemNumber = "B-ENG-6377", ProductTypeID = 1, MaterialCategoryID = 1, Active = true });

products.Add(new Product { ProductID = 2, ItemNumber = "B-GER-6378", ProductTypeID = 1, MaterialCategoryID = 1, Active = true });

products.Add(new Product { ProductID = 3, ItemNumber = "B-JAP-6379", ProductTypeID = 1, MaterialCategoryID = 1, Active = true });

products.Add(new Product { ProductID = 4, ItemNumber = "ED-ENG-637", ProductTypeID = 2, MaterialCategoryID = 2, Active = true });

products.Add(new Product { ProductID = 5, ItemNumber = "ED-GER-637", ProductTypeID = 2, MaterialCategoryID = 2, Active = true });

products.Add(new Product { ProductID = 6, ItemNumber = "ED-JAP-637", ProductTypeID = 2, MaterialCategoryID = 2, Active = true });

products.Add(new Product { ProductID = 7, ItemNumber = "PA-ENG-6377", ProductTypeID = 3, MaterialCategoryID = 3, Active = true });

products.Add(new Product { ProductID = 8, ItemNumber = "PA-GER-6378", ProductTypeID = 3, MaterialCategoryID = 3, Active = true });

products.Add(new Product { ProductID = 9, ItemNumber = "PA-JAP-6379", ProductTypeID = 3, MaterialCategoryID = 3, Active = true });

return products;

}

public List<ProductType> GetProductTypes()

{

var productTypes = new List<ProductType>();

productTypes.Add(new ProductType { ProductTypeID = 1, ProductTypeName = "Bible ER", Active = true });

productTypes.Add(new ProductType { ProductTypeID = 2, ProductTypeName = "EngDan Bible ED", Active = true });

productTypes.Add(new ProductType { ProductTypeID = 3, ProductTypeName = "PriAud Bible PA", Active = true });

return productTypes;

}

// GET: Scripture

public PartialViewResult Index()

{

return PartialView();

}

public ActionResult Scripture_Read([DataSourceRequest]DataSourceRequest request)

{

TempData["MaterialList"] = GetMaterial();

TempData["ProductList"] = GetProducts();

TempData["PrductTypeList"] = GetProductTypes();

ViewBag.MaterialsList = new SelectList(GetMaterial().OrderBy(m => m.MaterialCategoryID), "MaterialCategoryID", "MaterialCategoryName");

ViewData["MaterialsList"] = new SelectList(GetMaterial().OrderBy(m => m.MaterialCategoryID), "MaterialCategoryID", "MaterialCategoryName");

ViewBag.ProductsList = new SelectList(GetProducts().OrderBy(p => p.ProductID), "ProductID", "ItemNumber");

ViewBag.PrductTypesList = new SelectList(GetProductTypes().OrderBy(pt => pt.ProductTypeID), "ProductTypeID", "ProductTypeName");

var result1 = new List<PlanScriptureVM>();

return Json(result1.ToDataSourceResult(request));

}

public JsonResult GetProducts(int materialCategoryId)

{

var products = GetProducts();

var filteredProduct = products.Where(mcid => mcid.MaterialCategoryID == materialCategoryId);

return Json(filteredProduct, JsonRequestBehavior.AllowGet);

}

public JsonResult GetProductTypes(int productTypeId)

{

var productTypes = GetProductTypes();

var filteredProductTypes = productTypes.Where(ptid => ptid.ProductTypeID == productTypeId);

return Json(filteredProductTypes, JsonRequestBehavior.AllowGet);

}

And finally the Index.cshtml

@(Html.Kendo().Grid<P2I_UI.Models.ViewM.PlanScriptureVM>()

.Name("grid")

.Columns(columns =>

{

columns.Group(ScriptureGroup => ScriptureGroup

.Title("Scriture")

.Columns(dd => {

dd.ForeignKey(e => e.MaterialCategoryID, (SelectList)ViewBag.MaterialsList).Title("Type").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });//.EditorTemplateName("MaterialCategoryID");

dd.ForeignKey(e => e.ProductID, (SelectList)ViewBag.ProductsList).Title("Item No").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });//;.EditorTemplateName("ProductID");

dd.ForeignKey(e => e.ProductTypeID, (SelectList)ViewBag.PrductTypesList).Title("Descript").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });//.EditorTemplateName("ProductTypeID");

})

);

columns.Group(OuterProjGroup => OuterProjGroup

.Title("Proj.")

.Title("EOY Inv")

.Columns(opg => {

opg.Bound(e => e.TotalCalculation).Title("Total Calc").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });

})

);

columns.Group(OuterProjectedGroup => OuterProjectedGroup

.Title("Projected EOY.")

.Columns(optg => {

optg.Group(InnerProjectedGroup => InnerProjectedGroup

.Title("Inventory Assigned.")

.Columns(iptg =>

{

iptg.Bound(e => e.AdultEOY).Title("Adult").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });

iptg.Bound(e => e.YouthEOY).Title("Youth").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });

iptg.Bound(e => e.ChildrenEOY).Title("Children").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });

})

);

})

);

columns.Group(OuterProjGroup => OuterProjGroup

.Title("Proj.")

.Title("EOY Inv.")

.Columns(opg =>

{

opg.Bound(e => e.TotalProjection).Title("Total Proj").Width(40).HeaderHtmlAttributes(new { style = "font-weight: normal; font-size:75%" }).HtmlAttributes(new { @style = "text-align:center; font-weight: normal; font-size:75%" });

})

);

})

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Save();

})

.Editable(editable => editable.Mode(GridEditMode.InCell))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Events(events => {

events.Error("error_handler");

})

.Model(model =>

{

model.Id(e => e.PlanScriptureID);

model.Field(e => e.ProductTypeID).Editable(false);

})

.PageSize(5)

.Create(read => read.Action("Scripture_Create", "Scripture"))

.Read(read => read.Action("Scripture_Read", "Scripture"))

.Update(read => read.Action("Scripture_Update", "Scripture"))

)

<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) {

$.each(value.errors, function() {

message += this + "\n";

});

}

});

alert(message);

}

function getCurrentEditedModel() {

var grid = $("#grid").data("kendoGrid");

var editRow = grid.tbody.find("tr:has(.k-edit-cell)");

return grid.dataItem(editRow);

}

function filterProducts() {

var model = getCurrentEditedModel();

return {

materialCategoryId: model.MaterialCategoryID

};

}

function filterProductTypes() {

var model = getCurrentEditedModel();

return {

productTypeID: model.ProductTypeID

};

}

</script>

Thanks for the help

Grid

answered on 15 Aug 2017

1 answer

403 views

Call to Kendo Grid in Then of Promise fails

I am using Kendo Grid with Angular. I need to call the grid only after the return of a promise. However, placing a call to the grid in the "THEN" causes the grid to never load. Even if I make a direct call to dataSource.read(); it will not read the datasource.

Here is my code:

A call to searchGrid() outside of the "THEN" for the promise works fine.

Grid

answered on 15 Aug 2017

2 answers

1.6K+ views

Kendo Grid Detail Template Grid Not Binding (after first row)

The detail template grid is not binding the data properly. If I expand one by one from top to bottom, it only binds the data for the first row and the grid inside all other rows are empty. If I expand them from bottom to top, it binds the data properly for all the rows. Any idea why it's doing this?

@(Html.Kendo().Grid<EmailInvitationViewModel>()
.Name("EmailInviteeGrid")
.Columns(columns =>
{
columns.Bound(e => e.EmailInviteID).Hidden(true);
columns.Bound(e => e.InvitationDate).Title("Invited On").Hidden(false);
columns.Bound(e => e.ClassDetails).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))).Title("Class Details");
})
.Sortable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetAllInvitedEvents", "Controller", new { Model.EventID }))
))
)
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<EmailInvitationViewModel>()
.Name("grid_#=EmailInviteID#")
.Columns(columns =>
{
columns.Bound(o => o.GridInviteeEmail);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetAllInviteeEmailsByEvent", "DataSource", new { EventID = "#=EventID#", EmailInviteID = "#=EmailInviteID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>

Grid

answered on 15 Aug 2017

3 answers

389 views

Working fine in dev fine but not in server

Hi,

We are evaluating the Kendo UI.

Development machine : Windows 7 Professional
VS 2017

Our ASP .NET MVC web application uses lot of charts : Html.Kendo().Chart

This works fine in dev machine. When deployed to Windows 2008 Server, the chart part doesn't render.
We used the Developer Tools in Browser. The following gets downloaded in both cases:

- http://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css
- http://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css
- /webapp/Content/Css/bootstrap-flaty.min.css
- /webapp/Content/Css/Site.css
- /webapp/Scripts/jquery-3.1.1.min.js
- http://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js
- /webapp/Scripts/bootstrap.min.js
- http://kendo.cdn.telerik.com/2017.2.621/js/kendo.aspnetmvc.min.js

Looks like this could be a configuration problem. Any idea what's wrong ?

Aditya

General Discussions