Title: How to prevent selection on certain datagrid column click?
Post by: bvn on October 26, 2017, 02:58:26 PM
I have a datagrid with a checkbox column and options checkOnSelect: true and selectOnCheck: true. It's nice.
But I have another one column 'Actions' with linkbuttons. When I click that buttons it changes some states of the database record, but it changes selection state too and it's not nice :)
I need to prevent changing of selection when I click the button in 'Action' column of my datagrid. How can I do that?
Thank you.
Title: Re: How to prevent selection on certain datagrid column click?
Post by: jarry on October 26, 2017, 06:06:06 PM
Stop the event bubbling when clicking on the button. <th data-options="field:'actions',width:60,align:'center',formatter:formatActions">Actions</th>
<script type="text/javascript">
function formatActions(){
var s = '<a href="javascript:;" onclick="action();event.stopPropagation()">Button</a>';
return s;
}
function action(){
alert('action')
}
</script>
Title: Re: How to prevent selection on certain datagrid column click?
Post by: bvn on October 31, 2017, 02:21:41 PM
Thank you. I realized it in such way: formatter: function (value, row, index) {
var out = '<a class="button_permission_read" data-options="selected:'+(value[0])+'" title="Read"></a>';
out += '<a class="button_permission_add" data-options="selected:'+(value[1])+'" title="Add"></a>';
out += '<a class="button_permission_edit" data-options="selected:'+(value[2])+'" title="Edit"></a>';
out += '<a class="button_permission_delete" data-options="selected:'+(value[3])+'" title="Delete"></a>';
return out;
}
onLoadSuccess: function (response) {
if (response.status == 'ok') {
$('.button_permission_read').linkbutton({
iconCls: 'icon-ok',
toggle: true
}).click(function (e) {
e.stopPropagation();
});
$('.button_permission_add').linkbutton({
iconCls: 'icon-add',
toggle: true
}).click(function (e) {
e.stopPropagation();
});
$('.button_permission_edit').linkbutton({
iconCls: 'icon-edit',
toggle: true
}).click(function (e) {
e.stopPropagation();
});
$('.button_permission_delete').linkbutton({
iconCls: 'icon-remove',
toggle: true
}).click(function (e) {
e.stopPropagation();
});
}
}
|