Questions on UI for ASP.NET MVC Forum

2 answers

173 views

Geocoding

Has anyone got any advice on the best way to get Lat and Long from a postcode?

It needs to be embedded into a commercial application so I understand we may have to pay for a license from Google, Bing , etc.

Anyone doing this?

Map

answered on 20 Aug 2015

3 answers

172 views

Postback twice caused by dataSource.sync(); on slow connections

Hi,

Is it possible, that dataSource.sync(); causes a double postback if using a slow connection ?

It looks like that the client postback twice if the server doesn't reply within e.g. 15 seconds.

The code:

var dataSource = $("#" + gridname).data("kendoGrid").dataSource;

dataSource.sync();

Is it something you have seen before - if not, then I guess I'll have to find it somewhere else in my code :-)

Are there any good ways to prevent double postbacks using the kendo framework?

Thanks.

General Discussions

answered on 20 Aug 2015

3 answers

141 views

Grid RowTemplate Problems

Hi,

I am trying to use the @Html.Kendo().Grid(Model) to generate a row template, but it doesn't do what I want... The code I have so far is:

@(Html.Kendo().Grid(todayFocus)

.Name("TodaysFocus")

.Columns(columns =>

{

columns.Template(c => { }).ClientTemplate(" ").Title("Today's Focus");

columns.Template(c => { }).ClientTemplate(" ").Title("Mid Day");

columns.Template(c => { }).ClientTemplate(" ").Title("End Dday");

columns.Template(c => { }).ClientTemplate(" ").Title("Plan");

columns.Template(c => { }).ClientTemplate(" ").Title("Target");

})

.RowTemplate(grid => @<text>

<td>@item.TaskName</td>

<td>@item.MidDay</td>

<td>@item.EndDay</td>

<td>@item.Plan</td>

<td>@item.Target</td>

</text>)

)

And what I am getting for each row is:

<tr>

<td colspan="5"> /<td>

<td>Task Name</td>

<td>10</td>

<td>20</td>

<td>30</td>

<td>40</td>

</tr>

Why am I getting the extra <td colspan="5"> and how do I get rid of it?

Thanks

Grid

answered on 20 Aug 2015

1 answer

91 views

Input textbox style issue in Firefox

Hi,

I'm using a user-defined template for grid, it looks fine in Chrome, but a red frame appears around the text box.

How to solve it?

Thanks.

Editor

answered on 19 Aug 2015

1 answer

130 views

Problems getting scheduler to work

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

87 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

425 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

68 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

953 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

158 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