{
field: "Id",
title: "#T("Admin.Common.Download")",
width: 100,
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" },
template: '<a class="btn btn-default" href="DownloadPdf/?downloadGuid=#=downloadGuid#" title="Download" ><i class="fa fa-download" aria-hidden="true"></i></a>'
}
in template section I need if downloadGuid is not empty then Download icon will show otherwise not.
If we want to add If else condition in kendo grid we want to add # before and after condition.
template: '#if (downloadGuid!=null) { #<a class="btn btn-default" href="DownloadPdf/?downloadGuid=#=downloadGuid#" title="Download" ><i class="fa fa-download" aria-hidden="true"></i></a> # }#'
Related
I want to load every year's data in jqgrid when I click on a button and after loading a modal form and selecting the year from drop down list. a diagram of the steps
but i don't know how to do this.
And this is my source code :
<!-- Page content -->
<div class="w3-content" style="max-width: 100%">
<div class="container" style="width:40%;margin-top:2%">
Filter
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
×
</div>
<div class="modal-body">
<form id="myForm" dir="rtl">
<div class="form-group">
<label>Year</label>
#Html.DropDownListFor(model => model.YEAR_ABBR, ViewBag.YearList as MultiSelectList, "--select--", new { #class = "form-control", #id = "ddlYear", multiple = "multiple" })
</div>
</form>
</div>
<div class="modal-footer">
Cancel
<input type="reset" value="GetRep" class="btn btn-success" id="btnSubmit" />
</div> </div>
</div> </div> </div>
<div dir="rtl" align="center" style="overflow:auto" class="tablecontainer">
<div id="rsperror"></div>
<table id="list" cellpadding="0" cellspacing="0"></table>
<div id="pager" style="text-align:center;"></div>
</div>
Now my script is something like this:
<script type="text/javascript">
$(document).ready(function () {
bindData();
$("#btnSubmit").click(function () {
$('#list').trigger('reloadGrid'); })
});
var bindData = function () {
$('#list').jqGrid({
url: '#Url.Action("Get_RepContracts","Home")',
postData: { YEAR_ABBR: function () { return $('#YEAR_ABBR').val(); } },
datatype: 'json',
jsonReader: {
root: "Rows",
page: "Page",
},
mtype: 'GET',
//columns names
colNames: ['Vahed_Descript' ],
colModel: [
{ name: 'Vahed_Descript', index: 'Vahed_Descript', align: 'right', width: 200, sorttype: "number", }
],
pager: $('#pager'),
rowNum: 800,
rowList: [ 800 ,1000],
sortname: 'Vahed_Descript',
hidegrid: false,
direction: "rtl",
gridview: true,
rownumbers: true,
footerrow: true,
userDataOnFooter: true,
loadComplete: function () {
calculateTotal();
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
loadError: function (xhr, st, err) {
jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
} , loadonce: true
}) ;
And here the button code ( My modal form works well. when I click the filter button, the filter options in my modal form appear, and then I select the year from year dropdownlist in modal and then i click the report button, after that the below code fires and I can see the selected year's data in action "Get_RepContracts" but it does not bind to my jqgrid):
Thanks in Advance...
UPDATE : Now My code is like below :
$(document).ready(function () {
bindData();
$("#btnSubmit").click(function () {
var myPostData = $('#list').jqGrid("getGridParam", "postData");
$('#list').trigger('reloadGrid');
$("#myModal").modal("hide");
}) });
var bindData = function () {
$('#list').jqGrid({
url: '#Url.Action("Get_RepContracts","Home")',
postData: {
YEAR_ABBR : function () { return $("#YEAR_ABBR").val();},
} ,
datatype: 'json',
jsonReader: { ........
It seems to me that you have small problem with the usage of correct id of select element. Your HTML code contains #id = "ddlYear" parameter of #Html.DropDownListFor:
#Html.DropDownListFor(
model => model.YEAR_ABBR,
ViewBag.YearList as MultiSelectList,
"--select--",
new {
#class = "form-control",
#id = "ddlYear",
multiple = "multiple"
}
)
but you still use
postData: {
YEAR_ABBR: function () { return $("#YEAR_ABBR").val(); }
}
To solve the problem you should just modify the code to
postData: {
YEAR_ABBR: function () { return $("#ddlYear").val(); }
}
I'm using ant design table component. I have "actions" column that I don't want the onRowClick event will trigger in this column.
How can it be done?
http://codepen.io/liron_e/pen/zZjVKZ?editors=001
const { Table, Modal } = antd;
const confirm = (id) => {
Modal.confirm({
title: 'Confirm',
content: 'Bla bla ...',
okText: 'OK',
cancelText: 'Cancel',
});
};
const info = (id) => {
Modal.info({
title: 'Info',
content: 'Bla bla ...',
okText: 'OK',
cancelText: 'Cancel',
});
};
const columns = [
{
key: 'status',
title: 'text',
dataIndex: 'text'
}, {
key: 'actions',
title: 'actions',
dataIndex: 'id',
render: (id) => {
return (
<span>
<a href="#" onClick={() => confirm(id)}>
Clone
</a>
<span className="ant-divider" />
<a href="#" onClick={() => confirm(id)}>
Replace
</a>
</span>
);
}
}
];
const dataSource = [
{
id: '1',
text: 'Hello'
},{
id: '123',
text: 'adsaddas'
},{
id: '123344',
text: 'cvbbcvb'
},{
id: '5665',
text: 'aasddasd'
},
];
ReactDOM.render(
<div>
<Table
columns={columns}
onRowClick={() => this.info()}
dataSource={dataSource}
/>
</div>
, mountNode);
As you can try when pressing on row the info modal would open.
When pressing some action the info and the confirm modals would open, and I would like that only confirm modal would open.
Thanks (:
In your render function:
render: (id) => {
return (
<span>
<a href="#" onClick={(e) => {
e.stopPropagation();
confirm(id);
}}>
Clone
</a>
<span className="ant-divider" />
<a href="#" onClick={() => confirm(id)}>
Replace
</a>
</span>
);
}
Just stop propagation in your action handler:
<span>
<a href="#" onClick={() => confirm(id)}>
Clone
</a>
<span className="ant-divider" />
<a href="#" onClick={() => confirm(id)}>
Replace
</a>
</span>
<Menu.Item onClick={(e)=>{
e.domEvent.stopPropagation();
handleUpdate(id)}}>
Edit
</Menu.Item>
Using react Link we can have a default anchor link functionality by stoping event propagation and trigger event on particular column.
"react-router": "^5.2.0",
import { Link } from "react-router-dom";
render: (value, record) => {
// Conditional checks if needs to handle on particular set of column
return (
<Link to={'TARGET_LINK_HERE'}
target="_blank" rel="noopener noreferrer"
onClick={(event) => {
event.stopPropagation(); // prevent event to propogate to parent to have row click which is default functionality
}}>{value}</Link>
)
}
I have a script which works well.
<button id="sample_editable_1_new" class="btn sbold green">
Add New
<i class="fa fa-plus"></i>
</button>
I would like to change to using the script below.
#Html.ActionLink("Add New", "Create", "Customer", null, new { #class = "btn sbold green", xxx})
How do i add the property?
You could use a CSS class to append the plus character to the link.
.plus-icon:after { content: "\f067"; font-family: 'FontAwesome'; padding-left: 5px; }
Then add the class to your action link
#Html.ActionLink("Add New", "Create", "Customer", null, new { #class = "btn sbold green plus-icon", xxx})
#Html.ActionLink generate <a> tag if you want to use button you should use either js or change your button to a tag.
It's better to generate it with #Url.Action helper if you don't want any js:
<a href='#Url.Action("Create", "Customer")'
id="sample_editable_1_new"
class="btn sbold green">
Add New
<i class="fa fa-plus"></i>
</a>
Html.ActionLink("Create New", "Create", CONTROLLERNAME, null, new { #class= "yourCSSclass"}
Html.ActionLink(link text, action name, controller name, route values object, html attributes object)
Html.ActionLink(
"Create New",
"Create",
CONTROLLERNAME,
null,
new { #class= "yourCSSclass", #style= "width:100px; color: red;" }
)
I'm building a Social Bookmarking site in Ember.js and Rails. I'm using the ember-rails gem. I am having trouble destroying bookmark records on the Ember.js side of things. I confirmed that they are being deleted on the by the server and a 200 code is returned. I have a User model that has many Topics, and Topics has many Bookmarks. Here's the strange thing: Topics are destroyed without a problem. They never reappear in the template.
However, when Bookmarks are deleted they appear to be gone; yet, when a new record is created, the bookmark reappears and is unable to be destroyed again. The bookmark that reappears goes away when the browser is refreshed.
Here's the code for my Topic template, from where the bookmarks can be deleted:
{{#each bookmark in bookmarks}}
<div class="media">
<div class="media-left">
<img class="media-object" style="width:64px; height: 64px; margin-right: 20px; border-radius: 50%;" {{bind-attr src=bookmark.image}}><br>
</div>
<div class="media-body">
<h4 class="media-heading">
<a {{bind-attr href=bookmark.url}} }}>{{ bookmark.title }}</a></h4>
{{#if bookmark.isUpdating}}
<form style="display: inline;" {{ action 'updateBookmark' bookmark bookmark.url on='submit'}}>
<small>{{input placeholder=bookmark.url value=bookmark.url}}</small>
</form>
{{else}}
<small>{{ bookmark.url }}</small>
{{/if}}<br>
{{ bookmark.description }}
<div><hr>
{{#if bookmark.likedByCurrentUser}}
<button {{action 'destroyLike' bookmark bookmark.likes controllers.current_user.currentUser }} class="btn btn-danger" type="button">
<span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> Unlike
</button>
{{else}}
<button {{action 'createLike' bookmark }} class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> Like
</button>
{{/if}}
{{#if belongsToCurrentUser}}
{{#if bookmark.isUpdating}}
<button class="btn btn-default" {{action 'updateBookmark' bookmark bookmark.url }}><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Save</button>
{{else}}
<button class="btn btn-default" {{ action 'updateBookmarkToggleOn' bookmark }}><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Update</button>
{{/if}}
<button class="btn btn-default" {{ action 'destroyBookmark' bookmark }}><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete</button>
{{/if}}
</div>
</div>
</div>
</div><br>
{{/each}}
Here's the TopicController
Blocmarks.TopicController = Ember.ObjectController.extend({
needs: ['current_user'],
bookmarks: (function() {
return Ember.ArrayProxy.createWithMixins(Ember.SortableMixin, {
sortProperties: ['title'],
content: this.get('content.bookmarks')
});
}).property('content.bookmarks'),
actions : {
destroyBookmark: function(bookmark) {
bookmark.destroyRecord();
},
createBookmark: function (topicId) {
var bookmark = this.store.createRecord('bookmark', { url: this.get('url'), topic: this.get('model') });
bookmark.save();
this.set('url', '');
},
updateBookmarkToggleOn: function(bookmark){
bookmark.set('isUpdating', true);
},
updateBookmark: function(bookmark, url){
bookmark.set('url', url);
bookmark.save();
bookmark.set('isUpdating', false);
},
destroyTopic: function(topic) {
topic.destroyRecord();
this.transitionToRoute('topics');
},
updateToggleOn: function(topic){
topic.set('isUpdating', true);
},
updateTopic: function(topic, title){
var controller = this;
topic.set('title', title);
topic.save();
topic.set('isUpdating', false);
},
createLike: function(bookmark){
controller = this;
if (bookmark.get('likedByCurrentUser') == true){
alert("Nope. You've already liked this once!");
} else {
this.store.find('bookmark', bookmark.id).then(function (bookmark) {
var like = controller.store.createRecord('like', {bookmark: bookmark, likedByCurrentUser: true});
like.save();
});
}
bookmark.set('likedByCurrentUser', true);
},
destroyLike: function(bookmark, likes, user){
this.store.find('like', {bookmark_id: bookmark.id, user_id: user.id}).then(function(likes){
likes.objectAtContent(0).destroyRecord();
});
bookmark.set('likedByCurrentUser', false);
},
sortByTitle: function(){
this.get('bookmarks').set('sortProperties', ['title']);
this.get('bookmarks').set('sortAscending', true);
$('#sort-by a').removeClass('active');
$('#sort-by-title').addClass('active');
},
sortByURL: function(){
this.get('bookmarks').set('sortProperties', ['url']);
this.get('bookmarks').set('sortAscending', true);
$('#sort-by a').removeClass('active');
$('#sort-by-url').addClass('active');
},
sortByCreated: function(){
this.get('bookmarks').set('sortProperties', ['created_at']);
this.get('bookmarks').set('sortAscending', false);
$('#sort-by a').removeClass('active');
$('#sort-by-created').addClass('active');
}
}
});
Here's the code for the TopicRoute:
Blocmarks.TopicRoute = Ember.Route.extend({
model: function(params) {
return this.get('store').find('topic', params.topic_id);
}
});
Thanks in advance for any help that is provided. Please let me know if I can provide additional information that would be helpful in solving this problem.
UPDATE: I've noticed that if I check the indexOf the destroyed item, it still exsits at -1. Is this normal? In the Ember Inspector, it shows up in the content of the array, but does not appear to be reflecting in the length of the array.
RESOLVED: My route was returning a "ManyArray"; apparently that's what was causing the problem because I changed the route to get all Bookmarks, and then filter them by topic at the controller level. This resulted in a "RecordArray" as the model for Bookmarks.
RESOLVED: My route was returning a "ManyArray"; apparently that's what was causing the problem because I changed the route to get all Bookmarks, and then filter them by topic at the controller level. This resulted in a "RecordArray" as the model for Bookmarks.
I have the following code in my app :
<div class="btn btn-mini disabled" title="<%= t('title.button.loan.borrow.disable.already_current') %>"><%= t('button.loan.borrow.after_confirmation') %></div>
I want to test the presence of this button on my page, taking in account the title tag. How can I do that ?
it { should have_css('.btn.disabled',
text: t('button.loan.borrow.after_confirmation'),
# (False line) title: t('title.button.loan.borrow.disable.already_current')) }
You should use attribute selector:
it { should have_css(".btn.disabled[title='#{t('title.button.loan.borrow.disable.already_current')}']",
text: t('button.ownership.take.after_confirmation'),