I have two grid views that performs pop up custom template editing, grid two is placed under tabstrip, please refer to following code:
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Animation(animation =>
animation.Open(effect =>
effect.Fade(FadeDirection.In)))
.Items(tabstrip =>
{
tabstrip.Add().Text("Details")
.Selected(true)
.LoadContentFrom(@Url.Action("Index", "AppGroup", new { AppID = ViewBag.AppID, AppName = ViewBag.AppName }).ToString());
})
)
If i change LoadContentFrom to Content, all functions working fine. However, i need to use LoadContentFrom due to heavy content load. once i change it back to LoadContentFrom, when i try to edit grid one, the following error is thrown.
VM37552:50 Uncaught TypeError: Cannot read property 'editRow' of undefined
I have investigated further and found out it is becaues of #grid.data("kendoGrid") is undefined and hence it breaks $("#Group").data("kendoGrid").editRow($(this)).
Thanks.
Hi
I'm very new to ASP.NET MVC and need some advice!
I have built a small Telerik UI for ASP.NET MVC project using the project type: Telerik C# ASP.NET MVC Application project in Visual Studio 2010.
My aim is to build an app with the Scheduler widget and I need to see how this renders on mobile devices. I am able to see the project running in a browser on the development machine through the debug option in visual studio. However I need to test it on other devices.
Can any one please point me to documentation/ tutorials on how I can deploy the application to a server?
Thanks
Nik
I have a kendo grid where user can select list of columns from grid and save the selection by giving name (i.e view name). Each saved selection (view name) will show up as drop-down above grid so that user can change grid columns whenever they want. In current implementation, whenever user selects view name from one drop-down value to other, im calling action method to select that view name as current view name. Then page reloads to invoke Index' action method to retrieve current view names columns values. I am using visible attribute in grid to show and hide columns in grid.
Now i was wondering if i can update the grid columns without reloading the page when user change the view name from the dropdown. I know kendo has ColumnMenu which helps to choose and hide columns without reloading the page, however i couldn't figure out a way to save/reload user selection done in Columns section.
It would be nice if the user could hide/show columns using 'ColumnMenu' and also be able to save the state in view name and show the view name in the dropdown. I saw this example http://demos.telerik.com/kendo-ui/grid/persist-state to persist the state of the grid however as there is limitation with not being able to save toolbar information, i couldn't use this solution.
Any suggestion how i can resolve this issue?
ViewModel:
namespace
MvcApplicatioin.Models
{
public
class
EmployeeViewModel
{
public
EmployeeColumns EmployeeColumns {
get
;
set
; }
public
IEnumerable<SelectListItem> EmployeeViewNames {
get
;
set
; }
public
long
EmployeeSelectedViewId {
get
;
set
; }
}
public
class
EmployeeResponse
{
public
int
Id {
get
;
set
; }
public
string
FirstName {
get
;
set
; }
public
string
LastName {
get
;
set
; }
}
public
class
EmployeeColumns
{
public
bool
Id {
get
;
set
; }
public
bool
FirstName {
get
;
set
; }
public
bool
LastName {
get
;
set
; }
}
}
Controller:
public
class
EmployeeController : Controller
{
// GET: Employee
public
ActionResult Index()
{
var service =
new
EmployeeService();
EmployeeViewModel model =
new
EmployeeViewModel();
long
currentViewId;
//setup views and column preferences
EmployeeColumns employeeColumns = service.GetCurrentEmployeeColumnsPreferences();
model.EmployeeColumns = employeeColumns;
model.EmployeeViewNames = service.GetAllEmployeeViewNames(
out
currentViewId);
model.EmployeeSelectedViewId = currentViewId;
return
View(model);
}
}
View:
@using Kendo.Mvc.UI
@{
ViewBag.Title = "Employee Info:";
}
<
h3
style
=
"margin-bottom: 10px;"
>Employee Info</
h3
>
<
input
id
=
"btnSearch"
type
=
"button"
value
=
"Search"
class
=
"btn_Search"
/>
<
div
class
=
"row"
>
<
div
class
=
"col-sm-12"
>
@(Html.Kendo().Grid<
MvcApplicatioin.Models.EmployeeResponse
>()
.Name("GridEmployee")
.Columns(columns =>
{
columns.Bound(e => e.Id).Width("170px").Visible(Model.EmployeeColumns.Id);
columns.Bound(e => e.FirstName).Width("190px").Visible(Model.EmployeeColumns.FirstName);
columns.Bound(e => e.LastName).Width("170px").Visible(Model.EmployeeColumns.LastName);
})
.ToolBar(tools =>
{
tools.Template(@<
text
>
<
div
class
=
"col-lg-4 col-md-5 col-sm-5 col-xs-7 pull-right"
style
=
"padding-right: 0;"
>
<
div
class
=
"form-group"
style
=
"margin-bottom: 0;"
>
@Html.Label("Grid View:", new { @class = "col-sm-3 col-xs-4 control-label view" })
<
div
class
=
"col-sm-7 col-xs-6"
style
=
"padding-left: 0;"
>
@Html.DropDownList("lstEmployeeViewNames", new SelectList(Model.EmployeeViewNames, "Value", "Text", Model.EmployeeSelectedViewId), "- Select View Name -", new { @class = "form-control", @style = "height: auto;" })
</
div
>
</
div
>
</
div
>
</
text
>);
})
.Pageable(x => x.PageSizes(new int[] { 10, 20, 50, 100 }).ButtonCount(4))
.AutoBind(false)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.ServerOperation(false)
.Read(read => read.Action("SearchEmployee", "Employee")))
)
</
div
>
</
div
>
<!--//row-->
<
script
type
=
"text/javascript"
>
$('#btnSearch').click(function (e) {
e.preventDefault(); //This prevent the submit button onclick from submitting by itself
$('#GridEmployee').data('kendoGrid').dataSource.read();
});
//Change event for Dropdown placed inside the Grid's Toolbar - To Change the view
$("#lstEmployeeViewNames").change(function (e) {
var selectedViewId = $('select#lstEmployeeViewNames option:selected').val();
if (selectedViewId == null || selectedViewId == '') {
alert("Please select the view name from the dropdown first !!");
return;
}
$.post("/Employee/SetEmployeeColumnsCurrentPreferences", { viewId: selectedViewId }, function (data) {
window.top.location.reload();
});
});
</
script
>
I have 2 grids that work correcly, but one of the parameters used to get the data of the child grid is a date with a format that varies when using different web browsers.
When the controller action recieves the date, the string has different values according to the browser used. For example:
-IE: "Mon Oct 17 00:00:00 UTC-0300 2016"
-Chrome: "Mon Oct 17 2016 00:00:00 GMT-0300 (Hora estándar de Argentina)"
-Firefox: "Mon Oct 17 2016 00:00:00 GMT-0300"
I'd like to know if I can format the date before sending it to the controller.
This are my grids:
PARENT GRID:
@(Html.Kendo().Grid(Model)
.Name("ParentGrid")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "controller")
.Data("ParameterFunction"))
.PageSize(30)
)
.Columns(columns =>
{
columns.Bound(foo => foo.fecha_venc).Title(Global.Fecha).Format("{0:dd/MM/yyyy}"); //This is the date I need formatted
columns.Bound(foo => foo.espe_codigo).Title(Global.Especie);
columns.Bound(foo => foo.clas_codigo).Title(Global.Clase);
})
.ClientDetailTemplateId("template")
)
CHILD GRID:
@(Html.Kendo().Grid<SGMTrade.DAL.ViewModels.OperacionesOCTPorFecha>()
.Name("ChildGrid")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("childGrid_Read", "controller", new { fecha = "#=fecha_venc#", especie = "#=espe_codigo#", cliente = @ViewBag.cliente, clase = "#=clas_codigo#" }))
)
.Columns(columns =>
{
columns.Bound(o => o.oper_numero).Title(Global.NumeroOperacion)
.ClientTemplate("<a href='\\\\\\#' onclick=\"showDetails('\\#=oper_numero\\#')\">\\#=oper_numero\\#</a>");
columns.Bound(o => o.oper_forigen).Title(Global.FechaOrigen).Format("{0:dd/MM/yyyy}");
columns.Bound(o => o.espe_codigo).Title(Global.Especie);
columns.Bound(o => o.clas_codigo).Title(Global.Clase);
})
.ToClientTemplate()
)
CONTROLLER ACTION:
public ActionResult childGrid_Read([DataSourceRequest]DataSourceRequest request, string fecha, string especie, string cliente, string clase)
{
//the string fecha comes with the wrong formatting, and I need it to come as dd/MM/yyyy
}
Thank you very much
Hi all,
In this simplified case my datased is filled with 2 records.
Date: 01-01-2015
Value: 10
and
Date: 01-01-2016
Value:10
I want to see only those 2 days on the X asxis with a "dd-MM-yyyy" format.
When I do the following:
axis.Date().BaseUnit(ChartAxisBaseUnit.Days).Labels(labels => labels.DateFormats(formats => formats.Days("dd-MM-yyyy")
I see 365 squeezed labels
How can configure the category axis to only show the dates which are are in the dataset?
Hi,
We currently have the old HTML.Telerik().Grid() that binds entire resultset at once. We have to change this to bind records page by page.
Do you have a sample demo that does the custom binding? Like on next / previous arrow it has to call the db and get the results.
What are the properties and methods to use?
Thanks!
There's something strange going on with a hierarchical grid: the parent grid displays the data correctly, but when trying to display the data of the child grids, they only display everything when opening them from the last row to the first one.
These are my grids:
PARENT GRID:
@(Html.Kendo().Grid(Model)
.Name("ParentGrid")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "controller")
.Data("ParameterFunction"))
.PageSize(30)
)
.Columns(columns =>
{
columns.Bound(foo => foo.fecha_venc).Title(Global.Fecha).Format("{0:dd/MM/yyyy}"); //This is the date I need formatted
columns.Bound(foo => foo.espe_codigo).Title(Global.Especie);
columns.Bound(foo => foo.clas_codigo).Title(Global.Clase);
})
.ClientDetailTemplateId("template")
)
CHILD GRID:
@(Html.Kendo().Grid<SGMTrade.DAL.ViewModels.OperacionesOCTPorFecha>()
.Name("ChildGrid")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("childGrid_Read", "controller", new { fecha = "#=fecha_venc#", especie = "#=espe_codigo#", cliente = @ViewBag.cliente, clase = "#=clas_codigo#" }))
)
.Columns(columns =>
{
columns.Bound(o => o.oper_numero).Title(Global.NumeroOperacion)
.ClientTemplate("<a href='\\\\\\#' onclick=\"showDetails('\\#=oper_numero\\#')\">\\#=oper_numero\\#</a>");
columns.Bound(o => o.oper_forigen).Title(Global.FechaOrigen).Format("{0:dd/MM/yyyy}");
columns.Bound(o => o.espe_codigo).Title(Global.Especie);
columns.Bound(o => o.clas_codigo).Title(Global.Clase);
})
.ToClientTemplate()
)
As it can be seen in the first attachment, if I display the second child grid first and then the first grid, I'm able to display every data, but if I go for the first child grid, the data from the second child grid is not displayed.
I analysed the code and I get the data from the stored procedure just fine, but I can't see it in the view.
Thank you very much.
Hi!
I made an editor template since I couldn't get the labels of the automatic editor to show up properly (they always show in lowercase, can't they pick up the DisplayName data annotation of the model?).
The issue is that it seems the model object isn't getting into the editor. For example:
If I edit a connector with the default automatic editor, I get a nice list for the "from/to" fields, with all the nodes in the diagram, which works perfectly. Now, if I want to replicate the same behaviour for my custom editor but I can't get them to show.
How can I set up my editor template so it picks up the shapes in the diagram?
i'm trying to start kendo.ui on my project. But when add Kendo.Mvc reference the project doesn't start and i receive this error:
The requested service '******' has not been registered. To avoid this exception, either register a component to provide the service, check for service registration using IsRegistered(), or use the ResolveOptional() method to resolve an optional dependency.
When I remove Kendo reference the project start.
Could you help me ?
Thanks a lot for your help.
I'm surprised I haven't seen this mentioned elsewhere (so I may be doing something very wrong...)
Whenever I'm in vs2013/15 and editing a Kendo MVC Grid - any edit in the body of the HTML helper moves indentation of the body of the helper to the right by one tab as soon as I step out (I move the caret to some other text in the grid, or outside it).
The end result is all my grid helpers tend to be shifted massively off to the right in the editor and I have to periodically 'shift tab' them back on to the screen.
Is this expected behaviour or have I got some settings wrong?
Thanks