I am newbie to jqgrid. and for one requirement, I need to hide edit form that poped up when we click edit button of navbar(pager). How can I hide it based on condition.
on click of Edit button, I am checking how many rows are selected by user. if it is more than one, I need to hide edit form and need to show alert message that, they can only edit one record.
I did following but did not work.
beforeShowForm: function(form){
form.hide();
$("#editmodlist").css("display", "none"); // where I hardedcoded div that surounds edit form
}
just adding my solution here for better formatting of code.
beforeInitData: function(form){
var selRowIds = jQuery('#list').jqGrid('getGridParam', 'selarrrow');
if(selRowIds.length>1)
{
alert("Error");
return false;
}
else
{
return true;
}
}
Related
I have a form which has a tab and in this tab is a quickview form. On the quickview form, I have a subgrid and a text field.
The tab has a default state of 'collapsed'. When I open the form, only the text field is displayed. It seems as if the subgrid in no rendering at all.
If I change the tab default state to 'expanded', then when I open the form, the
subgrid is rendering correctly.
I have tried to refresh the quickform view outlined here
https://msdn.microsoft.com/en-us/library/mt736908.aspx
But it does not seem to work.
UPDATE:
I have tried the following, but still no success.
FIRST VERSION
// Triggering when the tab is expanded
function onChange(){
console.log('on change');
// get quick view form
var qv = Xrm.Page.ui.quickForms.get("myquickformview");
qv.refresh();
// get subgrid
try {
qv.getControl(0).refresh();
}
catch (e)
{
console.log(e);
}
}
SECOND VERSION
function onLoad(){
console.log('onload');
Xrm.Page.getAttribute('new_person').addOnChange(refresh);
}
function onChange(){
Xrm.Page.getAttribute('new_person').fireOnChange();
}
function refresh(){
console.log('on change');
// get quick view form
var qv = Xrm.Page.ui.quickForms.get("myquickformview");
// get subgrid
try {
qv.getControl(0).setVisible(false);
qv.getControl(0).setVisible(true);
qv.getControl(0).refresh();
}
catch (e)
{
console.log(e);
}
qv.refresh();
}
Any advice appreciated. Thanks in advance.
1.Add onchange event handler for the lookup (on which Quick view form is rendered) to have the code to refresh the quick view control.
Xrm.Page.getAttribute("lookup_fieldname").addOnChange(function);
Keep the below code in function.
var quickViewControl = Xrm.Page.ui.quickForms.get(“your quick view form name”);
if (quickViewControl != undefined) {
if (quickViewControl.isLoaded()) {
quickViewControl.refresh();
}
}
2.Trigger fireOnChange() of lookup on tab expanded handler, so that onchange will refresh QVform totally.
Xrm.Page.getAttribute("lookup_fieldname").fireOnChange();
Got a hint from this. I just answered here (in mobile without testing) to unblock you.
I have a kendo grid with filterable = true, mode=row.
I would like a way to have a button click, fire an event that will toggle hiding and showing the filter row.
Right now, I have it working by editing the innerHTML, but this is not what I want to do in the end, for several reasons.
1) I need to have a saved version of the filter row values before they are removed.
2) After they are removed and re-added they will not work
...
many other reasons, just bad practice and there has to be a better way.
A button that fires the event: toggleFilterClick:
<script type="text/x-kendo-template" id="gridFilter">
<button type="button" class="k-button" id="kendoFilterButton" data-click="toggleFilter"><span class="k-icon k-i-funnel"></span>Filter On/Off</button>
</script>
The Javascript code:
//Gets the innerHTML values before they are removed
var filterRowValues = $(".k-filter-row")[0].innerHTML;
//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {
if ($(".k-filter-row")[0].innerHTML == '')
{
$(".k-filter-row")[0].innerHTML = filterRowValues;
}
else
{
$(".k-filter-row")[0].innerHTML = '';
}
});
Any thoughts suggestions would be appreciated/
I would just like to hide the actual filter row in the header
I'm not sure if i get the point but if you just want to hide it just simply remove everything except$(".k-filter-row").show(); and $(".k-filter-row").hide();. I create an example where when i hide the filter, the filter condtion will removed, but when it showed again the grid will refiltered with the previous value used to filter
$("#toggle").kendoButton({
click:function(){
if($(".k-filter-row").css("display") == "none"){
$(".k-filter-row").show();
//show again filter and execute previous filter condition
$("#grid").data("kendoGrid").dataSource.filter({field:"ShipName",operator:"contains",value:vm.get("filterOptions.ShipName").toString()});
$("#grid").data("kendoGrid").dataSource.filter({field:"OrderID",operator:"eq",value:vm.get("filterOptions.OrderID")});
}else{
//store the previous filter value
//autocomplete
vm.set("filterOptions.ShipName",$("input[data-role='autocomplete']").data("kendoAutoComplete").value());
vm.set("filterOptions.OrderID",$("input[data-role='numerictextbox']").data("kendoNumericTextBox").value());
//hide filter row
$(".k-filter-row").show();
//to reset filter of the grid when filterable hidden
$("#grid").data("kendoGrid").dataSource.filter({});
}
}
});
See the details in action
DEMO
Have you tried just hiding the row instead of removing it?
//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {
if ($(".k-filter-row").is(":visible")){
$(".k-filter-row").hide();
}
else{
$(".k-filter-row").show();
}
});
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.
This is what I am trying to achieve:
Whenever a user selects a row for editing, I want to check the value of that row for a particular column. If the value that I am looking for is found then I want to display a message and close the edit dialog box. So far, This is what I have come up with:
// Options for EDIT
{height:280,mtype: "POST",closeAfterEdit: true,reloadAfterSubmit:true, url:'gridedit.jsp',
recreateForm: true,
//set some properties beofre the dialog box is seen by the user
beforeShowForm: function(form) {
/*$('#adate',form).attr('readonly','readonly');
$('#account',form).attr('hidden','true');*/
$('#adate',form).hide();
$('#account',form).hide();
var sel_id = $("#list").jqGrid('getGridParam', 'selrow');
var value = $("#list").jqGrid('getCell', sel_id, 'mod');
if(value=='n'){
alert('NOOOOOOOOOOOOOOO!')
}
}
}
after the alert, how do i close the edit dialog box ? right now the dialog box appears after the alert.
found the answer:
i just have to write
form.close();
after the alert
I have used Ajax.BeginForm / Html.BeginForm for a view which sends an object to the controller on clicking submit. There are some telerik controls which are disabled conditionally. On clicking submit, the object is unable to retrieve the already existing value in the control since it is disabled. Hence object is made with null values. Any help?
Im using jquery to disable these telerik controls on loading the page.
Change.setDropDownValues = function () {
if (condition) {
$("#A").data('tDropDownList').enabled = false; $("#A").data('tDropDownList').disable();
}
}
else if (condition) {
$('#Pop').attr('disabled', 'disabled'); //text box
$('#ShortDesc').attr('disabled', 'disabled'); //textarea
$('#LongDesc').attr('disabled', 'disabled'); //text area
$('#Cont').attr('disabled', 'disabled'); //text box
$('#iDate').attr('disabled', 'disabled'); //datepicker division
$('#C').data('tDropDownList').enabled = false; //drop down list
$('#C').data('tDropDownList').disable();
}
};
Can anyone say how to remodify so that I can fetch the disabled field values?
That's how disabled inputs work. They never send the value to the server. You could use readonly instead if you want to prevent the user from modifying the value and yet send the old value to the server when the form is submitted.
you can use something like this
$(":disabled", $('#yourform')).removeAttr("disabled");
before submit.