I have a jQuery Bootgrid. In one column I want to apply style for cell content and if click on cell open bootstrap popover. I'm using custom formatter and style was apply successfully but popover not working. What is problem?
formatters: {
"delegate": function (column, row) {
return "<span class='my_style' data-toggle='popover' data-content='" + row.description + "' data-row-id='" + row.id + "'>" + row.description + "</span>";
}
}
This problem was fixed by added the following script:
$(function() {
$("#myTable").on('click.rs.jquery.bootgrid', function(e, columns, row, targer) {
$("[data-toggle='popover'][data-row-id='" + row.id + "']").popover();
});
});
Related
I populate the table with an ajax call. In the first column I have checkboxes for selecting and deselecting rows and submit data to a php script. I have also two columns with select fields.
The render function for the one (of the two) column with select:
{
targets: 6,
render: function(data, type, full, meta) {
if(data.length == 4) {
return '<select class="form-control" id="selectotpionmonths' + data[0].cataloguenumber + '"><option value="'+ data[3].months
+ '">' + data[3].months + '<option value="'+ data[2].months
+ '">' + data[2].months + '<option value="'+ data[1].months
+ '">' + data[1].months + '<option value="'+ data[0].months
+ '">' + data[0].months + '</select>';
} else {
return data[0].months;
}
}
},
And the handler for click event and on change event:
$('#results tbody').on('click', 'input[type="checkbox"]', function(e){
var $row = $(this).closest('tr');
// Get row data
var data = table.row($row).data();
$('#selectotpionmonths' + data['enc_unit']).change(function(){
e.preventDefault();
var selectedoptionformonths = $('#selectotpionmonths' + data['enc_unit']).find("option:selected").text();
if(selectedoptionformonths == 3) {
$('#selectoptionprice' + data['enc_unit']).find('option[value="' + data['price_rrp'][3].price + '"]').prop('selected', true);
} else if(selectedoptionformonths == 6) {
$('#selectoptionprice' + data['enc_unit']).find('option[value="' + data['price_rrp'][2].price + '"]').prop('selected', true);
} else if(selectedoptionformonths == 9) {
$('#selectoptionprice' + data['enc_unit']).find('option[value="' + data['price_rrp'][1].price + '"]').prop('selected', true);
} else if(selectedoptionformonths == 12) {
$('#selectoptionprice' + data['enc_unit']).find('option[value="' + data['price_rrp'][0].price + '"]').prop('selected', true);
}
});
if(data['price_numberofmonths'].length == 4) {
var monthsoption = $('#selectotpionmonths' + data['enc_unit']).find("option:selected").text();
var priceoption = $('#selectoptionprice' + data['enc_unit']).find("option:selected").text();
} else {
var monthsoption = data['price_numberofmonths'][0].months;
var priceoption = data['price_rrp'][0].price;
}
// Get row ID
var dataforserver = {name: data['enc_unit'], duration: monthsoption, price: priceoption};
var rowId = dataforserver.name;
// Determine whether row ID is in the list of selected row IDs
var index = $.inArray(rowId, rows_selected);
// If checkbox is checked and row ID is not in list of selected row IDs
if(this.checked && index === -1){
rows_selected.push(rowId);
units_selected.push(dataforserver);
// Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
} else if (!this.checked && index !== -1){
rows_selected.splice(index, 1);
units_selected.splice(index, 1);
}
if(this.checked){
$row.addClass('selected');
} else {
$row.removeClass('selected');
}
order_total = 0;
for(i=0; i < units_selected.length; i++) {
order_total += parseFloat(units_selected[i].price);
}
//console.log(order_total.toFixed(2));
$( "#ukhoanswer" ).html(
"Number of units selected: " + units_selected.length + "<br/>" +
"Total cost of order: " + order_total.toFixed(2)
);
// Update state of "Select all" control
updateDataTableSelectAllCtrl(table);
// Prevent click event from propagating to parent
e.stopPropagation();
});
// Handle click on table cells with checkboxes
$('#results').on('click', 'tbody td, thead th:first-child', function(e){
$(this).parent().find('input[type="checkbox"]').trigger('click');
});
// Handle click on "Select all" control
$('thead input[name="select_all"]', table.table().container()).on('click', function(e){
if(this.checked){
$('#results tbody input[type="checkbox"]:not(:checked)').trigger('click');
} else {
$('#results tbody input[type="checkbox"]:checked').trigger('click');
}
// Prevent click event from propagating to parent
e.stopPropagation();
});
You may view the initial code for the checkboxes here
When I click on the cell with the select field I want to prevent the click event on the row. I have tried adding e.preventDefault but with no success. For the columns with the select option I want only the change event to be triggered.
Any ideas?
I did the following:
var selectField = $('.form-control');
selectField.on('click', function(event) {
event.stopPropagation();
});
The selector are for the cells with the select options. Now the first time that I click on the select field the row is selected. But next time I select an option the click event is prevented and the row is not selected/deselected.
I am looking on how to prevent the row being selected on the first click on a select field.
I'd like to receive the value of type of an input.
Docs: KendoTooltip
$("input").kendoTooltip({
content:
function () {
return '<div>' + this.attr("type") + '</div>';
}
});
But I can't finy any way to work with this..
It was so simple: e.target.attr("value")
content:
function (e) {
var text = e.target.attr("value");
return '<div>' + text + '</div>';
}
I saw this link at Add Remove Column Handler on jqGrid ColumnChooser .
I wonder how to use this JQuery syntax to loop through the < li >< /li > list to get the display text...
$("#colchooser_" + $.jgrid.jqID(this.id) + " ul.selected")
//.bind("sortreceive", function (event, ui) {
// alert('column "' + ui.item.text() + '" is choosed');
//});
Thanks...
.each()
http://api.jquery.com/each/
var id = $.jgrid.jqID(this.id);
$("#colchooser_" + id + " ul.selected li").each(function() {
console.log( $(this).text() );
});
That would log out the content of each <li>'s display text.
function linkFormatter(row, cell, value, columnDef, dataContext) {
var cell = "";
cell += '<input type="checkbox" id="cb' + dataContext['id'] + '" name="cb' + dataContext['id'] + '" value="' + dataContext['id'] + '" ' + (dataContext['Reviewer'] == 'Unassigned' ? 'class="unassignedLoan"' : "") + '> ';
cell += '' + value + '';
return cell;
};
I have this formatter function with a dataView. The checkbox the formatter creates gets reset when the user scrolls that row out of view and clicks on a different cell. I think the virtual scrolling is re rendering that cell with the formatter so it loses the values of the checkbox. Does anyone have a suggestion to get around this problem?
Thanks
On scrolling or sorting, the grid DOM is created again. So the initial values get reset.
You have to save the values (e.g. id's of the checkboxes checked) in an array and set it again on scroll and sort event.
Do it like this...
grid.onScroll.subscribe(function(e) {
grid.invalidate();
grid.render();
var $canvas = $(grid.getCanvasNode()), $allRows = $canvas
.find('.slick-row');
$($allRows).each(function() {
if(this row's checkbox is in selectedRowId){
set checkbox property to checked;
}
});
});
grid.onSort.subscribe(function(e) {
grid.invalidate();
grid.render();
var $canvas = $(grid.getCanvasNode()), $allRows = $canvas
.find('.slick-row');
$($allRows).each(function() {
if(this row's checkbox is in selectedRowId){
set checkbox property to checked;
}
});
});
Is there anyway to use validation summary inline kendo grid. please advise. if any link that i could follow.
No, you cannot use a validation summary with Kendo UI grid.
Here is a way to use a validation summary in KendoUI grid
Just make ul element above your grid like
<ul class="errorMessages"></ul>
Then in the edit function of the grid get a reference to the validator and add a click event to the update button
edit : function(e) {
var myValidator = e.sender.editable.validatable
e.container.find('.k-grid-update').click(function() {
if (!myValidator.validate()) {
displayErrors(myValidator)
}
});
}
Then the displayErrors function note I use a custom data attribute to make a friendly name for an input ie instead of using the id="firstName" I add data-myfriendly="First Name" you can use whatever you want title, id, name ect
function displayErrors(validator) {
var errorList = $('ul.errorMessages');
errorList.empty();
var myerrors = validator._errors;
var count = 0;
$.each(myerrors, function(field, errmsg) {
//Set focus on first field
if (count === 0) {
$('#' + field).focus();
count++;
}
//Set css
$('#' + field).css({
'box-shadow' : '0 0 5px #d45252',
'border-color' : '#b03535'
});
var titlerrmsg = $('#' + field).attr("title");
var friendly = $('#' + field).attr("data-myfriendly");
errorList.append('<li><span>' + friendly + ' is</span> ' + titlerrmsg + '</li>');
});
errorList.show();
}
Hope this helps!