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
Related
Hi i Created one lwc tree grid it is working fine showing the tree grid but one issue Iam not able to shown the number fields in the currency format it is showing $Nan.I have three columns in my lwc Treegrid
Column1 : Data Product Name,
Column2 : Current Value,
Column3 : Potential Value,
I want to show the current value and Potential Value in currency format
import { LightningElement,track,wire,api } from 'lwc';
import getDataProductRecordId from
'#salesforce/apex/FetchDataProductRecordId.getDataProductRecordId';
import SystemModstamp from '#salesforce/schema/Account.SystemModstamp';
export default class Data_products_tree_view extends LightningElement {
dataDomainsval;
error;
#track expandedRows = [];
#track gridData = [];
#track gridColumns = [{type:'url',
fieldName:'linkName',
label:'Data Product Name',
typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}
},{
type:'Number',
fieldName:'Data_Product_Valuation_Current__c',
label:'Current Value'
},
{
type:'Text',
fieldName:'Data_Product_Valuation_Potential__c',
label:'Potential Value'
}];
//#track gridData;
#track gridData2;
#api recordId;
connectedCallback(){
var formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
maximumFractionDigits: 0,
minimumFractionDigits: 0,
});
getDataProductRecordId({recId : this.recordId}).then(result =>{
var tempDomains = [];
for(var i=0;i<result.length;i++){
if(result[i].Parent__c == undefined){
tempDomains.push(JSON.parse(JSON.stringify(result[i])));
var arr = [];
for(let k=0;k<tempDomains.length;k++){
tempDomains[k]['linkName'] = '/' + tempDomains[k].Id;
tempDomains[k].Data_Product_Valuation_Current__c = formatter.format(tempDomains[k].Data_Product_Valuation_Current__c);
if(tempDomains[k].Data_Valuation_Components__r != undefined){
tempDomains[k]._children = tempDomains[k].Data_Valuation_Components__r;
for(let l=0;l<tempDomains[k]._children.length;l++){
console.log('childs update'+tempDomains[k]._children[l]);
tempDomains[k]._children[l]['linkName'] = '/' + tempDomains[k]._children[l].Id;
}
delete tempDomains[k].Data_Valuation_Components__r;
}
console.log('print my josn'+JSON.stringify(tempDomains[k].Data_Valuation_Components__r));
}
}
console.log('jsonvalue'+JSON.stringify(tempDomains));
}
this.gridData= tempDomains;
})
}}
I'm trying to get data from database to checkboxes as checked. The checkbox data in database are as array that have been inserted with json and they are dynamic data based on insert function.
My tasks table:
id |employee_id | startDate | endDate | ...
---|------------|------------|-----------|--------
1 |["1","2"] | .......... | ..........| ....
My TasksController.php
function fetchdata(Request $request)
{
$id = $request->input('id');
$task = Task::find($id);
$output = array(
'employee_id' => $task->employee_id,
'name' => $task->name,
'description' => $task->description,
'startDate' => $task->startDate,
'endDate' => $task->endDate,
'percentage' => $task->percentage
);
echo json_encode($output);
}
public function getEmployeesList()
{
$employeesList = Employee::all();
return view('adminlte::tasks', ['employeesList' => $employeesList]);
}
My tasks.blade.php
#foreach($employeesList as $emplist)
<label class="checkbox-inline">
<input type="checkbox" id="employee_id" name="employee_id[]" class="chck" value="{{$emplist->id}}" >{{ $emplist->name }}</label>
#endforeach
My Ajax function inside blade:
$(document).on('click', '.edit', function(){
var id = $(this).attr("id");
$('#form_output').html('');
$.ajax({
url: "{{route('tasks.fetchdata')}}",
method: 'get',
data: {id:id},
dataType: 'json',
success:function(data)
{
$('#id').val(data.id);
$('#employee_id').val(data.employee_id);
$('#name').val(data.name);
.......................
..................
}
})
});
So, how can I retrieve data from database to checkboxes as checked, because for now I'm getting null "employee_id" value when I try to update a record.
Thank you in advance
Since you're encoding the data on the server side, you must decode it in the client side like :
...
success:function(data)
{
console.log( data );
data = JSON.parse(data);
$('#id').val(data.id);
$('#employee_id').val(data.employee_id);
$('#name').val(data.name);
...
}
Im receiving data from the Marvel api and use ngFor to display the data.
Before displaying the data I need to make some changes to it.
If the name doesn't exist or the description is empty I want to show a message.
Where is the best place to manipulate data and how can I do this?
I tried something like this in my comic view after the subscribe but it didnt work.
If (stuff.data.results['0'].title == ''){
stuff.data.results['0'].title == 'try gain'}
my service.ts
getComics(searchterm): Observable<any> {
const search: URLSearchParams = new URLSearchParams();
search.set('titleStartsWith',searchterm);
search.set('ts', '1'); // time stamp
search.set('apikey', 'key');
search.set('hash', 'key');
let obs: Observable<any> = this.http
.get(ComicService.BASE_URL, new RequestOptions({search}))
.map( (res) => res.json());
console.log("obj " + obs)
return obs;
}
my comic-view.ts
searchComics(event): boolean {
this.error = 'fout'
this._comicService.getComics(this.searchterm)
.subscribe(
stuff => {
this.stuff = stuff; console.log('title: ' + stuff.data.results['0'].title + ' description:' +
stuff.data.results['0'].description);
},
error => { this.error = error; }
);
return false;
}
comis.html
<ul>
<li *ngFor=" let x of stuff?.data?.results ">
<label> Title:</label> {{x.title}}
<br>
<label> description: </label> {{x.description}}
<br>
</li>
</ul>
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 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');
}
});