By default my grid already had the total price (if none is selected).
What I wanted if the row/checkbox is selected, the "Total Price" only calculate the sum based on selected row. Need help how can I achieve this.
Here is my Kendo Demo
You can add a placeholder element in the footer and update the content based on the selection:
function onChange(arg) {
var grid = $("#grid").data("kendoGrid");
var data =[];
grid.selectedKeyNames().forEach((itm)=>{
data.push(grid.dataSource.get(itm));
});
var totalSelectedAmount = data.map(x=>x.UnitPrice).reduce((a, b) => a + b, 0);
$("#total").html(totalSelectedAmount)
}
Example
Related
I wanna remove those gaps which I marked with black line.Because I wanna sizeToFit and when I add new columns to dataset,I dont wanna see texts in these columns with .... .
Plunkr example: https://plnkr.co/edit/510MSisTzhw4t6Cy
You have to call gridOptions.columnApi.autoSizeColumns at initialisation time:
function autoSizeAll(skipHeader) {
var allColumnIds = [];
gridOptions.columnApi.getAllColumns().forEach(function(column) {
allColumnIds.push(column.colId);
});
gridOptions.columnApi.autoSizeColumns(allColumnIds, skipHeader);
}
https://www.ag-grid.com/javascript-grid-resizing/#auto-size-columns
I've got two datatables and there is a dropdown created in the second one with data from the first. I've created a jsbin here
If you add a couple of instructions to the first table (add any text and then click Add Instruction) - then click on the Load Copied Data button, you will see the dropdown box is populated from the first table.
If I do:
$('#btnTest').on('click', function (e) {
var tsor = $('#tblSORSInstall').dataTable();
var ins = tsor.fnGetData();
alert(ins);
});
It basically gives me the html for the dropdown - how do I get which value they have chosen? I was thinking of having a hidden column and updating that on the onchange of the dropdown, but is there a better way?
Thanks in advance
You may use jQuery.map() to generate an array of selected text/value, like below.
$('#btnTest').on('click', function (e) {
//var tsor = $('#tblSORSInstall').dataTable();
var ins = $('#tblSORSInstall').find("tbody select").map(function() {
return $(this).find(":selected").text() // get selected text
//return $(this).val() // get selected value
}).get()
alert ( JSON.stringify(ins, null, 2) )
});
Here is your JS Bin - updated
Using tsor.fnGetNodes() you can get all table row nodes, then you can loop through those and get the select values.
Final code will look something like
$('#btnTest').on('click', function (e) {
var tsor = $('#tblSORSInstall').dataTable();
var ins = tsor.fnGetData();
var a = tsor.fnGetNodes();
$.each(tsor.fnGetNodes(), function (index, value) {
alert($(value).find('select').val());
});
});
I am using kendo grid . I have a column Category which i used for grouping . So i need to show category wise total in group footer template.
So I have used below code
.ClientGroupFooterTemplate(#"<span id=""spnGroupTotalPrice"" style=""float:right;"">#=sum#</span>");
This will work properly when page load. But i want to change the total price when editing Quantity column. So I tried below code
.ClientGroupFooterTemplate(#"<span id=""spnGroupTotalPrice"" style=""float:right;"">#=calculate(Category)#</span>");
But It is not available column values in group footer template. I want to pass category name to calculate function.
Please provide a solution.
Thanks in advance.
I solved my issue.
calculate_sub_total()
{
grid.tbody.find('> tr').each(function () {
var tr = this;
var cells = tr.cells;
if ($(tr).hasClass('k-group-footer')) {
groupTotalPrice = (Math.round(groupTotalPrice * 100) / 100).toFixed(2);
$(cells).find("#spnGroupTotalPrice").html(groupTotalPrice);
groupTotalPrice = 0;// clearing after finishing a group
}
else if (!$(tr).hasClass('k-grouping-row')) {
var rowItem = grid.dataItem(tr);
groupTotalPrice = parseFloat(groupTotalPrice) + parseFloat(rowItem.TotalPrice);
}
});
}
By calling above function in onChange event of grid..
Hope it would be useful. It is rare question in stack overflow.. :)
Given http://jsfiddle.net/MG89G/271/ my issue is filtering the Kendo UI grid after the checkboxes changed in
dropdownlist with multi selection. I want to filter the grid with orderID.
I got the solution with single selection http://jsfiddle.net/schapman/HyHZG/5/.
But how do I do it with multi selection dropdownlist?
You can integrate the same approach within the Grid with a small tweak to remove the data-bind attribute.
Here is an example.
The kendo team has added a new MultiSelect box. Here is a sample of filtering a grid using one.
http://jsbin.com/ameyam/1/edit
I create this one:
var dropdown = $(selector).kendoDropDownList({
template: $("#general-templates .multiselect-item").html(),
select: function(e)
{
var dropdownlist = this;
var dataItem = this.dataItem(e.item.index());
if(dataItem.value==="")
{
e.item.closest("ul").find("span").each(function(){
$(this).css("display","none");
});
dropdownlist.text(dataItem.text);
dropdownlist.element.closest(".field-group").find("input[type='hidden']").val("");
return;
}
if(e.item.find("span").css("display")==="none")
e.item.find("span").css("display","");
else
e.item.find("span").css("display","none");
var values = [];
var labels = [];
e.item.closest("ul").find("span").each(function(){
if($(this).css("display")==="none")
return;
values.push($(this).attr("data-value"));
labels.push($(this).parent().text());
});
if(values.length===0)
labels.push(e.item.closest("ul").find(".dropdownlist-item:first").text());
dropdownlist.element.closest(".field-group").find("input[type='hidden']").val(values.join(","));
setTimeout(function(){
dropdownlist.value("999");
dropdownlist.text(labels.join(","));
},50);
}
}).data("kendoDropDownList");
var select = dropdown.wrapper.find("select");
dropdown.wrapper.append("<input type='hidden' class='filter' value='' data-field='{0}' data-operator='{1}'>".format(select.attr("data-field"),select.attr("data-operator")));
new version of kendo ui support this properties
http://demos.telerik.com/kendo-ui/grid/filter-multi-checkboxes
I want filter and sort option in html table. I tried 'tablesorter.js',
I can sort the table fields by using this module. But I can't add drop down list and filter box with table fields.
Anybody can help me??
Try Using This.
This is HTML table shorter.
OR
(DEMO) for short using drop-down list
$('table').tablesorter();
$('select').change(function(){
var column = parseInt($(this).val(), 10),
direction = 1, // 0 = descending, 1 = ascending
sort = [[ column, direction ]];
if (column >= 0) {
$('table').trigger("sorton", [sort]);
}
});
You can add a drop down list filter to the table column by adding a class="filter-select" to the for that column in the .
<thead><th>Col 1></th><th class="filter-select">Col2</th></thead>
Or you can add a filter function for that column:
filter_functions : {
// Add select menu to 3rd column (column numbers are zero-based).
// Set the column value to true, and/or add "filter-select" class name to header
2 : true,
}