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.
Related
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.
This may not be possible with blade, but I was wondering how to generate a textbox input from an 'other' option in a select dropdown. Is this possible?
{{ Form::select('showType', array(
'Theater' => 'Theater',
'Club' => 'Club',
'Festival' => 'Festival',
'Arena' => 'Arena',
'Closed Show' => 'Closed Show',
'College Show' => 'College Show'
'Other' => 'some kind of text input appears instead'
)}}
You'll need to use javascript to do that, Blade can't help much. But you can create, in Blade, your form input and set a hidden class to it and, when your user select the 'other' option you just have to remove that class.
You need to use JavaScript to do this because it happens on the client side. PHP and Laravel and Blade all happens on the server. An simple jQuery example:
$('select').on('change', function(){
$('body').append("<input type='text' value='whatever'/>");
});
I think CakePHPs JsHelper is pretty neat to use for AJAX form submissions. Normally you just set the DOM element to update with the new content and the JsHelper takes care of the rest. A normal submit button could look like:
echo $this->Js->submit('Submit', array(
'update' => '#a-div',
'url' => 'some-url'
);
Now, I want to update 2 or 3 different DOM elements and my AJAX response type will be JSON with 2 or 3 key pairs. So to my question.
How can I capture the JSON response data and pass THAT DATA to an independent callback function that I have written myself where I can parse the response and update the relevant DOM elements with the value pairs? What is the correct syntax for that? I realise I could probably skip using the JsHelper and create my own submission, but I don't want to do that in this instance.
I found the right answer:
echo $this->Js->submit(
'Lägg en i varukorgen',
array(
'url' => array('controller' => 'products', 'action' => 'ajax_basket'),
'id' => 'basket-add-submit',
'success' => 'myFunction(data);',
)
);
At the success callback, data holds the JSON being returned.
Forget the JsHelper and write jquery code yourself.
The following code is working fine in development, as soon as i deploy in web server it said could find file directory. I need to change the .client template so its not hard coded like before. So if we deploy to the server where the Top folder name different or the hierarchy change, it still find the page.
I was thinking using #Url.Action but not sure how in this case to implement in .CLientTemplate
columns.Template(#<text>
#Html.ActionLink(#item.FirstName, "Index", "Summary", new { testId = #item.FirstName })
</text>)
.ClientTemplate("<a href='/Summary/Index/?testId =#= TestId #'>#=FirstName#</a>").Title("First Name");
Something like this should do:
.ClientTemplate("<a href='" + Url.Action("Index", "Summary", new { testId = "#=TestId#" }) + "'>#=FirstName#</a>")
I got this one working fine
columns.Bound(a => a.Id)
.Title("Action")
.Filterable(false)
.ClientTemplate(
"<a href='"
+ Url.Action("ActionName", "Controller")
+ "/#= Id #'"
+ ">View</a>"
);
I needed an extra column and a link button field for go to details page of a customer. I don't need filter option for this column and that is why I remove it using Filterable(false). Also you can give the link content and column header as above. This value "/#= Id #'" is the one I pass to the controller action method.
In case you're using server-binding (as opposed to ajax) and Razor as your view-engine, here is an example. I need a link such as /Controller/Action/Id where Id is obtained from a property of the model. Please note that #item denotes the model instance being currently processed by the grid.
columns.Template(#<text>#Html.ActionLink(AbaScore.Resources.App.Edit,"ACTION", "CONTROLLER", new { #item.Id }, null)</text>)
I've seen 87 different examples of this and none of them worked. This is what I finally did and it worked, and it's simple as heck.
columns.Bound(p => p.member_id)
.ClientTemplate("<a href='/members/details/#=member_id#'>Details</a>")
;
I am using cakephp and pippoacl plugin and I simply cannot add a new role. What I modify in the plugin is to make the submit using ajax, something like this in my view (add.ctp):
<?php echo $ajax->submit(
'submit',
array(
'url' => array('controller' => 'roles', 'action' => 'add'),
'before' => 'beforeSubmitAdd();',
'complete' => 'completeSubmitAdd(request);'
)
);
?>
When the add.ctp gets loaded for the first time, I can print_r something from the controller. But the ajax submit above only executes the javascript on 'before' and 'complete'. I check on the firebug, the response is blank.
On my controller:
function add() {
print_r("start");
if (!empty($this->data)) {
print_r("add new role");
// save new role
}
}
I use ajax submit for user and I don't have any problem adding new user. Is there any idea where I should check? I have been comparing the user and role code for a week and I have asked a friend to look at my code, too, but we still cannot find what causes this.
Thanks in advance! :D
I am not so familiar with the Ajax helper, but I haven't using it from so long that I can't remember what is it doing :).
Back to the problem.
Did you check if the requested URL in the Ajax address is correct? This should work straightforward, but it's possible that the url to be invalid.
Are you using Security component (even just adding it on the var $components variable)?. This could lead to blank screen especially if you modifying the fields in the form somehow. Try to remove it and see if it's working without.
Finally I would say how I would do it with jQuery.
Following code should do the job:
$(document).ready(function(){
$('form').live('submit', function(){ //handles also dynamically loaded forms
var form = $(this).addClass('loading'); //indicate somehow that the form has been submitted
$('#content').load($(this).attr('action'), $(this).serialize(), function(){
form.removeClass('loading');
});
})
});
This will handle all submits in the forms of the system, but you can modify of course.