I need to set background color of cells in slick grid based on the data being rendered to the grid. Looking at the other posts in stack overflow, I figured out that we can use a custom formatter to do the same by returning a div. I want to accomplish this without returning another div. I did try using rowCssClass and column cssClass property but no luck. Could someone please help me out?
Thanks
You can use grid.setCellCssStyles as follows,
var row = // row Number
var rowObject = { };
rowObject[row] = { property1: "cssClass", property2: "cssClass" };
grid.setCellCssStyles(row, rowObject);
Related
How can I change the color of the currency in my kendo numeric textbox in jquery? I used the standard code in creating a numeric textbox in kendo.
$("#currency").kendoNumericTextBox({
format: "c",
});
For example I have $12.00 as value in my input element.
I just want to change the color of the $. Not the 12.00.
How can I achieve this?
Apply css for "k-formatted-value" class textbox i.e. Currency value
Try something like this..
var widget = $("#numeric").kendoNumericTextBox().data("kendoNumericTextBox");
widget.wrapper.find("input.k-formatted-value").css("color", "red");
Refer this link to achieve
http://docs.telerik.com/kendo-ui/controls/editors/numerictextbox/how-to/change-text-color
Updated:
We can do some tricks to change currency format colour change.
I did for normal textbox.
Refer JSfiddle.
For your requirement try something like this.
steps:
1. Create one span element
Create onchange event for the input
$("#salary").kendoNumericTextBox({
change: onChange,
});
Define the style change functionalities.
function onChange() {
ChangeColorFormat($('.k-formatted-value'));
}
function ChangeColorFormat(inp) {
inp.style.color = 'transparent';
var span = document.getElementById('back');
span.innerHTML = inp.value.substr(0, 1) +
"" +
inp.value.substr(1, 1) +
"" +
inp.value.substr(2);
}
Found the solution. Because its kendo, it was simply setting a ClientTemplate before loading it.
I have a kendo grid inside kendo grid (using integrated grid). I have implemented drag n drop in both grid using grid sortable provided by kendo. But it is only work with one grid at a time. If I commented one of them, second grid reordering perfectly. I want that user can able to drag n drop both grid. Please help.
I was missing filter option in parent grid.
var grid = mygrid.data("kendoGrid");
grid.table.kendoSortable({
handler: ".handler",
**filter: ">tbody >tr:not(.k-detail-row)",**
hint: function (element) { //customize the hint
var grid = $("#gridProductGroup").data("kendoGrid"),
table = grid.table.clone(), //clone Grid's table
wrapperWidth = grid.wrapper.width(), //get Grid's width
wrapper = $("<div class='k-grid k-widget'></div>").width(wrapperWidth),
hint;
table.find("thead").remove(); //remove Grid's header from the hint
table.find("tbody").empty(); //remove the existing rows from the hint
table.wrap(wrapper); //wrap the table
table.append(element.clone()); //append the dragged element
//table.append(element.next().clone());
hint = table.parent(); //get the wrapper
return hint; //return the hint element
},
Filter differentiate between detail grid and parent grid.
It is working for me
I have a function that I'm going to use with several different Grids. In this function I want to set Grid's Id field which varies in different Grids.
How can I get each grid's ID?
function incId(e) {
var model = e.model;
var grid = e.sender;
//removed
model.set(!IDFIELD!, ++Id);
}
You can use model.idField to get it
model.set(model.idField, ++Id);
Please read its documentation for further investigation
I read all the posts regarding freezing column. But still I am unable solve my problem.
When I called setFrozenColumns my column has frozen but along with another column header is added to the grid. So the column headers one more than the columns. How to resolve this. Here is my over view of code.
makeJqueryGridInstance(grid, gridSettings);
window.prepareSortableColumns(grid);
makefrozenColumns(grid);
function makeFrozenColumn( grid )
{
var colmodel = grid.jqGrid('getGridParam', 'colModel');
if (colmodel[0].name === 'cb')
{
grid.jqGrid('setColProp', colmodel[0].name, { frozen: true });
grid.jqGrid('setFrozenColumns');
fixPositionsOfFrozenDivs.call(grid[0]);
}
}
function prepareSortableColumns(grid)
{
var gridSettings = grid.data('settings');
var gridId = gridSettings.gridId;
var columnHeaders = $("#" + "gview_" + gridId.replace("#", "")).find(".ui-jqgrid-htable > thead > tr > th");
var colModel = grid[0].p.colModel;
$.each(columnHeaders, function (index, columnHeader)
{
if (colModel[index].sortable == false)
{
$(columnHeader).find("div").removeClass("ui-jqgrid-sortable");
}
});
}
For the first time, it is working fine and the column has frozen.
But second time when the call made to prepareSortableColumns(grid), the columnHeader having one more than colModel (I debugged through devTools). So I am getting error for that particular columnHeader sortable is undefined.
Can anybody help me with this. Thanks in advance.
The code of prepareSortableColumns seems be wrong. Its not oriented on dives added in case of usage of frozen columns (see the answer for more details and use Developer Tools to examine the structure of the grids). You can try to use grid[0].grid.headers array instead of selecting columnHeaders in the way like you do this.
Additionally it's in general wrong to remove ui-jqgrid-sortable class. The meaning of the class will be frequently misunderstood because of the name. Non-sortable columns have to have the class too. What you need to do instead is to set CSS style cursor: default on the headers. See the old answer for the corresponding code example.
I'm using inline editing in my grid , I have some cases which i want to change the value of a cell inside a column. I'm changing it with setCell ,and it works good. my problem is that after the change the cell losts it's edit mode while all other cells of the row are in edit mode. I want to keep the cell in edit mode after i changed it.
for now what i did is saved the row and then selected it again and made in in edit mode - but i don't think it is a good solution - Is there a way to keep in edit mode while changin it?
Thank's In Advance.
If you need to implement the behavior of dependency cells which are all in the editing mode you have to modify the cell contain manually with respect of jQuery.html function for example. If the name of the column which you want to modify has the name "description", and you use 'blur' event on another "code" column then you can do about the following
editoptions: {
dataEvents: [
{
type: 'blur',
fn: function(e) {
var newCodeValue = $(e.target).val();
// get the information from any source about the
// description of based on the new code value
// and construct full new HTML contain of the "description"
// cell. It should include "<input>", "<select>" or
// some another input elements. Let us you save the result
// in the variable descriptionEditHtml then you can use
// populate descriptionEditHtml in the "description" edit cell
if ($(e.target).is('.FormElement')) {
// form editing
var form = $(e.target).closest('form.FormGrid');
$("#description.FormElement",form[0]).html(descriptionEditHtml);
} else {
// inline editing
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
$("#"+rowId+"_description",row[0]).html(descriptionEditHtml);
}
}
}
]
}
The code will work for both inline and form editing.
The working example of dependent <select> elements you can find here.
blur does not fire if value is changed and enter is pressed immediately without moving to other cell. So better is to use
editrules = new
{
custom = true,
custom_func = function( val, col ) { ... }
},
and move this code from blur to custom_func as described in
jqgrid: how send and receive row data keeping edit mode