How to check all check boxes in Telerik Kendo Grid - checkbox

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;

Related

create array of object of arrays in angular

I am trying to get the best possible solution but not getting any clue how to do it.
Task
there are 4 different multiple select drop down, and user can select any number of different values of each drop down and create a box ( limit to 7 ) through save button.
structure
> dropdown1
a1,a2,a3
> dropdown2
b1,b2,b3
> dropdown3
c1,c2,c3
> dropdown4
d1,d2,d3
Code for 1 dropdown
/* dropdown dp1 */
selecteddp1 = [];
dp1Loading = false;
dp1: any[] = [];
dp1Name = ["a1", "a2", "a3", "a4"];
selectAll() {
this.selecteddp1 = this.dp1.map(x => x.name);
}
unselectAll() {
this.selecteddp1 = [];
}
private loaddp1() {
this.dp1Loading = false;
this.dp1Name.forEach((c, i) => {
this.dp1.push({ id: i, name: c });
});
}
/* dropdown dp1 */
/* button event */
createQuery() {
this.selecteddp1.forEach(x => {
this.query.dp1.push(x);
});
}
/* button event */
on button event, saving selected dp1 value to query.
query:[] = [{
dp1: [],
dp2: [],
dp3: [],
dp4: []
}];
result (illustrated based on user selection)
<div class="box1">
<ul>
<li>dp1-a1</li>
<li>dp2-b1</li>
<li>dp2-b2</li>
<li>dp3-a1</li>
<li>dp3-c2</li>
</ul>
</div>
my approach will be wrong, kindly suggest better idea, how to save the selected value in array of objects and how to view it. TIA
Edit
I need to create box with selected value of dropdown(s). Once user click on save button.
In my view,query should be like this
query:[] = [{
dp1: [a1,a2],
dp2: [b1],
dp3: [c2],
dp4: [d3]
}],
[{
dp1: [a1,a2],
dp2: [b1],
dp3: [c2],
dp4: [d3]
}];
You can create your query array like this:
query = [{
dp1: ['a1','a2'],
dp2: ['b1'],
dp3: ['c2'],
dp4: ['d3']
}, {
dp1: ['a1','a2'],
dp2: ['b1'],
dp3: ['c2'],
dp4: ['d3']
}];
And your HTML whould be:
<div *ngFor="let dropdownGroup of query">
<select *ngFor="let dropdown of objectKeys(dropdownGroup)">
<option *ngFor="let option of dropdownGroup[dropdown]" [value]="option">{{option}}</option>
</select>
</div>
The objectKeys in the HTML is a property of the class that is equal to the object.keys:
objectKeys = Object.keys;
You can see this all together in this StackBlitz

last row is being deleted instead of clicked row in ReactJS

I want to delete a row from html table on button click using ReactJS. The problem is that on clicking delete button always last row is being deleted instead of the row that is clicked. Please tell what is the issue with my code?
code:
var RecordsComponent = React.createClass({
getInitialState: function() {
return {
rows: ['row1', 'row2', 'row3'],
newValue: "new value"
}
},
render : function() {
return (
<div>
<table>
<tbody>
{this.state.rows.map((r) => (
<tr>
<td>{r}</td>
<td>
<button onClick={this.deleteRow}>Delete</button>
</td>
</tr>
))}
</tbody>
</table>
<input trype="text" id={"newVal"} onChange={this.updateNewValue}></input>
<button id="addBtn" onClick={this.addRow}>ADD</button>
</div>
);
},
updateNewValue: function(component) {
this.setState({
newValue: component.target.value
});
},
addRow : function() {
var rows = this.state.rows
rows.push(this.state.newValue)
this.setState({rows: rows})
},
deleteRow : function(record) {
var index = -1;
var clength = this.state.rows.length
for( var i = 0; i < clength; i++ ) {
if( this.state.rows[i].value === record.target.value ) {
index = i;
break;
}
}
var rows = this.state.rows
rows.splice( index, 1 )
this.setState( {rows: rows} );
}
});
React.render(<RecordsComponent/>, document.getElementById('display'))
You need pass a param on func deleteRow
<button onClick={() => this.deleteRow(r)}>Delete</button>
I refactor a litte bit of your func
deleteRow : function(record) {
this.setState({
rows: this.state.rows.filter(r => r !== record)
});
}
In deleteRow you are looking for the index of the row that matches record.target.value (record is actually an event), but event.target.value is blank so the index remains -1, and rows.splice(-1, 1) deletes the last element.
You should pass the row data itself, like:
<button onClick={e => this.deleteRow(r)}>Delete</button>

Vue.js: Manipulate Array and post form with new data

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);
}

KendoUI Grid Checkbox click event

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');
}
});

telerik-mvc grid - how to format footer template?

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

Resources