We Keep Coding

titile_field and search_field in Link field Script Report

How to make the filter show the full_name at the top and email (this is id) at the bottom? This report filter is link to a doctype tabUser.
i refer to this https://github.com/techmaxsolucoes/title_links
frappe.query_reports["Loan Processing Late Update Report"] = {
"filters": [
{
fieldname: "mortgage",
fieldtype: "Link",
label: __("Mortgage Officer"),
options: "User",
width: "600",
onchange: () => {
frappe.query_report.data = "";
frappe.query_report.refresh();
}
}

Kendo excel export - how do I export columns with a custom template?

I have a kendo grid that I define declaritively.
I enable the excel export toolbar via data-toolbar='["excel"]'
The problem is that this only exports the fields that do not have a template defined. (the first 3 in the grid below: Checkpoint, Location, Patrolled By), the other columns show up in the excel document, but the cells of those columns are all empty.
How can I get the values to show up in the excel export? I'm guessing it will require pre-processing of some sort before the excel gets exported, as the excel export function doesn't interpret my custom field html templates.
<div id="Checkpoints">
<div
...
data-toolbar='["excel"]'
data-excel='{ "fileName": "CheckpointExceptionExport.xlsx", "allPages": "true" }'
...
data-columns='[
{
"field": "checkpoint_name",
"title": "Checkpoint",
"filterable": { "cell": { "operator": "contains"}}},
{
"field": "location_name",
"title": "Location",
"filterable": { "cell": { "operator": "contains"}}
},
{
"field": "patrolled_by",
"title": "Patrolled By",
"filterable": { "cell": { "operator": "contains"}}
},
{
"field": "geotag",
"title": "GeoTag",
"template": kendo.template($("#geotagTemplate").html())
},
{
"field": "geofence",
"title": "GeoFence",
"template": kendo.template($("#geofenceTemplate").html())
},
{
"field": "completed",
"title": "Completed",
"template": kendo.template($("#completedTemplate").html())
},
{
"field": "gps",
"title": "GPS",
"template": kendo.template($("#gpsTemplate").html())
}
]'>
</div>
</div>
I've came across this snippet for handling the excel export event however I don't see a way to use this event handler in the way that I've defined the grid.
<script>
$("#grid").kendoGrid({
excelExport: function(e) {
...
},
});
</script>

Check http://docs.telerik.com/kendo-ui/controls/data-management/grid/excel-export#limitations, which explains why this happens and shows how to proceed.
The Grid does not use column templates during the Excel export—it exports only the data. The reason for this behavior is that a column template might contain arbitrary HTML which cannot be converted to Excel column values. For more information on how to use a column template that does not contain HTML, refer to this column template example.
Update
In order to attach a Kendo UI event handler when using declarative widget initialization, use the data-bind HTML attribute and event binding:
<div
data-role="grid"
data-bind="events: { excelExport: yourExcelExportHandler }">
</div>
Check the Kendo UI Grid MVVM demo for a similar example.
yourExcelExportHandler should be a function defined in the viewModel, similar to onSave in the above example.
The excelExport event can also be attached after widget initialization.

I found this great answer by Telerik on their website: https://docs.telerik.com/kendo-ui/knowledge-base/grid-export-arbitrary-column-templates. Their helper function exports to excel with the exact template text.
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderDate: {
type: "date"
}
}
}
},
pageSize: 20,
serverPaging: true
},
height: 550,
toolbar: ["excel"],
excel: {
allPages: true
},
excelExport: exportGridWithTemplatesContent,
pageable: true,
columns: [{
field: "Freight",
hidden: true
},
{
field: "OrderID",
filterable: false
},
{
field: "OrderDate",
title: "Order Date",
template: "<em>#:kendo.toString(OrderDate, 'd')#</em>"
}, {
field: "ShipName",
title: "Ship Name",
template: "#:ShipName.toUpperCase()#"
}, {
field: "ShipCity",
title: "Ship City",
template: "<span style='color: green'>#:ShipCity#, #:ShipCountry#</span>"
}
],
columnMenu: true
});
});
function exportGridWithTemplatesContent(e) {
var data = e.data;
var gridColumns = e.sender.columns;
var sheet = e.workbook.sheets[0];
var visibleGridColumns = [];
var columnTemplates = [];
var dataItem;
// Create element to generate templates in.
var elem = document.createElement('div');
// Get a list of visible columns
for (var i = 0; i < gridColumns.length; i++) {
if (!gridColumns[i].hidden) {
visibleGridColumns.push(gridColumns[i]);
}
}
// Create a collection of the column templates, together with the current column index
for (var i = 0; i < visibleGridColumns.length; i++) {
if (visibleGridColumns[i].template) {
columnTemplates.push({
cellIndex: i,
template: kendo.template(visibleGridColumns[i].template)
});
}
}
// Traverse all exported rows.
for (var i = 1; i < sheet.rows.length; i++) {
var row = sheet.rows[i];
// Traverse the column templates and apply them for each row at the stored column position.
// Get the data item corresponding to the current row.
var dataItem = data[i - 1];
for (var j = 0; j < columnTemplates.length; j++) {
var columnTemplate = columnTemplates[j];
// Generate the template content for the current cell.
elem.innerHTML = columnTemplate.template(dataItem);
if (row.cells[columnTemplate.cellIndex] != undefined)
// Output the text content of the templated cell into the exported cell.
row.cells[columnTemplate.cellIndex].value = elem.textContent || elem.innerText || "";
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.119/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.119/js/jszip.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2022.1.119/styles/kendo.default-v2.min.css" rel="stylesheet" />
<div id="grid"></div>

jquery DataTables Editor: "select" field displays option value instead of label

I am using jquery's DataTables which is really working great. Then only problem I got is, that I am facing (in non-edit-view) the value of the select-field (which is an id). The user of course doesn't want to see the id of course.
Therefore I am looking for a possibility to configure that column in a way to show always the value of label property.
Here a some snippets:
$(document).ready(function() {
var table = $('#overviewTable').DataTable({
dom: "Tfrtip",
ajax: "/Conroller/GetTableData",
columns: [
{ data: "Id", className: "readOnly", visible: false },
{
data: "LoanTransactionId",
className: "readOnly readData clickable",
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='#'>" + oData.LoanTransactionId + "</a>");
}
},
{ data: "Id", className: "readOnly" },
{ data: "property_1", className: "readOnly" },
{ data: "Priority" },
{ data: null, className: "action readOnly", defaultContent: 'Info' }
],
order: [1, 'asc'],
tableTools: {
sRowSelect: "os",
sRowSelector: 'td:first-child',
aButtons: []
}
});
// data reload every 30 seconds
setInterval(function() {
table.ajax.reload();
}, 30000);
editor = new $.fn.dataTable.Editor({
ajax: "PostTable",
table: "#overviewTable",
fields: [
{
label: "Id",
name: "Id"
},
{
label: "Column 1",
name: "property_1"
},
{
label: "Priority",
name: "Priority",
type: "select",
options: [
{ label: "low", value: 0 },
{ label: "mid", id: 1 },
{ text: "high", id: 2 }
]
}
]
});
// Inline Edit - only those who are not readOnly
$('#overviewTable').on('click', 'tbody td:not(:first-child .readOnly)', function(e) {
editor.inline(this, {
submitOnBlur: true
});
});
How it looks in the display mode
How it looks in the edit mode

See the documentation on columns.render
You want to modify your column options for priority
Preferred Option: Your data source has a field with the priority as a string
This is the best option, as you don't want to have two places with this business logic. Keep it out of the client code.
Also, you will want to modify the editor as well so that the options used have been retrieved dynamically from the server to keep this business logic out of the client too. This is left as an exercise for the reader.
Since you don't provide details on what your data structure looks lik, I'm assuming it is an object, and it has an attribute priorityAsString so use the string option type for render.
columns: [
...
{
data: "Priority" ,
render: "priorityAsString",
},
Option 2) You write a function to map priority to string
Do this if you can't get the data from the server. But remember you will need to update many places when the priority list changes.
columns: [
...
{
data: "Priority" ,
render: renderPriorityAsString,
},
...
function renderPriorityAsString(priority) {
const priorityToString = {
0: 'low',
1: 'med',
2: 'high',
};
return priorityToString[priority] || `${priority} does not have a lookup value`;
}

"render": function ( data, type, full ) { return label;}

Cell values not displayed correctly in Kendo UI Grid using custom DropDownList editor

The title may be confusing, but I had a bit of trouble explaining myself in a single sentence, so read on for a bit more detailed scenario.
I am trying to get a Kendo UI DropDownList working correctly when used as an editor in a Kendo UI Grid.
I've got the following #model in my view;
{
"DataItems": [
{ "Id": 1, "Name": "Foo", "Category": { "Id": 1 } },
{ "Id": 2, "Name": "Bar", "Category": { "Id": 2 } }
],
"CategoryOptions": [
{ "Id": 1, "Name": "A" },
{ "Id": 2, "Name": "B" },
{ "Id": 3, "Name": "C" }
],
}
This is passed to my script, which upon initializing constructs the following data source and grid
var gridDataSource = new kendo.data.DataSource({
data: _model.DataItems,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number", editable: false, nullable: false },
Name: { type: "string", validation: { required: true } },
Category: { type: "object" },
}
},
}
});
$("#grid").kendoGrid({
dataSource: _model.DataItems,
columns: [
{ field: "Id", hidden: true },
{ field: "Name", width: "200px", title: "Name", },
{ field: "Category", title: "Category", editor: categoryDropDownList, template: "#= (Category != null && Category.Name !== null) ? Category.Name : ' ' #" },
{ command: "destroy", title: " "}
],
toolbar: ["save", "cancel"],
editable: true,
});
As you'll notice this grid is in-line editable, so clicking a cell will allow you to edit its contents. To edit Category I've added a custom editor (categoryDropDownList), which displays _model.CategoryOptions.
function categoryDropDownList(container, options) {
$('<input data-value-field="Id" data-text-field="Name" data-bind="value:' + options.field + '"/>').appendTo(container)
.kendoDropDownList({
dataSource: _model.CategoryOptions,
dataValueField: "Id",
dataTextField: "Name",
});
}
This seems to work as expected.
You can click the Category cell, and select a value (A, B, or C). When you remove focus from that cell, a small flag appear in the top left corner to mark that cell as dirty, requiring you to save changes.
In my model the data item Bar has the category B. This means that upon loading the page, one would expect the cell value of Category to be B, as dictated by the template;
#= (Category != null && Category.Name !== null) ? Category.Name : ' ' #
Instead the text value in the Category cell is always empty, as if you hit the else of the ternary if template, which shouldn't be the case. It should be B.
However, if you click the cell to reveal the editor, you'll notice that the selected item in the DropDownList is actually B. Remove focus from the cell, and the value disappears with the DropDownList.
So it's as if the editor knows about the selected category, but the grid doesn't.
Does this make any sense for you guys?
Please leave a comment if you need a better explanation, more code etc.

It's most likely because the editor template is asking for Category.Name, but it is null. The Category object in DataItems only has Id defined and has no idea that there is a relationship defined at CategoryOptions.
In your editor template, you can try something like this (or similar).
#= (Category.Id !== null) ? $.grep(CategoryOptions, function(e){ return e.Id == Category.Id; })[0].Name : ' ' #
Basically, return the Name of the object in CategoryOptions with an Id that matches the Category Id of DataItem.
If trying that does not work, you can try the column.values configuration that kendo supports. I imagine it would look something like this:
Your category column (no more template):
{
field: "Category",
title: "Category",
editor: categoryDropDownList,
values: CategoryOptions
},
Your data model would then need to be like this:
{
"DataItems": [
{ "Id": 1, "Name": "Foo", "Category": 1 },
{ "Id": 2, "Name": "Bar", "Category": 2 }
],
"CategoryOptions": [
{ "value": 1, "text": "A" },
{ "value": 2, "text": "B" },
{ "value": 3, "text": "C" }
],
}
Adding function to kendo template context
Declare your wrapper function inline as part of the editor template:
"# var GetCategoryNameById = function(id){ return $.grep(CategoryOptions, function(e){ return e.Id == id; })[0].Name; }; # #= GetCategoryNameById(name) #"
Kendo Template Hash Usage FYI:
#= # --> Render as HTML
# # --> Arbitrary JS

how to validate div element in angular UI bootstrap?

I make view from array of object into view .But My problem is that I take div element inside the li and ui .Now I want to validate element like "number", "url","email".I need to validate element on blur and keyup.Some elements may be required some not .I need to show this using "*".I know how to validate using form when I take form I used
<span ng-show="myForm.name.$error.required" class="help-inline">
But now i have div element inside li .how I will validate .?
http://plnkr.co/edit/we1QHuDuCOOR4tDAk6yv?p=preview
function Controller($scope) {
$scope.outputs = {};
$scope.inputs = [{
type: "email",
name: "email",
required:true
}, {
type: "text",
name: "name",
}, {
type: "number",
name: "phonenumber",
}, {
type: "checkbox",
name: "whant to check",
},
{
type: "url",
name: "server Url",
}];
}
or is there any way to insert all element in form ?

You can use Angular Form Validation.
When i was searching about this, i found out this tutorial. It has helped me alot.
Try your self.