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.
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
>
</
div
>
</
ItemTemplate
>
</
telerik:RadListView
>
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"))
e.sender.hideColumn("Received");
}
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:
Hi,
I am not able to add the zoom property to my already existing Kendo Chart using HTML.
Its not accepting the zoom attribute and I am using kendo version v2015.1.408. Kindly Help me with the solution
Please find the code as below:
<td>
<%= Html.Kendo().Chart<prt.web.models.qualityovertimeviewmodel>()
.Name("BarGraphCold")
.Series(series => { series.Column(model => model.ColdGerm).Color("#1CAAD9"); })
.CategoryAxis(axis => axis .Categories(model => model.Label )
.MajorGridLines(lines => lines.Visible(false)) .Line(line => line.Visible(true))
.Labels(labels => labels.Rotation(-30)) ) .ValueAxis(axis => axis.Numeric() .MajorGridLines(lines => lines.Visible(false)) .Max(100) .Min(0) )
.Legend(legend => legend .Position(ChartLegendPosition.Bottom))
.Tooltip(true) .DataSource(dataSource => dataSource .Read(read => read.Action("GetBarChartData", "Visualize")) ) %>
</prt.web.models.qualityovertimeviewmodel></td>
I searched and can't find anything on this. I tried to deploy my 1st ASP.NET MVC website using Telerik controls. The Telerik controls don't load. So I must have left out a step. I'm hoping you can tell me what I left out.
I copied the contents from my Visual Studio project to the web server. The Kendo javascript files are on the webserver. The kendo dll's are in the bin folder on the web server.
When I run a view - the Kendo controls are missing. For example, a dropdown list will look like a textbox and have a value in it. Instead of being a Kendo dropdown list. And the Kendo menu doesn't work either. I can see the menu, but clicking on the down arrow to see the menu options doesn't do anything.
Do you know what I need to do? Thanks.
What is the correct way to have a column in a Telerik MVC Razor page that contains a link for a person to click and view an image in another window?
The images will be on a network directory share.
Each row image location is passed in the data view model.
Something like <a href = "file://///ccijisdevbt01m\d$\pictures\Graffiti_London.jpg" target="_blank"> Link to image </a>