Kendo Grid Multiple Hyperlinks in single column - kendo-ui

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.

Related

How to insert dynamic value on url cypress

Hi there I am new to cypress and learning,
My data is dynamic and changes every second. Imagine a table with Column city and city incharge. The city incharge is dynamic and changes every minute.
This is clickable and holds a link. This particular part changes more frequently and I want to check if the href holds correct value.
<a href="/City/incharge/Mr.A" data-toggle="tooltip" title="" data-original-title="Mr.A">
</a>
I tried to store the value in a variable but then not sure how to add it to the url to see if it is correct.
For example I tried code in cypress like this,
it('Check click function on Transactionhash', () => {
cy.get('td').eq(1).then(($incharge) => {
var name = $incharge.text(); // Storing the dynamic value to a variable
cy.get('td').eq(1).click()
cy.url().should('eq','https://worldmap.com/city/'name')
});
This 'name' part on the above url should have the dynamic value. In our case Mr.A which might change in future to anything.
Can somebody please help?
Thanks.
Looking at your sample it should be something like this:
it('Check click function on Transactionhash', () => {
let name = ''
cy.get('td').eq(1)
.then(incharge => {
name = incharge.text()
cy.get('td')
.eq(1)
.click()
cy.url()
.should('eq',`https://worldmap.com/city/${name}`)
})
})
Note the usage of backticks (`) in the should() function

External Template for Column ClientTemplate

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.

Using KendoUI DetailTemplate- How do I use literal for AJAX results

Using the DetailTemplate grid example for KendoUI as my basepoint
http://demos.kendoui.com/web/grid/detailtemplate.html
I am trying to add a HREF link to the Orders tab that would open up another page.
I have tried using the #= OrderId # notation, but this seems to only access the first AJAX call result set - that is the data returned pulling back the users information.
I want to be able to access the information pulled back for the orders - see code snippet below
I have tried using the ClientTemplate method but to no avail, as it can't access (or it doesn't exist) the #= OrderId # literal.
I am using AJAX to pull the info for both sets of data, so don't seem able to use the Template method.
Any advice on accessing this level of JSON data returned as a secondary call would be greatly appreciated.
<script id="employeesTemplate" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("TabStrip_#=EmployeeID#")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("Orders").Content(#<text>
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("Orders_#=EmployeeID#")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(101);
columns.Bound(o => o.ShipCountry).Width(140);
columns.Bound(o => o.ShipAddress).Width(200);
columns.Bound(o => o.ShipName).Width(200);
Thanks in advance
Andrew
.ClientTemplate("\\#:OrderId \\#");
Notice double back slashes.

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>

Ember.js: How do I access a specific item in a CollectionView?

First off I want to say that I really like ember.js. I have tried both Knockout and Angular but found them a bit to obtrusive and everything had to be done their way. I feel like ember allows me a bit more freedom to structure things how you see fit. With that said I have a couple of questions.
1. I would like to do something like the following which obviously doesn't work:
<h3>{{ content.name }}</h3>
Instead I would have to create a binding:
<a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a>
How do i create the url path in the view? I could easily create a computed property called url on the model but that feels horrible and not very MVC. Do I have to create a new view for the element or register a helper which feels a bit cumbersome?
Here's the complete code:
App = Ember.Application.create();
var sampleData = [ Ember.Object.create({ id: '123456789', name: 'John' }), Ember.Object.create({ id: '987654321', name: 'Anne' }) ]
App.itemController = Ember.ArrayController.create({
content: sampleData,
removeItem: function(item) {
this.content.removeObject(item);
}
});
App.ItemListView = Ember.View.extend({
itemDetailView: Ember.CollectionView.extend({
contentBinding: 'App.itemController',
itemViewClass: Ember.View.extend({
tagName: 'li',
url: '' // HOW TO GET '/item/123456789'
deleteButton: Ember.Button.extend({
click: function(event) {
var item = this.get('content');
App.itemController.removeItem(item);
}
})
})
})
});
<script type="text/x-handlebars">
{{#view App.ItemListView}}
<ul id="item-list">
{{#collection itemDetailView}}
<div class="item">
<a {{ bindAttr href="url" }}><h3>{{ content.name }}</h3></a>
{{#view deleteButton class="btn" contentBinding="content"}}Delete{{/view}}
</div>
{{/collection}}
</ul>
{{/view}}
</script>
2. I feel that the view "owns" the controller and not the other way around. Shouldn't the view be unaware of which controller it is hooked up to so you can reuse the view? I'm thinking about these to lines in the view:
contentBinding: 'App.itemController',
and
App.itemController.removeItem(item);
How do you structure this?
3. I realize everything is a work in progress and quite new with the name change and all but the documentation is quite unclear. The examples use the old namespace SC and there are lot of things missing on emberjs.com compared to the Sproutcore 2.0 guides, for example collections, arraycontrollers. I read somewhere here that collections will be phased out. Is that true and should I use #each instead?
Thanks for your help and for an awesome framework!
1.) If you want to use <a href="...">, you will need a computed property. It could be on your model or on a view. Another technique would be to use Ember.Button: {{#view Ember.Button tagName="a" target="..." action="..."}}...{{/view}}
2.) Typically you'll want to declare your controller binding in the template, rather than in the view. For example: {{#view App.ItemListView contentBinding="App.itemController"}}
3.) The #collection helper will likely be deprecated, so you should probably use an #each instead.

Resources