I am using UI for ASP.NET Core. I have configured autocomplete widget with customized the header & item template like below
#(Html.Kendo().AutoCompleteFor(x => x.AccountNumber)
.DataTextField("AccountNumber")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetData", "Lookup");
})
.ServerFiltering(true);
})
.MinLength(2)
.Height(400)
.HeaderTemplateId("headerTemplate")
.TemplateId("itemTemplate"))
Templates
<script id="headerTemplate" type="text/x-kendo-template">
<table>
<tr class="auto-hd-tr">
<td class="auto-hd-td auto-td-large">Account Number</td>
<td class="auto-hd-td auto-td-small">State</td>
</tr>
</table>
</script>
<script id="itemTemplate" type="text/x-kendo-template">
<table>
<tr>
<td class="auto-item-td auto-td-large">${AccountNumber}</td>
<td class="auto-item-td auto-td-small">${State}</td>
</tr>
</table>
</script>
When auto complete shows searched result, and if the AccountNumber or State property is null it actually shows null string as value.
How do i use if-then-else in template, so if property is null then don't show anything
Note:
1> I can handle this on server and set value to string.empty if property is null but i would like to handle it on client side.
2>Telerik has overview of Template here. However the syntax to show property value #= # or #: # (aka hash templates) does not work. I have to use syntax ${ } to get it to work.
I know how to use if-then-else with hash template syntax. However i dont know how to use if-then-else with syntax ${ }
I just searched my code base and the only use that I have of the ${} style is setting values such as:
<script id="tmpMyViewItem" type="text/x-kendo-tmpl" >
<div class="myViewItem" id=${AccountNumber}>
<h3>${AccountNumber}</h3>
</div>
</script>
In all the places where I have conditional statements the hash templates are used:
.ItemTemplate("#if(data.Name!='<All>'){#<img style='padding-top:3px;'.....
Perhaps this link I have bookmarked from way back in 2011 may put things in perspective. What keeps you from using the has template style?
Related
We have an Java application which reads information from DB and generates HTML table via Freemarker like this:
<#if marks?size != 0>
<div>
<p>
<b>Total rows with information about broken utm-marks for ${date} is: ${total}. Displayed in current report: ${displayed}</b>
</p>
<br/>
</div>
<table border="1" cellspacing="0" cellpadding="1">
<tr class="tableHeader" style = "background-color:#f8f5e4; text-align:center; font-weight: bold;">
<th>Report date</th>
<th>Account Login</th>
<th>View Id</th>
<th>Utm marks</th>
<th>Exception type</th>
<th>Exception message</th>
</tr>
<#list marks as mark>
<tr class="tableBody">
<td>${(mark.reportDate)!""}</td>
<td>${(mark.accountLogin)!""}</td>
<td>${(mark.accountViewId)!""}</td>
<td>${(mark.utmMarks)!""}</td>
<td>${(mark.exceptionType)!""}</td>
<td>${(mark.exceptionMessage)!""}</td>
</tr>
</#list>
</table>
<br/>
<#else>
<div>
<p>
<b>No information about broken utm marks for ${date}.</b>
</p>
</div>
</#if>
This generated table will be sent to configured email.
Is it possible to build this type of application with Apache NiFi (without and with ExecuteScript)? Read from DB - fine; send email - fine; but what about templates and html table?
create ./templates folder in nifi root folder
put there a template file test.ftlh with content:
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Welcome ${user}!</h1>
<p>Our latest product:
${latestProduct.name}!
</body>
</html>
use GenerateFlowFile to inject following json into flow file:
{
"user":"Big Joe",
"latestProduct": {
"name":"green mouse",
"url":"aaa/bbb/ccc"
}
}
use ExecuteGroovyScript to merge template with data
#Grab(group='org.freemarker', module='freemarker', version='2.3.31')
import freemarker.template.*
import groovy.json.*
class Const{
static Configuration cfg
}
//on processor start
static onStart(ProcessContext context){
Const.cfg = new Configuration(Configuration.VERSION_2_3_29)
Const.cfg.with{
setDirectoryForTemplateLoading(new File("./templates"))
setDefaultEncoding("UTF-8")
setTemplateExceptionHandler(TemplateExceptionHandler.RETHROW_HANDLER)
setLogTemplateExceptions(false)
setWrapUncheckedExceptions(true)
setFallbackOnNullLoopVariable(false)
}
}
//flowfile process
def ff=session.get()
if(!ff)return
ff.write{InputStream rawIn, OutputStream rawOut->
//assume json in flowfile
def root = new JsonSlurper().parse(rawIn)
Template tpl = Const.cfg.getTemplate("test.ftlh")
rawOut.withWriter("UTF-8"){w-> tpl.process(root, w) }
}
REL_SUCCESS << ff
One way to do this without ExecuteScript (or similiar) would be:
put the HTML template-text in a NiFi process group variable
then use NiFi expression language function evaluateELString to substitute the flowfile attributes into the template.
This approach would have the advantage of being easy to maintain: the HTML template-text could be with the process group; there is no scripting code to maintain.
To illustrate this approach, suppose you put the HTML template-text into a process group variable, named email_template. Further, suppose a flowfile has the attributes set that are required by the HTML template (e.g., from a database). Then to get the realized email body, put the NiFi expression ${email_template:evaluateELString()} in the value for the Replacement Value property of the ReplaceText processor (which precedes the PutEmail processor).
In the illustration above, the variable,email_template could be set to:
<#if marks?size != 0>
<div>
<p>
<b>Total rows with information about broken utm-marks for ${date} is: ${total}. Displayed in current report: ${displayed}</b>
</p>
<br/>
</div>
<table border="1" cellspacing="0" cellpadding="1">
<tr class="tableHeader" style = "background-color:#f8f5e4; text-align:center; font-weight: bold;">
<th>Report date</th>
<th>Account Login</th>
<th>View Id</th>
<th>Utm marks</th>
<th>Exception type</th>
<th>Exception message</th>
</tr>
<#list marks as mark>
<tr class="tableBody">
<td>${mark.reportDate}</td>
<td>${mark.accountLogin}</td>
<td>${mark.accountViewId}</td>
<td>${mark.utmMarks}</td>
<td>${mark.exceptionType}</td>
<td>${mark.exceptionMessage}</td>
</tr>
</#list>
</table>
<br/>
<#else>
<div>
<p>
<b>No information about broken utm marks for ${date}.</b>
</p>
</div>
</#if>
...and ${email_template:evaluateELString()} would substitute the flowfile attribute values for date, total, displayed, mark.reportDate, etc.
just a very new to Vue 2.0, i actually use if for Laravel 5.4, now you can see from below link that i created one component which name is "canvas-chart", what actually i want show is a filterable table, and then to get more Json data from next steps, but now it always show me "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option." , can not understand that i follow the official documentation to use it why it's not work?
new Vue({
el:'#filterTest',
data:{
keywords:[{"id":"9","name":"missy","phone":"21324234532"},
{"id":"3","name":"Mahama","phone":"345604542"},
{"id":"2","name":"Bernard","phone":"241242542"}]
},
computed: {
filterM: function () {
var self = this
return self.filter(function (word) {
return user.name.indexOf(self.searchQuery) !== -1
})
}
}
});
Vue.component('canvas-chat',{
template:'#canvasChart',
props:['keywordsData']
})
<script type="text/x-template" id="canvasChart">
<table>
<thead>
<tr>
<th v-for="key.id in keywordsData">
<span class="arrow" ></span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="key.name in keywordsData">
<td v-for="key.phone in keywordsData"> {{key.name}}</td>
</tr>
</tbody>
</table>
</script>
<div id="filterTest">
<canvas-chat keywordsData="keywords" ></canvas-chat>
</div>
You have a few issues:
You must register the canvas-chat component first before you use it in the main component (put Vue.component('canvas-chat', ... before new Vue(...)).
Your v-for loops are wrong. They should be like v-for="key in keywordsData", not v-for="key.id in keywordsData".
The v-fors on the tr and td elements don't make sense; you will have to process the keywordsData first (perhaps in a computed property) to get it into the correct format you want, then loop over that.
You must bind the keywordsData prop in the template like this: :keywords-data="keywords".
I need a table structure using kendo binding for which I have a row-template and item-template ,as I had red telrik(kendo) documentation which says only one line is allowed within row-template.The requirement is that I want to have more than one row in row-template.But as soon as I add more than one line It renders only for the first row.
<script type="text/kendo-template" id="tableEditRows">
<tr class="tableRow" data-bind="source:cells" data-template="tableEditCell"></tr>
<tr>
<td >testsal</td>
</tr>
</script>
<script type="text/kendo-template" id="tableEditCell">
<td class="tableCell" align="center">
<p>value</p>
</td>
</script>
<div id="numeric" ></div>
<script>
var table = $('<table class="tableEdit" style="width:200px">' +
'<tbody align="center" data-bind="source:rows" data-template="tableEditRows">');
$("#numeric").append(table);
var viewModel = kendo.observable( {
rows:[{
cells:[{
Id:1,
Value:"asas"
}]
},{
cells:[{
Id:1,
Value:"asas"
}]
}]
});
kendo.bind($("#numeric").get(0), viewModel);
here a link http://dojo.telerik.com/ifoBA/3 to that I am trying to do.
Is there a way to achieve having more than one line in row-template
I was able to solve this issue by making use of static templating as I had a fixed set of rows.I created a html template within which I used a for loop for each row and for each rows I called a item-template within a <tr> tag. Along with this, I had a additional row template to how additional details.below is a code snippet to show what I had done.
<script type="text/html" id="testTemplate" >
#for(var i=0;i<rows.length;i++){#
<tr class="tableRow" data-bind="source:rows[#=i#].cells" data-template='tableEditCell'></tr>
#if(rows[i].index==0){#
<tr >
<td class="tableCell" >
some value
</td>
</tr>
#}#
#}#
</script>
And here is the compiling and appending of template
var table = $('<table class="elvi"><tbody align="center"></tbody></table>');
var template = kendo.template($("#testTemplate").html());
var itemHtml = template(self.viewModel);
table.append(itemHtml);
table.appendTo($(self.element));
I have a code as following;
JSP
<script type="text/javascript">
fnSelGrp = function(year)
$('#name').val(nm);
};
</script>
<table id = "One">
<tr> <td>onclick="fnSelGrp('${result.name}')">${result.name}</td> </tr>
</table>
<table id="Two">
<tr> <td> "HELLO" </td> </tr>
</table>
When I click on 'name', I want the table 'Two' to be disappeared and replace it with other JSP page, using AJAX.
It seems I should give 'fnSelGrp' an ID to make onClick function.
Can anyone help?
It looks like you are using jquery, so ensure that your jquery libraries are included before the <script> tag.
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
The code
$('#name').val(nm);
means set the value of the element with the ID name with nm
You do not have a element with the ID name
I having trouble using a rowtemplate with a detail grid.
Basically when I use them in combination, the rendering is messed up.
See this fiddle, http://jsfiddle.net/yzKqV/, to reproduce this error (uncomment the commented out line and run again to see the error).
How do I fix this?
I think the reason your rowTemplate is not working when you use detailTemplate is because it needs to have the tr and first td defined like a hierarchy grid. (http://jsfiddle.net/yzKqV/3/)
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr class="k-master-row">
<td class="k-hierarchy-cell"></td>
<td> #= FirstName # </td>
<td> #= LastName # </td>
</tr>
</script>