I have data to be displayed in KendoUI grid. There is some boolean data and I want it to be displayed as check boxes. Also, when the user clicks the check box I need to do something so I need the onclick event for each row of data. How do I do this in KendoUI grid? How do I give each check box a different name and fire onclick events? My code:
#(Html.Kendo().Grid((IList<M.TS.DomainModel.C>)ViewData["peoplefind"])
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.FirstName);
columns.Bound(p => p.LastName);
columns.Bound(p => p.User).Title("Email");
columns.Bound(p => p.City);
columns.Bound(p => p.TimeStamp).Title("Testdate").Format("{0:MM/dd/yyyy}");
columns.Command(command => command.Custom("Info").Click("showDetails")).Title("Info");
columns.Bound(p => p.CheckOK).ClientTemplate(
"<input type='checkbox' value= '#= CheckOK #' " +
"# if (CheckOK) { #" +
"checked='checked'" +
"# } #" +
"/>"
);
})
.Sortable()
.Scrollable(scr => scr.Height(300))
.Groupable()
.Selectable()
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false))
.Resizable(resize => resize.Columns(true))
)
OK so I figured it out. I added class='c-ok' in the template of the check box and added the following code to get the click event.
$('.c-ok').click(function (e) {
if ($(this).is(':checked')) {
alert('checked');
cokclick();
} else {
alert('not checked');
}
});
Related
In my Vue.js application I want to post form data to my Node.js/MongoDB Backend.
This is my source code: https://github.com/markusdanek/t2w-vue/blob/master/src/components/backend/JobEdit.vue
JSON for my job entry: http://t2w-api.herokuapp.com/jobs/591c09a55ba85d0400e5eb61
Relevant code for my question:
HTML:
<div class="row">
<input type='text'
:name="'qual'+index"
v-model="qualifications[index]">
<button #click.prevent="removeQualifiaction(index)">X</button>
</div>
Methods:
onChange(value, $event){
if (!this.job.xmlOnline)
this.job.xmlOnline = []
const index = this.job.xmlOnline.findIndex(v => v == value)
const checked = $event.target.checked
if (checked && index < 0)
this.job.xmlOnline.push(value)
if (!checked && index >= 0)
this.job.xmlOnline.splice(index, 1)
}
removeQualifiaction() {
this.qualifications.splice(this.qualifications.index, 1);
}
Sending the form data with submit button on form end:
editJob() {
let job = Object.assign({}, this.job);
job.qualifications = this.qualifications;
job.responsibility = this.responsibility;
this.$http.post('https://t2w-api.herokuapp.com/jobs/' + this.$route.params.id, job).then(response => {
console.log(response);
}, response => {
console.log(response);
});
}
My problems now:
When I edit a "Job", I have a list of "qualification items", that are input fields in my form.
Clicking the "delete" button results that the first input gets deleted, not the one I am clicking. Done with #thanksd answer.
How do I add a button and method to add a new input field and to append it to my job.qualifications?
In my JobAdd.vue implemented, to add a new entry to job.qualifications, like this:
<a #click.prevent="addQualification">+</a>
addQualification() {
this.qualification.push({ text: '' });
}
addJob() {
let job = Object.assign({}, this.job);
job.qualifications = this.qualification.map(q => q.text);
this.$http.post('https://t2w-api.herokuapp.com/jobs/', job).then(response => {....
Full source for my JobAdd.vue: https://github.com/markusdanek/t2w-vue/blob/master/src/components/backend/JobAdd.vue
this.qualification.push({ text: '' }); doesnt work obviously not in my JobEdit.vue when there are already strings in my job.qualifications.
Change your removeQualifiaction method to use the index being passed in:
removeQualifiaction(index) {
this.qualifications.splice(index, 1);
}
I have a Kendo Grid with check box column. I want to check all check boxes in the grid and keep it across the pages. I have a method CheckAll(), but it checks only the first page of Kendo Grid. How to check all check boxes by one click on the link or button? My code is here:
<div style="text-align:right; font-size: 0.9em;height:28px;position: relative;">
<span style="float:left;text-align:left;">
Check All
Uncheck All
<a class="k-button k-button-icontext k-grid-Patient" id="hrefCheckedPatients" href="#" onclick="getChecked();">Export to PDF</a>
Download Generated PDF
<label id="checkedMsg" style="color:red;display:none;"></label>
</span>
</div>
#(Html.Kendo().Grid<RunSummary>()
.Name("CheckedPatients")
.DataSource(datasource => datasource
.Ajax().PageSize(25)
.Sort(sort => sort.Add("UniqueId").Ascending())
.Read(read => read.Action("GetRunSummaries", "PatientReport")))
.Columns(columns =>
{
columns.Bound(c => c.UniqueId).Title(ELSORegistry.Resources.Views.Home.HomeStrings.UniqueId)
.ClientTemplate("<input type='checkbox' class='primaryBox' id='#= UniqueId #'>#= UniqueId #</input>");
columns.Bound(c => c.RunNo).Title(SharedStrings.Run);
columns.Bound(c => c.Birthdate).Title(SharedStrings.Birthdate).Format("{0:g}").Filterable(true);
columns.Bound(c => c.customAge).Title(SharedStrings.Age)
.Filterable(
filterable => filterable
.UI("AgeFilter")
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear().IsEqualTo("Is equal to"))
)
);
columns.Bound(c => c.TimeOn).Title(PatientStrings.DateOn)
.Format("{0:g}")
.Filterable(true);
columns.Bound(c => c.TimeOff).Title(PatientStrings.DateOff)
.Format("{0:g}")
.Filterable(true);
columns.Bound(c => c.DischargedAlive).Title(PatientStrings.DischargedAlive).Filterable(true).ClientTemplate("#= DischargedAlive ? 'Yes' : 'No' #");
columns.Bound(c => c.ShowSubmitted).Title(PatientStrings.Submitted).Filterable(true).ClientTemplate("#= ShowSubmitted ? 'Yes' : 'No' #");
columns.Bound(c => c.SupportTypeEnum).Title(PatientStrings.SupportType).Filterable(true);//.ClientTemplate("#= SupportType ? 'Yes' : 'No' #");
}
)
.Pageable(p => p.PageSizes(new[] {10, 25, 50, 100}))
.Sortable()
.Filterable( )
.Events( e => e.FilterMenuInit("FilterMenuFuncWithAge") ) // apply x [closing box] on pop up filter box
)
<script type="text/javascript">
function checkAll() {
$('input').prop('checked', 'checked');
}
function uncheckAll() {
$('input').removeAttr('checked');
}
</script>
You need to update datasource property not the view.
Try something like that in CheckAll function:
var dataSource =('[name]="CheckedPatients"').data('kendoGrid').dataSource;
var data = dataSource.data();
var totalNumber = data.length;
for(var i = 0; i<totalNumber; i++) {
var currentDataItem = data[i];
currentDataItem.set("ShowSubmitted", "true");
}
UPDATE
// here all filtered/sorted data as in grid.
var view = dataSource.view();
Here you can read kendo docs about datasource object
UPDATE2
here solution for get all data from paged datasource:
var dataSource = $("#grid").data("kendoGrid").dataSource;
var filters = dataSource.filter();
var allData = dataSource.data();
var query = new kendo.data.Query(allData);
var data = query.filter(filters).data;
I am using checkbox in one of my project.I am giving checkbox code below:
$this->Form->checkbox('ClubOpenDay.status', array("data-on-label" => "Open", "data-off-label" => "Close", "checked" => "checked"), array("empty" => false))
Here,Open is active by default. But in edit mode,if value is set to close,than close will be display.I am unable to do that.I just want,if I get value open from database,it will display open else close by default.Any idea about it?
Well you should get the value from the database as you say and in the view just have an if statement, should look something like this:
if($value == true){
$this->Form->checkbox('ClubOpenDay.status', array("data-on-label" => "Open", "data-off-label" => "Close", "checked" => "checked"), array("empty" => false))
}
else{
$this->Form->checkbox('ClubOpenDay.status', array("data-on-label" => "Open", "data-off-label" => "Close"), array("empty" => false))
}
$value should be a variable that you assing from your controller that has the value true if its open or false if its closed, or maybe not even true or false, a 1 or 0 would do you would only need to change the if statement in your view accordingly
I hope that helps, good luck
You can save your if else time
$checked = ($status == true) ? 'checked' : '';
$this->Form->checkbox('ClubOpenDay.status', array("data-on-label" => "Open", "data-off- label" => "Close", "checked" => $checked), array("empty" => false))
In your Controller you have to write this
public function edit($id){ // for example
//[...]
$this->request->data['ClubOpenDay']['status'] = $db_value;
//$this->request->data['ClubOpenDay']['status'] = 1; // if you want to force a checkbox checked
}
And your checkbox will be automatically checked or unchecked.
This is my code in the controller:
[GridAction]
public ActionResult _Select()
{
// Creating dummy data to bind the grid
var data = Enumerable.Range(1, 100)
.Select(index => new Customer
{
ID = index,
Name = "Customer #" + index,
Tax = 1 + index,
Amount = 500 + index
});
return View(new GridModel(data));
}
This is what I have in my view:
<%: Html.Telerik().Grid<GridLoadedWithAjaxInTabStrip.Models.Customer>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.ID).Width(200);
columns.Bound(c => c.Name);
columns.Bound(c => c.Tax);
columns.Bound(p => p.Amount);
})
.DataBinding(dataBinding => dataBinding.Ajax().Select("_Select", "Home"))
.Sortable()
.Pageable()
.Groupable()
.Filterable()
%>
I would like to know how I can put a custom footer template in this format:
Total Tax: XXXXX
Total Amount: XXXXX
Grand Total: XXXXXXX
Please assist me how I can do this. Thanks!
You need to check this demo
http://demos.telerik.com/aspnet-mvc/grid/aggregatesajax
I am trying to micmic teh behaviour of a simple HTML SELECT element with jQuery Ui Autocomplete.
Is it possible to set the active item (move focus) on the open event? Basically, I am trying to mimic the selected="selected" option from a html select element - if the value in the field matches with one from the list, make that list item 'selected'.
Here's a jsfiddle of what you'e looking for: http://jsfiddle.net/fordlover49/NUWJr/
Basically, took the combobox example from jquery's website, and changed the renderItem functionality. In the example off of jqueryui.com's site, change:
input.data("autocomplete")._renderItem = function(ul, item) {
return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
};
To:
input.data("autocomplete")._renderItem = function(ul, item) {
$item = $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>");
if (this.element.val() === item.value) {
$item.addClass('ui-state-hover');
}
return $item.appendTo(ul);
};
You can use the focus event to add/remove the active class. I like it more than the other ._renderItem code on this thread.
[...previous autocomplete options]
focus: function( event, ui ) {
// Remove the hover class from all results
$( 'li', ui.currentTarget ).removeClass('ui-state-hover');
// Add it back in for results
$( 'li',ui.currentTarget ).filter(function(index, element) {
// Only where the element text is the same as the response item label
return $(element).text() === ui.item.label;
}).addClass('ui-state-hover');
},
[next autocomplete options...]
Well, I finally figured out the answer with the help of a friend.
$('input[data-field=vat_rate]', view.el).autocomplete({
source: function (request, response) {
response(your_source_array);
},
minLength: 0,
open: function (event, ui) {
var term = ui.item.value;
if (typeof term !== 'undefined') {
$(this).data("autocomplete").menu.activate(new $.Event("mouseover"), $('li[data-id=' + term + ']'));
}
}
}).click(function () {
if ($(this).autocomplete('widget').is(':visible')) {
$(this).autocomplete('close');
} else {
$(this).autocomplete('search');
}
}).data("autocomplete")._renderItem = function (ul, item) {
var listItem = $("<li></li>")
.data("item.autocomplete", item)
.attr("data-id", item.id)
.append('<a>' + item.label + '</a>')
.appendTo(ul);
};
Here's the JSBin for it: http://jsbin.com/unibod/2/edit#javascript
Works perfect! :)