Questions on UI for ASP.NET MVC Forum

1 answer

372 views

The entity or complex cannot be constructed in a LINQ to Entities query

I'm starting to build a Telerik UI for ASP.NET MVC project, just like the Grid Demo on http://demos.telerik.com/aspnet-mvc/

And i got this error when i debug project.

What problem?

Grid

answered on 16 Apr 2015

2 answers

104 views

Calling existing views for grid updates

I am using UI for MVC 2015.1.318

I am replacing user admin lists with Telerik grids, but need to call the original views for CRUD. I have reviewed the documentation at http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/server-editing as well as several forum posts, but the Edit command button always calls the inline editor.

My grid

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

.Name("grid")

.Columns(columns =>

{

columns.Bound(u => u.DisplayName);

columns.Bound(u => u.AccountName);

columns.Bound(u => u.Email);

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

})

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

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.PageSize(20)

.Sort(sort => sort.Add("AccountName").Ascending())

.Model(model => model.Id(u => u.UserId))

.Update(update => update.Action("Edit", "UserAdmin"))

.Destroy(destroy => destroy.Action("Delete", "UserAdmin"))

)

There is a UserAdminController.cs with Edit and Delete methods. Here is the Edit:

public async Task<ActionResult> Edit(string id)

{

if (id == null)

{

return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

}

var editUser = await UserManager.FindByIdAsync(id);

if (editUser == null)

{

return HttpNotFound();

}

UserDetailsViewModel vm = new UserDetailsViewModel()

{

Id = editUser.Id,

Email = editUser.Email,

DisplayName = editUser.DisplayName,

SelectedAccountId = editUser.AccountId,

};

// System Admins can assign Account to users, so get a list

if (User.IsInRole("System Admin"))

{

vm.AvailableAccounts = DataRepo.GetAccountListForDdl().ToList();

}

await Edit_SetupRoles(editUser.Id, vm);

vm.ProviderId = editUser.ProviderId;

if (editUser.ProviderId != null)

vm.ProviderName = DataRepo.GetProviderName(editUser.ProviderId);

vm.AccessLevelsAssigned = DataRepo.GetAssignedUserAccessLevels(editUser.Id);

vm.AccessLevelsPool = DataRepo.GetAvailableUserAccessLevels(editUser.Id, editUser.AccountId);

vm.AccountAndClients = DataRepo.GetAccountAndClientListForDdl(editUser.AccountId).ToList();

return View(vm);

}

Where is this going off the rails?

Best,
Scott

Grid

answered on 16 Apr 2015

10 answers

350 views

Persist Drag and Drop Changes

I apologize up front if there is an obvious answer to this question, but how do I persist the changes that a user makes to the nodes in a tree control when .DragAndDrop(true) is specified? Since the MVC wrappers using a ReadOnly datasource, I'm really not sure how to do that other than starting to look into doing it outside the MVC wrappers.

Thanks,
Kyle

TreeView

answered on 15 Apr 2015

3 answers

865 views

Refresh Treeview after adding item

I'm adding an item and then wanting to refresh the TreeView. It works every other time. The node is always added, but the treeview is refreshed to display it only after I click to add another node. At that time, both new nodes show up. I'm guessing that the first ajax call hasn't completed when the treeview.dataSource.read() statement is reached. Is there a way to execute a "wait" until the AddNode statement has completed?

Here's my javascript:

// Add Node

$("#createCategory").click(function () {

var name = $("#newCategory").val();

if (name != "") {

$.ajax({

url: '@Url.Action("AddNode","Categories")',

type: "POST",

data: {

CategoryName: name

}

});

kendoConsole.log("Adding " + name);

//var treeview = $("#treeview").data("kendoTreeView");

treeview.dataSource.read();

}

else {

kendoConsole.log("Please enter non-empty name");

}

$("#newCategory").val("")

$("#newCategory").focus()

});

TreeView

answered on 15 Apr 2015

3 answers

120 views

2 Problem in my Grid ?

Hi

i have download nice Tools knedo ui and try to use Grid in MVC - it works fine but i have two problems and i don't know how to resolve them

1. i can't get filed from joined table to let me display text filed in my grid as example (Supplier table is joined to Products table in SupplierID) but i can't view CompanyName in my grid i try it as:

columns.Bound(o => o.Supplier).ClientTemplate("#=Supplier.CompanyName#").Width(160);

but it make grid now working ?

2. i need to insert dropdownlist in my grid that contain Supplier ID and "CompanyName" but it now working for me too i try add:

model.Field(o => o.SupplierID).DefaultValue(ViewData["defaultCategory"] as AjaxHierarchyEditing.Models.Supplier);

and fill ViewData in Home Controller

my full Code is:

HTML Code:

<div class="k-rtl">

<script type="text/kendo" id="productsTemplate">

@(Html.Kendo().Grid<ProductViewModel>()

.Name("Categories_#=CategoryID#")

.Columns(columns =>

{

columns.Bound(o => o.ProductName).Width(101).Title("اسم الصنف");

columns.Bound(o => o.UnitPrice).Width(140).Title("سعر الوحده").HeaderHtmlAttributes(new { style = "font-size:12pt;" });

columns.Bound(o => o.QuantityPerUnit).Width(200).Title("الكميه للوحده");

columns.Bound(o => o.ReorderLevel).Width(200).Title("مستوي اعاده الطلب");

columns.Bound(o => o.Supplier).ClientTemplate("#=Supplier.CompanyName#").Width(160);

columns.Command(command =>

{

command.Edit();

command.Destroy();

});

})

.ToolBar(tools => tools.Create().Text("اضافه صنف جديد"))

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

.Pageable()

.Sortable()

.Filterable()

.DataSource(source => source

.Ajax()

.Model(model =>

{

model.Id(o => o.ProductID);

model.Field(o => o.ProductID).Editable(false);

model.Field(o => o.SupplierID).DefaultValue(ViewData["defaultCategory"] as AjaxHierarchyEditing.Models.Supplier);

})

.Events(events => events.Error("error_handler"))

.Read(read => read.Action("Read_Product", "products", new { id = "#=CategoryID#" }))

.Update(update => update.Action("Update_Product", "products"))

.Create(create => create.Action("Create_Product", "products", new { id = "#=CategoryID#" }))

.Destroy(destroy => destroy.Action("Destroy_Product", "products")))

.ToClientTemplate()

)

</script>

</div>

<div class="k-rtl">

@(Html.Kendo().Grid<Category>()

.Name("Categories_")

.Columns(columns =>

{

columns.Bound(e => e.CategoryName).Width(200).Title("اسم المجموعه"); ;

columns.Bound(e => e.Description).Width(400).Title("الوصف"); ;

columns.Command(command =>

{

command.Edit();

command.Destroy();

});

})

.ToolBar(tools => tools.Create().Text("اضافه مجموعه جديده"))

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

.Pageable().Sortable().Filterable()

.DataSource(source => source.Ajax()

.Model(model =>

{

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

})

.Events(events => events.Error("error_handler"))

.Read(read => read.Action("Read_category", "kinds"))

.Update(update => update.Action("Update_category", "kinds"))

.Create(create => create.Action("Create_category", "kinds"))

.Destroy(destroy => destroy.Action("Destroy_category", "kinds")))

.ClientDetailTemplateId("productsTemplate")

)

</div>

<script type="text/javascript">

function error_handler(e) {

productsTemplate

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

}

</script>

Home Controller Code:

public ActionResult Index()

{

PopulateCategories();

return View();

}

private void PopulateCategories()

{

ViewData["defaultCategory"] = new SelectList(context.Suppliers, "SupplierID", "CompanyName");

}

Product Controller Read Code:

public ActionResult Read_Product([DataSourceRequest] DataSourceRequest request, int id)

{

return Json(context.Products.Where(i => i.CategoryID == id).ToDataSourceResult(request, e => new ProductViewModel

{

ProductID = e.ProductID,

ProductName = e.ProductName,

QuantityPerUnit = e.QuantityPerUnit,

UnitPrice = e.UnitPrice,

ReorderLevel = e.ReorderLevel,

SupplierID = e.SupplierID,

}));

}

ProductViewModel Code:

public ProductViewModel()

{

this.Order_Details = new HashSet<Order_Detail>();

this.units = new HashSet<unit>();

}

public int ProductID { get; set; }

public string ProductName { get; set; }

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

//public Nullable<int> CategoryID { get; set; }

public string QuantityPerUnit { get; set; }

public Nullable<decimal> UnitPrice { get; set; }

public Nullable<short> UnitsInStock { get; set; }

public Nullable<short> UnitsOnOrder { get; set; }

public Nullable<short> ReorderLevel { get; set; }

//public bool Discontinued { get; set; }

//public string EAN13 { get; set; }

public virtual Category Category { get; set; }

public virtual ICollection<Order_Detail> Order_Details { get; set; }

public virtual Supplier Supplier { get; set; }

public virtual ICollection<unit> units { get; set; }

}

so please how can i resolve those problems ?

Grid

answered on 15 Apr 2015

2 answers

179 views

How can i pass values to Barcode from database ?

Hi

Please sir, i have add barcode in my view and it works as code:

@(Html.Kendo().Barcode()

.Name("manchego")

.Value("2346722")

.Encoding(BarcodeSymbology.EAN8)

.Width(200)

.Height(100)

)

now i need to pass value to barcode from EmployeeViewModel for each employee to let me view them in my page as example :

<ul id="dairy">

<li>

@* here pass value for employee 1 *@

@(Html.Kendo().Barcode().Name("manchego").Value("2346722").Encoding(BarcodeSymbology.EAN8).Width(200).Height(100))

</li>

<li>

@* here pass value for employee 2 *@

@(Html.Kendo().Barcode().Name("mascarpone").Value("Mascarpone").Encoding(BarcodeSymbology.Code128).Width(200).Height(100))

</li>

<li>

@* here pass value for employee 3 *@

@(Html.Kendo().Barcode().Name("gudbrands").Value("CHEESE").Encoding(BarcodeSymbology.Code39).Width(200).Height(100))

</li>

</ul>

and ect ..... for any other employee

so please how can i do that ?

Barcode

answered on 15 Apr 2015

4 answers

140 views

SignalR updated from outside of scheduler

Could I get another SignalR example, where the scheduler hub is called from another controller? Here's my workflow:

1. big screen shows day's schedule

2. user schedules work order from other page

3. after saving change, call Hub.Clients.All.update(updatedItem)

4. big screen scheduler updates

Scheduler

answered on 15 Apr 2015

5 answers

284 views

Javascript call with parameter from inside a template

I have the following code that I am trying to use to delete an item in the database when someone clicks the delete button:

<script id="treeview-template" type="text/kendo-ui-template">

#: item.name #

<a href="javascript:void(0)" class='btn-sm btn-danger' onclick="DeleteNode(@item.id)">x</a>

</script>

@Html.Kendo().TreeView().Name("Categories").ExpandAll(true).Template("treeview-template").DataSource(dataSource => dataSource

.Model(model => model

.Id("id")

.HasChildren("hasChildren")

)

.Read(read => read.Action("GetCategories", "Categories"))).DataTextField("name").DragAndDrop(true).Checkboxes(true).Events(events => events.Change("onChange").Select("onSelect").Check("onCheck").Collapse("onCollapse").Expand("onExpand").DragStart("onDragStart").Drag("onDrag").Drop("onDrop").DragEnd("onDragEnd"))

The issue I'm having is that the field I'm trying to pass to the function, @item.id, is causing the exception: "The name 'item' does not exist in the current context." How can I format the code so this works?

Thanks.

Laurie

TreeView

answered on 15 Apr 2015

1 answer

557 views

Kendo DropDownTreeView inside GridView column is not working

We are using dropdown inside a kendo grid. Inside the
dropdown we need to display a tree view. When user clicks dropdown, tree view should
be displayed. We have only two levels in the tree view. On selecting any item
or sub item from the treeview, text of the item should be shown as dropdown text and tree view
should get close. Inside a tree view we need page down/up.

If we put dropdown in the separate partial view outside the grid, then it is working.
But if we try to use dropdown inside the grid using editor template then tree view
is not working.

Following is the code snippet:

Index.cshtml

@(Html.Kendo().Grid<SampleModel>()

.Name("grdOutput").Scrollable(s => s.Height("auto"))

.EnableCustomBinding(false)

.Columns(columns =>

{

columns.Bound(o => o.Id).Title("Id");

columns.Bound(s => s.Order).EditorTemplateName("_DropDownEditor").ClientTemplate("#=Order#").Title("Order");

columns.Command(command => { command.Destroy(); }).Width("80px");

})

.ToolBar(toolbar => toolbar.Create())

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

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(new[] { 10, 15, 20 }))

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

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

model.Field(p => p.Order).DefaultValue(

ViewData["defaultOrder"] as string);

})

.Read(read => read.Action("OutputRead", "Home"))

)

.Events(e =>

{

})

)

_DropDownEditor.cshtml

@using Kendo.Mvc.UI

@model string

@(Html.Kendo().DropDownList()

.Name("Order")

.BindTo(new[] {

new {

Text = "",

Value = ""

}})

.DataTextField("Text")

.DataValueField("Value")

.Template(Html.Partial("EditorTemplates/_TreeViewEditor").ToHtmlString())

.Events(e =>{ e.Open("OnOpen"); })

)

TreeViewEditor.cshtml

<ul id="treeview">

<li data-expanded="true">

Item 1

<ul>

<li>Item 1.1</li>

<li>Item 1.2</li>

</ul>

</li>

<li data-expanded="true">

Item 2

<ul>

<li>Item 2.1</li>

<li>Item 2.2</li>

</ul>

</li>

<li data-expanded="true">

Item 2

<ul>

<li>Item 2.1</li>

<li>Item 2.2</li>

</ul>

</li>

<li data-expanded="true">

Item 2

<ul>

<li>Item 2.1</li>

<li>Item 2.2</li>

</ul>

</li>

<li data-expanded="true">

Item 2

<ul>

<li>Item 2.1</li>

<li>Item 2.2</li>

</ul>

</li>

<li data-expanded="true">

Item 2

<ul>

<li>Item 2.1</li>

<li>Item 2.2</li>

</ul>

</li>

</ul>

Common.js

function OnOpen(e) {

setDropdownTreeView();

}

function setDropdownTreeView() {

var treeview = $("#treeview").kendoTreeView({

select: function (e) {

// When a node is selected, display the text for the node in the dropdown and hide the treeview.

$treeviewRootElem.slideToggle('fast', function () {

$treeviewRootElem.removeClass("k-custom-visible");

});

}

}).data("kendoTreeView");

var $treeviewRootElem = $(treeview.element).closest("div.k-treeview");

$(document).click(function (e) {

// Ignore clicks on the treetriew.

if ($(e.target).closest("div.k-treeview").length == 0) {

// If visible, then close the treeview.

if ($treeviewRootElem.hasClass("k-custom-visible")) {

$treeviewRootElem.slideToggle('fast', function () {

$treeviewRootElem.removeClass("k-custom-visible");

});

}

});

}

SampleModel.cs

public class SampleModel

{

public int Id { get; set; }

public string Order { get; set; }

public SampleModel()

{

}

public SampleModel(int id,string o)

{

Id = id;

Order = o;

}

Grid

answered on 15 Apr 2015

3 answers

687 views

Dropdownlist with cascade and filter

Hello,

We have a grid with two fields, each field has assigned a dropdownlist. The second dropdownlist has a behavior different, this dropdowonlist has enabled option
cascade and filtre with contains value. The question is, is it possible?

I show you the scenario:

Code Grid

@(Html.Kendo().Grid<FareDetailViewModel>()

.Name("fare_details#=FareID#")

.ToolBar(t =>

{

if (User.IsInRole("Modify"))

{

t.Create().Text("Afegir Referencia");

}

})

.Columns(columns =>

{

columns.ForeignKey(f => f.Tipus, (System.Collections.IEnumerable)ViewBag.CatalogTypes, "Key", "Value").EditorTemplateName("CustomGridForeignKeyFareType").Width(120);

//columns.ForeignKey(f => f.CatalogReference, (System.Collections.IEnumerable)ViewBag.Cataleg, "Reference", "Descripcio").EditorTemplateName("CatalegReferenceByType");

columns.Bound(f => f.CatalogReference).EditorTemplateName("CatalegReferenceByType").EditorViewData(new { gridid = "fare_details#=FareID#" });

Editor Template

@model object

@(Html.Kendo().DropDownList()

.Name("CatalogReference" + ViewData["gridid"])

.HtmlAttributes(new { data_bind = "value:CatalogReference" })

.AutoBind(false)

.OptionLabel("Select reference...")

.DataTextField("Descripcio")

.DataValueField("Reference")

.Filter(FilterType.Contains)

.MinLength(3)

.ValuePrimitive(true)

//.HtmlAttributes(new { data_skip = "true", data_bind = "defferedValue: object" })

//.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])

.DataSource(source =>

{

source.Read(read => read.Action("PopulateReferences", "Catalog").Data("filterTypes"))

.ServerFiltering(true);

})

.CascadeFrom("Tipus")

.HtmlAttributes(new { id = Guid.NewGuid().ToString() })

)

Function filterTypes

function filterTypes() {

return {

text: $("#Type").data("kendoDropDownList").value() + "|" + $("#CatalogReference" + temporalFare).data("kendoDropDownList").filterInput.val()

};

Clarification:

1) temporalFare the value maybe be for example fare_details26

2) $("#CatalogReference" + temporalFare).data("kendoDropDownList").filterInput.val() ===> Presents an error: Undefined.Action on controller

public JsonResult PopulateReferences(string text)

{

var param = text.Split('|');

var type = (int)text[0];

var search = text[1];

var catalog = GetCatalog((catalogType)type).Where(c => (c.Descripcio + " " + c.Reference).Contains(search)).Select(c => new { Reference = c.Reference, Descripcio = c.Descripcio + " - " + c.Reference }).AsQueryable();

return Json(catalog, JsonRequestBehavior.AllowGet);

}





I hope that we can

clarify on this topic



 



 



Thanks in advance.



 



 



Xavier.

Grid

answered on 14 Apr 2015