Questions on UI for ASP.NET MVC Forum

3 answers

479 views

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

65 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.9K+ 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

217 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

3 answers

493 views

Two foreign key drop-downs in grid?

Hi! I use MVC Core and Kendo UI for MVC.

I have a grid that has two different foreign key columns, for which I want drop-downs. I have two problems:
1. How can I bind any of them to the MVC Model? TheGridForeignKey.cshtml that I copied in to the Shared/EditorTemplates folder uses some unknown field in the ViewData (which is null and throws an exception at run-time). I want to use MVC. I tried the following which hard-codes some values but it at least shows the drop-down in grid both columns:

Html.Kendo().DropDownListFor(m => m)

.BindTo((SelectList) new SelectList(new List<string> { "A", "B", "C" }) )

2.The GridForeignKey.cshtml is shared for all views in the whole site, how can I bind it in the actual view instead, where I have control over data?

As you can see, I haven't really figured out how all this works and is glued together.

Grid

answered on 16 Sep 2016

1 answer

456 views

"Invalid Model Configuration" Error when scaffolding. From EDMX model. EF5, MVC5, VS2015. Why???

Getting "Invalid Model Configuration" Error when scaffolding. From EDMX model. EF5/6, MVC5, VS2015. Why??? There shouldn't be any reason for this to happen.

General Discussions

answered on 16 Sep 2016

1 answer

182 views

Boostrap Style Layout

Hi,

I am in the process of converting to an Kendo MVC application and using a bootstrap style framework.

I was looking for an example in Kendo ListView that I could achieve in a RadListView with the following code. Setting pagesize to 3 and displaying 3 items horizontally.

<telerik:RadListView ID="RadListView1" runat="server" OnNeedDataSource="RadListView1_NeedDataSource" ItemPlaceholderID="PlaceHolder1" PageSize="3" AllowPaging="true" Width="100%">

<LayoutTemplate>

<div class="row uniform">

<asp:PlaceHolder ID="PlaceHolder1" runat="server" />

</div>

</LayoutTemplate>

<ItemTemplate>

<div class="4u 12u(narrower)">

<div class="boxwrapper style1">

<section class="box special">

<span class="image fit">

<telerik:RadBinaryImage ID="RadBinaryImage2" runat="server" AutoAdjustImageControlSize="false" DataValue='<%#Eval("ArticleImage") %>' />

</span>

<h5><%# DataBinder.Eval(Container, "DataItem.Title")%></h5>

<a class="button" href='<%#Eval("ID", "ShowArticle.aspx?id={0}") %>'>Learn More..</a>

</section>

</div>

</ItemTemplate>

</telerik:RadListView>

ListView

answered on 16 Sep 2016

4 answers

710 views

[Solved] Hide Column When Exporting to Excel in MVC Razor Grid

There is a bound column in my Razor MVC Grid that I do not want exported to Excel. I have seen some examples that show creating an Excel export event then using hideColumn to remove the column but that does not seem to work for me. How can I hide a column in the grid export to Excel?

.Events(e => e.ExcelExport("excelExport"))

function excelExport(e) {

e.sender.hideColumn("Received");

}

Grid

answered on 15 Sep 2016

5 answers

605 views

Switching to Server Side binding gets "Object reference not set to an instance of an object."

So, I had the Grid working with Ajax, and that was really awesome as the paging and sorting was very quick. However, we had a problem that larger data sets (30k and more) would have the Grid time out. I believe switching over to a server side binding and grabbing 20 at a time would allow users to get the data. (Please correct me if I'm wrong).

Here's what I had before:

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

.Name("npi-grid")

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("NPI_Read", "Pecos"))

.ServerOperation(false)

.PageSize(20))

.Columns(columns =>

{

columns.Template(x => { }).ClientTemplate("#=GetPecosStatus(PecosNPI) #").Width(50);

columns.Bound(x => x.ProviderFirstName).Title("First Name");

columns.Bound(x => x.ProviderLastName).Title("Last Name");

columns.Bound(x => x.ProviderBusinessLocationAddressCity).Title("City");

columns.Bound(x => x.ProviderBusinessLocationAddressState).Title("State");

columns.Bound(x => x.NPI).Title("NPI");

})

.Scrollable()

.Sortable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

)

And the NPI_Read looked like:

public ActionResult NPI_Read([DataSourceRequest] DataSourceRequest request)

{

if (!String.IsNullOrEmpty(SearchTerm))

{

return Json(oandpService.GetPecosSearchResults(SearchTerm).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

else

{

return null;

}

However, the performance was ABSOLUTELY TERRIBLE! For it to grab 55 records it took almost 10 seconds, whereas if I just populated a simple table it would be almost instantly.

So, I wanted to try server side binding.

The view now looks like:

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

.Name("npi-grid")

.Columns(columns =>

{

columns.Template(x => { }).ClientTemplate("#=GetPecosStatus(PecosNPI) #").Width(50);

columns.Bound(x => x.ProviderFirstName).Title("First Name");

columns.Bound(x => x.ProviderLastName).Title("Last Name");

columns.Bound(x => x.ProviderBusinessLocationAddressCity).Title("City");

columns.Bound(x => x.ProviderBusinessLocationAddressState).Title("State");

columns.Bound(x => x.NPI).Title("NPI");

})

.Scrollable(src => src.Height("auto"))

.Sortable()

.Pageable()

.DataSource(dataSource => dataSource

.Server()

.PageSize(20)

.Total((int)ViewData["total"])

.Read(read => read.Action("NPI_Read", "Pecos")))

)

And the NPI_Read looks like:

public ActionResult NPI_Read([DataSourceRequest] DataSourceRequest request)

{

if (!String.IsNullOrEmpty(SearchTerm))

{

if (request.PageSize == 0)

{

request.PageSize = 20;

}

IQueryable<vNPISearch> searchResults = oandpService.GetPecosSearchResults(SearchTerm);

if (request.Sorts.Any())

{

foreach (SortDescriptor sortDescriptor in request.Sorts)

{

if (sortDescriptor.SortDirection == ListSortDirection.Ascending)

{

switch (sortDescriptor.Member)

{

case "ProviderFirstName":

searchResults = searchResults.OrderBy(x => x.ProviderFirstName);

break;

case "ProviderLastName":

searchResults = searchResults.OrderBy(x => x.ProviderLastName);

break;

case "ProviderBusinessLocationAddressCity":

searchResults = searchResults.OrderBy(x => x.ProviderBusinessLocationAddressCity);

break;

case "ProviderBusinessLocationAddressState":

searchResults = searchResults.OrderBy(x => x.ProviderBusinessLocationAddressState);

break;

case "NPI":

searchResults = searchResults.OrderBy(x => x.NPI);

break;

}

else

{

switch (sortDescriptor.Member)

{

case "ProviderFirstName":

searchResults = searchResults.OrderByDescending(x => x.ProviderFirstName);

break;

case "ProviderLastName":

searchResults = searchResults.OrderByDescending(x => x.ProviderLastName);

break;

case "ProviderBusinessLocationAddressCity":

searchResults = searchResults.OrderByDescending(x => x.ProviderBusinessLocationAddressCity);

break;

case "ProviderBusinessLocationAddressState":

searchResults = searchResults.OrderByDescending(x => x.ProviderBusinessLocationAddressState);

break;

case "NPI":

searchResults = searchResults.OrderByDescending(x => x.NPI);

break;

}

else

{

//EF cannot page unsorted data.

searchResults = searchResults.OrderBy(x => x.ProviderLastName);

}

//Apply paging.

if (request.Page > 0)

{

searchResults = searchResults.Skip((request.Page - 1) * request.PageSize);

}

searchResults = searchResults.Take(request.PageSize);

ViewData["total"] = searchResults.Count();

var result = new DataSourceResult()

{

Data = searchResults,

Total = Convert.ToInt32(ViewData["total"])

};

return Json(result, JsonRequestBehavior.AllowGet);

}

else

{

return Json(Enumerable.Empty<vNPISearch>().AsQueryable());

}

However, when I run the page it immediately returns: Object reference not set to an instance of an object. With Line 21 being highlighted. That line is .DataSource(dataSource => dataSource

So, two questions: