Questions on UI for ASP.NET MVC Forum

1 answer

93 views

How to create grid at runtime using pure MVC

I am new to Kendo and want to know whether is it possible to create dynamic grid at run time say on a button click with using only pure MVC like create the grid control on server side and render it on client side

Grid

answered on 15 Jul 2014

2 answers

175 views

Loading single items from a grid model

Hi Guys,

So I have this grid, and when the user selects an item from the grid i would like to bind that data item to a detail view outside the grid.
The idea is that the user could then decide to remove the grid from the page but keep the detail view if they so choose but ultimately they are the same object so a grid row and the detail view share that object.
If either the table or the detail view are updated in any way then both are updated, but also my data source is a SignalR source so both need to be able to accept an update from the hub.

I put together a "broken" jsfiddle showing how far I have gotten so far.

http://jsfiddle.net/g2wYX/

I have noticed there are options like this ... http://www.telerik.com/forums/row-selected-event ... but that assumes I want to go back to the server.
In my case the grid model already locally contains the full detail I need I just want to take a single item and bind that within a simple MVVM detail view.

Also, when a different item from the grid is selected I want that to then rebind the detail view to that item.

Any ideas?

Grid

answered on 15 Jul 2014

3 answers

263 views

Bind combobox selected-id when inside a template

Hello, I searched for this for several hours in the documentations and couldn't find anything, so here it is. I have a template and inside it there are 2 comboboxes (Patients and HomeServers). This template is used when a listview is in edit or create mode. The problem is that when I make an edit and select a different value from the combobox it is not posted to the server. The problem is probably that it is not bound to the id-columns (IdPatient and IdHomeServer). Please tell me how can I bind the selected ID of the combobox to the model.

Here is the template that is used by the listview. It has 2 combobox controls inside:

01.<script type="text/x-kendo-tmpl" id="edit-watch-template">

02. <div class="watch-view k-widget">

03. <div class="edit-buttons">

04. <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>

05. <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>

06. </div>

07. <dl>

08. <dt>Serial number</dt>

09. <dd>

10. <input type="text" class="k-textbox" data-bind="value:SerialNo" name="SerialNo" required="required" validationMessage="required" />

11. <span data-for="SerialNo" class="k-invalid-msg"></span>

12. </dd>

13. <dt>Patient</dt>

14. <dd>

15. @*<input type="text" class="k-textbox" data-bind="value:IdPatient" name="IdPatient" required="required" min="1" validationMessage="required" />*@

16. @(Html.Kendo().ComboBox()

17. .DataSource(source => {

18. source.Read(read => {

19. read.Action("GetPatients", "Watches");

20. })

21. .ServerFiltering(true);

22. })

23. .Name("IdPatient")

24. .TemplateId("patient-template")

25. .DataTextField("DisplayName").DataValueField("Id")

26. .Filter(FilterType.Contains)

27. .HtmlAttributes(new Dictionary<string,object>{

28. {"data-bind","value:IdPatient"}

29. })

30. .ToClientTemplate()

31.

32. )

33. <span data-for="IdPatient" class="k-invalid-msg"></span>

34. </dd>

35. <dt>Home server</dt>

36. <dd>

37. @(Html.Kendo().ComboBox()

38. .DataSource(source => {

39. source.Read(read => {

40. read.Action("GetHomeServers", "Watches");

41. })

42. .ServerFiltering(true);

43. })

44.

45. .Name("IdHomeServer")

46. .TemplateId("home-server-template")

47. .DataTextField("DisplayName").DataValueField("Id")

48. .Filter(FilterType.Contains)

49. .HtmlAttributes(new Dictionary<string,object>{

50. {"data-bind","value:IdHomeServer"}

51. })

52. .ToClientTemplate()

53. )

54. <span data-for="IdHomeServer" class="k-invalid-msg"></span>

55. </dd>

56. </dl>

57. </div>

58.</script>

In lines 27 and 49 I tried to do the bindind but it didn't work.

I also did this modification to the edit template, otherwise it doesn't show up correctly when pressing edit.

1.var listView = $("#watchesListView").data("kendoListView");

2.listView.editTemplate = kendo.template($("#edit-watch-template").html());

This is the code on the server that handles create for example. The same thing happens on update.

01.public JsonResult CreateWatch(HomeWatchListItem hw) {

02. try {

03. uow.HomeWatchesRepository.Add(new HomeWatch {

04. HomeServerId = hw.IdHomeServer,

05. PatientId = hw.IdPatient,

06. SerialNo = hw.SerialNo

07. });

08. uow.Commit();

09. return Json(hw);

10. }

11. catch (Exception) {

12. //TODO: what to return here

13. return Json(false);

14. }

15.}

In the code above hw.IdHomeServer and hw.IdPatient are supposed to be the id values from the 2 comboboxes but they are both 0. hw.SerialNo is OK.

Please help if you can.

ComboBox

answered on 15 Jul 2014

4 answers

573 views

Custom Button/HyperLink on Each Row in Telerik Grid

I have a search page for Cars where the results are put in a Telerik Grid. There is an ajax call made to my API controller which returns result. The success function of my ajax call is as shown:

success: function (result) {

CarSearchResultsToGrid(result, "carSearchGridResults");

}

The function CarSearchResultsToGrid is shown below:

function CarSearchResultsToGrid(result, gridId) {

var dataSource = new kendo.data.DataSource({

data: result,

pageSize: 10

});

$("#" + gridId).data("kendoGrid").setDataSource(dataSource);

}

I then have the following code in a PartialView

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

.Name("carSearchGridResults")

.Columns(columns =>

{

columns.Bound(c => c.CarNumber)

.Width(60);

columns.Bound(c => c.OwnerName)

.Width(100);

columns.Bound(c => c.Colour)

.Width(100);

columns.Bound(c => c.FuelType)

.Width(80);

columns.Bound(c => c.LastServiceDate)

.Format("{0:dd/MM/yyyy}")

.Width(50);

columns.Bound(c => c.ManufacturerName)

.Width(80);

columns.Command(command =>

{

command.Edit();

command.Custom("Create").Click("PropertyPage.DeleteProperty");

})

.Title("Create New Car Report")

.Width(166);

})

.Pageable(pageable => pageable

.PageSizes(true)

.ButtonCount(5))

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(a => a.CarNumber))

.Update(update => update.Action("Create", "Property"))

)

What I am trying to achieve which is not working currently is to have a button or clickable link on each row in the final column with the Title of that column being Create New Car Report and the Button or Hyperlink in each row just saying 'Create'. I had tried to add the columns.Commad as shown above but it is not working. What I need is for the Button or Link to be added to each row - On clicking either the link or button the User will be Navigated to another page - so I would like to Hit an Action method in a controller - and to the action on the controller I want to pass some data from the row on which the button was clicked - so I would like to pass the CarNumber which will be unique on each row, I would like to pass the OwnerName and finally the ManaufacturerName - can anyone help as to achieve this?

Many Thanks

Grid

answered on 15 Jul 2014

2 answers

236 views

Broken Razor syntax for Kendo WidgetFactory after update to ASP.NET MVC 5.2.0

After update to latest release of ASP.NET MVC stack:

<package id="Microsoft.AspNet.Mvc" version="5.2.0" targetFramework="net45" />
<package id="Microsoft.AspNet.Razor" version="3.2.0" targetFramework="net45" />
<package id="Microsoft.AspNet.WebPages" version="3.2.0" targetFramework="net45" />

WidgetFactory for HtmlHelper<T> Kendo() is broken (latest release of Kendo UI ASP.NET MVC)

Visual Studio 2013 (update 2) shows message: "Cannot convert instance argument type 'System.Web.Mvc.HtmlHelper<dynamic>' to 'System.Web.Mvc.HtmlHelper'"

For strong typed view message looks like: "Cannot convert instance argument type 'System.Web.Mvc.HtmlHelper<MyCustomType>' to 'System.Web.Mvc.HtmlHelper'"

All works. But Visual Studio displays an errors and does not work intellisens :(
How to fix it?

General Discussions

answered on 14 Jul 2014

2 answers

279 views

How can I use Listview templates for editing with server side validation?

I am using MVC4 with the latest Kendo UI Q2. I am trying to use the mvc wrappers to implement a list view with a view template and an edit template

After editing a listview item using an edit template, I click the save button. The edit template is immediately replaced by the view template before the Create/Update controller action is hit on the server. If the controller action fails some validation I can not show this to the user as the edit template is no longer visible. Is there a way to make the edit template remain open until either the controller action has completed successfully or if the controller action fails validation push the validation errors to the edit template. This would be a fairly typical pattern.

<div class="k-toolbar k-grid-toolbar">

<a id="addRoleButton" class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new Role</a>

</div>

@(Html.Kendo().ListView<iProjX.Models.RoleModel>(Model.Roles)

.Name("rolesListView")

.TagName("div")

.ClientTemplateId("rolesList")

.Editable()

.Pageable()

.DataSource(dataSource => dataSource

.Model(model =>

{

model.Id("RoleId");

model.Field(f => f.ProjectId).DefaultValue(Model.ProjectId);

model.Field(f => f.Title);

model.Field(f => f.Description);;

})

.Events(e => e

.Error("rolesListViewData_error")

.Change("rolesListViewData_change")

.RequestStart("rolesListViewData_requestStart"))

.Create(create => create.Action("createRole", "Project"))

.Read(read => read.Action("getRoles", "Project", new { projectId = Model.ProjectId }))

.Update(update => update.Action("updateRole", "Project"))

.PageSize(30)

)

.Events(e => e

.Change("rolesListView_change")

.Edit("rolesListView_edit")

.DataBound("rolesListView_databound"))

)

view template

//View template

<script type="text/x-kendo-template" id="rolesList">

<div class="roleView" >

<div> ${Title} </div>

<div> ${Description} </div>

<div class="edit-buttons">

<a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>

<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>

</div>

</script>

edit template

@model iProjX.Models.RoleModel

<div class="roleView" id = "newRoleForm2" >

@Html.ValidationSummary(true)

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

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

<div class="editor-label">

@Html.LabelFor(model => model.Title)

</div>

<div class="editor-field">

@Html.TextBoxFor(model => model.Title, new { style = "width:99%", maxlength = 100 })

<span data-for="Title" class="k-invalid-msg"></span>

</div>

<div class="editor-label">

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

</div>

<div class="editor-field">

@Html.TextAreaFor(model => model.Description, new { style = "width:100%; height:100px"})

<span data-for="Description" class="k-invalid-msg"></span>

</div>

<div class="edit-buttons">

<a class="k-button k-button-icontext k-update-button" onclick="updateClick()" href="\\#"><spanclass="k-icon k-update"></span>Save</a>

<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>

</d

ListView

answered on 14 Jul 2014

3 answers

176 views

Grid and globalization

Hi
How can I apply globalization to a grid? I have a column datetime but it doesn't work when i showdata.
Just works when I "edit" the row, but when i try to "update" i get a validation error ("this is not a valid date")

Thanks!

Grid

answered on 11 Jul 2014

2 answers

220 views

Render the Javascript only

Hi,

I am switching between the kendo editor and plain text using jquery. I'm destroying the kendoEditor and then removing it from the DOM in such a way that the textarea is left behind. Then if I need to switch back to the editor I call $("#Test").kendoEditor() again. This works pretty well so far.

My first question is: Is there a simpler way of doing this?

My second question is: I'd like to write out the Javascript that converts the textarea to an editor only once. Is there a way to tell the Html helper to render just the javascript so I can put the output into a function?

For example. @Html.Kendo().Editor().Name("Test").Encode(false) will write out both the textarea and the javascript. Can I get it to write just the javascript?

Many thanks,
Bill

Editor

answered on 11 Jul 2014

1 answer

177 views

Custom MVC Grid Wrapper with Popup Editing Window

How can I customize the size and the format of the popup editing window of the grid?

Grid

answered on 11 Jul 2014

3 answers

330 views

Master Detail View

Hi All,

I want to create contacts view. My model is:

public class Contact
{
    public Contact()
    {
        Documents = new HashSet<Document>();
    }

    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string ContactNo { get; set; }
    public string EmailId { get; set; }
    public string Address { get; set; }
    public string Notes { get; set; }
    public ICollection<Document> Documents { get; set; }
}

public class Document
{
    public Document() { }

    public int Id { get; set; }
    public int ContactId { get; set; }
    public string DocumentNo { get; set; }
    public string DocumentType { get; set; }
    public byte[] FileContent { get; set; }
    public string FileName { get; set; }
    public int ContentLength { get; set; }
}

I have created view with Contact details and Grid for documents. Actually I am new to MVC so I am searched internet how to achieve this. But I cannot find any workable solution yet. I do not know how to add one or more document and persist document details in grid. What I am trying to achieve is save contact information with uploaded documents (one or more) while submit the form.

Thanks in advance.

Grid

answered on 11 Jul 2014