JqGrid - Add events on addRow fields - javascript

Using jqGrid, is there any way to update the values of a select field once the add Form dialog has been loaded? I need to update the list of values on the select field based on data the user is entering on a another field in the same add Form dialog.
Thanks!
EDIT: This is the model structure I have
{name:"Name",index:"Name", width:30,editable: true,editoptions:{size:"30",maxlength:"30"}},
{name:'LastName',index:'LastName', width:30,editable: true,editoptions:{size:"30",maxlength:"30"}},
{name:'Id',index:'Id',width:30, editable:true, sorttype:"text",editoptions:{size:"30",maxlength:"30"}},
{name:'Email',index:'Email', width:40, editable: true,editoptions:{size:"40",maxlength:"30"}, editrules:{custom:true, custom_func:emailFormatter}},
{name:'Option1',index:'Option1', width:20, editable: true,edittype:"select",editoptions:{value:updateOption1Values}}
I figured out how to attach an event to the Id field.
afterShowForm: function (e) {
$("input#Id").blur(function() {
updateOption1Values();
$("input#Option1").selectmenu("refresh");
alert("Blur!");
});
}
Now what I need is to update the Option1 select box. I call updateOption1Values and manipulate the values but the select control is not showing those changes

Related

Dynamically Change Populate Select List after Edit From Displays

I am using jqGrid 4.15.6-pre
I have a Select list in my edit form that populates using dataURL in the onSelect function
based on a couple of parameters. There is a input element on the edit form that has a function bound to it that can change one of the parameter(customerReturnType) values. I would like to programmatically repopulate the Select List based on the new parameter value.
Here is my onSelect code:
locationCheckOverride = false;
customerReturnLocation = $("#customerReturnqueue").getRowData(id)['crrLocation'];
customerReturnType = $("#customerReturnqueue").getRowData(id)['crrType'];
editModeOverride = $("#customerReturnqueue").getRowData(id)['editModeOverride'];
holdingLocationEditOnly = $("#customerReturnqueue").getRowData(id)['editHoldingLocationOnly'];
$("#customerReturnqueue").setColProp('crrLocation', {
editoptions: {
dataUrl: '/QMSWebApp/CustomerReturnRecordsControllerServletV8?lifecycle=customerReturnLocationOptionsLessInitialized&currentLocation='+customerReturnLocation+'&crrType='+customerReturnType,
selectFilled: function (options) {
$(options.elem).select2({
dropdownCssClass: 'ui-widget ui-jqdialog zclassX2',
width: 300
});
}}});
If I correctly understand the problem you want to dynamically change the select based on a change new value.
Here is example in Guriddo jqGrid, but it should work in free-jqgrid. This is just a idea how you can do this.

how to get event of on change of drop down in angular?

can you please tell me how to get event of on change of drop down in angular ?.
I make a drop down from json .I need to show alert when user change the drop down ng:change and get it drop down value ? I make form form using this doc
https://github.com/Textalk/angular-schema-form/blob/master/docs/index.md#global-options
here is my plunker http://plnkr.co/edit/wbziK5aRUg69JuwXDoVy?p=preview
how I i bind ng:change ?
here is my drop down
title: {
type: "string",
required: true,
enum: ['dr', 'jr', 'sir', 'mrs', 'mr', 'NaN', 'dj']
}
how to bind the drop down event ?
angularjs Select with filter to filter out the option that's already selected
refer this you need to use ng options and you r using array.and ur trying to populate object thats why it is not getting binded i guess

In Kendo UI Mobile kendoMobileListView, clear the filterable input field after selecting an item in list

How do I clear(empty) the filterable input field after selecting an item in a kendoMobileListView list while refreshing the data in the list?
I have tried manually emptying the input field and refreshing the list view data after the click event as such:
$myListView.kendoMobileListView({
dataSource: new kendo.data.DataSource({
// my data source
}),
filterable: {
field: 'SearchField',
operator: 'contains'
},
click: function (e) {
// do some stuff with 'e'
// Clear the input search input box
$('#the-filterable-input-field').val('');
$myListView.data('kendoMobileListView').refresh();
}
});
This empties the filterable input field, but fails to refresh the data in the list. I am looking for the same effect that clicking the "X" has after typing something in the filterable input field.
Any help would be appreciated!
ANSWER:
There is an "X" that shows up when you start typing in the filterable input field. When you click this "X" element it clears the filterable input field and also refreshes the associated list of items. So the answer to my question is this: simply create a trigger that clicks that "X" element:
($the-x-element).trigger('click');
Try this instead of refresh listview. Hope this will help you.
var listview= $myListView.data('kendoMobileListView');
listview.dataSource.filter({});

JavaScript hide element function

I have a form where the user can select a generic auto-population based on checking a radio button. When the user checks the auto-populate radio button, the fields are auto populated with the data and then the fields become disabled.
In this first part of the function, I pass the auto-filled data:
$('#myOptions').click(function()
$('#value1').val("Auto-filled data");
$('#Value2').val("Auto-filled data");
$('#Value3').val("Auto-filled data");
In this second part, I am disabling the html inputs
// now i am disabling the html inputs:
$('#Value4').prop("disabled", true);
$('#Value5').prop("disabled", true);
$('#value6').prop("disabled", true);
Suppose I have another field with an ID of "Value7" in the form, that I would like to hide from the user interface as part of this function.
How can I hide the "Value7" input upon function triggering? I appreciate the help, I am very new to JavaScript, though I find it very exciting!
Using jquery:
To hide
jQuery('#Value7').hide() or jQuery('#Value7').css("display","none")
To show the element back
jQuery('#Value7').show() or jQuery('#Value7').css("display","block")
or pure js:
javascript hide/show element
Try this javascript:
if you want disable:
document.getElementById('#Value7').setAttribute("disabled","disabled");
if you want enable:
document.getElementById('#Value7').removeAttribute('disabled');
if you want to hide :
document.getElementById('#Value7').css("display","none");
if you want to show:
document.getElementById('#Value7').css("display","block");
I am not getting what are you trying to ask actualy .
Let me know if this helps -
$("Value7").hide()

Fire method to fill detailsview control, from jquery autocomplete input

I have an input box for searching employee info (attached to a jquery autocomplete), and a box for employee number. The employee info queries multiple values (Lastname Firstname, Title, Clocknum) and returns them all as a string via the autocomplete. This is only if they dont know the clock number. The additional box is so they can search via clocknum as well.
Is there a way, to fire a method which populates a data control after clicking on or tabbing on the selected jquery autocomplete value?
using the select property of your autocomplete box:
updated after ekoz's comment
$('#lastName').autocomplete
({
source : "FormAutoComplete.ashx",
minChars : 3,
width : 325,
mustMatch: true,
select : function()
{
//jquery allows you to save several code lines
$('#txtClock').value(ui.item.value.substr(ui.item.value.length-5));
}
});
a complete read of jquery autocomplete's documentation should makes clear the code above http://jqueryui.com/demos/autocomplete/

Categories