Kendo Grid Excel Export with Columns with DropDown Template - excel

I want to export the kendo grid data into excel. I am using kendo dropdownlist as a template for some columns.
When i export it exports but it not show the text value for those columns but rather shows value for that fields.

This may not be the "best" solution but it worked for me. Basically I created a function that loops through and processes the row with the dropdown, using a switch statement to set the text based on the value (the data that comes through unfortunately only has the value, rather than the object).
Here is the markup for my grid:
<div id="grid" data-role="grid"
data-sortable=" {mode: 'single' , allowunsort:true }"
data-toolbar="[{template: this.model.getToolbar}]"
data-excel="{ fileName: 'export.xlsx', allPages:'true' }"
data-excel-export="model.curateExcelData"
data-columns="#string.Format(#"[
{{ title:'{0}', field: 'Column1', width:80 }},
{{ title:'{1}', field: 'Column2', width:80 }},
{{ title:'{12}', field: 'DropDownColumn',template: kendo.template($('#dropdown-template').html()),'width':80, sortable: false }},
]", CommonResource.Column1, CommonResource.Column2, CommonResource.DropDownColumn)"
data-bind="source: items"
data-editable="inline">
</div>
And the template:
<script id="dropdown-template" type="text/x-kendo-template">
<input data-role="dropdownlist"
data-auto-bind="false"
data-value-primitive="true"
data-text-field="Text"
data-value-field="Value"
data-bind="value: dropDownValue, source: dropDownValues"
style="width:65px" />
</script>
And here is the function that updates the values for the export (in my case I had a dropdown that was "Days" and "Weeks", which was the 12th column):
curateExcelData: function (data) {
var sheet = data.workbook.sheets[0];
$.each(sheet.rows, function (index, row) {
if (row.type == "data") {
switch (row.cells[12].value) {
case "D":
row.cells[12].value = "Days";
break;
case "W":
row.cells[12].value = "Weeks";
default:
break;
}
}
});
},

Related

v-data-table button loading per row

Using vue v2.5 with vueCLI 3 trying to have a v-data-table that on each row have a button, when this button clicked should make it appear as loading.
v-btn has loading property by default, really I don't know why is not working...
<v-data-table
:headers="headers"
:items="records"
#dblclick:row="editRowCron_jobs">
<template v-slot:[`item.actions`]="props">
<v-btn color="blue-grey" :loading="props.item.createloading" fab dark small #click="ManuralRun(props.item)">
<v-icon dark>mdi-google-play</v-icon>
</v-btn>
</template>
</v-data-table>
On the click method, I can read but not set the item
export default {
data() {
return {
headers: [
{ text: "id", value: "id", align: " d-none" },
{ text: "actions", value: "actions" }
],
records: [] //grid rows filled by API
}
},
methods: {
ManuralRun(item){
this.records[2].createloading=true; //even I set it like that, nothing happens
item.createloading = true; //property changed here - ok
console.log(item); //here outputs the clicked item - ok
},
so, according to this
the property MUST pre-exist in the array, that means, when we get the result from the API, we have to add the property as:
this.records = data.data.map(record => {
return {
createloading: false,
...record
}
})

Datatables make all bordered cells when export to excel

Thanks in advance. How to make all bordered excel cells when export? I could not find documantation or manual about that.
To add a border around each Excel cell, you can use the following:
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
title: '', // no title row in excel sheet
text: 'Excel', // label for the export button
customize: function ( xlsx ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$( 'row c', sheet ).attr( 's', '25' );
}
}
]
} );
} );
</script>
This takes advantage of one of the built-in styles available to DataTables when exporting data to Excel. Specifically, the attr( 's', '25' ) function uses style number 25 (normal text with thin black border).
Here is an example of the output:

How to create a view based on chosen type of data in Angular?

How to display different json files in the same view?
I have 3 json files:
{"streetAddress": "Kosterijland 20", "postalCode": 3980, "city:" : "Bunnik", "country" : "Netherlands" }
{"firstName": "Anna", "age": 39, "lastName:" : "Kowalski"}
{"test": "value", "test2": "value2"}
I want to have generic method that will display the files like this:
streetAdress: Kosterijland 20
postalCode: 3980
city: Bunnik
country: Netherlands
OR
firstName: Anna
age: 39
lastName: Kowalski
OR
test: value
tet2: value
How can I do that? I want to make it generic, so when I add another json file with different properties I dont have to change the code
myService.ts class for retrieving the data using http client:
private url5 ="./assets/temp-data/location-entity-test.json";
getEntityDetails(){
return this.http.get(this.url5, {responseType: 'text'});
}
component.html class for displaying the json:
<div *ngFor="let item of displayObjectKeys; let i = index">
{{ item }} - {{ displayObjectValues[i] }}
</div>
component.tsclass:
json: any;
displayObjectKeys = [];
displayObjectValues = [];
constructor(private linkedEntityVocabulariesService:
LinkedEntityVocabulariesService) { }
ngOnInit() {
this.linkedEntityVocabulariesService.getEntityDetails()
.subscribe(data=>this.json=data);
}
PS. I know that html page is fine but I dont know how to get the properties and values in ts file and I dont know if the http request is good for this type of operations. Please help me
You could preprocess the objects you want to display into arrays if keys and values and render them seperately.
dogObject = {"name": "woofy", "age": 42, "weight": "a ton"};
carObject = {"color": "red", "power":"1.31GW"};
displayObjectKeys = [];
displayObjectValues = [];
selectObjectToDisplay(selectedItemToDisplay) {
let item = null;
if(selectedItemToDisplay === car) {
item = carObject;
}
if(selectedItemToDisplay === dog) {
item = dogObject;
}
if(!item) {
return;
}
this.displayObjectKeys = Object.keys(item);
this.displayObjectValues = Object.values(item);
}
<button (click)="selectObjectToDisplay("dog")"></button>
<button (click)="selectObjectToDisplay("car")"></button>
now you have the keys and values extracted.
then you could do something like this:
<div *ngFor="let item of displayObjectKeys; let i = index">
{{ item }} - {{ displayObjectValues[i] }}
</div>
this should render the car props as
color - red
power - 1.31GW
And when the user switches the object to display, just call the selectObjectToDisplay() method and pass the new object inside.
BUT
this is very dirty and the properties will be rendered as they are defined.

Dgrid + Selection Issue

Still trying to work with Dgrid (0.4) and dojo (1.10), I have now another issue with the selection.
My web page contain a Dialog opened when you click on a button.
Inside this dialog, we have the following code which display a grid with data coming from a database through a Json HTTP page. This is working fine, even sorting and query filtering.
What I want to do know is to allow the user to double click on a row, get the selected row Id contains in the first column to update the form in the main page. I use the dgrid/selection for this. However, it always return the last row of the grid instead of the one the user selected.
The selection code is based on this :
http://dgrid.io/tutorials/0.4/hello_dgrid/
Any idea?
Thanks
<script language="javascript">
require
(
[
"dojo/_base/declare",
"dojo/_base/array",
"dgrid/OnDemandList",
"dgrid/OnDemandGrid",
"dgrid/Keyboard",
"dgrid/Selection",
"dgrid/Editor",
"dgrid/extensions/ColumnHider",
"dstore/Memory",
"dstore/RequestMemory",
"dojo/_base/lang",
"dojo/dom-construct",
"dojo/dom",
"dojo/on",
"dojo/when",
"dojo/query",
"dojo/store/Observable",
"dstore/Rest",
"dojo/_base/Deferred",
"dojo/store/Cache",
"dojo/domReady!",
],
function(
declare, arrayUtil, OnDemandList, OnDemandGrid, Keyboard, Selection, Editor, ColumnHider, Memory, RequestMemory, lang, ObjectStore, dom, on, when, query, Observable, Rest, Deferred
){
var fform = dom.byId("filterForm");
var ContactColumns = [
{ label: "", field: "contact_id", hidden: true, unhidable: true},
{ label: "Company Name", field: "company_name", unhidable: true },
{ label: "Contact Name", field: "contact_name", unhidable: true },
{ label: "Email", field: "contact_email", unhidable: true }
];
var ContactGrid=declare([OnDemandGrid, Keyboard, Selection,ColumnHider]);
var contactlist = new Observable(new Rest({ target: './ajax.contactsLoader.php' }));
var selection = [];
window.contactgrid = new ContactGrid(
{
className: "dgrid-selectors",
collection: contactlist,
maxRowsPerPage:10,
selectionMode: 'single',
cellNavigation: false,
columns: ContactColumns
}, "contacttable"
);
on(fform, "submit", function (event) {
var cpy_filter = fform.elements.fcompany_name.value;
var ct_filter = fform.elements.fcontact_name.value;
var email_filter = fform.elements.fcontact_email.value;
contactgrid.set('collection',contactlist.filter({contact_name: ct_filter, company_name: cpy_filter, contact_email: email_filter }));
contactgrid.refresh();
event.preventDefault();
});
contactgrid.on('dgrid-select', function (event) {
// Report the item from the selected row to the console.
console.log('Row selected: ', event.rows[0].data);
});
contactgrid.on('dgrid-deselect', function (event) {
console.log('Row de-selected: ', event.rows[0].data);
});
contactgrid.on('.dgrid-row:click', function (event) {
var row = contactgrid.row(event);
console.log('Row clicked:', row.data);
});
}
);
</script>
<div class="dijitDialogPaneContentArea" style="width:96%;margin-left:5px">
<form id="filterForm">
<div class="dijitDialogPaneActionBar" >
<button data-dojo-type="dijit.form.Button" type="submit">Filter</button>
<button
data-dojo-type="dijit.form.Button"
data-dojo-attach-point="submitButton"
type="submit"
>
Select
</button>
<button
data-dojo-type="dijit.form.Button"
data-dojo-attach-point="cancelButton"
>
Close
</button>
</div>
<div data-dojo-attach-point="contentNode" >
<input type="text" data-dojo-type="dijit.form.TextBox" name="fcompany_name" id="fcompany_name" style="width:33%">
<input type="text" data-dojo-type="dijit.form.TextBox" name="fcontact_name" id="fcontact_name" style="width:32%">
<input type="text" data-dojo-type="dijit.form.TextBox" name="fcontact_email" id="fcontact_email" style="width:33%">
<div id="contacttable">
</div>
</div>
</form>
</div>
Just found the reason.
the columns need to have a 'id' column called ID. I just change the 'contact_id' column to 'id' and it works fine.
thanks

Mvc dropdownlist default value and placeholder

I have a html.dropdownlist which have 4 options. I want it to display a placeholder text a defaut which is not included in the options. I implemented a similar thing with adding a default option to the list, however selected default option is causing div to expand and it distrups the page layout.
<div style="float:left; padding-left:13.4%;">
#Html.DropDownList("Adults", ViewData["Adults"] as List<SelectListItem>, new { #class = "dropdown2"})
</div>
And that is the controller code;
List<SelectListItem> adt = new List<SelectListItem>();
//adt.Add(new SelectListItem
//{
// Text = "1",
// Value = "1"
//});
adt.Add(new SelectListItem
{
Text = "1",
Value = "1"
});
adt.Add(new SelectListItem
{
Text = "2",
Value = "2"
});
adt.Add(new SelectListItem
{
Text = "3",
Value = "3"
});
adt.Add(new SelectListItem
{
Text = "4",
Value = "4"
});
ViewData["Adults"] = adt;
return View();
Im new with mvc and any contribution will be appreciated. Thank you.
Adding placeholder text when its not directly implemented is tricky if not impossible. I recommend using Chosen (JQuery Plugin) instead. It is very easy to use and makes the dropdown beautiful.
https://harvesthq.github.io/chosen/
Example of a dropdown with chosen:
#Html.DropDownListFor(model => model.Example, Model.Example, new { #class = "chosen", data_placeholder="Choose items"})
You can add jquery code to add option to the dropdownlist with the select attribute so the option will be set as a placeholder:
$('#selectid').append($('<option/>', {
value: value,
text : value
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='selectid'>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
If you are using ASP.NET MVC 5 then you can use overloaded method of #Html.DropDownList
with perameter type string optionLabel.
which will add a new option in select list at first index. will be default selected. and if your default options always selected then no need for placeholder.
#Html.DropDownList("Adults", ViewData["Adults"] as List<SelectListItem>, "Select Adult",new { #class = "dropdown2"})

Resources