Questions on UI for ASP.NET MVC Forum

1 answer

117 views

I downloaded the code from http://www.telerik.com/download/aspnet-mvc

and followed the instructions for installing from http://docs.telerik.com/kendo-ui/aspnet-mvc/introduction

but I seem to be missing some pretty key pieces of code - for a start I do not have the Examples directories such as..

wrappers\aspnetmvc\Examples\VS2013

..and when I try to run any of the "Demo" code on the website the compiler complains it doesn't know about

Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel for example.. so I am assuming this is also because I am missing the Examples?

HELP!!

Scheduler

answered on 19 Aug 2015

3 answers

75 views

Direct Update of Entity normally updated via Grid

I use Grids in many places and in most, there are Popup Edit and/or Add options using the Grid's Editor Template i.e. .TemplateName("_AddEditPerson")).

This works fine, but there are quite a few occasions where I need to bring up the same edit popup but directly, for a given ID and not via the Grid. e.g. If a user looks at a list of notifications which point to various entity types to be found in various Grids. They just want quickly access that item without leaving where they are for another Grid.

I would like to do this in such a way that updates from the Grids still work (and are bound immediately back to the grid as normal), but that the same editor templates can be used for direct updates.

My idea to achieve this is as follows:
- create a hidden Kendo (popup) window on the calling page
- upon request, via javascript, open the Window with its contents populated with a partial view (_DirectEditPerson) by a Controller Action (HomeController/DirectEditPerson)
- the _DirectEditPerson Partial View contains an Ajax Form containing the regular Grid Editor Template (_AddEditPerson) loaded via a @Html.Partial statement

I have shown how this is setup in the attached image. The edit button on each line points to the regular editor window as normal. There is then a button at the bottom of the Grid which opens Person with ID 3 (just for test purposes) without going via the Grid.

The window correctly opens with all but the Gender dropdown filled in. The dropdown which seems to have no value, even though I know its being passed. If I set the value and press update, there is a validation error with the same field.

Is this achievable? Can you give me any pointers? Telerik suggested explicitly set the model value to the DropDownList (using Value method) or use MVVM binding (used by the Grid internally) to bind the edited model to the editor template, but I'm not sure how to do this. As I have quite a lot of Grid Editor templates, I do want to re-use them so that they work from both their Grid and also directly like this.

Thanks,

Chris

Grid

answered on 19 Aug 2015

6 answers

410 views

How can I customize the Filter UI to support check boxes or similar

I'm evaluating the Grid control for use in a project. I've searched the documentation and demos and haven't been able to figure out whether it is possible to customize the Filter UI to look something similar to the first attached screenshot. It doesn't need to be exact, but I'd like to be able to remove the operators list and label text.

I also tried using a multiselect (which might be ok as an alternative to check boxes), but I don't know how to wire it up so that it filters properly.

@(

Html.Kendo().Grid<User>()

.Name("grid")

.Pageable(config => config

.Info(true)

)

.Sortable()

.Filterable()

.ColumnMenu(config =>

config.Enabled(true))

.Columns(config =>

{

config.Bound(user => user.Id);

config.Bound(user => user.FirstName);

config.Bound(user => user.LastName);

config.Bound(user => user.UserName);

config.Bound(user => user.Type)

.ClientTemplate("#=Type#")

.Filterable(filter => filter

.UI("typeFilter")

.Extra(false)

);

}

)

.DataSource(dataSourceBuilder => dataSourceBuilder

.WebApi()

.Read(config => config

.Url("/api/data/users")

)

----

<script type="text/javascript">

function typeFilter(element) {

element.kendoMultiSelect(

{

dataTextField: "name",

dataValueField: "id",

dataSource: {

data: [

{ id: 1, name: "Builder"},

{ id: 2, name: "Police Man"}

]

}

});

}

</script>

Is what I'm trying to achieve possible? Can someone point me in the right direction?

Grid

answered on 18 Aug 2015

2 answers

61 views

UserControls (like ASP.NET usercontrols or similar)

Hi Kendo,

Building user-controls - or controls that may be added on many pages throughout a website - how is this done with Kendo?

I can think of - at least - 3 different types of usercontrols:

A simple control like the DateTimePicker
A stand-alone control with a model and a control
A ClientDetailTemplateId (found in Html.Kendo().Grid)

Is it possible to build those 3 types of controls so they may be re-used in more than one page ?

Thank you.

General Discussions

answered on 18 Aug 2015

3 answers

919 views

Uncaught ReferenceError when trying to create new record

Hi,

I'm working on a grid (somewhat similar, but also a bit different in terms of underlying model) again. I'm having issues with creating a new record.

Whenever I press the "Add new record" button, nothing happens and the browser console says the following:
Uncaught ReferenceError: CustomerContract is not defined.

Here's my grid and relevant templates in the razor view:

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

#if(data != null){#

#:data.Name#

#}#

</script>

<script type="text/javascript">

var customerTemplate = kendo.template($("#customerTemplate").html(), { useWithBlock: false });

</script>

<div class="container">

<div class="row">

<div class="col-md-12 sl-table">

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

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.Name);

columns.Bound(p => p.CustomerContract).ClientTemplate("#=customerTemplate(CustomerContract)#");

columns.Command(command =>

{

command.Edit();

command.Destroy();

}).Width(180);

})

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

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ProjectPopUpTemplate"))

.Pageable()

.Sortable()

.Scrollable()

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

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

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

.Create(update => update.Action("EditingPopup_Create", "ProjectManagement"))

.Read(read => read.Action("EditingPopup_Read", "ProjectManagement"))

.Update(update => update.Action("EditingPopup_Update", "ProjectManagement"))

.Destroy(destroy => destroy.Action("EditingPopup_Destroy", "ProjectManagement"))

)

</div>

Now, the grid populates fine, and the edit button works. It's only an issue when pressing the "Add new record" button.
Here's how my controller looks (removed the update / destroy actions):

public class ProjectManagementController : BaseController

{

static readonly ILog Log = LogManager.GetLogger("ProjectManagementController.class");

private static readonly List<Customer> CustomerList = new List<Customer>();

public ProjectServiceClient ProjectService { get; set; }

public CustomerServiceClient CustomerService { get; set; }

public ProjectModel Model { get; set; }

public ProjectManagementController()

{

try

{

ProjectService = new ProjectServiceClient();

CustomerService = new CustomerServiceClient();

}

catch (Exception e)

{

Log.Error(e);

throw;

}

// GET: ProjectManagement

public ActionResult Projects()

{

List<CustomerContract> customers = CustomerService.GetCustomers().ToList();

Model = new ProjectModel();

foreach (var customer in customers)

{

CustomerList.Add(new Customer

{

Name = customer.Name,

Id = customer.Id

});

}

ViewData["Customers"] = GetAll();

return View(Model);

}

public ActionResult EditingPopup_Read([DataSourceRequest] DataSourceRequest request)

{

ProjectContract[] list = ProjectService.GetProjects();

return Json(list.ToDataSourceResult(request));

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult EditingPopup_Create([DataSourceRequest] DataSourceRequest request, ProjectModel project)

{

if (project != null && ModelState.IsValid)

{

CustomerContract customer = CustomerService.GetCustomer(project.CustomerContract.Id);

var newProject = ProjectService.InsertProject(new ProjectContract

{

CustomerContract = customer,

Name = project.Name,

Id = project.Id

});

ProjectService.UpdateProject(newProject);

}

return Json(new[] { project }.ToDataSourceResult(request, ModelState));

}

The service call in the read method returns a list of ProjectContracts. A ProjectContract consists of a few properties of type string and another property of type CustomerContract (which holds its own string properties). Could this nested contract possibly be the problem?

Finally, here's my model which the grid is based on:

public class ProjectModel

{

private ProjectContract _projectContract;

public ProjectModel(ProjectContract projectContract)

{

ProjectContract = projectContract;

}

public ProjectModel()

{

}

public CustomerServiceClient CustomerService { get; set; }

private ProjectContract ProjectContract

{

get

{

if (_projectContract == null)

{

_projectContract = new ProjectContract();

}

return _projectContract;

}

set { _projectContract = value; }

}

[Display(Name = "Customer")]

public CustomerContract CustomerContract

{

get

{

if (ProjectContract.CustomerContract == null)

{

return new CustomerContract();

}

return ProjectContract.CustomerContract;

}

set { ProjectContract.CustomerContract = value; }

}

[Display(Name = "Customers")]

public List<Customer> Customers { get; set; }

[ScaffoldColumn(false)]

public int Id

{

get { return ProjectContract.Id; }

set { ProjectContract.Id = value; }

}

[Display(Name = "Project Name")]

public string Name

{

get { return ProjectContract.Name; }

set { ProjectContract.Name = value; }

}

How can I go about solving this?

Grid

answered on 18 Aug 2015

1 answer

150 views

Change row style based on value

Hello there,

I have a grid set up and I'd like to change the row and or cell style based on the value of a particular column. For example a field had a value of "live" the row would be green or alternatively thee would be a green icon next word "live". Can the grid do this? I had a look at templates but they don't seem to be specific enough or perhaps I wasn't understanding them. I don't need any CSS/styling advice I just need to know if the grid can assign a class or whatever to the cell or row based on a single field data and if so how?

Grid

answered on 18 Aug 2015

2 answers

100 views

Localization without call Columns.Command

When use Grid edit command without calling GridActionColumnFactory.Edit(). GridBuilder would not render localization script for the popup edit. Just like the code.

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

.Name("grid")

.DataSource(datasource=>

/*...*/

)

.Columns(columns =>

{

columns.Bound(m => m.ProductId).ClientTemplate("<a onclick='edit(this)'>#=ProductId#</a>");

columns.Bound(m => m.ProductName);

columns.Command(command =>

{

command.Destroy();

});

})

)

Grid

answered on 18 Aug 2015

2 answers

209 views

Foreign Key DropDown in Grid and WebAPI

Entity Model for Country (All models are in a separate project)

[ScaffoldColumn(false)]

public int CountryId { get; set; }

public string ShortName { get; set; }

public string LongName { get; set; }

public string IsoCode2 { get; set; }

public string IsoCode3 { get; set; }

public string IsoCodeHash { get; set; }

public string CallingCodeOne { get; set; }

public string CallingCodeTwo { get; set; }

public string CurrencyName { get; set; }

public string CurrencySymbol { get; set; }

public List<State> States { get; set; }

Entity Model for State

[ScaffoldColumn(false)]

public int StateId { get; set; }

public string Name { get; set; }

public bool IsCapital { get; set; }

[ScaffoldColumn(false)]

public int CountryId { get; set; }

public Country Country { get; set; }

States Controller deriving from ODataController (It's a separate project)

private DataAccess.Helper.DatabaseContext _dbContext;

public StatesController()

{

DataAccess.MyApp.StartUp.Initialize();

const string dataSource = "My-PC\\SQLEXPRESS";

const string initialCatalog = "BS";

var connString = SqlConnection.CreateConnectionString("", dataSource, initialCatalog);

_dbContext = new DatabaseContext(connString);

}

// GET odata/Countries

[EnableQuery]

public System.Linq.IQueryable<State> GetStates()

{

return _dbContext.States;

}

public IHttpActionResult Put([FromODataUri] int key, State entity)

{

if (!ModelState.IsValid)

return BadRequest(ModelState);

if (key != entity.StateId)

return BadRequest();

_dbContext.States.Attach(entity);

_dbContext.Entry(entity).State = EntityState.Modified;

try

{

_dbContext.SaveChanges();

}

catch (Exception)

{

if (!EntityExists(key))

{

return NotFound();

}

else

{

throw;

}

return Updated(entity);

}

private bool EntityExists(int key)

{

return _dbContext.States.Count(e => e.StateId == key) > 0;

}

public IHttpActionResult Post(State entity)

{

if (!ModelState.IsValid)

return BadRequest(ModelState);

_dbContext.States.Add(entity);

_dbContext.SaveChanges();

return Created(entity);

}

View (It's in a separate project)

@(Html.Kendo().Grid<SC.BS.EntityModel.State>()

.Name("EntityStates")

.Columns(col =>

{

col.Bound(e => e.StateId);

col.Bound(e => e.Name).Title("State").Width("200");

col.Bound(e => e.IsCapital).Title("Capital").Filterable(false).Width(100).ClientTemplate("#= IsCapital ? 'Yes':'No' #").HtmlAttributes(new {style="align=center"});

col.Bound(e => e.CountryId);

col.Bound(e => e.Country).Title("Country").ClientTemplate("#: Country.ShortName #").EditorTemplateName("CountriesLookUp").Filterable(false);

col.Command(cmd =>

{

cmd.Edit();

cmd.Destroy();

}).Width(170);

})

.Scrollable()

.ToolBar(tb => tb.Create().Text("New State"))

.DataSource(ds => ds

.Custom()

.Schema(sch =>

{

sch.Model(m =>

{

m.Id("StateId");

m.Field(e => e.StateId).Editable(false);

m.Field(e => e.CountryId).DefaultValue(1);

//m.Field(e => e.Country).DefaultValue(new SC.BS.EntityModel.Country());

//m.Field("CreatedOn", typeof(DateTime));

});

})

.Type("odata-v4")

.Transport(tr =>

{

tr.Read(r => r.Url("http://localhost:28016/oData/States").Data("function() {return {'$expand' : 'Country'} }"));

tr.Create(c => c.Url("http://localhost:28016/oData/States"));

tr.Update(new

{

url = new Kendo.Mvc.ClientHandlerDescriptor

{

HandlerName = @"function(data) {

return 'http://localhost:28016/oData/States(' + data.StateId + ')';

}"

}

});

tr.Destroy(new

{

url = new Kendo.Mvc.ClientHandlerDescriptor

{

HandlerName = @"function(data) {

return 'http://localhost:28016/oData/States(' + data.StateId + ')';

}"

}

});

})

.PageSize(20)

.ServerPaging(true)

.ServerSorting(true)

.ServerFiltering(true)

)

.Pageable()

.Sortable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

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

CountriesLookUp EditorTemplate

@model SC.BS.EntityModel.Country

@(Html.Kendo().DropDownList().Name("Countries").DataSource(ds => ds

.Custom()

.Schema(sch =>

{

sch.Model(m =>

{

m.Id("CountryId");

});

})

.Type("odata-v4")

.Transport(tr =>

{

tr.Read(r => r.Url("http://localhost:28016/oData/Countries"));

})

)

.DataValueField("Country")

.DataTextField("ShortName"))

Displaying data works fine, but I'am having trouble updating the State.

When I click edit, DropDown preselect top/first country instead of selecting the country that state belongs to.
After changing values, update doesn't work, my WebAP complaints in Put method that the ModelState is invalid and errors out:
message=entity : The property 'Countries' does not exist on type 'SC.BS.EntityModel.State'. Make sure to only use property names that are defined by the type.
This is the JSON that is sent on update command. {"StateId":"1","Name":"Delhi","IsCapital":true,"CountryId":"2","Country":{"CountryId":2,"ShortName":"United States","LongName":"United States of America","IsoCode2":"US","IsoCode3":"USA","IsoCodeHash":"840","CallingCodeOne":"1","CallingCodeTwo":"","CurrencyName":"USD","CurrencySymbol":"$"},"Countries":"United States"}

Grid

answered on 18 Aug 2015

4 answers

578 views

Expanding child detail grid event

I want to persist what child detail grid is open on return to the page. I tried using the localstorage example

var options = kendo.stringify(grid.getOptions())

localStorage.setItem("kendo-grid-options", options);

but this does not seem to keep the open expanded row details.

Is there an event that fires when oi expand a row, then maybe I could use that to record the row number and expand using js when page is loaded, thanks

Grid

answered on 17 Aug 2015

2 answers

93 views

Disabling the automatic application of filters

I have very large data sets I want to display in a grid, and I'd like to use the auto filtering on the column header. But with my large data sets, users will typically want to specify a few filters before getting their data, otherwise the retrieval of the records from the database takes a very long time.

It seems that by default, each filter in the grid is applied immediately. I'd like to allow the user to select multiple filters, and then push a button to trigger the refresh.

Is there a good way to skip the automatic refresh that comes with setting a filter in the grid header?

Grid