I have got a Telerik MVC grid and I would like to export it as a pdf and hide the column "Test2". I am not able to achieve the desired behavior.
#(Html.Kendo().Grid<Lagerbase.Models.Artikel>()
.Name("ArtikelGrid")
.ToolBar(tools => tools.Pdf())
.Pdf(pdf => pdf
.AllPages()
.AvoidLinks()
.PaperSize("A4")
.Scale(0.8)
.Margin("2cm", "1cm", "1cm", "1cm")
.Landscape()
.RepeatHeaders()
.TemplateId("page-template")
.FileName("Artikel.pdf")
.ProxyURL(Url.Action("Pdf_Export_Save", "Grid"))
)
.Columns(columns =>
{
columns.Bound(o => o.Id).Hidden();
columns.Bound(o => o.Test1);
columns.Bound(o => o.Test2);
})
}
This is what I found for an Excel export. So I adjusted the bind to "pdfExport".
Unfortunately it doesn't work for the function e.sender.saveAsExcel();.
<script type="text/javascript">
$(document).ready(function () {
var exportFlag = false;
$("#ArtikelGrid").data("kendoGrid").bind("pdfExport", function (e) {
if (!exportFlag) {
e.sender.hideColumn(1);
e.preventDefault();
exportFlag = true;
setTimeout(function () {
e.sender.saveAsExcel();
});
} else {
e.sender.showColumn(1);
exportFlag = false;
}
});
});
</script>
Does someone know a solution to this?
View this Demo : FUll demo
Source
Related
I have a dropdown by which I select the category of my data in a Kendo grid in my MVC app.
#(Html.Kendo().DropDownList()
.Name("kind")
.HtmlAttributes(new { style = "width:18%" })
.OptionLabel("Select Category")
.DataTextField("Cat_Title")
.DataValueField("Cat_ID")
.Events(e => e.Change("onChange"))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Overview_Get_Categories", "Announcements");
});
})
)
I need to save my selected value so if the user return back can load his search. I have the following code for my grid
<div class="box-col">
Save State
Load State
and in js
<script>
$(document).ready( function () {
var grid = $("#grid").data("kendoGrid");
$("#save").click(function (e) {
e.preventDefault();
localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
});
$("#load").click(function (e) {
e.preventDefault();
var options = localStorage["kendo-grid-options"];
if (options) {
grid.setOptions(JSON.parse(options));
}
});
});
How can I save the value from the dropdown? and then reload it?
any idea? Thank you!
I try using contents.findInPage.
I have code in index.js:
const { webContents } = require('electron')
webContents.on('found-in-page', (event, result) => {
if (result.finalUpdate) webContents.stopFindInPage('clearSelection')
})
const requestId = webContents.findInPage('api')
console.log(requestId)
And code in component:
searchText(value){
this.query = value;
if (this.query.length > 0) {
ipcRenderer.send('api', this.query);
}
}
I wrote this code on the example of this answer.
But function find not work. I do not understand how I can send the text to be searched and the word to be searched.
How I can use function findInPage ?
sorry my answer to the other question wasn't clear enough (it was 2 years ago! I don't remember it that well but I'll give it a shot)
This is the documentation for webcontents and IPCMain
Here's what I have in my main.development.js (globals for the mainWindow and ipc communication):
mainWindow.on('focus', () => {
globalShortcut.register('CmdorCtrl+F', () => {
mainWindow.webContents.send('find_request', '');
});
});
mainWindow.webContents.on('found-in-page', (event, result) => {
if (result.finalUpdate) {
mainWindow.webContents.stopFindInPage('keepSelection');
}
});
ipcMain.on('search-text', (event, arg) => {
mainWindow.webContents.findInPage(arg);
});
mainWindow.on('blur', () => {
globalShortcut.unregister('CmdorCtrl+F');
});
Then I made an ipc listener for CmdorCtrl+F:
ipcRenderer.on('find_request', () => {
const modalbox = document.getElementById('modalbox');
if (modalbox.style.display === 'block') {
modalbox.style.display = 'none';
} else {
modalbox.style.display = 'block';
}
});
Then I made a modal searchbox:
const searchBox = (
<div
id="modalbox"
style={{ display: 'none', position: 'fixed', zIndex: 1 }}
><input type="text" onChange={Calls.searchPage} />
</div>);
The onchange sends the input text to the ipc listener:
static searchPage(event) {
ipcRenderer.send('search-text', event.target.value);
}
I hope this is enough for you to get it fixed :)
Screen
Code
In this screen, we have used kendo treelist. I need to implement autocomplete dropdown in CODE column. How can i do that?
Try this
var ac = Html.Kendo()
.AutoComplete()
.Name("CodeAutoComplete")
.DataSource(ds =>
{
ds.Read(read =>
{
read.Url("youraction");
});
ds.ServerFiltering(true);
});
var treeGrid = Html.Kendo()
.TreeList<YourModel>()
.Name("SomeTreeList")
.Columns(columns =>
{
columns.Add().Field(t => t.YourProperty).Editor(ac.ToHtmlString());
});
I solve my above problem as per given below jquery code.
var input2 = jQuery('<input id="WEIGHT_UOM" value="' + e.model.WEIGHT_UOM + '">');
input2.appendTo($(".k-grid-edit-row").find("[data-container-for='WEIGHT_UOM']"))
//create AutoComplete UI component
$("#WEIGHT_UOM").kendoAutoComplete({
dataTextField: "ProjectDesc",
// template: '${ data.ProjectDesc }' + '<span style="display:none;> ${ data.ProjectDesc }</span>',
select: function (org1) {
var dataItem1 = this.dataItem(org1.item.index());
// model.set("field1", dataItem.field1);
e.model.set("WEIGHT_UOM", dataItem1.ProjectID);
},
dataSource: {
type: "jsonp",
serverFiltering: true,
transport: {
read: "#Url.Action("GetISOUnitAutoComp",
"DashBoard")",
}
}
});
How do I show the row number in a Kendo UI Grid? The code I have is not working. The page displays the column but it's empty.
#{int counter = 1;}
#(Html.Kendo().Grid<QueueViewModel>()
.Name("Queue")
.Columns(columns =>
{
columns.Template(#<text><span>#counter #{ counter++; }</span></text>).Title("#");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetOpenQueue", "DataSource", new { GeneralQueue = true })
))
Do this:
#{
int counter = 1;
}
#(Html.Kendo().Grid<QueueViewModel>()
.Name("Queue")
.Columns(columns =>
{
columns.Template(#<text><span>#(counter++)</span></text>).Title("#");
})
Or, if your DataSource is set to Ajax (client-side), do this:
<script>
var counter = 1;
function onDataBound(e) {
counter = 1;
}
function renderNumber(data) {
return counter++;
}
</script>
#(Html.Kendo().Grid()
.Name("Queue")
.Columns(columns => {
columns.Template(t => { }).ClientTemplate("#= renderNumber(data) #").Title("#");
})
.Events(ev => ev.DataBound("onDataBound"))
)
Column ClientTemplate is client-side functionality. You cannot use server-side variables in it. You should define Javascript variable:
<script>
var i = 1;
</script>
Then, inside the grid use this:
columns.Template(t => { }).ClientTemplate(#=i++#).Title("#");
Updated: it should be ClientTemplate instead of Template
Try this way In javascript, the code will support the paging also
<script type="text/javascript">
var CountIt = 0
function GetCountIt() {
var page = $("#YourGrid").data("kendoGrid").dataSource.page();
var pageSize = $("#YourGrid").data("kendoGrid").dataSource.pageSize();
CountIt++;
return (page * pageSize) - pageSize + CountIt
}
function YourGrid_DataBound() {
CountIt = 0; $('#YourGrid').data('kendoGrid').pager.unbind("change").bind('change', function (e) {
CountIt = 0
})
}
</script>
then add to your kindo grid
.Events(events =>
{
events.DataBound("YourGrid_DataBound");
})
.Columns(columns =>
{
columns.Bound("").ClientTemplate("#=GetCountIt()#").Title("Sr.").Width(50);
...
I am working on an MVC 4 application and I have used a Kendo UI grid on my view. This view has a command column which displays button. On click of this button, I should display a kendo window (popup) which displays a partial view.On clicking 'Close' button on this window, I should once again return back to the grid and the grid should refresh.
Now I have 2 issues with this,
Once I click the button on grid, it displays the window only
once.i.e. if it close the window and again try to click the button on
grid, none of the button responds!
After I click the close button on the window, though the window
closes, but the grid dows not refresh. Instead the entire page
refreshes.
I have used the below code,
#(Html.Kendo()
.Grid(Model)
.Name("DefectGrid")
.Columns(columns =>
{
columns.Bound(d => d.DefectId).Title("ID").Width("5%");
columns.Bound(d => d.Title).Title("Title").Width("20%");
columns.Bound(d => d.Severity).Title("Severity").Width("10%");
columns.Bound(d => d.Status).Title("Status").Width("10%");
columns.Bound(d => d.Description).Title("Description").Width("20%");
columns.Bound(d => d.LoggedBy).Title("LoggedBy").Width("10%");
columns.Bound(d => d.LoggedOn).Title("LoggedOn").Width("10%");
columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
})
.Pageable()
.Sortable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.Scrollable(scr => scr.Height(200))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("LoadDefects", "Home").Data("refreshGrid").Type(HttpVerbs.Get))
.PageSize(20)
.ServerOperation(false)))
#(Html.Kendo()
.Window()
.Name("Details")
.Title("Defect Details")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(1000)
.Height(600)
.Events(ev => ev.Close("onClose"))
)
<script type="text/x-kendo-template" id="template">
<div id="defectDetails">
</div>
</script>
function showDetails(e) {
// e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#Details").data("kendoWindow");
var defId = dataItem.DefectId;
var actionURL = '#Url.Action("DefectDetail", "Home")';
wnd.refresh({
url: actionURL,
data: { defectId: defId }
});
wnd.center();
wnd.open();
}
function onClose(e) {
if (!confirm("Are you sure you want to close window?"))
e.preventDefault();
}
Can anyone suggest where I am going wrong and how can I fix the issue!!!
Thanks in advance
Try like this, add script tag and it's working fine.
<script type="text/javascript">
function showDetails(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#Details").data("kendoWindow");
var defId = dataItem.DefectId;
var actionURL = '#Url.Action("DefectDetail", "Home")';
wnd.refresh({
url: actionURL,
data: { defectId: defId }
});
wnd.center();
wnd.open();
}
</script>
You may refresh the grid by calling dataSource.read() on the grid element
probably you may do in the onClose() event of the window,
$("#DefectGrid").data("kendoGrid").dataSource.read();