Remove hyperlink from Kendo UI MVC Grid export - kendo-ui

Does anyone know of a way to remove hyperlinks in the file generated from Kendo UI grid export to PDF and Excel functionality?
I have customised the export a fair amount and removed the pager bar etc, using CSS.
However I cannot work out how to stop the column headers from being hyperlinks.
I have tried setting the
pointer-events: none;
cursor: default;
but that didn't help and I am trying to avoid using javascript to remove it where possible.
UPDATE
Please see below an edited version of my grid code.
#(Html.Kendo().Grid<MvcProject.Domain.DTO.Reports.AccidentSummary>()
.Name("resultsGrid")
.Columns(columns =>
{
columns.Group(group => group
.Title("Accident Summary Report : Date run - " + DateTime.Now.ToShortDateString() )
.Columns(header => {
header.Bound(c => c.DocCount)
.HtmlAttributes(new { style = "text-align: center;" })
.Title(" ")
.ClientTemplate("<div><i rel='tooltip' title='Documents Attached' #= DocCount > 0 ? classHasFile : '' #></i></div>")
.Width(35).Filterable(false).Sortable(false).Groupable(false).IncludeInMenu(false);
header.Bound(c => c.RegionName)
.Title("Region")
.Width(100);
header.Bound(c => c.AreaName)
.Title("Area")
.Width(200);
header.Bound(c => c.Date_of_Accident)
.Title("Date")
.Width(120)
.Format("{0:dd/MM/yyyy}");
header.Bound(c => c.Days_Lost)
.Title("Days Lost")
.HtmlAttributes(new { style = "text-align: center;" })
.Width(120);
header.Bound(c => c.TypeOfAccidentName)
.Title("Nature ")
.Width(150);
header.Bound(c => c.Location_of_Accident)
.Title("Location Of Accident")
.Width(150).Hidden(true);
header.Bound(c => c.Comments)
.Title("Comments")
.Width(250).Hidden(true);
})
);
})
.HtmlAttributes(new { style = "height: 900px;" })
.Pageable(p => p
.ButtonCount(5)
.PageSizes(true)
.Refresh(true)
)
.Scrollable(s => s.Height("auto"))
.Sortable()
.Filterable()
.Groupable()
.ColumnMenu()
.Resizable(r => r
.Columns(true)
)
.Excel(excel => excel
.FileName("Accident Summary.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("_GridExportSave", "Reports"))
.AllPages(true)
)
.DataSource(d => d
.Ajax()
.Read(read => read.Action("_AccidentSummaryResults_Read", "Reports").Data("Genesis.Reports.HandS.Search.getPaginationData"))
.ServerOperation(true)
.PageSize(20)
)
.ToolBar(tools =>
{
tools.Pdf();
tools.Excel();
})
//PDF removed for now until it is patched
.Pdf(pdf => pdf
.AllPages()
.FileName("AccidentSummary.pdf")
.ProxyURL(Url.Action("_GridExportSave", "Reports"))
)
.Events(events => events.DataBound("Genesis.Reports.HandS.Search.loadTT"))
)

Try
<style>
.k-pdf-export .k-grid-toolbar,
.k-pdf-export .k-pager-wrap
{
display: none;
}
</style>
or
<style>
.k-grid-toolbar,
.k-grid-pager > .k-link
{
display: none;
}
</style>

Use pdf.avoidLinks(true) to skip the actual hyperlinks.
pdf.avoidLinks indicates whether to produce actual hyperlinks in the exported PDF file.
pdf.avoidLinks default value is false.
.Pdf(pdf => pdf
.AllPages()
.FileName("AccidentSummary.pdf")
.avoidLinks(true)
.ProxyURL(Url.Action("_GridExportSave", "Reports"))
)
Note: Available in versions 2015.3.1020 and later
For reference

With following you can easily hide excel export button from MVC Kendo Grid
$(".k-grid-excel").hide();

Related

kendo grid rows are rendered with default style

My grid is
#(Html.Kendo().Grid<student.Models.SearchViewModel>()
.Name("Grid").HtmlAttributes(new { #class = "studentGrid" })
.Columns(
x =>
{
x.Bound(y => y.Id).Hidden(true);
x.Bound(y => y.Id).ClientTemplate(#"<input type='checkbox' name='checkedRecords' value='#= Id #' class='mainCheckbox' onclick='checkboxClicked(this, ""checkAllMain"")'/>")
.Title("")
.HeaderTemplate(#"<input type='checkbox' name='checkAllMain' onclick='selectAll(this, ""mainCheckbox"");' />")
.HeaderHtmlAttributes(new { style = "text-align:center" })
.Filterable(false)
.Sortable(false)
.HtmlAttributes(new { #class = "checboxClass", style = "text-align:center" });
x.Bound(y => y.abc1).Hidden(false);
x.Bound(y => y.abc2).Hidden(false);
x.Bound(y => y.abc3).Hidden(false);
}
)
.ToolBar(tb =>
{
tb.Custom()
.Text("Export To Excel")
.HtmlAttributes(new { id = "export" })
.Url(Url.Action("Export", Html.CurrentControllerName()));
tb.Custom()
.Text("Expand Selected Rows")
.HtmlAttributes(new { id = "expandSelectedRows" });
})
.Groupable()
.Reorderable(x => x.Columns(true))
.Pageable(x => x.PageSizes(new int[] { 20, 50, 100 }).Input(true).Numeric(true))
.Scrollable(x => x.Enabled(true).Height(Model.Height))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.Sortable()
.Selectable()
.Navigatable()
.Filterable()
.ClientDetailTemplateId("subTemplate")
.AutoBind(!Model.NoAutoload)
.Events(ev => { ev.DataBound("DataBoundSearch"); })
.DataSource(dataSource => dataSource
.Ajax().PageSize(100)
.ServerOperation(false) // Paging, sorting, filtering and grouping will be done client-side
.Model(model => model.Id(c => c.Id))
.Events(events => events.Error("error").RequestStart("RequestStart").RequestEnd("RequestEnd").Change("Changed"))
.Read(x => x.Action("GetData", Html.CurrentControllerName()).Data("ABCPostData")))
)
with kendo grid when we select a row that row is highlighted with brown color by default.Am not able to get the default color when row is clicked. On the client side it rendered as
<tr class="k-master-row k-state-selected" data-uid="122bb914-87c2-4f0c-9351-52c1d9b84ae5" style="background-color: rgb(255, 255, 255);">
how it is set to background-color: rgb(255, 255, 255); ? how can i override this to brown like background-color: #f0713a, border-color: #f0713a?
There are a couple of ways to do this. The easiest way is through CSS
Modifying style for selected row
#grid tr.k-state-selected td {
background-color: #f0713a;
border-color: #f0713a
}
Modifying style for selected cell
#grid td.k-state-selected {
background-color: #f0713a;
border-color: #f0713a
}
and in your grid declaration ensure this is set:
selectable: "cell"
Here is a demo for single cell.
Another way is to override kendo styles with their themebuilder. But this is extremely bulky.
If you want to do it programatically, this is possible too by getting the selected element in the change event of the grid, and then setting the element's background in code. I will try to do this if you need this option, but the way I see it, leave UI stuff to css, and leave coding to javascript.

Kendo Heirarchical Grid Alignment Issue

I have implemented two Kendo Grids, first one is the parent Grid and other is the child Grid.
When I open the Child Grid to view the values for each parent element in the Parent Grid,
the column alignment of both the Grids are mismatched.
Any help on how to solve this ?
Here is the general code :-
// This is the Parent Grid
#(Html.Kendo().Grid<XYZ.Models.ViewModels.ABCMODEL>()
.Name("ParentGrid")
.Columns(columns =>
{
columns.Bound(e => e.A).Title("ABC").Width(30);
columns.Bound(e => e.B).Title("EFG").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
columns.Bound(e => e.C).Title("IJK").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
columns.Bound(e => e.D).Title("MNO").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
columns.Bound(e => e.E).Title("XYZ.").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
})
//.Scrollable()
.DetailTemplateId("template")
.HtmlAttributes(new { style = "height:100%; background-color: #fcfedf;" })
.HtmlAttributes(new { #class = "tableMain" })
.DataSource(dataSource => dataSource
.Ajax()
// .PageSize(6)
.Read(read => read.Action("HierarchyBinding_ABC", "Profit"))
)
.Events(events => events.DataBound("dataBound"))
//.ColumnMenu()
// .Scrollable()
//.Sortable()
//.Pageable()
)
//This is the Child Grid
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<ABC.Models.ViewModels.ABCMODEL>()
.Name("grid_#=CId#")
.Columns(columns =>
{
columns.Bound(e => e.a).Title("123").Width(30);
columns.Bound(e => e.b).Title("456").Format("{0:N3}").Width(30);
columns.Bound(e => e.c).Title("789").Format("{0:N3}").Width(30);
columns.Bound(e => e.d).Title("101").Format("{0:N3}").Width(30);
columns.Bound(e => e.e).Title("112").Format("{0:N3}").Width(30);
})
.DataSource(dataSource => dataSource
.Ajax()
// .PageSize(5)
.Read(read => read.Action("HierarchyBinding_XYZ", "Profit", new { CId = "#=CId#" }))
)
.ToTemplate()
)
</script>
<script>
function dataBound() {
var grid = this;
$(".k-hierarchy-cell").css({ width: 8 });
$(".k-hierarchy-col").css({ width: 8 });
}
</script>
<style>
.k-grid tbody .k-grid .k-grid-header
{
display: none;
}
#ParentGrid .k-grid-header .k-header
{
background-color: #d42e12;
color:White;
font-size:small;
font-style:normal;
border:1px; border-color:Black; border-style:solid; text-align:center;
white-space:nowrap;
}
.k-grid tbody
{
background-color: #fcfedf;
height:100%;
font-size:x-small;
border:none;
border-color: #fcfedf;
white-space:nowrap;
}
#ParentGrid .k-grid td
{
border:none
padding-right: 0em !important;
}
</style>
Hope now the question becomes more clear.
Looking forward to a useful answer.
Had to get a little fancy with some css, but here is a sample of where I had to accomplish this.
http://jsbin.com/uritAno/2/edit
I think the main thing was to override the right padding and border on the grid td's, and set each column to a fixed width, save for one.
.k-grid td
{
border: none;
padding-right: 0em !important;
}
Thanks a lot for your answers and comments.
They helped me a lot in reaching to an answer to my question.
So here is the final solution :
// This is the Parent Grid (No need to do any changes in Parent Grid,it remains as it is
with width attribute in every column)
//This is the Child Grid (All changes are to be done in "Child Grid")
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<ABC.Models.ViewModels.ABCMODEL>()
.Name("grid_#=CId#")
.Columns(columns =>
{
columns.Bound(e => e.a).Title("123");
columns.Bound(e => e.b).Title("456").Format("{0:N3}").Width(149);
columns.Bound(e => e.c).Title("789").Format("{0:N3}").Width(150);
columns.Bound(e => e.d).Title("101").Format("{0:N3}").Width(137);
columns.Bound(e => e.e).Title("112").Format("{0:N3}").Width(127);
})
.DataSource(dataSource => dataSource
.Ajax()
// .PageSize(5)
.Read(read => read.Action("HierarchyBinding_XYZ", "Profit", new { CId = "#=CId#" }))
)
.ToTemplate()
)
You have to remove the width from the "first column in the child grid i.e. column "a"" and start setting the width from the last column.
Give a width to the last column of child grid such that it gets aligned with the last column of "parent grid" i.e.
Align column "e of child grid" with "E of parent grid" by giving "e" a suitable value.
Once "e" is aligned,it will be fixed,now in the similar way align column "d,b,c" and you will find column "a" aligned with "A in parent grid".
In this way both the grids get aligned.
The values in the width attribute were specific to my screen so i used them.These are not standard values.Try and align the child grid according to your screen,the values might be different.
Hope it helps,thanks a lot and have a great New Year ahead.
I had the same issue with Kendo UI Javascript Grid and inspired by Robin Giltner answer, I resolve by:
1) Using same the width on paired columns which have to be aligned on the right. (Starting from the right)
2) Leaving free width on dynamic width columns. (Starting from the left)
3) Overriding .k-detail-cell class as follows:
.k-detail-cell
{
padding-right: 0em !important;
}
Applying padding-right: 0em !important; to .k-detail-cell we align only the details grid to the right; while applying padding-right: 0em !important; to .k-grid td we align to the right, all the columns of both grids and their content.
(Not nice, because even header and footer are aligned to the right)
Note: Kendo UI version 2014.2.716

changing Datasource of Kendoui Multiselect at runtime

I would like to bind data to a kendoui multiselect at runtime.
for example suppose that I want to bind it as a cascade of a drobdownlist.
any idea?
<p>
<label for="categories">Catergories:</label>
#(Html.Kendo().DropDownList()
.Name("categories")
.HtmlAttributes(new { style = "width:300px" })
.OptionLabel("Select category...")
.DataTextField("CategoryName")
.DataValueField("CategoryId")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCascadeCategories", "CoreParam");
});
})
.Events(e =>e.Select("select"))
)
</p>
<p>
<label for="parameters">Parameters:</label>
#(Html.Kendo().MultiSelect()
.Name("parameters")
.HtmlAttributes(new { style = "width:400px" })
.DataTextField("ParamDesc")
.DataValueField("ParamCode")
.Placeholder("Select products...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCascadeParams", "CoreParam")
.Data("filterParams");
})
.ServerFiltering(true);
})
.AutoBind(false)
)
</p>
<script type="text/javascript">
function filterParams() {
return {
categories: $("#categories").val()
};
}
function select(e) {
var dropdownlist = $("#categories").data("kendoDropDownList");
dropdownlist.select(e.item.index());
var multiselect = $("#parameters").data("kendoMultiSelect");
multiselect.dataSource.read();
};
</script>
You could create a custom MVVM binder which will get the text of the dropdownlist and will set a property of the ViewModel. This property can be bound to the hidden field. Check out the link below for more information.

How to use Kendo Grid Ajax Read event on demand

I have page with DropDownList and Telerik's Kendo UI Grid Control. When first time page is opened DropDownList has no item selected in it. When user selects value in DropDownList only then Grid should make Ajax call to the server and load corresponding data.
My code works fine when user selects item in DropDownList, but the problem is that first time when page is opened I there is no value in DropDownList and Grid should not make a call to the server.
My question is how can I prevent grid not to make a call to the server if there is no item selected in DropDowList?
<div>
#Html.Kendo().DropDownList().Name("broker").DataTextField("GrandParentName").DataValueField("Id").BindTo(Model).SelectedIndex(#selectedIndex).Events(e => e.Change("brokerChanged"))
</div>
#(Html.Kendo().Grid<OrderViewModel>()
.Name("Orders")
.HtmlAttributes(new {style = "height: 500"})
.Columns(c =>
{
c.Bound(p => p.Id)
.Width(50)
.Title("")
.Sortable(false)
.IncludeInMenu(false)
.ClientTemplate((#Html.ActionLink("Edit", "Index", "Splits", new {Id = "OrderId"}, null).ToHtmlString().Replace("OrderId", "#=Id#")));
c.Bound(p => p.TradeDate)
.Title("Trd Dt")
.Format("{0:d}")
.Width(90)
.HtmlAttributes(new {style = "text-align: right"});
c.Bound(p => p.Price)
.Title("Price")
.Format("{0:n}")
.Width(100)
.HtmlAttributes(new {style = "text-align: right"});
c.Bound(p => p.Status)
.Title("Status");
c.Bound(p => p.Notional)
.Title("Notional")
.Format("{0:n}")
.HtmlAttributes(new {style = "text-align: right"});
})
.Sortable()
.Scrollable()
.ColumnMenu()
.Pageable(x =>
{
x.Enabled(true);
x.PreviousNext(false);
x.PageSizes(false);
x.Info(true);
x.Input(false);
x.Numeric(false);
x.Refresh(true);
x.Messages(y => y.Display("{2} Order(s)"));
})
.Resizable(resize => resize.Columns(true))
.Reorderable(reoder => reoder.Columns(true))
.DataSource(ds => ds.Ajax()
.ServerOperation(false)
.Read(read => read.Action("Action", "MyController").Data("selectedBrokerId")))
)
<script type="text/javascript">
function brokerChanged() {
var grid = $("#Orders").data("kendoGrid");
grid.dataSource.read();
}
function selectedBrokerId() {
var obj = { brokerId: $("#broker").data("kendoDropDownList").value() };
return obj;
}
</script>
Thanks a lot for your time and help.
There is an autobind function for the grid. You can use this to determine whether or not to read when the page first loads. This should work (assuming that selectedIndex determines if a dropdown value is selected):
#(Html.Kendo().Grid<OrderViewModel>()
.Name("Orders")
.HtmlAttributes(new {style = "height: 500"})
.AutoBind(selectedIndex > 0)
//rest of your grid declaration

Telerik MVC Grid - HiddenIndexerInputForModel in ClientTemplate

MVC3 and using the Telerik Grid.
I'm using Phil Haacks Hidden Indexer Input For Model to bring form values back. Only problem is that when using Ajax as the databinder any Templates used need to have a corresponding ClientTemplate. This is where I'm having a problem. How do I insert this, and the iterator into the ClientTemplate, which is expecting a string?
This is what I've tried to no avail ... when I run the page I get an error saying 'Iter' is not defined.
<% int Iter = 0; %>
<% Html.Telerik().Grid(Model.TransferStudents)
.Name("TransferStudents")
.Columns(columns =>
{
columns.Bound(o => o.Name)
.Width(250);
columns.Template(o =>{%>
<%: Html.HiddenFor(model => Model.TransferStudents[Iter].StudentId)%>
<%: Html.CheckBoxFor(model => Model.TransferStudents[Iter].Transfer)%>
<%})
.ClientTemplate("<input type='hidden' id='StudentId' value='<#= StudentId #>' /><input type='checkbox' name='Transfer' <#= Transfer? \"checked='checked'\" :\"\" #> />")
.HtmlAttributes(new { #style = "text-align: center;" })
.HeaderHtmlAttributes(new { #style = "text-align: center;" })
.HeaderTemplate("Check All <input type='checkbox' id='chkAll' />")
.Width(105);
columns.Template(o =>{ %><% Iter = Iter + 1; %><%})
.ClientTemplate("<# Iter = Iter + 1; #>")
.Hidden();
columns.Template(o =>{ %><%: Html.HiddenIndexerInputForModel()%><% })
.ClientTemplate("<#= Html.HiddenIndexerInputForModel() #>")
.Hidden();
})
.DataBinding(dataBinding => dataBinding.Ajax().OperationMode(GridOperationMode.Server).Select("_Transfer", "Administration"))
.Pageable(paging => paging.Style(pagerStyles).PageSize(2, new[] { 5, 10, 15, 25, 50, 200 }).Position(GridPagerPosition.Top).Total((int)ViewData["total"]))
.Sortable()
.NoRecordsTemplate("<p class='instructions'>No Records Available</p>")
.Render();
%>
Any pointers would be appreciated.
The ClientTemplate expects a string which will be translated to JavaScript and executed in the browser (client-side). Any server code such as Html.HiddenIndexerInputForModel() won't work - there is no JavaScript equivalent. You need to use plain html as you have done in the other column.

Resources