All,
I have created a custom button on viewGridRow. See below code snippet. When user clicks on that button I want to show UI dialog and perform some operation and close the window. Within same View window user clicks next row does similar functionality.
I tried adding a id and checked onclick but it doesnt fire. How do I go about adding onclick event on that custom button? Help is appreciated.
$.extend($.jgrid.view, {
bSubmit: "View details",
width: 370,
recreateForm: true,
beforeShowForm: function (form) {
var selRowId = $(this).getGridParam('selrow')
$('<a id="viewBtn" href="#">View Report<span class="ui-icon ui-icon-disk"></span></a>').addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
.prependTo("#Act_Buttons>td.EditButton");
}
});
You can change beforeShowForm callback to the following for example:
beforeShowForm: function ($form) {
var $self = $(this);
$('<a id="viewBtn" href="#">View Report<span class="ui-icon ui-icon-disk"></span></a>')
.click(function () {
var selRowId = $self.jqGrid("getGridParam", "selrow");
alert("'View' button on rowid=" + selRowId + " was clicked.");
return false;
})
.addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
.insertBefore($form.next(".EditTable").find("#cData"));
}
The demo which uses the code displays
Related
i am trying kendo kendoColorPicker.
with change Events.
when change color and click on apply button its work.(change the font color).
but i want to set if click on cancel button then set default font color.
any idea how its done.
this is simple try.
<div id="example" class="k-content">
<label for="hsv-picker">Font:</label>
<input type="color" id="picker" value="#000000" data-role="colorpicker">
<script>
kendo.init($("#example"));
$("#picker").each(function(){
var colorPicker = $(this).data("kendoColorPicker");
colorPicker.bind({
change: function(e) {
$("#example").css("color",e.value);
console.log("Change in picker #" + this.element.attr("id") + " :: " + e.value);
}
});
});
</script>
</div>
thanks in advance.
By default, the cancel button will revert the color to the previous value so I am not sure that it is necessary for you to control cancel button clicks. You could just set the initial value of the picker to your desired default value.
However, you'll want to use the close event. Here is an example.
$('#hsv-picker').kendoColorPicker({
select: function (e) {
log("Select in picker #" + this.element.attr("id") + " :: " + e.value);
},
change: function (e) {
log("Change in picker #" + this.element.attr("id") + " :: " + e.value);
},
open: function () {
log("Open in picker #" + this.element.attr("id"));
},
close: function (e) {
log("Close in picker #" + this.element.attr("id"));
}
});
Close fires any time the control was closed, regardless of whether change occurred or not. To capture only cancel clicks you'd have to either setup a delegate click event or use some flags between the open, change, and close events. Here's an example of handling the delegate click event.
$('body').on('click', '.k-controls button.cancel', function(){
alert('Cancel clicked');
});
Here's a fiddle.
Is there a way to implement 2 different edit form in jqGrid. I mean one normal usual edit form and the other with a much lesser form field (customized). both in the same navGrid. say edit and editpartial. can anyone throw some light?? many thanks.
The buttons "Add" and "Edit" added by navGrid call both editGridRow method with different parameters as the second parameter (properties parameter). In case of usage navGrid called as
$("#grid").jqGrid("navGrid", "#pager", {parameters}, prmEdit, prmAdd);
then navGrid calls
$("#grid").jqGrid("editGridRow", rowid, prmEdit);
if the user click "Edit" button and calls
$("#grid").jqGrid("editGridRow", rowid, prmAdd);
if the user click "Add" button.
In the same way you can add new custom button to navigator with respect of navButtonAdd method. For example
$("#grid").jqGrid("navButtonAdd", "#pager", {
caption: ""/*"My Edit"*/,
buttonicon: "ui-icon-note", // some icon
title: "My edit",
onClickButton: function() {
var $self = $(this);
$self.jqGrid("editGridRow",
$self.jqGrid("getGridParam", "selrow"),
{ // some options
recreateForm: true
}
);
}
});
In the way you add one more Edit button. The only thing which you need do now is temporary changing of editable property of some columns before call of editGridRow and resetting it to original value after call of editGridRow. You can use setColProp method to simplify the work. For example if you want to make myColumn column editable you can use
$("#grid").jqGrid("navButtonAdd", "#pager", {
caption: ""/*"My Edit"*/,
buttonicon: "ui-icon-note", // some icon
title: "My edit",
onClickButton: function() {
var $self = $(this);
// make "myColumn" temporary editable
$self.jqGrid("setColProp", "myColumn", {editable: true});
$self.jqGrid("editGridRow",
$self.jqGrid("getGridParam", "selrow"),
{ // some options
recreateForm: true
}
);
// make "myColumn" back as non-editable
$self.jqGrid("setColProp", "myColumn", {editable: false});
}
});
I want to emphasize that usage of recreateForm: true option for all usage of editGridRow (inclusive navGrid) is very important. So I recommend you just change default value of the option:
$.extend($.jgrid.edit, { recreateForm: true });
I want to write code on Refresh button click of JQGrid. Is there any event for that?
If you need to do some actions before refresh will be started you should use beforeRefresh callback:
$("#grid_id").jqGrid('navGrid', '#gridpager', {
beforeRefresh: function () {
// some code here
}
});
If you need absolute another implementation of grid Refreshing where you will not call $("#grid_id").trigger("reloadGrid"); (which sound strange) you can do this by the usage of refresh: false option to remove the standard Refresh button and using navButtonAdd to add your custom button which looks exactly like the original one:
$("#grid_id").jqGrid('navGrid', '#gridpager', {refresh: false});
$("#grid_id").jqGrid('navButtonAdd', "#gridpager", {
caption: "", title: "Reload Grid", buttonicon: "ui-icon-refresh",
onClickButton: function () {
alert('"Refresh" button is clicked!');
}
});
The css for refresh button is ui-icon-refresh
so you can write your custom code on this css like
jQuery('.ui-icon-refresh').click(function(){
// do your work
});
jqGrid Edit form invoked using Edit button from top toolbar is defined as
grid.navGrid("#grid_toppager", { del: false,add: false,view: true },
{ url: '/Edit',
bSubmit: 'Save',
editCaption: 'Change',
} );
This is used to show data in readonly grid. Pressing submit button does not make sence in this case.
How to remove submit button ?
You can hide Submit button the in the beforeShowForm of the edit form options:
beforeShowForm: function ($form) {
$form.parent().find('#sData').hide();
}
So I have a view that allows users to Approve or Reject items listed on the page. When approved, I simply use the #Ajax.ActionLink to post to the appropriate controller action. When the user Rejects an item, the user is required to enter a reason for the rejection. I'm found code on the internet that gave me a popup dialog and added a textbox and OK/Cancel buttons. I can capture the input from the user and show it in an alert, but now I need to complete it and I'm not sure how.
1st - I need add functionality to pass to my jquery link handler, the ID associated with the Item being rejected.
2nd - I need a way to call my Controller Action from the jquery.
Here is the code I have up to this point.
My link is simply an 'a' tag. I can't see to post the code for this without removing the <>
a href="#dialog" name="modal" Reject a
My script handles this here
$(document).ready(function () {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function (e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).val('');
$(id).fadeIn(2000);
});
Here is my pop up dialog and the mask that grays out the screen when the dialog is opened.
<div id="boxes">
<div id="dialog" class="window">
Enter the reason for rejection:</br>
<textarea class="multiline" id="rejectreason" rows="10" cols="20"></textarea><br/>
<div style="margin-left: 120px"><input type="button" value="OK" class="ok" style="width:70px"/> <input type="button" value="Cancel" style="width:70px" class="close"/>
</div>
</div>
<!-- Mask to cover the whole screen -->
<div id="mask"></div>
</div>
It could be that I'm going about this completely wrong, but it's all I could find on line and pieced it all together from there. As this is my first experience with jquery and MVC, I'm struggling a bit here. Any help would be greatly appreciated.
Thanks
UPDATE
OK, so I added a data-id attribute to my link that allows me to get the ID of the link clicked. I tested it using this code and it works.
var iD = $(this).attr('data-id');
I now need to pass this value to my dialog so I can then retrieve it again when the OK button on the dialog is clicked. I can set a hidden field on the page if necessary and retrieve it from there.
Here is some code to get you on the right path...
jQuery Ajax:
$(document).ready(function () {
$("#InputButtonId").click(function () {
$.ajax({
url: '#Url.Action("SomeAction", "Controller")',
type: 'POST',
data: { id: $("#hidden").val(), reason: $("#rejectreason").html },
dataType: "json",
beforeSend: function () {
},
success: function (result) {
// Do action if success
},
error: function (result) {
// Do action if error
}
});
return false;
});
});
And the controller action:
[HttpPost]
public JsonResult SomeAction(string id, string reason)
{
//Perform Actions
return Json(new
{
value1 = value1,
value2 = value2
}, JsonRequestBehavior.AllowGet);
}
Hope this helps.