Questions on UI for ASP.NET MVC Forum

1 answer

291 views

Binding Grid to WebApi Result where the method needs a parameter

Hi

Let me paint the picture. I am trying to build an application for the medical domain. Basically creating accounts which are responsible for paying the account. Then dependants linked to an account. And each account has transactions linked to it. That is the basic domain. I am trying to display a grid showing the account information. My architecture is as follows. Using entity framework 6 as my ORM. I have built some DTO's inside a model project that hold all my models which I intend to carry over the wire. I have a seperate asp mvc api project which will act as my data hub for different types of front ends, browser or mobile. At the moment I'm trying to build a front end using MVC 5 using the telerik kendo ui controls to make the ui nice. I'm struggling even after reading various articles on trying to achieve this. I have a method in my web api project which returns a list of accounts which I pasted below. After reading some new articles I've realised that it be better to refactor this method to return the kendo DataSourceResult and accept the modelbinder as a parameter. My question is. How do I pass the practiceid parameter into this method so that it only returns me a list of accounts that belong to the practice the user has logged into. I have also pasted my grid definition below.

[Route("api/Accounts")]public HttpResponseMessage GetAccountsByPractice(int practiceId){ IAccountRepository accountRepository = new AccountRepository(""); try { var results = accountRepository.GetAccountsByPractice(new Practice { PracticeId = practiceId }); return Request.CreateResponse(HttpStatusCode.OK, results); } catch (Exception) { throw; }}

@(Html.Kendo().Grid<Medistat.MedistatWeb.Domain.Model.AccountDTO>() .Name("accountGrid") .Columns(columns => { columns.Bound(p => p.AccountNumber); columns.Bound(p => p.AccountHolderName).Width(100); columns.Bound(p => p.IdNumber).Width(100); columns.Bound(p => p.MedicalAidName).Width(100); columns.Bound(p => p.MedicalAidNumber).Width(100); }) .ToolBar(tools => { tools.Create(); }) .Sortable() .Pageable() .Filterable() .DataSource(dataSource => dataSource .WebApi() .Model(model => { model.Id(p => p.AccountId); }) .Events(events => events.Error("error_handler")) .Read(read => read.Url("http://localhost:54510/api/accounts")) .Create(create => create.Url("http://localhost:54510/api/accounts")) ))

Grid

answered on 21 Sep 2016

1 answer

515 views

Filtering in Treelist and resetting the selected item

Hi,

Based on the demo in http://demos.telerik.com/aspnet-mvc/dialog/treeview-integration. i am trying to achieve a filter in the treelist control. But the data i am binding in the treelist has about 5000 records, hence the filtering takes about 7 seconds, please advise if the code provided in the demo is suitable for this scenario or do i need to use a different approach.

Also i am using the selected property of the item to decide on the selection in the treelist, and setting the selected item text to a textbox, if i change the textbox would want to unselect the selected item in the treelist, is this possible.

@Html.Kendo().TextBoxFor(t => t.Name).Name("LocationName")<button id="ShowAll" class="k-button AllLoad" onclick="ShowAll();">Show all</button>

<div class="dropdowndiv" id="divLocationId" style=

"display:none; overflow:auto; text-align: left; z-index:999999; position:absolute;background-color:white;border:1px solid #c3d9f9;width:488px;padding-left:2px"

onblur="hideAll();">

@(Html.Kendo().TreeView().Name("TreeViewDropDown")

.AutoBind(false).Events(ev => ev.DataBound("treeViewDataBound"))

.DataTextField("text")

.BindTo(Model.LocationList).Events(e=>e.Select("onSelection"))

)

</div >

<script>

$(document).ready(function () {

$("#LocationName").on("input", function () {

$('#divLocationId').slideDown(200);

var query = this.value.toLowerCase();

var dataSource = $("#TreeViewDropDown").data("kendoTreeView").dataSource;

filter(dataSource, query);

matchColors(query);

});

function onSelection(e)

{

if (e.node.childElementCount > 1) {

e.preventDefault();

return;

}

$("#LocationName").val(e.node.innerText);

$("#locationId").val(e.node.innerText);

}

function ShowAll()

{

$('#divLocationId').slideDown(200);

var dataSource = $("#TreeViewDropDown").data("kendoTreeView").dataSource;

filter(dataSource, "");

}

function treeViewDataBound(e) {

e.sender.expand(e.node);

}

function filter(dataSource, query) {

var hasVisibleChildren = false;

var data = dataSource instanceof kendo.data.HierarchicalDataSource && dataSource.data();

for (var i = 0; i < data.length; i++) {

var item = data[i];

var text = item.text.toLowerCase();

var itemVisible =

query === true // parent already matches

|| query === "" // query is empty

|| text.indexOf(query) >= 0; // item text matches query

var anyVisibleChildren = filter(item.children, itemVisible || query); // pass true if parent matches

hasVisibleChildren = hasVisibleChildren || anyVisibleChildren || itemVisible;

item.hidden = !itemVisible && !anyVisibleChildren;

}

if (data) {

// re-apply filter on children

dataSource.filter({ field: "hidden", operator: "neq", value: true });

}

return hasVisibleChildren;

}

function matchColors(query, element) {

$("#TreeViewDropDown .k-in:containsIgnoreCase('" + query + "')").each(function () {

var index = $(this).html().toLowerCase().indexOf(query.toLowerCase());

var length = query.length;

var original = $(this).html().substr(index, length);

var newText = $(this).html().replace(original, "<span class='query-match'>" + original + "</span>");

$(this).html(newText);

});

}

$.expr[':'].containsIgnoreCase = function (n, i, m) {

return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;

};

function hideAll() {

$('#divLocationId').slideUp('fast');

}

$(document).ready(function () {

var grid = $("#Feedback").data("kendoGrid");

if (grid != undefined || grid != null)

DisplayNavigationMessage("Feedback");

grid = $("#FeedbackQuestions").data("kendoGrid");

if (grid != undefined || grid != null)

DisplayNavigationMessage("FeedbackQuestions");

});

$("body").click(function (e) {

if (e.target.className != "dropdowndiv" && e.target.className != "k-icon k-i-expand" &&

e.target.className != "k-icon k-i-collapse" && e.target.className != "k-button AllLoad")

{

hideAll();

}

});

</script>

TreeList

answered on 21 Sep 2016

3 answers

343 views

Framework .DLL's

I am new to the "MVC" world so I expect that I am doing something wrong. I am constantly moving between a desktop station and a laptop. Projects created on one system will not load successfully from Team Foundation Services on the second system. Both computers have are fully licensed and have all the same levels of .NET and other tools installed. Both are kept "current" from the "Telerik" and "Microsoft" perspective.

The problem seems to be related to the "Kendo.Mvc.dll". The computer knows where it is and links and compiles perfectly fine on machine #1. When I save all to TFS then move to workstation #2 the problems occur. A complete get of all source code, and subsequent compilation, shows that the computer cannot find "Kendo.Mvc.dll". The reference shows a small symbol indicating its reference is invalid. I am forced to manually remove the .DLL, then browse for the .DLL. This solves the immediate problem however it then reoccurs when I do the reverse (move back to machine #1). All Telerik/Kendo .DLL's are set to "copy local".

A possible symptom of the problem: A "upgrade" action causes the upgrade wizard to crash. It dies reporting that it cannot find the .DLL despite it being present in the respective folders. If it is of concern, the projects are targeted at .NET Framework 4.6.1. I appear to be using MVC 5.

Is anyone else having similar issues? What am I doing wrong? While this is in no way a showstopper, it is an annoyance I would like to resolve.

General Discussions

answered on 21 Sep 2016

1 answer

6.2K+ views

Remove dropdown option from Kendo dropdownlist using jquery

I have tried and tried and searched the internet trying to figure this out but still haven't found an exact answer. Removing an item from a standard issued select dropdown is pretty easy, the code is: $("#dropdownlistID option[value='optiontoremove']").remove();

How do i do this with Kendo Dropdownlist, something along the lines of $("#dropdownlistID").data("kendoDropDownList").whateverhere.remove

Thanks to whoever can help me solve this.

DropDownList

answered on 19 Sep 2016

7 answers

733 views

Close event access parent document

HI!

Hi have a page with multiple grids. When I click in one element a modal window (kendoWindow) opens and update info from the item (it's not create or edit popup).

So when I close the kendoWindow I want to refresh the dataSource, but when I try to access to the specific grid it is undefined. How can I solve it?

Here's the code from onClose event of the kendoWindow.

Thanks!!!

function onClose(e) {

$("#undo").fadeIn();

var grid = $("grid_" + zona).data("kendoGrid"); // <- undefined (grid's name is valid)

grid.dataSource.read()

}

Window

answered on 19 Sep 2016

23 answers

2.5K+ views

DatePicker format will not validate even

I have a DatePicker that I want the desired input to be "Sun, 3/10/13"

I've set up the DatePicker Format AND added the same format to the ParseFormats functions of "ddd, M/d/yyyy"

The strange thing is that the desired input works, but the validation fires.

For example.

I type "3/10/2013" into the field and tab to the next input. At this point, my input changes to "Sun, 3/10/13" (which is desired), BUT I get the "Field Date must be a date" validation error message.

Do I need to define this format on the view model as well or is something else strange going on?

Here's the source and an image of the issue is attached:

@(Html.Kendo().DatePickerFor(m => m.PickupDate)

.ParseFormats(new string[] {

"ddd, M/d/yyyy",

"ddd, MM/dd/yyyy",

"ddd, M/dd/yyyy",

})

.Format("ddd, M/d/yyyy")

.HtmlAttributes(new { style = "width:110px;" })

)

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

Date/Time Pickers

answered on 17 Sep 2016

3 answers

437 views

Inline Editing of Dynamic Columns

I have a model with a dynamic number of attributes that I am displaying in a grid using the method described here. The ajax read, edit, and destroy functions work properly, but I can't get the create button to generate a new line in the grid. Is there a way to get this functionality working with dynamically generated columns?

Model:

01.public class Product

02. {

03. public int ID { get; set; }

04.

05. private string _Name = "Product";

06. public string Name

07. {

08. get { return _Name; }

09. set { _Name = value; }

10. }

11.

12. public Dictionary<string, int> OptionIDs { get; set; }

13. }

Grid in View:

01.

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

02. .Name("grid")

03. .Columns(columns =>

04. {

05. columns.Bound("Name").Title("Name").EditorTemplateName("String");

06. columns.Bound("ID").Title("Product ID").EditorTemplateName("Integer");

07.

08. foreach (Dimension d in Model.Dimensions)

09. {

10. columns.Bound($"OptionIDs[{d.ID.ToString()}]").Title(d.Name).EditorTemplateName("Integer");

11. }

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

13. })

14. .ToolBar(tb => tb.Create())

15. .Selectable()

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

17. .Pageable()

18. .DataSource(datasource => datasource

19. .Ajax()

20. .Model(

21. model =>

22. {

23. model.Id("ID");

24. }

25. )

26. .PageSize(20)

27. .Read(read => read.Action( "Products_Read", "Products"))

28. .Update(update => update.Action( "Products_Update", "Products"))

29. .Create(create => create.Action( "Products_Create", "Products"))

30. .Destroy(destroy => destroy.Action( "Products_Destroy", "Products"))

31. )

32.)

Controller:

01.public class ProductsController : Controller

02. {

03. public ActionResult Index()

04. {

05. return View(Models.MockData.PVM);

06. }

07.

08. public ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)

09. {

10. IQueryable<Models.Product> ps = Models.MockData.PVM.Products.AsQueryable();

11. DataSourceResult result = ps.ToDataSourceResult(request, p => new

12. {

13. Name = p.Name,

14. ID = p.ID,

15. OptionIDs = p.OptionIDs

16. });

17.

18. return Json(result, JsonRequestBehavior.AllowGet);

19. }

20.

21. public ActionResult Products_Create([DataSourceRequest] DataSourceRequest request, Models.Product product)

22. {

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

24. }

25.

26. public ActionResult Products_Update([DataSourceRequest] DataSourceRequest request, Models.Product product)

27. {

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

29. }

30.

31. public ActionResult Products_Destroy([DataSourceRequest] DataSourceRequest request, Models.Product product)

32. {

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

34. }

35. }

Grid

answered on 16 Sep 2016

6 answers

40 views

Where did the MVC Online Demos go? They are all HTML5 samples now

It's been a few months since I have had to use the MVC demo section online (http://demos.telerik.com/aspnet-mvc/ ), so I'm sorry if I missed a notice about the document changes.

However, now when I go to the MVC demos, they look exactly the same as the HTML5 demo. It use to be the MVC demos would show the .cshtml with the Html helpers used. Now it's all jscript.

Example http://demos.telerik.com/aspnet-mvc/combobox/index looks the same as http://demos.telerik.com/kendo-ui/combobox/index

Something going on?

General Discussions

answered on 16 Sep 2016

21 answers

2.7K+ views

How to access values from a List<> in the ViewModel

So I have a ViewModel that contains a string and a List<NpiList> object.

@(Html.Kendo().Grid<ViewModels.PecosViewModel>()
.Name("npi-grid")
.Columns(columns =>
{
columns.Bound(c => c.NpiList) <-- I cannot access the properties of the list, like FirstName or LastName. It only gives me the option to bound to the list.

})
)

Any suggestions?

Grid

answered on 16 Sep 2016

4 answers

159 views

Grid not displaying data in all columns

I have this grid

@(Html.Kendo().Grid<AccidentBook.Models.Accident>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.AccidentDate );

columns.Bound(c => c.Description);

})

.DataSource(dataSource => dataSource

.Ajax()

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

.Read(read => read.Action("Accidents_Read", "Accident"))

)

Here we can see Accidents_Read

public ActionResult Accidents_Read([DataSourceRequest]DataSourceRequest request)

{

IQueryable<Accident> accidents = db.Accidents;

DataSourceResult result = accidents.ToDataSourceResult(request, accident => new {

ID = accident.ID,

AccidentDate = accident.AccidentDate,

Descripion = accident.Description,

});

return Json(result);

}

The issue I am having is that the description column is that the Description column isn't being displayed, AccidentDate is displayed ok. I can see using firebug that the data is being returned ok (attached image). Does anyone have any ideas as to what might be the problem?

Grid

answered on 16 Sep 2016