External Template for Column ClientTemplate - kendo-ui

I have an issue on having an external template inside Column ClientTemplate
.Columns(col =>
{
col.Bound(c => c.ID);
col.Bound(c => c.Name).Width(100);
col.Bound(c => c.StatusID)
.Title("Action")
.ClientTemplate("#=_actionTemplate(data)#")
.Width(100);
})
<script id="tmplAction" type="text/x-kendo-template">
#(Html.Kendo().Button().Name("btnTest_#=ID#")
.Content("Test")
.ToClientTemplate())
</script>
<script>
var _actionTemplate = kendo.template($('#tmplAction').html());
</script>
Even though it is called and rendered inside the grid column, kendo script is not executed therefore the only rendered element is a basic Button and not Kendo Button
Any help would be appreciated

Copied from your code :
.ClientTemplate("#= fnactionTemplate(data)#")
And declare that function like:
function fnactionTemplate(data){
// External logic goes here....
return $('#tmplAction').html();
}
Hope it will work.

Related

Call view in Laravel Controller with anchor tag

I need to call a view in a Laravel Controller, with parameters and with Anchor Tag.
I have this code in my controller:
return view('plans/editPlanView',
['plan' => $plan,
'patient' => $patient,
'aliments'=>$aliments, 'menu'=>$menu, 'tabName'=>$tabName]);
But i need to add an Anchor tag to land in a specific section of the page.
I can't use
return Redirect::to(URL::previous() . "#whatever");
proposed in other posts because i need to pass some parameters.
I think there are some base problem, trying with console this:
$('html, body').animate({
scrollTop: $('#whatever').offset().top
}, 1000);
scrolling to the desired section does not work.
it seems the page makes a small snap but always returns to the top.
Update
I have found the cause of the problem. At the bottom of the blade page I have the following code, without it the anchor tag works fine. Adding it the page makes a small scroll to return to the head. I need to use the datepicker, how can I fix the problem and get the anchor tag to work?
#push('scripts')
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker({
firstDayOfWeek: 1,
weekDayFormat: 'narrow',
inputFormat: 'd/M/y',
outputFormat: 'd/M/y',
markup: 'bootstrap4',
theme: 'bootstrap',
modal: false
});
});
</script>
#endpush
You can create the method showPage() in your contoller for example TestController
public function showPage(Request $request)
{
$plan = $request->plan;
...
return view('plans/editPlanView', [
'plan' => $plan,
'patient' => $patient,
'aliments'=>$aliments, 'menu'=>$menu, 'tabName'=>$tabName
]);
}
Then create a route for rendering that view
Route::get('/someurl', 'TestController#showPage')->name('show-page');
And then in your methods you can use something like that:
$url = URL::route('show-page', ['#whatever']);
return Redirect::to($url)
I found a workaround, I added the disable attribute to the date input, in doing so, when the datepicker is initialized, the page does not scroll up. Then, as a last javascript statement I re-enabled the fields:
$('.date').prop("disabled", false);

CkEditor5 insertContent Function not working

I am trying to use insertContent method but getting some error.
Here is my implementation
<div id="editor">
<p>This is the editor content.</p>
</div>
<button onclick="update()">update</button>
<script src="./node_modules/#ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
<script>
var editorInstance;
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
editorInstance = editor;
})
.catch(error => {
console.error(error);
});
function update() {
editorInstance.model.insertContent("<p><b>Test</b> Content</p>")
}
</script>
update method should update the editor source with given content, but I am getting an error
Error on the console:
Uncaught TypeError: e.is is not a function
at xc.Nm (converters.js:777)
at xc.fire (emittermixin.js:209)
at xc. [as insertContent] (observablemixin.js:259)
at update (ck5.html:19)
at HTMLButtonElement.onclick (ck5.html:4)
Can anyone please help in sorting out this issue?
This error appears to be caused by trying to use the insertContent method to insert HTML - this method seems to expect a plain text string by default, although we can make it accept HTML with a few extra steps.
First of all, you'll need to grab the HTML Data Processor:
const htmlDP = editorInstance.data.processor;
Next you need to convert your HTML string into a viewFragment using the HTML Data Processor that we just obtained:
const viewFragment = htmlDP.toView("<p><b>Test</b> Content</p>");
Last of all, we need to convert the viewFragment to a modelFragment:
const modelFragment = editorInstance.data.toModel( viewFragment );
Now we can pass the modelFragment to the insertContent method:
editorInstance.model.insertContent(modelFragment);
This should remove the error and allow the mark-up string to be inserted into the editor

Kendo Grid Multiple Hyperlinks in single column

I am using following code to display data from server in a Kendo Grid.
Working fine.
I want to put two hyperlinks in last cell of each row, but can do with only one.
I want EDIT and DELETE link in same cell.
How can I achieve this?
CODE
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(u => u.USERNAME);
columns.Bound(u => u.PASSWORD);
columns.Bound(u => u.ROLE);
columns.Bound(u => u.STATUS);
columns.Template(c => Html.ActionLink("Edit", "Edit", new { id = c.ID }));
}
)
.Pageable()
)
There are a couple of ways to do this.
First you could use the inbuilt edit/delete options from within the grid config
like so:
columns.Command(command =>
{
command.Edit();
command.Destroy();
});
Then just wire up the edit config and destroy delete commands appropriately.
Alternatively you can template these out using one of two methods:
First inline template:
columns.Bound(c => c.ID).ClientTemplate("<a href='Edit/#=data.ID#'>Edit Link #=data.ID#</a>
<a href='Delete/#=data.ID#'>Delete Link #=data.ID#</a>")
So this is just bound to a column and the template is added as per your requirements using standard html and javascript if required. This is fine for simple things but can get very clunky fast if you have more complex templates which then leads to the second method creating a template and calling that like this:
columns.Bound(c => c.ID).ClientTemplate("#=getButtonTemplate(data,'buttonsTemplate')#")
then create your template like so:
<script id="buttonsTemplate" type="text/x-kendo-template">
<div class='btn-group'>
<a class="btn btn-primary" href='#Url.Action("{edit action}", "controller")/#=ID#'>Edit Link #=ID#</a>
<a class="btn btn-danger" href='#Url.Action("{delete action}", "controller")/#=ID#'>Delete Link #=ID#</a>
<div>
</script>
then the getButtonTemplate function:
function getButtonTemplate(data, templateName) {
var templateObj = $("#" + templateName).html();
var template = kendo.template(templateObj);
return template(data);
}
So let me explain what is going on here with this second method.
Instead of templating the html in the column we extract it out into two components for want of a better word.
We use the getButtonTemplate function to pass 2 params in the data item and the template's id. This function simply loads the passed data object into the template and the kendo magic renders the html and injects the values in as required. Check the kendo demo site for more info on this subject.
The template element can be a mix of html and javascript so if you needed to apply some logic in the template this can be done in here. Again refer to the kendo site for more info on this subject.
I personally prefer the second method of doing this client templating as it is easier to manage and make changes without rogue hash's or brackets breaking code.
If you need any more info let me know and I will update the answer for you.

Kendo UI datetimepicker error

I've got a Kendo Ui datetimepicker. But when I choose time or date, there is an error "Cannot call method 'attr' of undefined", that appears in kendo.all.min.js. What might be the issue?
Honestly, i've got Kendo Scheduler. But when i try to create an event, there are datetimepickers, and when i choose date or time i've got such kind of error.
Here's my code:
#{
var culture = System.Threading.Thread.CurrentThread.CurrentCulture.ToString();
}
<script src="#Url.Content("~/Scripts/kendo/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/kendo.aspnetmvc.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/cultures/kendo.culture." + culture + ".min.js")"></script>
<script>
kendo.culture("#culture");
</script>
#using Kendo.Mvc.UI
#(Html.Kendo().Scheduler<TaskViewModel>()
.Name("scheduler")
.Date(DateTime.UtcNow)
.StartTime(DateTime.UtcNow)
.Height(600)
.Width(1000)
.Timezone("Etc/UTC")
.Views(views =>
{
views.DayView();
views.WeekView(weekView => weekView.Selected(true));
views.MonthView();
views.AgendaView();
})
.DataSource(d => d
.Model(m => {
m.Id(f => f.TaskID);
})
.Read("Read", "TaskManager")
.Create("Create", "TaskManager")
.Destroy("Destroy", "TaskManager")
.Update("Update", "TaskManager")
)
)
i'm using ru-Ru culture.
Does your declaration/include of scripts looks something like this:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
...
JQuery should be declared first and along with your Kendo scripts.
The second posible cause is your JQuery selector. Try something simple and setting both name and id attributes like:
$("#ctrl")

Load drupal view into right margin with ajax

I'm using Drupal 6 and have created 2 equal columns in layout.css
In the left column I have a view with a list of nodes.
Each node has an attached view with a list of it's child nodes (using views attach and a node reference argument).
I would like to be able to click a link on each of these left column nodes and bring up it's child view in the right column using ajax.
I've tried placing jquery/javascript in the head of the node-xxx.tpl.php calling the viewsattach via an external page named ajaxview.php ie:
<script type="text/javascript">
Drupal.behaviors.ajaxview = function(context) {
$("#ajaxclick").click(function(){
$("#container").load("http://path/to/ajaxview.php
});
}
</script>
<a id="ajaxclick" href= "#">Click me</a>
<div id="container"></div>
And in ajaxview.php :
<div id="rightcolumn"><?php print $node->content[Comments_node_content_1]['#value'];?></div>
I get nothing but a blank page...
How can I get a child view to appear in the right column whenever a node in the left column is clicked?
Is there a better way?
Your ajaxview.php file is not in the same context as your code in node-xxx.tpl.php and that means that it does not have access to $node variable. Your ajaxview.php file is executed as a new script, probably outside Drupal if you really named it ajaxview.php.
You should consider creating a path in your menu hook and call that path with ajax in your node-xxx.tpl.php.
<?php
function test_menu() {
$items = array();
$items['myajax'] = array(
'title' => 'My Ajax',
'page callback' => 'test_myajax',
'description' => 'Test',
'access arguments' => array('access content'),
'type' => MENU_CALLBACK,
);
return $items;
}
function test_myajax($nid) {
$node = node_load($nid);
print '<div id="rightcolumn">';
print $node->content['Comments_node_content_1']['#value'];
print '</div>';
exit();
}
This code will create a new path "myajax" (which you should rename to something more meaningfuyl to you) which should be called with a node id like this:
http://yoursite/myajax/999
where 999 is the node id.
This means that in your code that calls the ajax, you should pass the nid of the current node being viewed. There are different ways of doing this, depends on your context.
Here is a sample javascript that works with the code above (I tested it local).
<script type="text/javascript">
Drupal.behaviors.ajaxview = function(context) {
$("#ajaxclick").click(function(){
$("#container-test").load(Drupal.settings.basePath + "myajax/" + 999);
});
}
</script>
<a id="ajaxclick" href= "#">Click me</a>
<div id="container-test"></div>

Resources