how to show title without using field in kendo jquery
title: "Action",
filterable: false,
template: "#if( RefType == 'TASK'){ # <a class='btn-link anc' onclick='OpenChangeDetailsModal(RefId,'N')' >Create Task </a > #} else if(RefType == 'TEMPLATE'){# <a class='btn-link anc' onclick='OpenChangeDetailsModal(TaskTemplateId,'Y')' >Create Task </a > #}#"
Related
Using Kendo UI JQuery Editor control, How I can write html document as a template with predefined fields that get data from database ?
For example if user typed Name:[fname] [lname]
It get replaced with first and last name data from database. I use PHP.
The Editor provides reference to the HTML element which represents the editor's content area. You can therefore set the content of the DOM elements in the Editor's content:
<input id="ddl" />
<textarea id="editor" rows="10" cols="30" style="width:100%; height:450px" aria-label="editor">
<div >
<div>Hello <span id="fname" contenteditable="true">___</span>,</div>
</br>
<div>your email is: <span contenteditable="true" id="email">___</span></div>
</div>
</textarea>
<script>
$(document).ready(function () {
// create Editor from textarea HTML element with default set of tools
$("#editor").kendoEditor({
resizable: {
content: true,
toolbar: true
}
});
//make the editor content non-editable and only some elements editable by setting the contenteditable attribute for the desired elements
var editor = $("#editor").data("kendoEditor"),
editorBody = $(editor.body);
editorBody.attr("contenteditable", false)
$("#ddl").kendoDropDownList({
optionLabel:"--Select user--",
dataTextField:"user",
dataValueField:"id",
dataSource:[
{id:1, user: "John", fname:"John",lname:"Doe",email:"john#email.com"},
{id:2, user: "Jane", fname:"Jane",lname:"Smith",email:"jane#email.com"}
],
change:function(e){
var item = e.sender.dataItem();
editorBody.find("#fname").text(item.fname);
editorBody.find("#email").text(item.email);
}
})
});
</script>
Here is an example
In my Laravel 5.7 application I use laravel-jsvalidation plugin( https://github.com/proengsoft/laravel-jsvalidation/wiki/Basic-Usage )
and it worked ok,
I needed to including textarea input as tinyMCE editor and to use i with validation and I implemented it with 2 textarea inputs :
<div class="form-row mb-3 {{ in_array('description', $errorFieldsArray) ? 'validation_error' : '' }}">
<label class="col-xs-12 col-sm-4 col-form-label">Description</label>
<div class="col-xs-12 col-sm-8">
<span style="display: inline;">
{{ Form::textarea('description', isset($vote->description) ? $vote->description : '', [ "class"=>"form-control editable_field textarea_input ", "rows"=>"0", "cols"=> 120, "id"=>"description", "autocomplete"=>"off", "style"=>"width:0; height:0" ] ) }}
</span>
{{ Form::textarea('description_container', isset($vote->description) ? $vote->description : '', [ "class"=>"form-control editable_field textarea_input ", "rows"=>"5", "cols"=> 120, "id"=>"description_container", "autocomplete"=>"off" ] ) }}
</div>
</div>
where 1st textarea is for form submitting, as entered content is copied into it from 2nd textarea, which is used as
tinyMCE editor.
In tinyMCE definition I added rows:
setup: function (editor) {
editor.on('change', function () {
var current_context= tinymce.get(by_selector_container).getContent()
$('#' + by_selector).html( current_context );
});
},
where by_selector_container and by_selector are names of these textarea inputs. It works, but the only problem that on page I can see 1st textarea input,
despite I try to hide it setting wight/height in 0 in style of my code above, but anyway I still see small textarea input : https://imgur.com/a/43FRFJU
I tried in declaration of the 1st textarea input to set
"style"=>"display:none"
Than textarea input was hidden but validation does not work at all.
How to hide it this small textarea input with validation working?
Thanks!
You can try style:
visibility: hidden ;
I would like to display text area resource field content always without showing option "Show Content" or display it by default.
Is it possible?
As of v1.1.4
There is now an option to always show.
Textarea::make('Title')->alwaysShow()
As of v1.0.19
You cannot. If you take a look at the TextareaField.vue (nova/resources/js/components/Detail/TextareaField.vue):
<template>
<panel-item :field="field">
<template slot="value">
<excerpt :content="field.value" />
</template>
</panel-item>
</template>
Then if you take a look at Excerpt.vue (nova/resources/js/components/Excerpt.vue):
<div v-if="hasContent">
<div v-if="expanded" class="markdown leading-normal" v-html="content" />
<a
#click="toggle"
class="cursor-pointer dim inline-block text-primary font-bold"
:class="{ 'mt-6': expanded }"
aria-role="button"
>
{{ showHideLabel }}
</a>
</div>
And the props of the vue:
props: {
content: {
type: String,
},
},
data: () => ({ expanded: false }),
There's no option to pass the expanded attribute.
I have a KendoUI grid that is defined in my code using the Knockout-Kendo plugin as follow. It is important to note that this grids number of columns changes depending on the json received from the server.
<script type="text/html" id="grid">
<div class="grid-input input" data-bind="kendoGrid:
{
data: RowList,
columns: ko.toJS(GridHeader.ColumnDefinitionList),
rowTemplate: 'kendoui-grid-row',
altRowTemplate: 'kendoui-alt-grid-row',
useKOTemplates: true,
scrollable: false,
pageable: { pageSize: 10 },
sortable: true
}"></div>
</script>
<script type="text/html" id="kendoui-grid-row">
<tr data-bind="visible: IsDeleted() == false, template: { name: 'grid-row' }"></tr>
</script>
<script type="text/html" id="kendoui-alt-grid-row">
<tr data-bind="visible: IsDeleted() == false, template: { name: 'grid-row' }" class="k-alt"></tr>
</script>
<script type="text/html" id="grid-row">
<td><div class="grid-button delete-row-button"><span class="icon-delete"></span></div></td>
<!-- ko foreach: CellList -->
<td data-bind="template: { name: Input.Type, data: Input }">
</td>
<!-- /ko -->
</script>
<script type="text/html" id="text">
<input class="text-input input k-textbox" data-bind="value: Value" />
</script>
In this case, I have a grid filled with text boxes (in each cells of the grid, there is an input of type text). Now my problem is that sorting by clicking the grid headers does nothing even if there is texts in the inputs. What I would like to do is be able to define the target of the sorting. In this case it would be the value of the input inside the grid cells.
I've ran into a similar problem a while ago. The problem was that the Kendo Grid doesn't work well with ko observables. As a workaround you can create a computed which returns the data as a plain JS object:
this.RowList.asJS = ko.computed(function() {
return ko.toJS(this.RowList());
}, this);
Then change data: RowList with the following:
data: RowList.asJS
This however means you lose the observables in your row templates. A workaround for this is to get the original object again inside your row.
First create a helper function to quickly get an item by ID (assuming you have an Id property):
this.RowList.getById = function(id) {
return ko.utils.arrayFirst(this.RowList(), function(row) {
return ko.unwrap(row.Id) === id;
});
}, this);
Now you can call getById inside your row templates:
<script type="text/html" id="kendoui-grid-row">
<!-- ko with: $root.RowList.getById(Id) -->
<tr data-bind="visible: IsDeleted() == false, template: { name: 'grid-row' }"></tr>
<!-- /ko -->
</script>
I have added columns in the kendo ui grid dynamically.
I have a column named 'Formatted' with the data displayed in the below format.
<div class="class1"> <div>This is <strong>bold </strong>text.</div> <div> </div> <div>This is <em>italics</em> text.</div> <div> </div> <div>This is a hyperlink.</div> <div> </div> <div>Bulleted list:</div> <ul> <li>Bullet #1</li> <li>Bullet #2</li> <li>Bullet #3</li></ul></div>
I want the 'Formatted' column to display the data as below.
This is bold text.
This is italics text.
This is a hyperlink.
Bulleted list:
Bullet #1
Bullet #2
Bullet #3
How can I do this.
Please anyone can help me on this.
You should define a column template.
Example:
<script id="ob-template" type="text/x-kendo-template">
<div class="class1">
<div>This is <strong>bold </strong>text.</div>
<div> </div>
<div>This is <em>italics</em> text.</div>
<div> </div>
<div>This is a hyperlink.</div>
<div> </div>
<div>Bulleted list:</div>
<ul>
<li>Bullet #1</li>
<li>Bullet #2</li>
<li>Bullet #3</li>
</ul>
</div>
</script>
and then, when you define the columns use it:
$("#grid").kendoGrid({
dataSource: ...,
columns: [
{ field: "...", title: "...", template: $("#ob-template").html()}
]
});
You can use template property: template: "#=rawHtmlDataVariable#" like this
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: "#=rawHtmlDataVariable#"
}],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template