Related
I am trying to display a bar chart on click of Go button on selection screen.
I am getting invalid data binding in place of VIZ Chart.
I have attached the error message which I am getting. I have attached my XML view and its controller logic as well.
sap.ui.controller("znwpm_charts_dash.Charts", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* #memberOf znwpm_charts_dash.Charts
*/
onInit: function() {
var oVizFrame = this.getView().byId("idVizFrame");
jQuery.sap.require("sap.ui.model.resource.ResourceModel");
var oResourceModel = new sap.ui.model.resource.ResourceModel({
bundleName :"znwpm_charts_dash/i18n/i18n",
async :true
});
var oViewInternalModel = this.getView().getModel('viewInternalModel');
if(!oViewInternalModel){
oViewInternalModel = new sap.ui.model.json.JSONModel();
oViewInternalModel.setProperty("/filters", []);
this.getView().setModel(oViewInternalModel, 'viewInternalModel')};
sap.ui.getCore().setModel(oResourceModel , "i18n");
//
jQuery.sap.require("sap.ui.model.Filter" );
if(!oVizFrame){
}else{
oVizFrame.setVisible(false);
oVizFrame.setVizProperties({
title:{
text : "NWPM"
}
}); }
},
onSearch:function(evt){
this.aFilters = [];
var button = evt.getSource();
var eDock = sap.ui.core.Popup.Dock;
jQuery.sap.require("sap.m.MessageBox");
var startDate = this.getView().byId("startDateId").getValue();
if(!startDate){
sap.m.MessageToast.show("Start Date is required Field" ,{
duration:4000,
width :"25em",
my: eDock.CenterCenter,
at: eDock.CenterCenter,
of: window,
offset:"20"
}) ;
}else{
var endDate = this.getView().byId("endDateId").getValue();
if(!endDate){
sap.m.MessageToast.show("End Date is required Field" ,{
duration:4000,
width :"25em",
my: eDock.CenterCenter,
at: eDock.CenterCenter,
of: window,
offset:"20"
}) ;
}else{
this.__applyFilters();
};
};
},
__applyFilters:function(){
var oView = this.getView();
var filterModel = this.getView().getModel('viewInternalModel').getProperty("/filters");
this.__setDefaultFilters();
this.__oDataCall();
},
__setDefaultFilters:function(){
this._filterSetTemp('DateFrom', this.getView().byId("startDateId").getValue());
this._filterSetTemp('DateTo', this.getView().byId("endDateId").getValue());
},
_filterSetTemp:function(sPropertyName, oInputValue){
if(!this.aFilters){
this.aFilters = [];
var aFilters = [];
}
var oViewInternalModel = this.getView().getModel('viewInternalModel');
var aFilter = oViewInternalModel.getProperty("/filters");
aFilter[sPropertyName] = oInputValue;
oViewInternalModel.refresh();
this.aFilters.push( new sap.ui.model.Filter(sPropertyName, sap.ui.model.FilterOperator.EQ, oInputValue ) );
},
__oDataCall:function(){
var oVizFrame = this.getView().byId("idVizFrame");
var sUrl = "/sap/opu/odata/sap/ZIMM_INTERFACE_DASH_SRV";
var oDataModel = new sap.ui.model.odata.v2.ODataModel(sUrl ,true);
var oJsonModel = new sap.ui.model.json.JSONModel();
oItemsFilters = new sap.ui.model.Filter(this.aFilters, true);
var oView = this.getView();
oBusy = sap.ui.getCore().byId("busyID");
if(!oBusy){
var oBusy = new sap.m.BusyDialog("busyID",{
text :"Fetching Data"
});
}
oBusy.open();
oDataModel.read("/ChartsSet",{
filters:[oItemsFilters],
success:function(oData,response){
debugger;
oJsonModel.setData(oData);
oVizFrame.setModel(oJsonModel);
oVizFrame.setVisible(true);
oView.setModel(oJsonModel );
sap.ui.getCore().setModel(oJsonModel);
oBusy.close();
},
error:function(err){
oBusy.close();
}
});
},
selectData:function(evt){
debugger;
var onClick = evt.getParameters('data').data[0].data["Functional Area"];
var oApp = sap.ui.getCore().byId("idApp");
oApp.to("idTable");
},
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* #memberOf znwpm_charts_dash.Charts
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* #memberOf znwpm_charts_dash.Charts
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* #memberOf znwpm_charts_dash.Charts
*/
// onExit: function() {
//
// }
});
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m ,sap.viz"
data-sap-ui-xx-bindingSyntax="complex"
ata-sap-ui-preload="async"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("znwpm_charts_dash");
var app = new sap.m.App("idApp",{initialPage:"idCharts1"});
var page = sap.ui.view({id:"idCharts1", viewName:"znwpm_charts_dash.Charts", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
var page2 = sap.ui.view({id:"idTable", viewName:"znwpm_charts_dash.Table", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page2);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
is it possible to add annotation in my video using Video.js?
Below is my work out
<link href="http://vjs.zencdn.net/4.4/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.4/video.js"></script>
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="my_video.mp4" type='video/mp4'>
<source src="my_video.webm" type='video/webm'>
</video>
<script>
var Plugin = videojs.getPlugin('plugin');
var ExamplePlugin = videojs.extend(Plugin, {
constructor: function(player, options) {
Plugin.call(this, player, options);
player.on('timeupdate', function(){
var Component = videojs.getComponent('Component');
var TitleBar = videojs.extend(Component, {
constructor: function(player, options) {
Component.apply(this, arguments);
if (options.text)
{
this.updateTextContent(options.text);
}
},
createEl: function() {
return videojs.createEl('div', {
className: 'vjs-title-bar'
});
},
updateTextContent: function(text) {
if (typeof text !== 'string') {
text = 'hello world';
}
videojs.emptyEl(this.el());
videojs.appendContent(this.el(), text);
}
});
videojs.registerComponent('TitleBar', TitleBar);
var player = videojs('my-video');
player.addChild('TitleBar', {text: 'hellow people!'});
});
}
});
videojs.registerPlugin('examplePlugin', ExamplePlugin);
videojs('#my-video', {}, function(){
this.examplePlugin();
});
</script
</html>
//copy and paste this code it will surely work.
I have created a sample database and test scripts with it.
The database structure is:
I have created a JSFiddle for it: fiddle
Click all the buttons except stress test on the top, then click the tests.
The problem is, it perfectly works with provider webSql, but it fails on the provider indexedDb. I downloaded the pro packages and it makes test 3 work partially but it still fails on test 2 completely.
The problem i found is when i query the database with join relation(ex: employees in with department.ID is 1) indexedDb cannot process this request.
How can circumvent this situation?
Whole code is:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jaydataPro/jaydata.min.js"></script>
<script src="jaydataPro/jaydataproviders/IndexedDbProProvider.min.js"></script>
<script src="jaydataPro/jaydataproviders/SqLiteProProvider.min.js"></script>
<script src="jaydataPro/jaydataproviders/WebApiProvider.min.js"></script>
<script src="jaydataPro/jaydataproviders/YQLProvider.min.js"></script>
<script src="sampledatabase.js"></script>
<script src="test.js"></script>
<title>Jaydata Test</title>
</head>
<body>
<div>
<h3>Database Generation</h3>
<div>
<button onclick="TestAddDepartments(5);">Add Departments</button>
</div>
<div>
<button onclick="AddEmployeeList(TestEmployeeList(1,100),1);"> Employees 1</button>
<button onclick="AddEmployeeList(TestEmployeeList(101,100),2);">Employees 2</button>
<button onclick="AddEmployeeList(TestEmployeeList(201,100),3);">Employees 3</button>
<button onclick="AddEmployeeList(TestEmployeeList(301,100),4);">Employees 4</button>
<button onclick="AddEmployeeList(TestEmployeeList(401,100),5);">Employees 5</button>
</div>
<div>
<button onclick="AddStockList(TestStockList(1,400),1);">
Stocks 1</button>
<button onclick="AddStockList(TestStockList(401,400),2);">
Stocks 2</button>
<button onclick="AddStockList(TestStockList(801,400),3);">
Stocks 3</button>
<button onclick="AddStockList(TestStockList(1201,400),4);">
Stocks 4</button>
<button onclick="AddStockList(TestStockList(1601,400),5);">
Stocks 5</button>
</div>
<div>
<button onclick="AddStockList(TestStockList(2001,5000),2);">
Stress Test for Test 3</button>
</div>
</div>
<div>
<h3>Queries</h3>
<button onclick="TestSearchEmployeeName1()">Test 1</button>
<button onclick="TestSearchEmployeeName2()">Test 2</button>
<button onclick="TestSearchEmployeeName3()">Test 3</button>
</div>
<div>
<h3>Results</h3>
<p id='Result'>Result</p>
</div>
</body>
</html>
sampledatabase.js:
/*
x is a database
Database name is Company
Company has 3 tables:
=Departments
-ID(key,computed)
-DepartmentName(string,required)
=Employees
-ID(key,computed)
-Name(string,required)
=Stocks
-ID(key,computed)
-Description(string)
-NumItems(int,required)
Employee is connected to Department
Stock is connected to Department
Department has a list of Stocks and Employees
To do:
-insert websql and indexeddb translations to the document
*/
$data.Entity.extend("Org.Employee",{
ID: {key: true, type: "integer", computed: true},
Name: {type: "string", required: true},
Department: {type: "Org.Department", inverseProperty: "Employees"}
});
$data.Entity.extend("Org.Stock",{
ID: {key: true, type: "integer", computed: true},
Description: {type: "string"},
NumItems: {type: "integer", required: true},
Department: {type: "Org.Department", inverseProperty: "Stocks"}
});
$data.Entity.extend("Org.Department",{
ID: {key: true, type: "integer", computed: true},
DepartmentName: {type: "string", required: true},
Employees:{type: Array, elementType: "Org.Employee", inverseProperty:"Department"},
Stocks:{type: Array, elementType: "Org.Stock", inverseProperty:"Department"}
});
$data.EntityContext.extend("Company",{
Employees: {type: $data.EntitySet, elementType: Org.Employee},
Departments: {type: $data.EntitySet, elementType: Org.Department},
Stocks: {type: $data.EntitySet, elementType: Org.Stock}
});
var x= new Company({
provider: "indexedDb",
databaseName: "DB",
version: 1,
dbCreation: $data.storageProviders.DbCreationType.DropAllExistingTables
});
function AddEmployee(emp,department)
{
x.Departments.first(
function(it){
return it.ID==department.valueOf()
},
{emp:emp,department:department},
function(dep){
x.Departments.attach(dep);
emp.Department=dep;
x.Employees.add(emp);
x.Employees.saveChanges();
}
);
}
function RemoveEmployee(emp_id)
{
x.Employees.first(
function(res){
return res.ID==emp_id.valueOf();
},
{emp_id:emp_id},
function(emp)
{
x.Employees.remove(emp);
x.Employees.saveChanges();
}
);
}
function ChangeEmployeeName(emp_id,new_name)
{
x.Employees.first(
function(res){
return res.ID==emp_id.valueOf();
},
{emp_id:emp_id,new_name:new_name},
function(emp)
{
x.Employees.attach(emp);
emp.Name=new_name;
x.Employees.saveChanges();
}
);
}
function RemoveDepartment(dep_id)
{
x.Employees.filter(
function(res){
return res.Department.ID==dep_id
},
{dep_id:dep_id}
).forEach(
function(it){
x.Employees.remove(it)
});
x.Employees.saveChanges();
x.Departments.first(
function(it)
{
return it.ID==dep_id;
},
{dep_id:dep_id},
function(dep)
{
x.Departments.remove(dep);
x.Departments.saveChanges();
}
);
}
function AddStock(stock,department)
{
x.Departments.first(
function(it){
return it.ID==department.valueOf()},
{emp:emp,department:department},
function(dep){
x.Departments.attach(dep);
stock.Department=dep;
x.Stocks.add(stock);
x.Stocks.saveChanges();
});
}
function AddEmployeeList(list,department)
{
x.Departments.first(
function(it){return it.ID==department.valueOf()},
{department:department,list:list},
function(dep){
for (var i = 0; i < list.length; i++) {
list[i].Department=dep;
};
x.Departments.attach(dep);
x.Employees.addMany(list);
x.Employees.saveChanges();
});
}
function AddStockList(list,department)
{
x.Departments.first(
function(it){return it.ID==department.valueOf()},
{department:department,list:list},
function(dep){
for (var i = 0; i < list.length; i++) {
list[i].Department=dep;
};
x.Departments.attach(dep);
x.Stocks.addMany(list);
x.Stocks.saveChanges();
});
}
test.js:
//testing script
function TestAddDepartments(number) //number of departments
{
var dep='Department';
for (var i = 1; i <= number.valueOf(); i++)
{
var temp=dep+i.toString();
x.Departments.add({DepartmentName:temp});
};
x.Departments.saveChanges();
}
function TestEmployeeList(start,number)
{
emp_list=new Array();
var emp='Employee';
for (var i = start.valueOf(); i < start.valueOf()+number.valueOf(); i++)
{
var temp=emp+i.toString();
emp_list.push({Name:temp});
};
return emp_list;
}
function TestStockList(start,number)
{
stock_list=new Array();
var stock='Stock';
for (var i = start.valueOf(); i < start.valueOf()+number.valueOf(); i++)
{
var temp=stock+i.toString();
var num=Math.floor((Math.random()*1000)+1);
stock_list.push({Description:temp,NumItems:num});
};
return stock_list;
}
/*function TestSearchEmployeeName(number,limit)
{
var start= new Date().getTime();
var emp='Employee';
for (var i = 1; i <= number.valueOf(); i++)
{
num=Math.floor((Math.random()*limit.valueOf())+1);
search=emp+num.toString();
x.Employees.filter(
function(res)
{
return res.Name==search;
}).
forEach(
function(it)
{
console.log(it.Name);
});
};
var elapsed=new Date().getTime()-start;
console.log("Searching the database with "+number.toString()+
" entries took "+elapsed.toString()+" milliseconds");
}
*/
//Static tests
function TestSearchEmployeeName1()
{
var start= new Date().getTime();
x.Employees.filter(
function(res)
{
return res.Name=='Employee43';
},{start:start}).
toArray(function(it){
var elapsed=new Date().getTime()-start;
var res="Query with "+it.length.toString()+" result took "+
elapsed.toString()+" milliseconds";
document.getElementById('Result').innerHTML = res;
},{start:start}
);
}
function TestSearchEmployeeName2()
{
var start= new Date().getTime();
x.Employees.filter(
function(res)
{
return res.Department.ID==1;
},{start:start}).
toArray(function(it){
var elapsed=new Date().getTime()-start;
var res="Query with "+it.length.toString()+" results took "+
elapsed.toString()+" milliseconds";
document.getElementById('Result').innerHTML = res;
},{start:start}
);
}
function TestSearchEmployeeName3()
{
var start= new Date().getTime();
x.Stocks.filter(
function(res)
{
return res.NumItems>258 || res.Department.ID<3;
},{start:start}).
toArray(function(it){
var elapsed=new Date().getTime()-start;
var res="Query with "+it.length.toString()+" results took "+
elapsed.toString()+" milliseconds";
document.getElementById('Result').innerHTML = res;
},{start:start}
);
}
According to the provider feature matrix, the include() and complex type mapping features aren't implemented yet for IndexedDB, this means you cannot have navigation properties in IndexedDB, only in SQLite/WebSQL.
You can propose this feature at the user voice page.
I need to programmatically set the focus to an editor instance after initializing it.
The box gets focus and you can start typing but the external toolbar is not shown unless you click in the editor frame.
I tryed to change some css settings and the toolbar is shown but it disappear when clicking on editor frame.
var toolbar = $('#' + ed.id + '_external').hide().appendTo("#tiny_toolbar");
toolbar.show();
toolbar.css('top','50px');
toolbar.css('display','block');
$(".defaultSkin,.mceExternalToolbar").css("position","").css("z-index","1000");
Is there a way to simulate the editor click via js code so the toolbar would be displayed correctly?
Update:
No, I'm not wrong!
The tiny iframe appear on different top,left of my text container.
This code will explain better which is the problem.
<html>
<head>
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui.js"></script>
<script src="js/lib/tiny/tiny_mce.js"></script>
<script type="text/javascript">
function initTiny(){
tinyMCE.init({
language: false,
mode: "none",
theme: "advanced",
dialog_type: "modal",
theme_advanced_buttons1: ",bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "none",
theme_advanced_path: "none",
theme_advanced_toolbar_location: "external",
setup: function (ed) {
ed.onInit.add(function (ed) {
var visible = 1;
var tout = null;
var $toolbar = $('#' + ed.id + '_external');
$toolbar.css('top', '50px');
$toolbar.css('display', 'block');
$toolbar.hide();
$toolbar.show();
var show = function () {
tout && clearTimeout(tout);
tout = setTimeout(function () {
tout = null;
$toolbar.css({
top: "50px",
display: 'block'
});
visible = 1;
}, 250);
};
$(ed.getWin()).bind('click', function () {
if (ed.isHidden()) {
show();
}
});
})
}
});
}
$(document).ready(function(){
initTiny();
$('#content3').click(function(){
tinyMCE.execCommand("mceAddControl", false, 'content3');
});
$('html').click(function(){
tinyMCE.execCommand("mceRemoveControl", false, 'content3');
});
});
</script>
</head>
<body>
<div id="tiny_toolbar" class="defaultSkin" style="position:relative;"> toolbar </div>
<div id="content3" style="top:120px;left:180px;width:180px;height:200px;border:1px solid;position:absolute;">
<p>CONTENT 3!</p>
</div>
</body>
</html>
No, I'm not wrong!
The tiny iframe appear on different top,left of my text container.
This code will explain better which is the problem.
<html>
<head>
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui.js"></script>
<script src="js/lib/tiny/tiny_mce.js"></script>
<script type="text/javascript">
function initTiny(){
tinyMCE.init({
language: false,
mode: "none",
theme: "advanced",
dialog_type: "modal",
theme_advanced_buttons1: ",bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "none",
theme_advanced_path: "none",
theme_advanced_toolbar_location: "external",
setup: function (ed) {
ed.onInit.add(function (ed) {
var visible = 1;
var tout = null;
var $toolbar = $('#' + ed.id + '_external');
$toolbar.css('top', '50px');
$toolbar.css('display', 'block');
$toolbar.hide();
$toolbar.show();
var show = function () {
tout && clearTimeout(tout);
tout = setTimeout(function () {
tout = null;
$toolbar.css({
top: "50px",
display: 'block'
});
visible = 1;
}, 250);
};
$(ed.getWin()).bind('click', function () {
if (ed.isHidden()) {
show();
}
});
})
}
});
}
$(document).ready(function(){
initTiny();
$('#content3').click(function(){
tinyMCE.execCommand("mceAddControl", false, 'content3');
});
$('html').click(function(){
tinyMCE.execCommand("mceRemoveControl", false, 'content3');
});
});
</script>
</head>
<body>
<div id="tiny_toolbar" class="defaultSkin" style="position:relative;"> toolbar </div>
<div id="content3" style="top:120px;left:180px;width:180px;height:200px;border:1px solid;position:absolute;">
<p>CONTENT 3!</p>
</div>
</body>
</html>
I'm using TinyMCE 4 and I needed an external Toolbar with my app.
I initially only set the "fixed_toolbar_container" and the "inline" properties but my toolbar kept on disappearing when my editor text area was not in focus.
So, in the INIT I changed the following:
In the "INIT" I set "inline" to "true" and "fixed_toolbar_container" to the selector for my external toolbar div.
In the "SETUP" function I prevented the propagation of the "blur" event.
This seemed to work for me but I'm not entirely sure if preventing the default behavior on blur will have any adverse consequences. I'll update this post if I find something.
Hope this helps. :)
tinyMCE.init({
...
inline: true,
fixed_toolbar_container: "div#ToolBar",
// Set the mode & plugins
nowrap: false,
statusbar: true,
browser_spellcheck: true,
resize: true,
...
setup: function (editor) {
// Custom Blur Event to stop hiding the toolbar
editor.on('blur', function (e) {
e.stopImmediatePropagation();
e.preventDefault();
});
}
})
In your tinymce init use
...
theme_advanced_toolbar_location: "external",
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
var $toolbar = $('#'+ed.id + '_external');
$toolbar.css('top','50px');
$toolbar.css('display','block');
$toolbar.hide();
$toolbar.show();
});
});
You should also use a timeout to call the following functions (i.e. show() onclick)
var visible = 1;
var tout = null;
var show = function() {
tout && clearTimeout(tout);
tout = setTimeout(function() {
tout = null;
$toolbar.css({ top : $window.scrollTop(), display : 'block' });
visible = 1;
}, 250);
};
var hide = function() {
if (!visible) { return; }
visible = 0;
$toolbar.hide();
};
$(ed.getWin()).bind('click', function() {
show();
});
I am using jqGrid 3.8.1. I want to change the pull-down values of a combobox based on the selected value of another combobox. That's why I am searching on how to change the editoptions:value of an edittype:"select".
Here's the sample jqGrid code:
<%# page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<script type="text/javascript" src="<c:url value="/js/jquery/grid.locale-ja.js" />" charset="UTF-8"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery/ui.jqgrid.css" />"/>
<script src="<c:url value="/js/jquery/jquery.jqGrid.min.js" />" type="text/javascript"></script>
<table id="rowed5"></table>
<script type="text/javascript" charset="utf-8">
var lastsel2;
$("#rowed5").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX;AR1:ARAMEX123456789"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}
],
caption: "Input Types",
resizeStop: function (newwidth, index) {
var selectedRowId = $("#rowed5").getGridParam('selrow');
if(selectedRowId) {
//resize combobox proportionate to column size
var selectElement = $('[id="' + selectedRowId + '_ship"][role="select"]');
if(selectElement.length > 0){
$(selectElement).width(newwidth);
}
}
}
,
onSelectRow: function(id){
if(id && id!==lastsel2){
//$(this).saveRow(lastsel2, true);
$(this).restoreRow(lastsel2);
$(this).editRow(id,true);
lastsel2=id;
$(this).scroll();
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#rowed5_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}
});
var mydata2 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX123456789"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
{id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
];
for(var i=0;i < mydata2.length;i++) {
$("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
}
</script>
Scenario:
All ship will be displayed as initial load.
If the stock column changes to Yes, ship will display only FedEx, TNT.
If the stock column changes to No, ship will display only InTime, ARAMEX, ARAMEX123456789.
How can I change the options?
I solved it by trial and error. Want to share it, please refer to the below snippet. The changes are on onSelectRow function.
onSelectRow: function(id){
if(id && id!==lastsel2){
//$(this).saveRow(lastsel2, true);
$(this).restoreRow(lastsel2);
// get the selected stock column value before the editRow
var stockValue = $("#rowed5").jqGrid('getCell', id, 'stock');
if( stockValue == 'Yes') {
$("#rowed5").jqGrid('setColProp', 'ship', { editoptions: { value: 'FE:FedEx;TN:TNT'} });
} else if( stockValue == 'No') {
$("#rowed5").jqGrid('setColProp', 'ship', { editoptions: { value: 'IN:InTime;AR:ARAMEX;AR1:ARAMEX123456789'} });
}
$(this).editRow(id,true);
lastsel2=id;
$(this).scroll();
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#rowed5_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}