How to prevent Kendo Grid click propagation - kendo-ui

I need to add an image to one specific column, so I have something like that, This is good, I see the image, I just added am alert to see how is working. My problem is that after showing the alert, is executing the sorting. Is there a way to avoid the sorting when I just click on my image?
{
field: "ShipName", headerTemplate: "<a class='k-link pull-left' href='#'>Charge</a><img onclick='alert(1)' src='http://localhost/MyApp/images/Reports/filterApplied.png' title='this is a filter'/>",
title: "Ship Name"
}


If you do not want that particular column to sort, then disable it in your grid's configuration. API Reference.


Try adding return false;, which works like e.preventDefault():
onclick='alert(1); return false;'

Related

kendo grid numeric textbox editor value change not updating model

I am using numeric text box as an editor in my grid, when I change number by applying spinner, and then I click CRUD update button, model is not updated with the changed value, which I observed in "save" event of grid.
Is this a bug with Kendo? Although, it will work when we add trigger to spin event, but if we edit number typing in, it wont save? Any thoughts
And wierd thing is when after we enter number and click outside and then clicking update will save correctly. why its behaving like that?
positiveNumberEditor: function(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox(
{
format: " "
,min: 0
,max:9999
,step:1
,value:" "
, spin:function (e) {
this.trigger("change");
}
}
);
}

Finally I got answer for this.
(Answering here, so that it may help some one else!!!)
Well this is a shortcoming when we use an editable grid with reordering functionality. And hence easy fix could be adding a filter to avoid any editable row if any using css as below. And this filter is a config under kendoSortable setting of your grid.
filter: ">tbody >tr:not(.k-grid-edit-row)"

free jqGrid: How to make label as hyperlink to new window on edit/addNew form?

here Country Label should be a hyperlink to another window. I do not know whether it is possible or not. If it is possible, would you please share the demo here.

The feature exists in old versions of jqGrid too. You need just add formoptions.label in the definition of the corresponding column in the colModel. Try the following example
formoptions: {
label: "<a target='_blank' " +
"href='https://en.wikipedia.org/wiki/List_of_sovereign_states'>Country</a>"
}
See the demo: http://jsfiddle.net/OlegKi/qzxwfquq/1/

Kendo UI Grid edit on row click instead of edit button click

Does anyone know of a way to trigger the editing of a row just by clicking the row?
I would like to see the same functionality that I see when I click an edit command button, but triggered by selecting the row.

You can add this to your change event for your grid:
myGrid.setOptions({
editable: {
mode: "inline"
},
change: function(){
this.editRow(this.select());
}
});

I know this is an old question, but I just had need for a solution and this is what worked for me. I wanted to use double-click, but the click event should also work.
var grid = $('#grid').data('kendoGrid');
$('#grid .k-grid-content table').on(
'dblclick',
'tr',
function () { grid.editRow($(this)); }
);
The selector ("#grid .k-grid-content table") works for my current configuration (mainly I have virtual scrolling turned on) and so may need to be adjusted for your specific situation.

Is it possible (and if so how) to add an item to the column menu of a kendo UI grid?

So I have a grid and the columns have the good ol' column menu on them with the filtering/sorting/excluding of columns and it all works fine.
The fly in the ointment is that I would like to allow the user to rename a column heading and the obvious place in the UI to allow this is in said column menu.
Something like this:
(where the red bit is just another option that I click on and popup a little window to let me type in a new heading)
Is this possible and how would I do it?
I see that menus can be customized and the grid demo shows how to adjust the stuff in the filter popup but I am not sure how I would add this item (I can see how I would programmatically do the rename but just this getting an option onto the menu has me stumped).

You can use the columnMenuInit event. Two possibilities:
$("#grid").kendoGrid({
dataSource: dataSource,
columnMenu: true,
columnMenuInit: function (e) {
var menu = e.container.find(".k-menu").data("kendoMenu");
var field = e.field;
// Option 1: use the kendoMenu API ...
menu.append({
text: "Rename"
});
// Option 2: or create custom html and append manually ..
var itemHtml = '<li id="my-id" class="k-item k-state-default" role="menuitem">' +
'<span class="k-link"><b>Manual entry</b></span></li>';
$(e.container).find("ul").append(itemHtml);
// add an event handler
menu.bind("select", function (e) {
var menuText = $(e.item).text();
if (menuText == "Rename") {
console.log("Rename for", field);
} else if (menuText === "Manual entry") {
console.log("Manual entry for", field);
}
});
}
})
See fiddle with two alternatives:
http://jsfiddle.net/lhoeppner/jJnQF/

I guess that the point of a filter is to filter, not to make changes on the grid.
But anyways i found this Kendo Post that may help you to achieve what you need.
You can also take a look a this one too.

extjs show validation when switching tabs

HI,
I hope somebody can help me here with the extjs framework.
The problem I am having is that the field validation is not being rendered for the tabs that are not visibele on initialisation off the panel.
It only starts working when clicking in the textfields.
What I need is something to force the validation cue's for the fields on activating the tabs.
EDIT
I came up with this
Ext.getCmp('aanMakenGebruikerTabPanel').on('tabchange',function(){
AanMakenGebruikerWindow.syncShadow();
Ext.getCmp('Mobiel1Veld').on('render',function(v){v.validate();});
Ext.getCmp('Email1Veld').on('render',function(v){v.validate();});
//console.log("[aanMakenGebruikerTabPanel] resize -- sync");
});
EDIT
I SOLVED IT BY USING THE CASCADE FUNCTION SO IT ALSO REACHES ITEMS IN A FIELDSET.
Ext.getCmp('aanMakenGebruikerTabPanel').on('tabchange',function(tabPanel,tab){
AanMakenGebruikerWindow.syncShadow();
tab.cascade(function(item) {
if (item.isFormField) {
item.validate();
}
} );
});
thanks, Richard

The deferredRender option defaults to true. Will setting it to false help?
{
xtype: 'tabpanel',
deferredRender: false,
items: []
}

In your Tab Panel config object add listeners for the beforetabchange/tabchange event. In the handler you have to iterate through the fields contained in the activated tab and trigger each field's validation. Hope this helps.

Resources