I have a partial view that I am calling by my Index and the Partial view does not have the header inside it, but it still has the footer. I am wondering why this is and how can I remove the footer?
PARTIAL VIEW!!!!!!
#(Html.Kendo().Chart<SQDCDashboard.Core.ViewModels.SafetyChartViewModel>()
.Name("safetyIncident-chart")
.Title("Safety Incidents For ")
.Legend(legend => legend.Position(ChartLegendPosition.Top))
.SeriesDefaults(seriesDefaults => seriesDefaults.Column().Stack(true))
.DataSource(ds => ds.Read(read => read.Action("GetSafetyIncidentChart", "Display").Data("DropDownValue")))
.Series(series =>
{
series.Column(model => model.NumSafeDays).Name("Safe Days").Color("green").CategoryField("Month");
series.Column(model => model.NumIncDays).Name("Incident Days").Color("red").CategoryField("Month");
})
.CategoryAxis(axis => axis.MajorGridLines(lines => lines.Visible(false)))
.ValueAxis(axis => axis.Numeric().Labels(labels => labels.Format("{0}")).Min(0).Max(32))
.Tooltip(tooltip => tooltip.Visible(true).Format("{0}"))
)
return PartialView("YourViewName");
or, If you are returning plain view:
At top of your cshtml:
#{
Layout = null;
}
In controller method:
return View("YourViewName")
Have a look at the view using your partial view. It seems you have code there after including your partial view.
Related
I'm new to Kendo and learning how to integrate it with MVC and display data in a grid.
My controller
[HttpGet]
public ActionResult StudentList([DataSourceRequest]DataSourceRequest request)
{
DataSourceResult result =
_acc.GetStudent(StudId).ToDataSourceResult(request,
model => new StudentModel
{
ID = model.ID,
StudId = model.StudId,
Name= model.Name,
Email= model.FullName,
custEmail = model.Email
});
return Json(result, JsonRequestBehavior.AllowGet);
}
My view
#(Html.Kendo().Grid<Models.StudentModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.StudId);
columns.Bound(c => c.Name);
columns.Bound(c => c.Email);
})
.Pageable()
.Sortable()
.Filterable()
.Scrollable(scr => scr.Height(550))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("StudList", "Student"))
.ServerOperation(false)
)
)
And the out put I am getting in my browser looks like
{"Data":[{"ID":1102,"StudId":4006,"Name":"Adam Lyon","Email":"alyon#regionofwaterloo.ca",",....,
Does anyone has any idea why the data is not formatted in a grid form?
You will get that behavior if you link directly to the EmployeeList action - that should only be called by the grid. If your view name is say Index, you will need another action:
public ActionResult Index()
{
return View();
}
Then in code link to that:
#Html.ActionLink("Employee List", "Index", "Employee")
Now the view will load and the Kendo grid will render and then call your EmployeeList action to populate the grid.
See the Kendo sample controller here. It has an action to load the view with the grid, and then CRUD actions the grid will call via AJAX.
I have an ajax enabled kendo grid with a client template that displays data from the model to which the row is bound.
(because of ajax, using columns.Template seems not possible.)
#(Html.Kendo().Grid<Model>()
.Columns(columns =>
{
columns.Bound(x => x.SubModel).ClientTemplate("bla #= SomePropertyOfSubModel # bla")
})
.DataSource(dataSource => dataSource.Ajax())
This works basically, but I am not satisfied with the result. For ex., I have problems to make kendo controls in the template work. I would rather hang a partial view in the client template, but did not succeed. The farthest I got was
columns.Bound(x => x.SubModel).ClientTemplate(Html.PartialView("view", //??) //how to bind to SubModel?
.ToHtmlString())
Any help is appreciated.
I think you need .ToClientTemplate() in your kendo control template,
view.cshtml
#(Html.Kendo().NumericTextBox()
.Name("NameHere")
.Min(0)
.HtmlAttributes(new { style = "width:200px" })
.ToClientTemplate()
)
And then,
columns.Bound(c => c.SubModel).ClientTemplate(Html.Partial("view").ToHtmlString());
Edit:
If you want to bind a model to the partial view, you could do
columns.Bound(c => c.SubModel.Property).Template(#<text>Html.Partial("view", item.SubModel)</text>);
Here's another way to accomplish this.
#(Html.PageElement().Kendo().Grid<myModel>()
.Name("GridName")
.Columns(col =>
Html.RenderPartial("Partials/_myDamnedPartial", col)
net mvc4 project with Kendo UI iam using a simple ajax grid to print values from the database but it is not showing on the grid my code is
<%: Html.Kendo().Grid<CustomerTest.Models.ProductViewModel>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read
.Action("Printc", "Home") // Set the action method which will return the data in JSON format
// .Data("productsReadData") // Specify the JavaScript function which will return the data
)
)
.Columns(columns =>
{
columns.Bound(product => product.CustomerID);
columns.Bound(product => product.CustomerFName);
columns.Bound(product => product.CustomerLName);
})
.Pageable()
.Sortable()
%>
and my action method is
public ActionResult Printc()
{
// ViewBag.Message = "Welcome to ASP.NET MVC!";
return View(GetCustomers());
}
private static IEnumerable<ProductViewModel> GetCustomers()
{
var northwind = new CustomerLinqDataContext();
var purchCount = northwind.Customer_details.Count();
return northwind.Customer_details.Select(product => new ProductViewModel
{
CustomerID = product.ID,
CustomerFName = product.name,
CustomerLName = product.lname,
CustomerAge = product.age
});
}
please some one help me put what i am doing wrong? i tried to pass my model on the page header
<%# Page Title="" Language="C#" MasterPageFile="~/Areas/aspx/Views/Shared/Web.Master"
Inherits="System.Web.Mvc.ViewPage<IEnumerable<CustomerTest.Models.ProductViewModel>>" %>
It worked fine but i have mutiple grids on my single page and they are coming from different tables so thats why i want to pass each model differently please someone help me in this code thanks
The problem is on your Printc method. You have to return a Json object create for the Kendo Grid :
public ActionResult Index_Printc([DataSourceRequest] DataSourceRequest request)
{
return Json(GetCustomers().ToDataSourceResult(request));
}
On my side, I specify the ID on the Ajax request, I don't know if it's mandatory for a read request, but if the update of the method doesn't work, add this :
<%: Html.Kendo().Grid<CustomerTest.Models.ProductViewModel>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.CustomerID))
.Read(read => read.Action("Printc", "Home")
)
)
.Columns(columns =>
{
columns.Bound(product => product.CustomerID);
columns.Bound(product => product.CustomerFName);
columns.Bound(product => product.CustomerLName);
})
.Pageable()
.Sortable()
%>
Hope it helps !
if you have several grids on the same page make sure that they have unique names and not all of them are called grid.
I have this kendo grid in one of my views:
#model IEnumerable<IJRayka.Core.Utility.ViewModels.OrderDto>
#using IJRayka.Core.Web.Code
#{
ViewBag.Title = "Order List";
}
<h2>Order List</h2>
#{
Html.Kendo().Grid(Model).Name("grid").Columns(columns =>
{
columns.Bound(ord => ord.CustomerName);
columns.Bound(ord => ord.MarketerName);
columns.Bound(ord => ord.OrderDate);
columns.Template(ord => ord.CurrentStatus.GetDisplayName());
columns.Bound(ord => ord.PaymentMethod);
columns.Bound(ord => ord.Description);
columns.Command(cmd => cmd.Edit().Text("ویرایش"));
columns.Command(cmd => cmd.Select().Text("مشاهده"));
columns.Command(cmd => cmd.Destroy().Text("حذف"));
}).DataSource(ds => ds.Server()
.Model(m => m.Id(ord => ord.ID))
.Create(create => create.Action("Create", "OrderManagement"))
.Read(read => read.Action("Details", "OrderManagement"))
.Update(update => update.Action("Edit", "OrderManagement"))
.Destroy(destroy => destroy.Action("Delete", "OrderManagement"))
).Pageable().Sortable()
.ToolBar(toolbar => toolbar.Create().Text("ایجاد سفارش"))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single)));
}
When I debug, I see there is 4 items in the Model collection, but I don't know why without any errors, the grid won't show up at all. Not a single HTML tag is generated on client side, and there's no errors shown in the firebug console.
It was working great before, but all of a sudden, after some changes to my model I don't know what happened to it.
EDIT:
I just realized if I write this all lines, in one single line it works !
But I don't understand why?
When you are using the construct #{ .. } then you are in a code block in razor. And inside in a code block nothing gets written to the response by default.
You need to use # to output something to the output or you need to use some special methods like Render() on the Grid.
So the following invocations are all working:
Using Render on any Kendo Widget:
#{
Html.Kendo().Grid(Model).Name("grid").Columns(columns =>
{
//...
})
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single)))
.Render(); //Render method provided by Kendo UI.
}
Using #:
#{
#(Html.Kendo().Grid(Model).Name("grid").Columns(columns =>
{
//...
})
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))))
}
Or if you anyway have this one statement in the code block don't use the code block at all just write:
#(Html.Kendo().Grid(Model).Name("grid").Columns(columns =>
{
//...
})
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))))
Note: if youe have a multiline statement after the # you need to wrap the whole statement with an extra set of parens (())
I have a telerik grid with a dynamic data source (the grid may use up to roughly 10 totally different models for its data), so I have to build the columns dynamically as well (obviously). One of the columns in the grid (with certain models) is a double representing a time span in milliseconds. What I want to do is format this double to look like a timespan.The telerik code looks like this:
<% Html.Telerik()
.Grid(Model.DynamicGridDataSource)
.Name("statisticalGrid")
.Columns(a => GridHelper.GenerateColumns(a, Model.SelectedReport))
.DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectGrid", "Reports", new { reportId = Model.ReportId, dateFrom = Model.DateFrom, dateTo = Model.DateTo, date = Model.Date, AvailablePlans = Model.AvailablePlans }))
.Sortable(GridSortSettingsBuilder => GridHelper.SortColumns(GridSortSettingsBuilder,
Model.DynamicGridDataSource.GetType(),
Model.SelectedReport))
.Filterable()
.Pageable(page => page.PageSize(25))
.Reorderable(reorder => reorder.Columns(true))
.Groupable
(
groupingSettingsBuilder => GridHelper.GroupColumns(groupingSettingsBuilder,
Model.DynamicGridDataSource.GetType(),
Model.SelectedReport)
)
.ClientEvents(events => events
.OnColumnReorder("onReorder"))
.Render();
and GridHelper.GenerateColumns looks something like this:
public static void GenerateColumns(GridColumnFactory<dynamic> columnFactory, Company.Product.Data.Entity.Report reportStructure)
{
foreach (var columnLayout in reportStructure.ReportCols.OrderBy(o => o.ColumnSequence))
{
var columnBuilder = columnFactory.Bound(columnLayout.ColumnType);
if (columnLayout.ColumnType.Equals("SessionLength") ||
columnLayout.ColumnType.Equals("AverageTime") ||
columnLayout.ColumnType.Equals("TotalTime") ||
columnLayout.ColumnType.Equals("CallTime"))
{
// disable grouping
columnBuilder.Groupable(false);
string dataBindProperty = columnLayout.ColumnType;
if (columnLayout.DataFormat == "{0:T}")
{
//Even though the format looks like time ({0:T}), its actually a double which needs to be formatted here to look like a TimeSpan
}
}
if (!string.IsNullOrEmpty(columnLayout.Label))
{
columnBuilder.Title(columnLayout.Label);
}
if (columnLayout.DataFormat != null && columnLayout.DataFormat == "{0:P}")
{
columnBuilder.Format("{0:P}");
}
if (columnLayout.SumIndicator)
{
if (columnLayout.DataFormat == "{0:T}")
{
AddAggregateToColumnTimeSpan(columnBuilder, Aggregate.Sum);
}
else
{
AddAggregateToColumn(columnBuilder, Aggregate.Sum);
}
}
if (columnLayout.HideIndicator)
{
columnBuilder.Column.Hidden = true;
}
}
}
I was able to format the footer correctly, but I didn't know how to format the rest of the column, since out of the context of the telerik code I don't have access to the item iterator or anything. Any suggestions/ideas? Maybe columnFactory.Bound(columnType).Format(/*something*/)?
You said, "the grid may use up to roughly 10 totally different models for its data", so perhaps instead of trying to represent all those models in one grid, you have one grid for each model. You could put each grid in it's own partial view with the main view using some mechanism for deciding which partial view to load. Here is a simple example.
Controller
public ActionResult DynamicReport
{
//Get your Model
Model.model1 = model_01 = Model.DynamicGridDataSource.GetDynamicModel()
//Get the name of what model is being returned so view knows which
//partial view to load
ViewBag.Message = model_01.Name
...
return View(model_01)
}
In the view have some conditional logic to chose which partial view to load.
View
<h2>View</h2>
#{
string pView = "~/Views/Grid/Partial_01.cshtml";
switch(ViewBag.Message)
{
case "p02":
pView = "~/Views/Grid/Parital_02.cshtml"
break;
.....
}
}
#Html.Partial(pView)
PartialView_01
#model List<Models.Misc>
#(Html.Telerik().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(a => a.Id).Width(120);
columns.Bound(a => a.Name).Width(100);
columns.Bound(a => a.Value).Format("{0:#,##0.00}").Width(100).Title("Price");
})
)
PartialView_02
#model List<Models.Temp>
#(Html.Telerik().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.Name)
.Aggregate(aggregates => aggregates.Count())
.FooterTemplate(#<text>Total Count: #item.Count</text>)
.GroupFooterTemplate(#<text>Count: #item.Count</text>);
columns.Bound(o => o.Start)
.Template(#<text>#item.Start.ToShortDateString()</text>)
.Aggregate(aggreages => aggreages.Max())
.FooterTemplate(#<text>Max: #item.Max.Format("{0:d}")</text>)
.GroupHeaderTemplate(#<text>Max: #item.Max.Format("{0:d}")</text>)
.GroupFooterTemplate(#<text>Max: #item.Max.Format("{0:d}")</text>);
columns.Bound(o => o.Value)
.Width(200)
.Aggregate(aggregates => aggregates.Average())
.FooterTemplate(#<text>Average: #item.Average</text>)
.GroupFooterTemplate(#<text>Average: #item.Average</text>);
columns.Bound(o => o.tsMilliseconds)
.Width(100)
.Aggregate(aggregates => aggregates.Sum())
.Template(#<text>#TimeSpan.FromMilliseconds(#item.tsMilliseconds)</text>)
.Title("TimeSpan")
.FooterTemplate(
#<text>
<div>Sum: #TimeSpan.FromMilliseconds(#Convert.ToDouble(#item.Sum.Value.ToString())) </div>
</text>)
//header if you group by TimeSpan
.GroupHeaderTemplate(#<text>#item.Title: #item.Key (Sum: #TimeSpan.FromMilliseconds(#Convert.ToDouble(#item.Sum.Value.ToString())))</text>)
//footer for grouping
.GroupFooterTemplate(#<text>Sum: #TimeSpan.FromMilliseconds(#Convert.ToDouble(#item.Sum.Value.ToString()))</text>);
})
.Sortable()
.Groupable(settings => settings.Groups(groups => groups.Add(o => o.Start)))
)
And so on, for each different model. With each model having its own partial view you can easily format each grid to fit its model while still having only one main view.