SharePoint bulk update of multiple list items - rest

I am currently working with binding SharePoint list items using JQuery datatables and rest API with the following code from Microsoft samples. I want to extend the sample to include multiple selection of row items with check boxes so that I can then another method to update the selected items. Please let me if this is possible with any guidance
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<table id="requests" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Business unit</th>
<th>Category</th>
<th>Status</th>
<th>Due date</th>
<th>Assigned to</th>
</tr>
</thead>
</table>
<script>
// UMD
(function(factory) {
"use strict";
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], function ($) {
return factory( $, window, document );
});
}
else if (typeof exports === 'object') {
// CommonJS
module.exports = function (root, $) {
if (!root) {
root = window;
}
if (!$) {
$ = typeof window !== 'undefined' ?
require('jquery') :
require('jquery')( root );
}
return factory($, root, root.document);
};
}
else {
// Browser
factory(jQuery, window, document);
}
}
(function($, window, document) {
$.fn.dataTable.render.moment = function (from, to, locale) {
// Argument shifting
if (arguments.length === 1) {
locale = 'en';
to = from;
from = 'YYYY-MM-DD';
}
else if (arguments.length === 2) {
locale = 'en';
}
return function (d, type, row) {
var m = window.moment(d, from, locale, true);
// Order and type get a number value from Moment, everything else
// sees the rendered value
return m.format(type === 'sort' || type === 'type' ? 'x' : to);
};
};
}));
</script>
<script>
$(document).ready(function() {
$('#requests').DataTable({
'ajax': {
'url': "../_api/web/lists/getbytitle('IT Requests')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title",
'headers': { 'Accept': 'application/json;odata=nometadata' },
'dataSrc': function(data) {
return data.value.map(function(item) {
return [
item.ID,
item.BusinessUnit,
item.Category,
item.Status,
new Date(item.DueDate),
item.AssignedTo.Title
];
});
}
},
columnDefs: [{
targets: 4,
render: $.fn.dataTable.render.moment('YYYY/MM/DD')
}]
});
});
</script>

Related

SharePoint List Form Textfield to a dropdown

I've found a video from SharePointTech that explains how to change a textfield to a dropdown list on a List Form using data from open API. I'm trying to recreate it, but I'm hitting a roadblock with the new SharePoint Online. Instead of using "Country/Region", I created a new custom list with Company_Name. I took the person's code and made little changes that made a reference to "WorkCountry". When I save the changes (stop editing), the changes do not reflect and I get the same textfield. I had to use SharePoint Designer 2013 to create a new TestNewForm for new entry. Has anyone been able to reproduce this in SharePoint 2013 Designer? If so, would you be able an example?
I use jQuery's ajax method.
Updated code for your reference(you need to change the list name to your list name,InternalName is also):
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
var demo = window.demo || {};
demo.nodeTypes = {
commentNode: 8
};
demo.fetchCountries = function ($j) {
$.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('Company_Name')/items",
type: "get",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
$j('table.ms-formtable td.ms-formbody').contents().filter(function () {
return (this.nodeType == demo.nodeTypes.commentNode);
}).each(function (idx, node) {
if (node.nodeValue.match(/FieldInternalName="Country_x002f_Region"/)) {
// Find existing text field (<input> tag)
var inputTag = $(this).parent().find('input');
// Create <select> tag out of retrieved countries
var optionMarkup = '<option value="">Choose one...</option>';
$j.each(data.d.results, function (idx, company) {
optionMarkup += '<option>' + company.Title + '</option>';
});
var selectTag = $j('<select>' + optionMarkup + '</select>');
// Initialize value of <select> tag from value of <input>
selectTag.val(inputTag.val());
// Wire up event handlers to keep <select> and <input> tags in sync
inputTag.on('change', function () {
selectTag.val(inputTag.val());
});
selectTag.on('change', function () {
inputTag.val(selectTag.val());
});
// Add <select> tag to form and hide <input> tag
inputTag.hide();
inputTag.after(selectTag);
}
});
},
error: function (data) {
console.log(data)
}
});
}
if (window.jQuery) {
jQuery(document).ready(function () {
(function ($j) {
demo.fetchCountries($j);
})(jQuery);
});
}
</script>
My source list:
Test result:
Updated:
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
var demo = window.demo || {};
demo.nodeTypes = {
commentNode: 8
};
demo.fetchCountries = function ($j) {
$.ajax({
url: 'https://restcountries.eu/rest/v1/all',
type: "get",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
$j('table.ms-formtable td.ms-formbody').contents().filter(function () {
return (this.nodeType == demo.nodeTypes.commentNode);
}).each(function (idx, node) {
if (node.nodeValue.match(/FieldInternalName="Country_x002f_Region"/)) {
// Find existing text field (<input> tag)
var inputTag = $(this).parent().find('input');
// Create <select> tag out of retrieved countries
var optionMarkup = '<option value="">Choose one...</option>';
$j.each(data, function (idx, company) {
optionMarkup += '<option>' + company.name + '</option>';
});
var selectTag = $j('<select>' + optionMarkup + '</select>');
// Initialize value of <select> tag from value of <input>
selectTag.val(inputTag.val());
// Wire up event handlers to keep <select> and <input> tags in sync
inputTag.on('change', function () {
selectTag.val(inputTag.val());
});
selectTag.on('change', function () {
inputTag.val(selectTag.val());
});
// Add <select> tag to form and hide <input> tag
inputTag.hide();
inputTag.after(selectTag);
}
});
},
error: function (data) {
console.log(data)
}
});
}
if (window.jQuery) {
jQuery(document).ready(function () {
(function ($j) {
demo.fetchCountries($j);
})(jQuery);
});
}
</script>
The difference in API will not have a great effect, the key is here '$ j.each (data, function (idx, company) {'. The structure of the return value of different APIs are different, you need to find useful data in return value.

populate select with datajson using React js

I'm trying to populate a select using React js, I'm using the example given on the react js docs(https://facebook.github.io/react/tips/initial-ajax.html) , which uses jquery to manage the ajax calling, I'm not able to make it work, so far i have this:
here the codepen : http://codepen.io/parlop/pen/jrXOWB
//json file called from source : [{"companycase_id":"CTSPROD","name":"CTS-Production"},{"companyc ase_id":"CTSTESTING","name":"CTS-Testing"}]
//using jquery to make a ajax call
var App = React.createClass({
getInitialState: function() {
return {
opts:[]
};
},
componentDidMount: function() {
var source="https://api.myjson.com/bins/3dbn8";
this.serverRequest = $.get(source, function (result) {
var arrTen = result[''];
for (var k = 0; k < ten.length; k++) {
arrTen.push(<option key={opts[k]} value={ten[k].companycase_id}> {ten[k].name} </option>);
}
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<div>
<select id='select1'>
{this.state.opts}
</select>
</div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById('root')
);
html
<div id="root"></div>
any idea how to make it works, thanks.
You need to call setState to actually update your view. Here's a workable version.
//json file called from source : [{"companycase_id":"CTSPROD","name":"CTS-Production"},{"companyc ase_id":"CTSTESTING","name":"CTS-Testing"}]
//using jquery to make a ajax call
var App = React.createClass({
getInitialState: function() {
return {
opts:[]
};
},
componentDidMount: function() {
var source="https://api.myjson.com/bins/3dbn8";
this.serverRequest = $.get(source, function (result) {
var arrTen = [];
for (var k = 0; k < result.length; k++) {
arrTen.push(<option key={result[k].companycase_id} value={result[k].companycase_id}> {result[k].name} </option>);
}
this.setState({
opts: arrTen
});
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<div>
<select id='select1'>
{this.state.opts}
</select>
</div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById('root')
);

Pass polymer form data to rest api

I'm looking for some way to pass data from a Polymer form fields to REST API,
actually, I'm using core-ajax to do it but I think is a bit heavy method to do it.
Are any standard way to do it?
This is my code:
<template>
<section>
<file-input class="blue" id="file" extensions='[ "xls" ]' maxFiles="1">{{ FileInputLabel }}</file-input>
</section>
<section>
<paper-button raised class="blue" disabled?="{{ (! Validated) || (Submitted) }}" on-tap="{{ Submit }}">
<core-icon icon="send"></core-icon>
Process
</paper-button>
</section>
<paper-toast id="toast" text=""></paper-toast>
<core-ajax id="ajax" url="/import-pdi" method="POST" handleAs="json" response="{{ response }}" on-core-complete="{{ SubmitFinished }}"></core-ajax>
</template>
<script>
Polymer("import-pdi-form", {
Validated: false,
Submitted: false,
FileInputLabel: "SELECT",
ready: function () {
this.shadowRoot.querySelector("#file").addEventListener("change", function(event) {
var container = document.querySelector("import-pdi-form");
container.Validated = (event.detail.valid.length != 0);
if (event.detail.valid.length == 0) {
container.shadowRoot.querySelector("#toast").text = "Invalid Format";
container.shadowRoot.querySelector("#toast").show();
container.FileInputLabel = "SELECCIONA L'ARXIU";
}
else {
container.FileInputLabel = event.detail.valid[0].name;
var form_data = new FormData();
form_data.append("file", event.detail.valid[0], event.detail.valid[0].name);
container.shadowRoot.querySelector("#ajax").body = form_data;
container.shadowRoot.querySelector("#ajax").contentType = null;
}
});
},
Submit: function() {
if ((this.Validated) && (! this.Submitted)) {
this.Submitted = true;
this.shadowRoot.querySelector("#ajax").go();
}
},
SubmitFinished: function(event, detail, sender) {
if (detail.xhr.status == 200) {
this.shadowRoot.querySelector("#toast").text = JSON.parse(detail.xhr.response).message;
}
else {
this.shadowRoot.querySelector("#toast").text = "Server Error";
}
this.shadowRoot.querySelector("#toast").show();
this.FileInputLabel = "SELECCIONA L'ARXIU";
this.shadowRoot.querySelector("#file").reset();
this.Submitted = false;
}
});
</script>
For submitting a form that contains custom elements we currently recommend that you use the ajax-form element. It looks like you may already be using the file-input element by the same author, so the two should work well together.

Symfony collection form data is not in post params

Today our user reported that saving his CV does not work, that it does not save his Skills, languages, driving license level, schools and prev. employments.
That is the Collection forms that i use on 2 parts of website (CV and Offers)...
Funny is that we tested it before going live and running live from IE6 to any other newer browser.
Collections is added correctly using "add foobar record" button, when there is any record in DB it appears in edit correctly, when i edit these existing it will be saved, if i remove them than they will be removed.
But when i add new, these new records is not in Form post data. I cant understand if its part of form, html is rendered correctly, why it does not include it in post...
These collections works with Offer entity, saved updated added... no problem. i have checked the controller code, the javascript code, the entity code, the html code, the collection templates, the form types..
Here is DB structure:
here is how i add collection in botz CV and Offer
<div class="tbl">
<div class="row">
<div class="col" style="text-align: center; width: 100%;">Počítačové znalosti</div>
</div>
<div class="divider"></div>
<div class="skills" data="0" data-prototype="{% filter escape %}{% include 'TvarplastTopzamBundle:Collections:SkillCollection.html.twig' with {'form': form.skills.vars.prototype} %}{% endfilter %}">
{% for skill in form.skills %}
<div class="row">
{% include 'TvarplastTopzamBundle:Collections:SkillCollection.html.twig' with {'form': skill} %}
</div>
<script type="text/javascript">$(".skills").data("index", {{ loop.index }});</script>
{% endfor %}
</div>
<div class="row">
<div class="col">
Pridať počítačovú znalosť
</div>
</div>
</div>
Problem cannot be with entity, because if some relation exists in DB that is displayed as collection, and if its edited, it can be changed or removed, and its displayed in post parameters, then entity, form type, cannot be wrong.
but i handle form like this:
public function zivotopisAction(\Symfony\Component\HttpFoundation\Request $request, $showmsg = false) {
if (!$this->get("data")->hasPerm(Role::WORKER, $this->getUser())) {
$message["show"] = true;
$message["text"] = "Nemáte požadované oprávnenia. Stránka nemôže byť zobrazená.";
$message["type"] = "box-red";
return new \Symfony\Component\HttpFoundation\Response($this->renderView("TvarplastTopzamBundle::error.html.twig", array("message" => $message)));
}
$return = array();
$message = array("show" => $showmsg, "type" => "", "text" => "");
if ($message["show"]) {
$message["text"] = "Je nutné vyplniť nasledujúce informácie pre pokračovanie.";
$message["type"] = "box-red";
}
$em = $this->getDoctrine()->getManager();
if (!is_null($this->getUser()->getZivotopis())) {
$zivotopis = $em->getRepository("TvarplastTopzamBundle:Zivotopis")->find($this->getUser()->getZivotopis()->getId());
} else {
$zivotopis = new \Tvarplast\TopzamBundle\Entity\Zivotopis();
}
$originalSkills = new \Doctrine\Common\Collections\ArrayCollection();
if ($zivotopis->getSkills()) {
foreach ($zivotopis->getSkills() as $skill) {
$originalSkills->add($skill);
}
}
$originalLanguages = new \Doctrine\Common\Collections\ArrayCollection();
if ($zivotopis->getLanguages()) {
foreach ($zivotopis->getLanguages() as $language) {
$originalLanguages->add($language);
}
}
$originalDrivingskills = new \Doctrine\Common\Collections\ArrayCollection();
if ($zivotopis->getSkilldriving()) {
foreach ($zivotopis->getSkilldriving() as $skilldriving) {
$originalDrivingskills->add($skilldriving);
}
}
$originalEmployments = new \Doctrine\Common\Collections\ArrayCollection();
if ($zivotopis->getEmployments()) {
foreach ($zivotopis->getEmployments() as $employment) {
$originalEmployments->add($employment);
}
}
$originalSchools = new \Doctrine\Common\Collections\ArrayCollection();
if ($zivotopis->getSchools()) {
foreach ($zivotopis->getSchools() as $school) {
$originalSchools->add($school);
}
}
$form = $this->createForm(new \Tvarplast\TopzamBundle\Form\ZivotopisType(), $zivotopis, array(
'action' => $this->generateUrl('zivotopis'),
));
$form->handleRequest($request);
if ($form->isValid()) {
//var_dump($_POST); die();
foreach ($originalSkills as $skill) {
if (false === $zivotopis->getSkills()->contains($skill)) {
$skill->getZivotopis()->removeElement($zivotopis);
$em->persist($skill);
$em->remove($skill);
}
}
foreach ($originalLanguages as $language) {
if (false === $zivotopis->getLanguages()->contains($language)) {
$language->getZivotopis()->removeElement($zivotopis);
$em->persist($language);
$em->remove($language);
}
}
foreach ($originalDrivingskills as $drivingskill) {
if (false === $zivotopis->getSchools()->contains($drivingskill)) {
$drivingskill->getZivotopis()->removeElement($zivotopis);
$em->persist($drivingskill);
$em->remove($drivingskill);
}
}
foreach ($originalEmployments as $employment) {
if (false === $zivotopis->getEmployments()->contains($employment)) {
$employment->getZivotopis()->removeElement($zivotopis);
$em->persist($employment);
$em->remove($employment);
}
}
foreach ($originalSchools as $school) {
if (false === $zivotopis->getSchools()->contains($school)) {
$school->getZivotopis()->removeElement($zivotopis);
$em->persist($school);
$em->remove($school);
}
}
$zivotopis->upload();
$zivotopis->setBasicUser($this->getUser());
$zivotopis = $form->getData();
$em->persist($zivotopis);
$em->flush();
$message["text"] = ($this->container->get('security.context')->isGranted('ROLE_WORKER') ? "Životopis" : "Profil") . " bol úspešne uložený.";
$message["type"] = "box-yellow";
$message["show"] = true;
}
$return["form"] = $form->createView();
$return["message"] = $message;
return $return;
and my javascript looks like this:
$(document).ready(function() {
$.extend({getDeleteLinkCode: function(div) {
return '<div class="col" style="margin-top: 8px; margin-left: 3px;"><a href="#" style="margin-top: 5px;" >Odstrániť</a></div>';
}});
$.extend({addSubFormSelectChangeListener: function(collectionHolder, formRow, div) {
formRow.find('select' + (!div ? ':first' : '')).on("change", function() {
var org = $(this);
if (collectionHolder.find(!div ? "tr" : "div").size() > 1) {
collectionHolder.find(!div ? "tr" : "div").each(function() {
if (org.val() === $(this).find('select:first').val() && org.attr("id") !== $(this).find("select:first").attr("id")) {
org.parent().parent().remove();
}
});
}
});
}});
$.extend({addSubForm: function(collectionHolder, div) {
var prototype = collectionHolder.data('prototype');
var index = collectionHolder.data('index');
index = (index !== parseInt(index) ? 0 : index);
var form = prototype.replace(/__name__/g, index);
var formRow = $((div ? '<div class="row"></div>' : '<tr></tr>')).append(form);
var removeFormRow = $($.getDeleteLinkCode(div));
formRow.append(removeFormRow);
collectionHolder.data('index', index + 1);
collectionHolder.append(formRow);
removeFormRow.on('click', function(e) {
e.preventDefault();
formRow.remove();
});
$.addSubFormSelectChangeListener(collectionHolder, formRow, div);
}});
function addSubFormItemDeleteLink(collectionHolder, $tagFormLi, div, notag) {
var $removeFormA = $($.getDeleteLinkCode(div));
$tagFormLi.append($removeFormA);
$removeFormA.on('click', function(e) {
e.preventDefault();
$tagFormLi.remove();
});
$.addSubFormSelectChangeListener(collectionHolder, $tagFormLi, div);
}
jQuery.fn.toggleOption = function(show) {
$(this).toggle(show);
if (show) {
if ($(this).parent('span.toggleOption').length) {
$(this).unwrap();
}
} else {
if ($(this).parent('span.toggleOption').length === 0) {
$(this).wrap('<span class="toggleOption" style="display: none;" />');
}
}
};
$.extend({comboFilter: function(inputField, comboBox) {
$("#" + inputField).delayBind("input", function() {
var inputValue = $(this).val().toLowerCase();
var combobox = document.getElementById(comboBox);
$("#" + comboBox).children("span").children("optgroup").each(function() {
$(this).toggleOption(true);
});
optionToSelect = false;
$("#" + comboBox + " option").each(function() {
if ($(this).text().toLowerCase().replace(/<.+?>/g, "").replace(/\s+/g, " ").indexOf(inputValue.replace(/<.+?>/g, "").replace(/\s+/g, " ")) !== -1) {
optionToSelect = $(this);
$(this).toggleOption(true);
} else {
$(this).toggleOption(false);
}
if (optionToSelect !== false) {
$(optionToSelect).select();
}
});
$("#" + comboBox).children("optgroup").each(function() {
if ($(this).children("option").length <= 0) {
$(this).toggleOption(false);
} else {
$(this).toggleOption(true);
}
});
if ($("#" + comboBox).children("optgroup").length <= 0) {
$("#" + comboBox).children("span").children("optgroup").children("option").each(function() {
$(this).parent().toggleOption(true);
});
}
if (inputValue === '') {
combobox[0].selected = true;
$("#" + comboBox).children("span").children("optgroup").each(function() {
$(this).toggleOption(true);
});
}
}, 50);
}});
/* skills */
holderSkills = $('div.skills');
holderSkills.find('div.row').each(function() {
addSubFormItemDeleteLink(holderSkills, $(this), false, false);
});
$(".add_skill_link").on('click', function(e) {
e.preventDefault();
$.addSubForm(holderSkills, true);
});
/* driving */
holderDriving = $('div.skilldriving');
holderDriving.find('div.deletehere').each(function() {
addSubFormItemDeleteLink(holderDriving, $(this), true, true);
});
$(".add_driving_link").on('click', function(e) {
e.preventDefault();
$.addSubForm(holderDriving, true);
});
/* Lang */
holderLanguages = $('div.languages');
holderLanguages.find('div.row').each(function() {
addSubFormItemDeleteLink(holderLanguages, $(this), false, false);
});
$(".add_lang_link").on('click', function(e) {
e.preventDefault();
$.addSubForm(holderLanguages, true);
});
/* Emp */
holderEmployments = $('div.employments');
holderEmployments.find('div.deletehere').each(function() {
addSubFormItemDeleteLink(holderEmployments, $(this), false, false);
});
$(".add_zam_link").on('click', function(e) {
e.preventDefault();
$.addSubForm(holderEmployments);
});
/* Schools */
holderSchools = $('div.schools');
holderSchools.find('div.deletehere').each(function() {
addSubFormItemDeleteLink(holderSchools, $(this), false, false);
});
$(".add_Schools_link").on('click', function(e) {
e.preventDefault();
$.addSubForm(holderSchools);
});
});
Any idea where can the problem be?
Thank you very much
Thanks to Dynamically added form field not showing up in POSTed data
Solved by switching first 2 lines to be {form} first and div the second
i had something like
<div .....>
{form....}
some html
</div>
<div>
htmlhhtml
</div>
</div>
{endform}
That was the reason why browser was not able to read newly added items

Is it possible to change the editoptions value of jqGrid's edittype:"select"?

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);
}
});
}
}
}