Questions on UI for ASP.NET MVC Forum

1 answer

133 views

Hi,

We have been struggling to implement a kendo-ui grid for several days consuming data from a WCF service proxy. All of our data tests in Fiddler work correctly and if we hard code a request in our Get action in the controller we can see the service is working and our dataset it retrieved. We think the issue is that the URL is request is not an Odata request. I have looked through to see if there is an Html helper to specify Odata in the index.chtml grid builder but have not found anything. We are pretty close to giving up on Kendo-ui completely I feel like this should be much easier to implement.

index.chtml

@model IEnumerable<Application.ServiceProxy.CustomerDTO>

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

.Name("grid")

.Columns(columns => {

columns.Bound(c => c.customerID).Width(100);

columns.Bound(c => c.name1).Width(100);

columns.Bound(c => c.matchcode).Width(100);

columns.Bound(c => c.city).Width(100);

columns.Bound(c => c.postalCode).Width(100);

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

//.HtmlAttributes(new { style = "height:430px;" })

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("Get", "Customer")

)

Customer Controller

using System;

using System.Collections.Generic;

using System.Net.Http;

using System.Web.Mvc;

using Kendo.Mvc.UI;

using Kendo.Mvc.Extensions;

using BusinessLogic.Models;

using System.Web;

using System.Linq;

using Newtonsoft.Json;

using Application.ServiceProxy;

using System.Web.Http;

using System.Web.Http.OData.Query;

using System.Web.Http.OData;

namespace Application.Controllers

{

public class CustomerController : Controller

{

[Queryable(AllowedQueryOptions = AllowedQueryOptions.All)]

public IEnumerable<ServiceProxy.CustomerDTO> Get()

{

var odataService = new Container(new Uri("http://localhost:8089/odata/"));

var customer = odataService.Customer.Take(10);

return customer.AsEnumerable();

}

public ActionResult Index() {

return View() ;

}

BusinessLogic customer controller (providing OData)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Web;

using System.Net.Http;

using System.Web.Http;

using BusinessLogic.Models;

using System.Web.Http.OData.Query;

using System.Web.Http.OData;

namespace BusinessLogic.Controllers

{

//public class CustomerController : CPSGlobalAPIController

public class CustomerController : EntitySetController<CustomerDTO, int>

{

protected cpsGlobalEntities entity = new cpsGlobalEntities();

#region mapper

private IQueryable<CustomerDTO> mapCustomer()

{

return

from c in entity.customer

select new CustomerDTO()

{

customerID = c.customerID,

matchcode = c.matchcode,

salesOrganizationCompanyCode = c.salesOrganization.companyCode,

salesOrganizationID = c.salesOrganizationID,

salesOrganizationName = c.salesOrganization.name,

statusID = c.statusID,

statusPrefix = c.status.prefix,

statusTranslationKey = c.status.translationKey,

serviceLevelStatusID = c.serviceLevelStatusID,

serviceLevelPrefix = c.status1.prefix,

serviceLevelTranslationKey = c.status1.translationKey,

systemID = c.systemID,

dunsNumber = c.dunsNumber,

mediaIDLogo = c.mediaIDLogo,

salesOrganization = c.salesOrganization.companyCode,

inventoryManagerID = c.inventoryManager.inventoryManagerID,

inventoryManagerAddressID = c.inventoryManager.addressID,

customerExternalSystemID = c.customerExternalSystemID,

internationalGroup = c.internationalGroup,

division = c.division,

corporateID = c.corporateID,

#region duplicated items for improved list view

name1 = c.customerExternalSystem.address.name1,

postalCode = c.customerExternalSystem.address.postalCode,

city = c.customerExternalSystem.address.city,

stateCode = c.customerExternalSystem.address.state.stateCode,

countryCode = c.customerExternalSystem.address.country.countryCode

#endregion

};

}

#endregion

#region GET

#region GET all

[Queryable]

public override IQueryable<CustomerDTO> Get()

{

return mapCustomer().AsQueryable();

}

#endregion

#region GET by ID

protected override CustomerDTO GetEntityByKey(int key)

{

//return mapCustomer().FirstOrDefault(p => p.customerID == key);

var cust = (from c in mapCustomer() where c.customerID == key select c).FirstOrDefault();

if (cust.inventoryManagerAddressID != null)

{

AddressController adC = new AddressController();

cust.inventoryManagerAddressDTO = adC.Get((int)cust.inventoryManagerAddressID);

}

if (cust.customerExternalSystemID != null)

{

CustomerExternalSystemController cesC = new CustomerExternalSystemController();

cust.customerExternalSystemDTO = cesC.Get((int)cust.customerExternalSystemID);

}

if (cust == null)

throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));

return cust;

}

#endregion

#region POST

protected override CustomerDTO CreateEntity(CustomerDTO customerDTO)

{

var customer = new customer()

{

matchcode = customerDTO.matchcode,

salesOrganizationID = customerDTO.salesOrganizationID,

statusID = customerDTO.statusID,

serviceLevelStatusID = customerDTO.serviceLevelStatusID,

mediaIDLogo = customerDTO.mediaIDLogo,

systemID = customerDTO.systemID,

customerExternalSystemID = customerDTO.customerExternalSystemID,

internationalGroup = customerDTO.internationalGroup,

division = customerDTO.division,

corporateID = customerDTO.corporateID,

inventoryManagerID = customerDTO.inventoryManagerID,

dunsNumber = customerDTO.dunsNumber

};

entity.customer.Add(customer);

entity.SaveChanges();

return GetEntityByKey(customer.customerID);

}

protected override int GetKey(CustomerDTO customer)

{

return customer.customerID;

}

#endregion

#region Put

protected override CustomerDTO UpdateEntity(int key, CustomerDTO customerDTO)

{

var originalCustomer = entity.customer.Find(key);

originalCustomer.matchcode = customerDTO.matchcode;

originalCustomer.salesOrganizationID = customerDTO.salesOrganizationID;

originalCustomer.statusID = customerDTO.statusID;

originalCustomer.serviceLevelStatusID = customerDTO.serviceLevelStatusID;

originalCustomer.mediaIDLogo = customerDTO.mediaIDLogo;

originalCustomer.systemID = customerDTO.systemID;

originalCustomer.customerExternalSystemID = customerDTO.customerExternalSystemID;

originalCustomer.inventoryManagerID = customerDTO.inventoryManagerID;

originalCustomer.dunsNumber = customerDTO.dunsNumber;

originalCustomer.internationalGroup = customerDTO.internationalGroup;

originalCustomer.division = customerDTO.division;

originalCustomer.corporateID = customerDTO.corporateID;

entity.SaveChanges();

return GetEntityByKey(key);

}

#endregion

#region PATCH

#endregion

#region DELETE

public override void Delete([FromODataUri] int key)

{

var customer = entity.customer.Find(key);

if (customer == null)

{

throw new HttpResponseException(HttpStatusCode.NotFound);

}

entity.customer.Remove(customer);

entity.SaveChanges();

}

#endregion

}

Grid

answered on 08 Apr 2013

5 answers

216 views

Internal Build 2013.1.327 Availaility....

As per:

http://www.kendoui.com/forums/mvc/general-discussions/update-destroy-operations-trigger-the-error-event-of-the-datasource-after-updating-to-q1-2013-(v-2013-1-319).aspx

Where can we get internal build 2013.1.327 ?

It's not listed when I'm logged into my account as an available internal build.

Rene.

Grid

answered on 08 Apr 2013

3 answers

282 views

RowTemplates?

Hi,

I am just wondering how i can use Kendo.UI MVC Grid to create a custom row template. I can see that it is possible in the Telerik.MVC Grid (http://demos.telerik.com/aspnet-mvc/razor/grid/clientrowtemplate), but can only see column template support in Kendo.

Am i missing something, or is feature possible?

Thanks.

Grid

answered on 08 Apr 2013

3 answers

176 views

Grid Popup Edit Window with Child Grid and Child Popup Edit Window - error on close of parent popup edit window. (2013.1.401)

I have managed to further pinpoint the issue I'm having with 2013.1.401.

It seems to only occur when I have nested grids (grid with popup edit with child grid):

a) parent grid with popup edit window (A)
b) popup edit window (A) from a contains a child grid (child grid also has popup edit window(B)).
c) upon closing the popup edit window A - not matter if I edited/updated/created or just closed the window - it faults out in kendo.all.js in the grid destroy for the child grid. The first error occurs at the that.resizable.destroy(); below: ( I have verified the error occurs on the child grid destroy).

Basically - this is reproducible for all grids with popup edit windows with child grids on those popup edit windows.

destroy: function() {
            //alert('destroying grid?');
            var that = this,
                element;

            Widget.fn.destroy.call(that);

            if (that.pager) {
                that.pager.destroy();
            }

            if (that.groupable) {
                that.groupable.destroy();
            }

            if (that.options.reorderable) {
                that.wrapper.data("kendoReorderable").destroy();
            }

            if (that.resizable) {
              that.resizable.destroy();
            }

Grid

answered on 08 Apr 2013

5 answers

1.3K+ views

Issue Using Grid with ViewModel

I am still new to MVC and still trying to get a grasp on the best way to do things. I realize at some point I'll probably need to switch to using Repositories or something but for now I have my EF Models and I am trying to use ViewModels in my Controllers.

I am trying to display a Grid and perform basic CRUD operations. I am using an EditorTemplate for the popup mode. Basically the Grid is supposed to display a set of items (Beamlines). One of the fields within a Beamline is an AllocationPanelID. The Beamline stores the AllocationPanelID but the full list of AllocationPanels is in a separate model. So my understanding of ViewModels is that I can combine data from multiple models into one View Model. This is where I am having trouble. I define that AllocationPanel IEnumerable<SelectListItem> in the View Model and connect it in the Controller but when it gets to it in the
View it has NULL as if it is never really getting hooked up to the data.

View Model: (shortened for breviety)

public class BeamlineViewModel

{

public decimal ID { get; set; }

public string Description { get; set; }

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

public string InsertionDevice { get; set; }

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

public string Status { get; set; }

public IEnumerable<SelectListItem> AllocationPanels { get; set; }

public IEnumerable<SelectListItem> StatusTypes = new List<SelectListItem>

{

new SelectListItem {Value = "A", Text = "Available"},

new SelectListItem {Value = "C", Text = "Construction and Commissioning"},

new SelectListItem {Value = "D", Text = "Diagnostic and Instrumentation"},

new SelectListItem {Value = "O", Text = "Operational"},

new SelectListItem {Value = "U", Text = "Unused Port"}

};

}

Controller: (only showing Index, Edit, and related methods)

public ActionResult Index()

{

return View(GetBeamlines());

}

public ActionResult Edit(int id)

{

using (MyEntities context = new MyEntities())

{

return View(context.Beamlines.Find(id));

}

private static IEnumerable<BeamlineViewModel> GetBeamlines()

{

var context = new MyEntities();

return context.Beamlines.Select(b => new BeamlineViewModel

{

ID = b.ID,

Description = b.Description,

SortOrder = b.Sort_Order,

InsertionDevice = b.Insertion_Device,

AllocationPanelID = b.Allocation_Panel_ID,

Status = b.Status

});

}

public ActionResult GetAllocationPanels()

{

using (MyEntities context = new MyEntities())

{

var allocationPanels = context.Allocation_Panels.ToList();

var model = new BeamlineViewModel

{

AllocationPanels = allocationPanels.Select(m => new SelectListItem { Value = m.ID.ToString(), Text = m.Description })

};

return View(model);

}

View:

@model IEnumerable<MyProject.ViewModels.BeamlineViewModel>

@{

ViewBag.Title = "Beamlines";

}

<h2>Beamlines</h2>

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

.Name("gvBeamlines")

.Columns(columns =>

{

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

columns.Bound(o => o.Description).Width(100);

columns.Bound(o => o.InsertionDevice).Title("Insertion Device");

columns.Bound(o => o.Status);

columns.Bound(o => o.EnergyRange).Title("Energy Range");

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

})

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

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Beamline").Window(window => window.HtmlAttributes(new { @style = "width:700px;" })))

.Pageable()

.Sortable()

.DataSource(dataSource => dataSource

.Server()

.Model(model => model.Id(o => o.ID))

.Create(create => create.Action("Create", "Beamlines"))

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

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

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

)

Editor Template: (shortened for breviety)

@model MyProject.ViewModels.BeamlineViewModel

@Html.HiddenFor(model => model.ID)

<div class="editor-label">

@Html.Label("Beamline")

</div>

<div class="editor-field">

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

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

</div>

<div class="editor-label">

@Html.Label("Status")

</div>

<div class="editor-field">

@Html.DropDownListFor(model => model.Status, new SelectList(Model.StatusTypes, "Value", "Text"), "(Select One)")

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

</div>

<div class="editor-label">

@Html.Label("Sort Order")

</div>

<div class="editor-field">

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

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

</div>

<div class="editor-label">

@Html.Label("Insertion Device Beamline")

</div>

<div class="editor-field">

@Html.RadioButtonFor(model => model.InsertionDevice, "Y")

@Html.Label("Yes")

@Html.RadioButtonFor(model => model.InsertionDevice, "N")

@Html.Label("No")

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

</div>

<div class="editor-label">

@Html.Label("Allocation Panel")

</div>

<div class="editor-field">

@Html.DropDownListFor(model => model.AllocationPanelID, new SelectList(Model.AllocationPanels, "Value", "Text"), "(Select One)")

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

</div>

A lot of this code I got from different places and have manipulated to get it working. The GetAllocationPanels() method seems to hook the AllocationPanels IEnumerable that is defined in the View Model but I never actually call the GetAllocationPanels() method or see where to call it.

As the code currently exists, the Grid loads and when I try to edit a Beamline I get an error on the second to last line of the Editor Template, the DropDownListFor for the AllocationPanels. It gives me a ArgumentNullException. Value cannot be null. Parameter name: items.

I have also read that it might be better to have a View Model for the Beamline which would just contain the fields making up a Beamline, and then a second View Model for the Beamline listing which would have an instantiation for the first View Model and then also the other items like the AllocationPanels. I have tried that but could never seem to figure out how to type the View and Editor Template and also what should go in the Controller methods.

Any help is greatly appreciated.

The trouble is.

Grid

answered on 05 Apr 2013

1 answer

270 views

Clientrowtemplate Mvc - Looping collection of entity

Is it possible to create a clientrowtemplate with an entity model that includes a complex type of list to display some fields? I've created a server side rowtemplate but when I switch ajax on datasource, it doesn't work. I think it's expected. But how to create a complex template to display collections with ajax as a custom template?

Grid

answered on 05 Apr 2013

4 answers

771 views

Problem with CRUD operation with Data table as Model

HI,

I am working on exploring the grid features of the Kendo UI. I am working on binding the data table to the grid and populating the data's.

I got the sample solution to work on the data table with the grid from the below URL.

URL: http://www.kendoui.com/code-library/mvc/grid/binding-to-datatable.aspx

I am pretty impressed with the Grid View, but when to try to create the the edit view mode as INLINE (or ) INCEL in the grid i am getting the below error.when i try to give the popup in the gridview, I am not getting anything from the data table in popup.

Please suggest me that whether am I trying anything wrong or Kendo UI dosen't support the below functionality.if kendo UI supports this functionality,
could you please give me the working example ???????

Error:

"Templates can be used only with field access, property access, single-dimension array index, or single-parameter custom indexer expressions."

Code Used:

@model System.Data.DataTable

@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns => {
columns.Command(command => { command.Edit(); }).Width(100).Title("Edit");
columns.Command(command => { command.Destroy(); }).Width(100).Title("Delete");
foreach (System.Data.DataColumn column in Model.Columns)
{
columns.Bound(column.DataType, column.ColumnName);
}
})
.Editable(ed => ed.Mode(GridEditMode.InCell))
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();

})
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Model(model =>{model.Id(OP => OP.Row[0]);
model.Field(pd => pd.Row[0]).Editable(false);})
.Create(update => update.Action("EditingInline_Create", "ModelsView"))
.Read(read => read.Action("Read", "Home"))
.Update(update => update.Action("EditingInline_Update", "ModelsView"))
.Destroy(update => update.Action("EditingInline_Destroy", "ModelsView"))
)
)

Grid

answered on 05 Apr 2013

0 answers

237 views

Generic Grid Controller Methods for multiple models

I'm using the Table Per Concrete type where I have all my models inherit from one base class which has common properties. Since the Get, Insert, Update, and Delete methods do the same thing for each model I'm using, I want to make these methods reusable for each of these models.

Here is the code that I currently have:

PhoenixDB ctx = new PhoenixDB();

public ActionResult Index()
{
return View();
}

public ActionResult Get([DataSourceRequest] DataSourceRequest request)
{
return Json(GetViewModels().ToDataSourceResult(request));
}

public ActionResult Update([DataSourceRequest] DataSourceRequest request, Parameter parameter)
{
var parameterToUpdate = ctx.Parameter.First(param => param.ParameterID == parameter.ParameterID);
TryUpdateModel(parameterToUpdate);

ctx.SaveChanges();

return Json(ModelState.ToDataSourceResult());
}

public ActionResult Insert([DataSourceRequest] DataSourceRequest request, Parameter parameterToAdd)
{
if (ModelState.IsValid)
{
ctx.Parameter.Add(parameterToAdd);
ctx.SaveChanges();
}

return Json(new[] { parameterToAdd }.ToDataSourceResult(request));
}

public ActionResult Delete([DataSourceRequest] DataSourceRequest request, Parameter parameter)
{
var parameterToDelete = ctx.Parameter.First(param => param.ParameterID == parameter.ParameterID);

if (parameterToDelete != null)
{
ctx.Parameter.Remove(parameterToDelete);
ctx.SaveChanges();
}

return Json(new[] { parameterToDelete }.ToDataSourceResult(request));
}

private IQueryable<Parameter> GetViewModels()
{
return (from parameter in ctx.Parameter select parameter);
}

Here is something I would like to do to make it generic, but not sure how:

public ActionResult Update([DataSourceRequest] DataSourceRequest request, Base base)
{
var baseToUpdate = ctx.Base.First(param => param.ParameterID == base.ParameterID);
TryUpdateModel(baseToUpdate);

ctx.SaveChanges();

return Json(ModelState.ToDataSourceResult());
}

Any help with this would be greatly appreciated.

Grid

asked on 05 Apr 2013

1 answer

1.3K+ views

In Kendo Grid, managing column width dynamicaly

In Kendo Grid, How to automatically adjust the column width on the basis of the column data length and browser window width

Grid

answered on 05 Apr 2013

0 answers

253 views

Advantages of KendoUI over telerik ASP.NET AJAX

I am starting a new project and was going to use KendoUI for it.
But there it does not have any docking functionality.
Whereas the telerik ASP.NET Ajax controls do.

Now i am wondering if i should not just use those instead.
But before i make a decision i would love some input on this.
What are the advantages and disadvantages of both?

In what cases would one work better over the other?

General Discussions

asked on 05 Apr 2013