I want to hide kenod edit button with out removing it from code, I tried with adding a class with display:none and attribute hidden:true but nothing worked.
I need price button here but edit should be hidden.
{ command: ["edit",{text:"D" , click: deleteRow ,class : "k-grid-delete"} , {text:"Price" , click: showDetails ,class : "k-button"} ], title: " ", width: "120px" }
If you want the button to be hidden conditionally, you can use the dataBound() event:
dataBound: function (){
var grid = this;
var trs = this.tbody.find('tr').each(function(){
var item = grid.dataItem($(this));
if( item.Something == "Condition") {
$(this).find('.k-grid-edit').hide();
}
});
}
If you want to hide the button indefinitely, you can use the following CSS:
.k-grid-edit {
display: none;
}
Here is an example which displays the use of both methods (I have initially commented out the CSS example to display the conditional hide functionality).
Related
I want to use xeditable edit table rows inline on a button click.
Here is my jsfiddle: https://jsfiddle.net/nah26L67/
Here is my code:
$('.edit').on('click', function () {
var id = $(this).attr('data-edit-id');
$('span[data-id=' + id + ']').editable('toggle');
$('span[data-id=' + id + '][data-type=date]').editable('toggle');
});
The desired result is that when you click 'Edit' the entire row will show the xeditable inline text box where you can enter text along with the checkmark and the exit buttons.
The problem is my implementation just isn't working at all.
Does anyone have any idea why?
I found the answer to my question here: http://jsfiddle.net/xBB5x/348/
I needed to set the defaults for it like so:
var defaults = {
mode: 'inline',
toggle: 'manual',
showbuttons: false,
onblur: 'ignore',
inputclass: 'input-small',
savenochange: true
};
$.extend($.fn.editable.defaults, defaults);
"kendoContextMenu" is one of control from Telerik suit. I am trying to attach it with Kendo Scheduler control.
Below is the code to render scheduler and menu
Part of it taken from Kendo sample site
<div id="example">
<div id="scheduler"></div>
<ul id="contextMenu"></ul>
</div>
Here is Context Menu Initialization
$("#contextMenu").kendoContextMenu({
filter: ".k-event, .k-scheduler-table td",
target: "#scheduler",
select: function(e) {
var target = $(e.target);
if (target.hasClass("k-event")) {
var occurrenceByUid = scheduler.occurrenceByUid(target.data("uid"));
} else {
var slot = scheduler.slotByElement(target);
}
},
open: function(e) {
var menu = e.sender;
var text = $(e.target).hasClass("k-event") ? "Edit Title" : "Block";
menu.remove(".myClass");
menu.append([{text: text, cssClass: "myClass" }]);
}
});
});
The above code adds only ONE item in context menu and click event directly fires up. I would like to have multiple items in a context menu and each should have its own event so that I can use them as it clicked.
Below image shows right click behavior, where it shows only Block in a menu
I am trying to get menu as below- which has multiple items and have its own click events
I am trying like below by appending text but it's seems to be wrong way to do and it can not have separate click event.
open: function(e) {
var menu = e.sender;
var text = $(e.target).hasClass("k-event") ? "Edit event" : "Add Event";
text = text + "|" + "Cancel"
menu.remove(".myClass");
menu.append([{text: text, cssClass: "myClass" }]);
}
Kindly help
I'm afraid you're appending it wrong. By concatenating "| Cancel" you're not adding a new item, but adding text to the existing one.
Try creating a new object and append it with append():
menu.append([{text: "Cancel", cssClass: "cancel-opt" }]);
Then you check by the class inside the select event:
if (target.hasClass("cancel-opt"))
I have an Example what I get this from one of my previous post .I am trying to upgrade this with my need but I failing . I guess it's because of my lack of knowledge in jquery and JavaScripts . But I need this badly .
Here is Live demo in js fiddle :http://jsfiddle.net/qzKWD/5/
What I have now:
There you can see I have a button . If I click the button it will open a Div with Editable input , where I can rename the input and save . you can create many div by clicking the button and rename as you want .
What I am trying to do
What I was trying to Do is that ,I added a "X" text there . When I click the button "START" new div created with input to change name , also with this "X" text . What I am mainly trying is .. before I rename he input if I don't what that div I can remove the div with input by clicking the "X" text . SO that mean "X" will act as a close of that Div .But I am not finding any way to do that . May be because of my lacking of knowledge . If there is any solution or way it will be Excellent .
My code :
HTML
<button id="createDiv">Start</button>
<div id="results"></div>
CSS
#createDiv, #results span { cursor: pointer; }
#results div {
background: #FFA;
border: 1px solid;
width:auto;
}
#results input[type=text] {
border: none;
display: none;
outline: none;
}
.clickToCancleIcon{
float: right;
}
.new-folder{
height:30px;
float:left;
}
JS
// Call for document .onload event
$(function() {
// Normal Click event asignement, same as $("#createDiv").click(function
$("#createDiv").on("click", function(e) {
// Simply creating the elements one by one to remove confusion
var newDiv = $("<div />", { class: "new-folder" }), // Notice, each child variable is appended to parent
newInp = $("<input />", { name: "inpTitle[]",style:"display:block ;float:left; border:solid 1px #fa9a34", type: "text", value: "Unnamed Group", class: "title-inp" }).appendTo(newDiv),
newSpan = $("<span />", { id: "myInstance2",style:"display:none; float:left;", text: "Unnamed Group", class: "title-span" }).appendTo(newDiv),
clickToCancle = $("<a />", { text: "X", class: "clickToCancleIcon" }).appendTo(newDiv);
// Everything created and seated, let's append this new div to it's parent
$("#results").append(newDiv);
});
// the following use the ".delegate" side of .on
// This means that ALL future created elements with the same classname,
// inside the same parent will have this same event function added
$("#results").on("click", ".new-folder .title-span", function(e) {
// This hides our span as it was clicked on and shows our trick input,
// also places focus on input
$(this).hide().prev().show().focus();
});
$("#results").on("blur", ".new-folder .title-inp", function(e) {
// tells the browser, when user clicks away from input, hide input and show span
// also replaces text in span with new text in input
$(this).hide().next().text($(this).val()).show();
});
// The following sures we get the same functionality from blur on Enter key being pressed
$("#results").on("keyup", ".new-folder .title-inp", function(e) {
// Here we grab the key code for the "Enter" key
var eKey = e.which || e.keyCode;
if (eKey == 13) { // if enter key was pressed then hide input, show span, replace text
$(this).hide().next().text($(this).val()).show();
}
});
})
Just add the following code,
clickToCancle.click(function() {
$(newDiv).remove();
});
After,
clickToCancle = $("<a />", { text: "X", class: "clickToCancleIcon" }).appendTo(newDiv);
Or you can done this by,
clickToCancle = $("<a />", { text: "X", class: "clickToCancleIcon" }).appendTo(newDiv).click(function() {
$(newDiv).remove();
});
See the live DEMO
I want to make a simple table that contains a custom button in a row. When the button is pushed, I want to pop up an 'alert' box. I have read some posts on this, for example:
this post
and
this other post, and I don't understand why my code is not working. The buttons are drawn, but pushing them has no effect.
I have three attempts described here.
Version 1. The button click never fires:
$(document).ready(function(){
jQuery("#simpletable").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status}
],
data:[
{'A':2,'B':100,'status':"<button onclick=\"jQuery('#simpletable').saveRow('1', function(){alert('you are in')});\" >in</button>"},
{'A':1,'B':200,'status':"<button onclick=\"jQuery('#simpletable').saveRow('2', function(){alert('you are in')});\" >in</button>"},
],
caption: "Demo of Custom Clickable Button in Row",
viewrecords:true,
editurl:'clientArray',
});
});
Html Code:
<table id="simpletable"></table>
EDIT 8/2/12 -- I've learned some things since my original post and here I describe two more attempts.
Version 2: I use onCellSelect. This works, but it would not allow me to put more than one button in a cell. Additionally, I made the code nicer by using the format option suggested by one of the comments to this post.
function status_button_maker_v2(cellvalue, options, rowObject){
return "<button class=\"ver2_statusbutton\">"+cellvalue+"</button>"
};
jQuery("#simpletablev2").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status,editable:true,formatter:status_button_maker_v2}
],
data:[
{'A':2,'B':100,'status':"In"},
{'A':1,'B':200,'status':"Out"}
],
onCellSelect:function(rowid,icol,cellcontent,e){
if (icol==2){
alert('My value in column A is: '+$("#simpletablev2").getRowData(rowid)['A']);
}else{
return true;
}
},
caption: "Demo of Custom Clickable Button in Row, ver 2",
viewrecords:true,
}); //end simpletablev2
Markup:
<style>.ver2_statusbutton { color:blue;} </style>
<h3>simple table, ver 2:</h3>
<table id="simpletablev2"></table>
Version 3: I tried to use the solution to w4ik's post, using ".on" instead of deprecated ".live". This causes the button click to fire, but I don't know how to retrieve the rowid. w4ik also struggled with this, and he posted that he worked it out, but not how he did it. I can get the last row selected, but this will always refer to the previous row selected because the button is taking priority.
I would prefer this solution if I could get it to work.
jQuery("#simpletablev3").jqGrid({
datatype: "local",
colNames:['A','B','Status'],
colModel:[
{name:'A',index:'A'},
{name:'B',index:'B'},
{name:'status',index:status,editable:true,formatter:status_button_maker_v3}
],
data:[
{'A':2,'B':100,'status':"In"},
{'A':1,'B':200,'status':"Out"}
],
caption: "Demo of Custom Clickable Button in Row, ver 3",
viewrecords:true,
onSelectRow: function(){},
gridComplete: function(){}
}); //end simpletablev3
$(".ver3_statusbutton").on(
{
click: function(){
//how to get the row id? the following does not work
//var rowid = $("#simpletablev3").attr('rowid');
//
//it also does not work to get the selected row
// this is always one click behind:
//$("#simpletablev3").trigger("reloadGrid");
rowid = $("#simpletablev3").getGridParam('selrow');
alert("button pushed! rowid = "+rowid);
}
});
Markup:
<style>.ver3_statusbutton { color:red;} </style>
<h3>simple table, ver 3:</h3>
<table id="simpletablev3"></table>
In summary, I'm struggling with the issue of getting my button to be pushed at the right time. In version 1, the row gets selected and the button never gets pushed. Version 2 does not use the "button" at all -- It just handles the cell click. Verion 3 gets the button click before the row select (wrong order).
Any help would be appreciated!
You can use action formatter here with each row and make edit and delete button as false in formatOptions like this:
formatoptions: {editbutton:false,delbutton:false}}
And follow these two demos:
http://www.ok-soft-gmbh.com/jqGrid/Admin3.htm
http://ok-soft-gmbh.com/jqGrid/TestSamle/Admin1.htm
And on click event of these custom buttons show your alert:
EDIT
var getColumnIndexByName = function (grid, columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i++) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
function () {
var iCol = getColumnIndexByName(grid, 'act');
$(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")
.each(function() {
$("<div>", {
title: "Custom",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click: function(e) {
alert("'Custom' button is clicked in the rowis="+
$(e.target).closest("tr.jqgrow").attr("id") +" !");
}
}
).css({"margin-right": "5px", float: "left", cursor: "pointer"})
.addClass("ui-pg-div ui-inline-custom")
.append('<span class="ui-icon ui-icon-document"></span>')
.prependTo($(this).children("div"));
});
}
If you check this code, I'm trying to find out index value by giving column name as 'act', you can get index on any other column by giving a different column name.
var iCol = getColumnIndexByName(grid, 'Demo'); and the rest of the code will be same for you. //demo is the column name where u want to add custom button
and write your click event for this button.
Let me know if this works for you or not.
I needed the combobox with checkboxes in front of each option, to select multiple options. I tried using CheckedMultiSelect using "dropdown:true",
It shows the value in the combobox like, 2 item(s) selected, 1 item(s) selected,etc when I select items.
How to show the values selected in the text area of combobox separated by delimiter??
Should css or HTML or someotherthing has to be changed for checkedMultiSelect??
Thanks in advance.
As for your second question, you have to extend dojox.form.CheckedMultiSelect class and override _updateSelection and startup methods:
var MyCheckedMultiSelect = declare(CheckedMultiSelect, {
startup: function() {
this.inherited(arguments);
setTimeout(lang.hitch(this, function() {
this.dropDownButton.set("label", this.label);
}));
},
_updateSelection: function() {
this.inherited(arguments);
if(this.dropDown && this.dropDownButton) {
var label = "";
array.forEach(this.options, function(option) {
if(option.selected) {
label += (label.length ? ", " : "") + option.label;
}
});
this.dropDownButton.set("label", label.length ? label : this.label);
}
}
});
Use MyCheckedMultiSelect instead of dojox.form.CheckedMultiSelect:
var checkedMultiSelect = new MyCheckedMultiSelect ({
dropDown: true,
multiple: true,
label: "Select something...",
store: dataStore
}, "placeholder");
checkedMultiSelect.startup();
Again, I added this to the jsFiddle: http://jsfiddle.net/phusick/894af/
In addition to #Craig's solution there is also a way to add only a look&feel of checkboxes via CSS. If you inspect generated HTML, you can see that each row is represented as a table row <tr> with several table cells <td>. The table row of the selected item gets CSS class .dojoxCheckedMultiSelectMenuItemChecked, so I suggest to change styling of the first cell which always has class .dijitMenuItemIconCell:
td.dijitMenuItemIconCell {
width: 16px;
background-position: center center;
background-repeat: no-repeat;
background-image: url('some-unchecked-image-here.png');
}
tr.dojoxCheckedMultiSelectMenuItemChecked td.dijitMenuItemIconCell {
background-image: url('some-checked-image-here.png');
}
So you will get:
I added this to the jsFiddle I was helping you with before: http://jsfiddle.net/phusick/894af/
The CheckedMultiSelect does not provide checkboxes when the dropDown is set to true. It simply allows the user to click to click multiple items to select.
To implement what you want, take a look at my answer here:
Custom dojo Dropdown widget by inheriting _HasDropdown and _AutoCompleterMixin
In MyCustomDropDown, you will need to build the list of checkboxes and items as a custom widget. I would recommend looking at dojox.form._CheckedMultiSelectMenu and dojox.form._CheckedMultiSelectMenuItem and mimic the functionality there and just give a different ui (with checkboxes).
dojox.form.CheckedMultiSelect should have been showing the checkboxes, this ticket fixes the problem. https://bugs.dojotoolkit.org/ticket/17103