I am using a template to display some button. I have written the following code :
template: kendo.template($("#edit-template").html())
And in the edit template I have written :
<script id="edit-template" type="text/x-kendo-template">
<a class="k-grid-edit" style="visibility:hidden;" id="edit">Edit</a>
</script>
Initially it will be hidden mode. On databound function, I will show or hide the button. If the permission is shown then I write
$(".k-grid-edit").show();
Whenever I am updating the grid then the edit button is disappearing again. This is because the button is in hidden state initially. After updating also I need to display that in visible mode. How can i do that.
Regards
What about transforming your template into:
<script id="edit-template" type="text/x-kendo-template">
# if (isVisible) { #
<a class="k-grid-edit">Edit</a>
# } else {#
<a class="k-grid-edit" style="display:none">Edit</a>
# } #
</script>
and then have a variable:
var isVisible = false;
Then toggling it to visible is:
isVisible = true;
$(".k-grid-edit").show();
while hiding it is:
isVisible = false;
$(".k-grid-edit").hide();
Basically the variable isVisible stores the state and the template checks it using JavaScript.
NOTE The template might be more compact but I think this is more readable.
One more question (styling) I removed the id from the anchor a in your template since id must be unique and you were setting the same id for all kendoGrid rows.
Related
The only relevant thing I have is the "toggle" event, but nothing related to just add a class when I trigger an event in AMP.
I have a form to submit, and I want to add a class to a father element to change the color of the background so that I can show a different "look" for the success than the form.
How to do that?
<amp-state id="className">
<script type="application/json">
{
"changeClass": ""
}
</script>
</amp-state>
<p
class="beforeclick"
[class]="className.changeClass == 'newClass' ? 'afterclick' : 'beforeclick'
">Hello World
</p>
<button on="tap:AMP.setState({className:{changeClass: 'newClass'})">Click</button>
When u click to the button it will look for the changeClass varibale to ClassName state and assign the newClass value to it .
And that value will assign to dynamic [class] and change the class value to new value.
it is pretty simple.
I have a kendo ui listview with a template the conditionally hides elements based on the underlying data. An example would be as follows:
<script type="text/x-kendo-template" id="template">
<div class="product">
<img src="../content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
<h3>#:ProductName#</h3>
<p>#:kendo.toString(UnitPrice, "c")#</p>
<div>
# if (Discontinued) { #
Discontinued Product
# } #
</div>
</div>
</script>
If i modify the underlying dataSource items to set Discontinued with the following code:
data[index].set('Discontinued', true);
If the index is the currently selected item then that item looses focus and is no longer selected.
Please see the following dojo example http://dojo.telerik.com/UlOze, select an item from the list and then set it to discontinued.
Has anybody found a solution / workaround for this issue ?
Thanks.
------------- FINAL SOLUTION --------------
Following on from dimodi's answer below I pieced together the solution.. For this to work the dataSource must have the schema -> model -> id property set.
1st capture the currently selected data item:
var selectedItem = $(listElement).find(".k-state-selected");
var selectedDataItem = list.dataItem(selectedItem);
2nd: After calling .set re-find the data item and set the k-state-selected class. This is nessesary as the list component is regenerating the uid's.
if (selectedDataItem) {
var newSelectedItem = list.dataSource.get(selectedDataItem.ProductID)
var uid = newSelectedItem.uid;
jQuery("[data-uid='" + uid + "']").addClass("k-state-selected");
}
I've updated the original dojo to show this solution, incase it helps someone else.
When a data item is changed, its corresponding ListView item is re-rendered to apply the changes. As a result, the selection is lost, as it is a purely visual feature that is not persisted across rebinds. You can check if an item is selected before using set() and then restore the selection manually by applying a k-state-selected class to the element afterwards.
Is there any way to know that view is open by back?
For example
<div data-role="view" id="view-test" data-show="show">
<!-- View content -->
</div>
<script>
var show = function(e){
if(e.view.isBack())
{
console.log("Back")
// do something
}
}
</script>
Is there any method or property like e.view.isBack() ?
There are many ways to handle this, maybe you can use a global variable where you keep the last visited page or even you can add a back button handler and get the view from which the back button was pressed. Another solution would be to pass a parameter along with page navigation when going back, for example:
<a data-role="button" href="#foo?back=true">Link to FOO with back parameter set to true</a>
And on the visited page on show event you can get the parameter like this:
function fooShow(e) {
e.view.params // {back: "true"}
}
Now depending on what the parameter value is you can detect if the back button was pressed or not before reaching the page.
I really need some support regarding magento:
on this page: https://goo.gl/wTeUtG
If the option changed out of the dropdown, like from 150 Gramm to 200 Gramm, the ingredients (on this page as "Zutaten") also should be updated. But only the price is going to change not the text right into tooltip on "Zutaten".
How or where can I do this?
That's what I have tried so far:
I've created a new attribute and put it into the checkbox.phtml. This is the code for it:
<p>
<label>Zutaten:</label>
<a class="tooltips" href="#">
<img src="https://shop.ellyseidl.de/skin/frontend/base/default/pektsekye/optionbundle/info_icon.gif" width="11px" height="11px" />
<span><strong>Zutaten:</strong>
<?php echo Mage::getModel('catalog/product')->load($_selection->getId())->getData('zutaten'); ?>
</span>
</a>
</p>
But it doesn't change the tooltip once a option is selected
I guess you will have to do it manually with jQuery since you are using it on your page, by adding event on change on the select box with the id="attribute154" or the class="super-attribute-select".
You will have to change the text in the tooltip according to the option being selected.
EDIT:
jQuery('#attribute154').on('change', function() {
var selectedVal = jQuery(this).val();
//If you want to change the tooltip according to the selected text this is how you can get it:
var selectedText = jQuery(this).find("option:selected").text();
if (selectedVal != '') {
var ingredientsText = '';
if (selectedText == '150 Gramm') {
ingredientsText = 'Ingredients for 150 Gramm';
} else if (selectedText == '200 Gramm') {
ingredientsText = 'Ingredients for 200 Gramm';
}
//And so on
jQuery('.tooltips').find('span:first').html('Zutaten:'+' Folgen in Kürze: '+ingredientsText);
} else {
jQuery('.tooltips').find('span:first').html('Zutaten:'+' Folgen in Kürze: ');
}
});
Please have in mind that you must change the text the way you need it. I still don't know what you have to add in the tooltip, but I just tested this on your site and it works. According to the text Folgen in Kürze which means coming soon, not sure what is the text you need to update.
EDIT2:
The ingredientsText var will depend on the quantity of Gramm selected, if they are static you can enter them in the code by yourself, if they are dynamic, you will have to add them somewhere in the HTML in a hidden <div> for example and then fetch them with JS from there.
I am opening an MVC view in magnific
I need to show a title (caption) below the modal
But caption is only for image type but I am using Ajax type.
I have set the title attribute on both the hyperlink that I click to open the modal and the root element of the view.
But it never shows up.
How do I do display the title (fixed or dynamic from a grid)? I wonder why author forgot to add this feature?
hyperlink:
<a class="edit-list" title="Edit List!" href="/manage/editlist/100">Edit</a>
Root element of the target page:
<form id="ListEditForm" class="white-popup" title="Edit List" action="/manage/EditList/100">
..fields go here
</form>
I followed this post, but he has markup, I don't:
http://codepen.io/dimsemenov/pen/zjtbr
Initialization:
$('.edit-list').magnificPopup({
type: 'ajax',
midClick: true,
callbacks: {
markupParse: function (template, values, item) {
values.title = item.el.attr('title');
}
}
});
This has been solved. I need to put the right container in the right place to render the title. The plugin won't drop any element to show the title.