Retrieve values in jqxGrid with jqxComboBox – Checkbox

[paulo.juniorParticipant]

Hello,

We are trying to use the combo box with multi values ​​in my grill .
In our case, we have a list with the check box .
What we were unable to initialize the grid with each record line the values ​​recorded in the combobox .

Please wait for your help.
grateful

Part of our source code:
————————————————————————————————————–

//Source Adpater do Representante
var representanteSource =
{
datatype: “json”,
datafields: [
{ name: ‘RepresentanteId’ },
{ name: ‘Nome’ }
//{ name: ‘Selecionado’ }
],
id: ‘RepresentanteId’,
url: “/P100D/Representante/Lista”,
async: false
};
var representanteAdapter = new $.jqx.dataAdapter(representanteSource, {
autoBind: true,
beforeLoadComplete: function (records) {
var data = new Array();
for (var i = 0; i < records.length; i++) {
var representante = records[i];
representante.RepresentanteId = representante.RepresentanteId;
//representante.checked = representante.checked;
representante.Nome = representante.Nome;
data.push(representante);
}
return data;
}
});

——————————————————————————————————————————

//EndPoint
var url = “/P100D/Solicitacao/Lista”;
var source =
{
datatype: “json”,
type: “GET”,
datafields:
[
{ name: ‘SolicitacaoId’, type: ‘string’ },
{ name: ‘RepresentanteDesc’, map: ‘Representantes>Nome’, value: ‘RepresentanteId’, values: { source: representanteAdapter.records, value: ‘RepresentanteId’, name: ‘Nome’ } },
{ name: ‘RepresentanteIds’ },

],
id: ‘SolicitacaoId’,
url: url,
addrow: function (rowid, rowdata, commit, position) {

},
updaterow: function (rowid, rowdata, commit) { },
deleterow: function (rowid, rowdata, commit, dtrowid) {}

};

var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“.P100D-Solicitacao”).jqxGrid(
{
width: ‘100%’,
height: ‘100%’,
source: dataAdapter,
ready: function () {
$(“.P100D-Solicitacao”).jqxGrid(‘hidecolumn’, ‘SolicitacaoId’);
$(“.P100D-Solicitacao”).jqxGrid(‘localizestrings’, toolBarJQWidgets());
},
showeverpresentrow: true,
everpresentrowposition: “top”,
//everpresentrowactionsmode: “columns”,
everpresentrowactions: “add remove reset”,//update
editable: true,
pageable: true,
pagesizeoptions: [’30’, ’60’, ’90’, ‘120’, ‘150’, ‘180’, ‘210’],
pagesize: 30,
autoheight: false,
sortable: true,
altrows: true,
theme: ‘office’,
columnsresize: false,
enabletooltips: true,
filterable: true,
filtermode: ‘excel’,
enablehover: true,
groupable: false,
showgroupsheader: false,
//selectionmode: ‘multiplecellsadvanced’,
localization: {
culture: getLocalization(‘pt-BR’),
everpresentrowplaceholder: “Digite: “,
addrowstring: “Novo”,
udpaterowstring: “Atualizar”,
deleterowstring: “Excluir”,
resetrowstring: “Limpar”,
},
columns: [

//Representantes
{
text: ‘Representantes’, cellclassname: cellclass, // (Áreas Impactadas) – (min. 1; máx. 5)
columntype: ‘dropdownlist’,
datafield: ‘RepresentanteId’,
displayfield: ‘RepresentanteDesc’,
width: 230,

createEverPresentRowWidget: function (datafield, htmlElement) {
var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);
inputTag.jqxDropDownList({
checkboxes: true,
popupZIndex: 99999999,
placeHolder: “Informe os Representantes: “,
source: representanteAdapter,
displayMember: ‘Nome’,
valueMember: ‘RepresentanteId’,
width: ‘100%’,
height: 30,
theme: ‘office’
});
return inputTag;
},
initEverPresentRowWidget: function(datafield, htmlElement) {

},
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
var value = htmlElement.val(); return value;
},
resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
htmlElement.val(null);
},

createeditor: function (row, value, editor) {
// construct the editor.
editor.jqxDropDownList({
checkboxes: true,
//selectedIndex: 1,
source: representanteAdapter,
displayMember: ‘Nome’,
valueMember: ‘RepresentanteId’,
height: 30,
theme: ‘office’,
selectionRenderer: function () {
return “<span style=’top:4px; position: relative;’>Informe os Representantes:</span>”;
}

});
},
initeditor: function (row, value, editor) {
//set the editor’s current value. The callback is called each time the editor is displayed.

var items = editor.jqxDropDownList(‘getItems’);

editor.jqxDropDownList(‘uncheckAll’);

var values = cellvalue.split(/,\s*/);

for (var j = 0; j < values.length; j++) {
for (var i = 0; i < items.length; i++) {
if (items[i].label === values[j]) {
editor.jqxDropDownList(‘checkIndex’, i);
}
}
}

},
geteditorvalue: function (row, value, editor) {
// return the editor’s value.
return editor.val();
}

},

]
});

[jgarciasParticipant]

It is exactly what I have been asking for in my last post:
http://www.jqwidgets.com/community/topic/initialize-combobox-column-in-jqxgrid/

[paulo.juniorParticipant]

Hello JGarcias,

I saw the Post but into’m still not a solution how to handle this case, to recover the data in the independent lines is the same question that the Ivalo answered him today below. He is unable to recover the data on independent lines.

The combobox with checkbox, works perfectly selection, however I am unable to retrieve selected data.

hugs,

[DimitarParticipant]

Hello paulo.junior,

So, basically, you have a grid with its own data source, but one of its columns (“Representantes”) has to be populated from another data source, which also populates the column’s combobox editor. If this is the case, the correct approach is to implement a Foreign Key Column – something you have tried, but I am not sure why your code does not work. We would need some sample data from both sources to be able to test your example and determine the why the issue occurs. Any more clarification on the issue is welcome, too.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[paulo.juniorParticipant]

Hello Dimitar,

  Thanks for the quick reply, I will try to summarize what we are doing in the meantime will see a way to try to expose the code so that you can analyze and tell us whether we are doing right or wrong.
  I got your foreign key approach to fill another column with a different adapter. But what we are doing is a Source that contains the information of the pillars of our Grid and Adapter to the to the column of Representatives in the case.
  Our greatest difficulty is when we use the combobox component of multiple selection with checkbox, because in the beginning of the line mark the desired representatives to the log line and these representatives who are selected are not checked in the line was inserted in the bank , the bank contains it’s ID, but we are unable to make the jqxCombobox populate the data that was selected in the first record.
  This being our problem, the issue of foreign key think it would be not the case, because I want to recover data that has been checked in the registry first, to have an update on the same grid.

Hugs,

And is that I managed to explain what we want?

Paulo Junior

[paulo.juniorParticipant]

I’m putting down our entire code, setting the grid and adapters that are using to populate the combo box in the grid. We had to make a change in the multiple selection, so I put the checkboxes attribute = false. For while we can not recover the data put them without multiple selection.

———————————————————————————————————————————-

`$(document).ready(function () {

plano100DSolicitacao();

});

/* END POINTS DO SISTEMA */
//Solicitação: http://localhost:21472/P100D/Solicitacao/Lista
//Fase: http://localhost:21472/P100D/Fase/Lista
//Classe: http://localhost:21472/P100D/Classe/Lista
//Sponsor: http://localhost:21472/P100D/Sponsor/ListarTodosElegiveis
//Responsável: http://localhost:21472/P100D/Responsavel/Lista
//Recurso: http://localhost:21472/P100D/Recurso/Lista
//Representante: http://localhost:21472/P100D/Representante/Lista

function plano100DSolicitacao() {

//Source Adpater dos Responsável
var responsavelSource =
{
datatype: “json”,
datafields: [
{ name: ‘ResponsavelId’ },
{ name: ‘Nome’ }
],
id: ‘ResponsavelId’,
url: “/P100D/Responsavel/Lista”,
async: false
};
var responsavelAdapter = new $.jqx.dataAdapter(responsavelSource, {
autoBind: true,
beforeLoadComplete: function (records) {
var data = new Array();
for (var i = 0; i < records.length; i++) {
var responsavel = records[i];
responsavel.ResponsavelId = responsavel.ResponsavelId;
responsavel.Nome = responsavel.Nome;
data.push(responsavel);
}
return data;
}
});

//Source Adpater do Sponsor
var sponsorSource =
{
datatype: “json”,
datafields: [
{ name: ‘SponsorId’ },
{ name: ‘Nome’ }
],
id: ‘SponsorId’,
url: “/P100D/Sponsor/ListarTodosElegiveis”,
async: false
};
var sponsorAdapter = new $.jqx.dataAdapter(sponsorSource, {
autoBind: true,
beforeLoadComplete: function (records) {
var data = new Array();
for (var i = 0; i < records.length; i++) {
var sponsor = records[i];
sponsor.SponsorId = sponsor.SponsorId;
sponsor.Nome = sponsor.Nome;
data.push(sponsor);
}
return data;
}
});

//Source Adpater do Recursos
var recursoSource =
{
datatype: “json”,
datafields: [
{ name: ‘UsuarioId’ },
{ name: ‘Nome’ }
//{name: ‘Selecionado’}
],
id: ‘UsuarioId’,
url: “/P100D/Recurso/Lista”,///P100D/Recurso/Lista
async: false
};
var recursoAdapter = new $.jqx.dataAdapter(recursoSource, {
autoBind: true,
beforeLoadComplete: function (records) {
var data = new Array();
for (var i = 0; i < records.length; i++) {
var recurso = records[i];
recurso.UsuarioId = recurso.UsuarioId;
//recurso.checked = recurso.Selecionado;
recurso.Nome = recurso.Nome;
data.push(recurso);
}
return data;
}
});

//Source Adpater do Representante
var representanteSource =
{
datatype: “json”,
datafields: [
{ name: ‘RepresentanteId’ },
{ name: ‘Nome’ }
//{ name: ‘Selecionado’ }
],
id: ‘RepresentanteId’,
url: “/P100D/Representante/Lista”,
async: false
};
var representanteAdapter = new $.jqx.dataAdapter(representanteSource, {
autoBind: true,
beforeLoadComplete: function (records) {
var data = new Array();
for (var i = 0; i < records.length; i++) {
var representante = records[i];
representante.RepresentanteId = representante.RepresentanteId;
//representante.checked = representante.checked;
representante.Nome = representante.Nome;
data.push(representante);
}
return data;
}
});

//Source Adpater do Classe
var classeSource =
{
datatype: “json”,
datafields: [
{ name: ‘ClasseId’ },
{ name: ‘Descricao’ }
],
id: ‘ClasseId’,
url: “/Cadastro/P100DClasse/Lista”,
async: false
};
var classeAdapter = new $.jqx.dataAdapter(classeSource, {
autoBind: true,
beforeLoadComplete: function (records) {
var data = new Array();
for (var i = 0; i < records.length; i++) {
var classe = records[i];
classe.ClasseId = classe.ClasseId;
classe.Descricao = classe.Descricao;
data.push(classe);
}
return data;
}
});

//Source Adpater do Fase
var faseSource =
{
datatype: “json”,
datafields: [
{ name: ‘FaseId’ },
{ name: ‘Descricao’ }
],
id: ‘FaseId’,
url: “/Cadastro/P100DFase/Lista”,
async: false
};
var faseAdapter = new $.jqx.dataAdapter(faseSource, {
autoBind: true,
beforeLoadComplete: function (records) {
var data = new Array();
for (var i = 0; i < records.length; i++) {
var fase = records[i];
fase.FaseId = fase.FaseId;
fase.Descricao = fase.Descricao;
data.push(fase);
}
return data;
}
});

//Source Adpater do Status
var statusSource =
{
datatype: “json”,
datafields: [
{ name: ‘P100D_StatusId’ },
{ name: ‘Descricao’ }
],
id: ‘P100D_StatusId’,
url: “/Cadastro/P100DStatus/Lista”,
async: false
};
var statusAdapter = new $.jqx.dataAdapter(statusSource, {
autoBind: true,
beforeLoadComplete: function (records) {
var data = new Array();
for (var i = 0; i < records.length; i++) {
var status = records[i];
status.FaseId = status.FaseId;
status.Descricao = status.Descricao;
data.push(status);
}
return data;
}
});

//EndPoint
var url = “/P100D/Solicitacao/Lista”;
var source =
{
datatype: “json”,
type: “GET”,
datafields:
[
{ name: ‘SolicitacaoId’, type: ‘string’ },
{ name: ‘NomeProjeto’, type: ‘string’ },

{ name: ‘ResponsavelDesc’, map: ‘Responsavel>Nome’, value: ‘ResponsavelId’, values: { source: responsavelAdapter.records, value: ‘ResponsavelId’, name: ‘Nome’ } },
{ name: ‘ResponsavelId’, map: ‘Responsavel>UsuarioId’ },

{ name: ‘SponsorDesc’, map: ‘Sponsor>Nome’, value: ‘SponsorId’, values: { source: sponsorAdapter.records, value: ‘SponsorId’, name: ‘Nome’ } },
{ name: ‘SponsorId’, map: ‘Sponsor>SponsorId’ },

{ name: ‘RecursoDesc’, map: ‘Recurso>Nome’, value: ‘UsuarioId’, values: { source: recursoAdapter.records, value: ‘UsuarioId’, name: ‘Nome’ } },
{ name: ‘UsuarioId’, map: ‘Recurso>UsuarioId’ },

{ name: ‘RepresentanteDesc’, map: ‘Representantes>Nome’, value: ‘RepresentanteId’, values: { source: representanteAdapter.records, value: ‘RepresentanteId’, name: ‘Nome’ } },
{ name: ‘RepresentanteIds’ },

{ name: ‘FaseDesc’, map: ‘Fase>Descricao’, value: ‘FaseId’, values: { source: faseAdapter.records, value: ‘FaseId’, name: ‘Descricao’ } },
{ name: ‘FaseId’, map: ‘Fase>FaseId’ },

{ name: ‘ClasseDesc’, map: ‘Classe>Descricao’, value: ‘ClasseId’, values: { source: classeAdapter.records, value: ‘ClasseId’, name: ‘Descricao’ } },
{ name: ‘ClasseId’, map: ‘Classe>ClasseId’ },

{ name: ‘DataInicio’, type: ‘date’ },

{ name: ‘DataFim’, type: ‘date’ },

{ name: ‘Duracao’, type: ‘number’ },

{ name: ‘Beneficios’, type: ‘string’ }
],
id: ‘SolicitacaoId’,
url: url,
addrow: function (rowid, rowdata, commit, position) {
var start = new Date().getTime();
var data = “add=true&” + $.param(rowdata);
//alert(rowdata);
$(“div.footer_content”).html(‘  <i class=”fa fa-pencil-square-o”></i> – Iniciando a execução da edição…Aguarde!’);
$.ajax({
dataType: ‘json’,
type: ‘POST’,
url: ‘/P100D/Solicitacao/Novo’,
cache: false,
data: data,
success: function (data, status, xhr) {

//alert(rowdata);

jQuery(‘div.footer-status’).css(‘display’, ‘inline’);
var end = new Date().getTime();
var time = (end – start) / 1000;
$(“div.footer_content”).html(‘  <i class=”fa fa-thumbs-o-up”></i> – Dados editados com sucesso em ‘ + time + ‘ ms!’);
jQuery(‘div.footer-status’).css(‘display’, ‘none’);
setTimeout(function () {
$(“div.footer_content”).html(“”);
}, 5000);
commit(true);
//dataAdapter.dataBind();
//$(“.P100D-Solicitacao”).jqxGrid(‘updatebounddata’);

},
error: function (jqXHR, textStatus, errorThrown) {

jQuery(‘div.footer-status’).css(‘display’, ‘none’);
$(“div.footer_content”).html(‘  <i class=”fa fa-thumbs-o-down”></i> – <b>ATENÇÃO!!!</b> Ocorreu um erro na sua edição.’);
commit(false);

}
});
},
updaterow: function (rowid, rowdata, commit) {
var start = new Date().getTime();
var data = “update=true&” + $.param(rowdata);
$(“div.footer_content”).html(‘  <i class=”fa fa-pencil-square-o”></i> – Iniciando a execução da edição…Aguarde!’);
$.ajax({
dataType: ‘json’,
type: ‘POST’,
url: ‘/P100D/Solicitacao/Editar’,
cache: false,
data: data,
success: function (data, status, xhr) {

jQuery(‘div.footer-status’).css(‘display’, ‘inline’);
var end = new Date().getTime();
var time = (end – start) / 1000;
$(“div.footer_content”).html(‘  <i class=”fa fa-thumbs-o-up”></i> – Dados editados com sucesso em ‘ + time + ‘ ms!’);
jQuery(‘div.footer-status’).css(‘display’, ‘none’);
setTimeout(function () {
$(“div.footer_content”).html(“”);
}, 5000);
commit(true);
//dataAdapter.dataBind();
//$(“.P100D-Solicitacao”).jqxGrid(‘updatebounddata’);

},
error: function (jqXHR, textStatus, errorThrown) {

jQuery(‘div.footer-status’).css(‘display’, ‘none’);
$(“div.footer_content”).html(‘  <i class=”fa fa-thumbs-o-down”></i> – <b>ATENÇÃO!!!</b> Ocorreu um erro na sua edição.’);
commit(false);

}
});
},
deleterow: function (rowid, rowdata, commit, dtrowid) {

var data = “delete=true&” + $.param(rowdata);
$.ajax({
dataType: ‘json’,
type: ‘GET’,
url: ‘/P100D/Solicitacao/Excluir/’ + rowid,
data: data,
success: function (data, status, xhr) {
dataAdapter.dataBind();
$(“.P100D-Solicitacao”).jqxGrid(‘updatebounddata’);
$(“#excluirRegistroGrid”).modal(‘hide’);
},
error: function (jqXHR, textStatus, errorThrown) {

commit(false);

}
});

}
};

//Marca toda linha que foi editada
var cellclass = function (row, columnfield, value) {
if (value < 0) {
return ‘red’;
//} else if (value >= 20 && value < 50) {
//return ‘yellow’;
} else return “”; // ‘green’;
};

var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“.P100D-Solicitacao”).jqxGrid(
{
width: ‘100%’,
height: ‘100%’,
source: dataAdapter,
ready: function () {
$(“.P100D-Solicitacao”).jqxGrid(‘hidecolumn’, ‘SolicitacaoId’);
$(“.P100D-Solicitacao”).jqxGrid(‘localizestrings’, toolBarJQWidgets());
},
showeverpresentrow: true,
everpresentrowactions: “add reset”,
everpresentrowactionsmode: “columns”,
//everpresentrowactions: “add remove reset”,//update
editable: true,
pageable: true,
pagesizeoptions: [’30’, ’60’, ’90’, ‘120’, ‘150’, ‘180’, ‘210’],
pagesize: 30,
autoheight: false,
sortable: true,
altrows: true,
theme: ‘office’,
columnsresize: false,
enabletooltips: true,
filterable: true,
filtermode: ‘excel’,
enablehover: true,
groupable: false,
showgroupsheader: false,
//selectionmode: ‘multiplecellsadvanced’,
localization: {
culture: getLocalization(‘pt-BR’),
everpresentrowplaceholder: “Digite: “,
addrowstring: “Novo”,
udpaterowstring: “Atualizar”,
deleterowstring: “Excluir”,
resetrowstring: “Limpar”,
},
columns: [

//{ text: ‘SolicitacaoId’, datafield: ‘SolicitacaoId’ },

//Nome Projeto
{
text: ‘Nome da Demanda / Projeto’,
columntype: ‘textbox’,
datafield: ‘NomeProjeto’,
cellclassname: cellclass,
width: 280,
minLength: 1,
maxLength: 50,
//validation: function (cell, value) {
// if (value == value.empty) {
// return { result: false, message: “O Nome do Projeto é obrigatório.” };
// }
// return true;
//},
},

////Responsável
//{
// text: ‘Responsável’,
// align: ‘center’,
// width: 200,
// datafield: ‘ResponsavelId’,
// displayfield: ‘ResponsavelDesc’,
// columntype: ‘dropdownlist’,
// createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
// var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);
// inputTag.jqxDropDownList({
// popupZIndex: 99999999,
// placeHolder: “Informe um Responsável: “,
// source: responsavelAdapter,
// displayMember: ‘Nome’,
// valueMember: ‘ResponsavelId’,
// width: ‘100%’,
// height: 30,
// theme: ‘office’
// });
// return inputTag;
// },
// initEverPresentRowWidget: function (datafield, htmlElement) { },
// getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) { var value = htmlElement.val(); return value; },
// resetEverPresentRowWidgetValue: function (datafield, htmlElement) { htmlElement.val(null); },
// createeditor: function (row, value, editor) {
// editor.jqxDropDownList({
// source: responsavelAdapter,
// displayMember: ‘Nome’,
// valueMember: ‘ResponsavelId’,
// placeHolder: “Informe um Responsável: “,
// promptText: “Informe um Responsável”
// });
// }
//},

//Fase
{
text: ‘Fase’,
align: ‘center’,
width: 200,
datafield: ‘FaseId’,
displayfield: ‘FaseDesc’,
columntype: ‘dropdownlist’,

createEverPresentRowWidget: function (datafield, htmlElement) {
var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);
inputTag.jqxDropDownList({
popupZIndex: 99999999,
placeHolder: “Informe uma Fase: “,
source: faseAdapter,
displayMember: ‘Descricao’,
valueMember: ‘FaseId’,
width: ‘100%’,
height: 30,
theme: ‘office’
});
return inputTag;
},
initEverPresentRowWidget: function (datafield, htmlElement) { },
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) { var value = htmlElement.val(); return value; },
resetEverPresentRowWidgetValue: function (datafield, htmlElement) { htmlElement.val(null); },
createeditor: function (row, value, editor) {
editor.jqxDropDownList({
source: faseAdapter,
displayMember: ‘Descricao’,
valueMember: ‘FaseId’,
promptText: “Informe uma Fase”
});
}

},

//Classe
{
text: ‘Classe’,
align: ‘center’,
width: 200,
datafield: ‘ClasseId’,
displayfield: ‘ClasseDesc’,
columntype: ‘dropdownlist’,

createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {

var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);
inputTag.jqxDropDownList({

popupZIndex: 99999999,
placeHolder: “Informe uma Classe: “,
source: classeAdapter,
displayMember: ‘Descricao’,
valueMember: ‘ClasseId’,
width: ‘100%’,
height: 30,
theme: ‘office’

});
return inputTag;
},
initEverPresentRowWidget: function (datafield, htmlElement) { },
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) { var value = htmlElement.val(); return value; },
resetEverPresentRowWidgetValue: function (datafield, htmlElement) { htmlElement.val(null); },
createeditor: function (row, value, editor) {
editor.jqxDropDownList({
source: classeAdapter,
displayMember: ‘Descricao’,
valueMember: ‘ClasseId’,
promptText: “Informe uma Classe”
});
},
initeditor: function (row, value, editor) { },
geteditorvalue: function (row, value, editor) { return editor.val(); }
},

/* — ABERTURA CALENDÁRIO P100D —

— 1º TRI —
01/01 – 10/04

— 2º TRI —
01/04 – 10/07

— 3º TRI —
01/07 – 10/10

— 4º TRI —
01/10 – 10/01

*/

//Data Ínicio
{
text: ‘Data Ínicio’, datafield: ‘DataInicio’, width: 110, align: ‘center’, cellsalign: ‘center’, cellsformat: ‘d’,
columntype: ‘datetimeinput’,
createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);

var dataMesCorrente = new Date().getMonth();

//var minyear;
//var minmonth;
//var minday;

//var maxday;
//var maxmonth;
//var maxyear;

if (dataMesCorrente == 0) {

var minyear = new Date().getFullYear();
var minmonth = 0;
var minday = 11;

var maxmonth = 3;
var maxday = 10;
var maxyear = new Date().getFullYear();

}
if (dataMesCorrente == 3) {

var minyear = new Date().getFullYear();
var minmonth = 3;
var minday = 11;

var maxmonth = 6;
var maxday = 10;
var maxyear = new Date().getFullYear();

}
if (dataMesCorrente == 6) {

var minyear = new Date().getFullYear();
var minmonth = 6;
var minday = 11;

var maxmonth = 9;
var maxday = 10;
var maxyear = new Date().getFullYear();

}
if (dataMesCorrente == 9) {

var minyear = new Date().getFullYear();
var minmonth = 9;
var minday = 11;

var maxmonth = 11;
var maxday = 10;
var maxyear = new Date().getFullYear();

}

//var minyear = new Date().getFullYear();
//var minmonth = 6;
//var minday = 1;

//var maxmonth = 9;
//var maxday = 10;
//var maxyear = new Date().getFullYear();

inputTag.jqxDateTimeInput({

min: new Date(minyear, minmonth, minday),

max: new Date(maxyear, maxmonth, maxday),

value: null,//”2000, 1, 1″,
popupZIndex: 99999999,
placeHolder: “Data Ínicio: “,
width: ‘100%’, height: 30, theme: ‘office’, culture: “pt-BR”
});
$(document).on(‘keydown.date’, function (event) {
if (event.keyCode == 13) {
if (event.target === inputTag[0]) {
addCallback();
}
else if ($(event.target).ischildof(inputTag)) {
addCallback();
}
}
});
return inputTag;
},
initEverPresentRowWidget: function (datafield, htmlElement) { },
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
var value = htmlElement.val(); return value;
},
resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
htmlElement.val(null);
},
//createeditor: function (row, value, editor) { },
//initeditor: function (row, value, editor) { },
//geteditorvalue: function (row, value, editor) {
// // return the editor’s value.
// return editor.val();
//}
},

//Data Fim
{
text: ‘Data Fim’, datafield: ‘DataFim’, width: 110, align: ‘center’, cellsalign: ‘center’, cellsformat: ‘d’,
columntype: ‘datetimeinput’,
createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);

var dataMesCorrente = new Date().getMonth();

//var minyear;
//var minmonth;
//var minday;

//var maxday;
//var maxmonth;
//var maxyear;

if (dataMesCorrente == 0) {

var minyear = new Date().getFullYear();
var minmonth = 0;
var minday = 11;

var maxmonth = 3;
var maxday = 10;
var maxyear = new Date().getFullYear();

}
if (dataMesCorrente == 3) {

var minyear = new Date().getFullYear();
var minmonth = 3;
var minday = 11;

var maxmonth = 6;
var maxday = 10;
var maxyear = new Date().getFullYear();

}
if (dataMesCorrente == 6) {

var minyear = new Date().getFullYear();
var minmonth = 6;
var minday = 11;

var maxmonth = 9;
var maxday = 10;
var maxyear = new Date().getFullYear();

}
if (dataMesCorrente == 9) {

var minyear = new Date().getFullYear();
var minmonth = 9;
var minday = 11;

var maxmonth = 11;
var maxday = 10;
var maxyear = new Date().getFullYear();

}

inputTag.jqxDateTimeInput({

min: new Date(minyear, minmonth, minday),

max: new Date(maxyear, maxmonth, maxday),

value: null,
popupZIndex: 99999999,
placeHolder: “Data Fim: “,
width: ‘100%’,
height: 30,
theme: ‘office’,
culture: “pt-BR”
});
$(document).on(‘keydown.date’, function (event) {
if (event.keyCode == 13) {
if (event.target === inputTag[0]) {
addCallback();
}
else if ($(event.target).ischildof(inputTag)) {
addCallback();
}
}
});
return inputTag;
},
initEverPresentRowWidget: function (datafield, htmlElement) {
},
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
var value = htmlElement.val();
return value;
},
resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
htmlElement.val(null);
}
},

//Duração
{
text: ‘Duração’,
datafield: ‘Duracao’,
columntype: ‘textbox’,
cellclassname: cellclass,
width: 150,
editable: false,
align: ‘center’, cellsalign: ‘center’,
createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
var inputTag = $(“<div style=’border: none; background-color:#FFF !Important;’></div>”).appendTo(htmlElement);
return inputTag;
},
initEverPresentRowWidget: function (datafield, htmlElement) { },
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
var value = htmlElement.val();
return value;
},
resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
htmlElement.val(null);
}
},

//Sponsor
{
text: ‘Sponsor’,
align: ‘center’,
width: 200,
datafield: ‘SponsorId’,
displayfield: ‘SponsorDesc’,
columntype: ‘dropdownlist’,

createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);
inputTag.jqxDropDownList({
popupZIndex: 99999999,
placeHolder: “Informe um Sponsor: “,
source: sponsorAdapter,
displayMember: ‘Nome’,
valueMember: ‘SponsorId’,
width: ‘100%’,
height: 30,
theme: ‘office’
});
return inputTag;
},
initEverPresentRowWidget: function (datafield, htmlElement) { },
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) { var value = htmlElement.val(); return value; },
resetEverPresentRowWidgetValue: function (datafield, htmlElement) { htmlElement.val(null); },
createeditor: function (row, value, editor) {
editor.jqxDropDownList({
source: sponsorAdapter, displayMember: ‘Nome’, valueMember: ‘SponsorId’, promptText: “Informe um Sponsor”
});
}
},

//Recurso
{
text: ‘Recursos’, cellclassname: cellclass, // (Áreas Impactadas) – (min. 1; máx. 5)
columntype: ‘dropdownlist’,
datafield: ‘UsuarioId’,
displayfield: ‘Recurso’,
width: 230,

createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);
inputTag.jqxDropDownList({
checkboxes: false,
popupZIndex: 99999999,
placeHolder: “Informe os Recursos: “,
source: recursoAdapter,
displayMember: ‘Nome’,
valueMember: ‘UsuarioId’,
width: ‘100%’,
height: 30,
theme: ‘office’
});
return inputTag;
},
initEverPresentRowWidget: function (datafield, htmlElement) { },
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
// return the editor’s value.
var value = htmlElement.val();
return value;
},
resetEverPresentRowWidgetValue: function (datafield, htmlElement) { htmlElement.val(null); },

createeditor: function (row, value, editor) {
// construct the editor.
editor.jqxDropDownList({
checkboxes: false, source: recursoAdapter, displayMember: ‘Nome’, valueMember: ‘UsuarioId’
});
},
initeditor: function (row, value, editor) {
//// set the editor’s current value. The callback is called each time the editor is displayed.
//var items = editor.jqxDropDownList(‘getItems’);
//editor.jqxDropDownList(‘uncheckAll’);
//var values = cellvalue.split(/,\s*/);
//for (var j = 0; j < values.length; j++) {
// for (var i = 0; i < items.length; i++) {
// if (items[i].label === values[j]) {
// editor.jqxDropDownList(‘checkIndex’, i);
// }
// }
//}
},
geteditorvalue: function (row, value, editor) {
// return the editor’s value.
return editor.val();
}
},

//Representantes
{
text: ‘Representantes’, cellclassname: cellclass, // (Áreas Impactadas) – (min. 1; máx. 5)
columntype: ‘dropdownlist’,
datafield: ‘RepresentanteId’,
displayfield: ‘RepresentanteDesc’,
width: 230,

createEverPresentRowWidget: function (datafield, htmlElement) {
var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);
inputTag.jqxDropDownList({
checkboxes: false,
popupZIndex: 99999999,
placeHolder: “Informe os Representantes: “,
source: representanteAdapter,
displayMember: ‘Nome’,
valueMember: ‘RepresentanteId’,
width: ‘100%’,
height: 30,
theme: ‘office’
});
return inputTag;
},
initEverPresentRowWidget: function(datafield, htmlElement) {

},
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {
var value = htmlElement.val(); return value;
},
resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
htmlElement.val(null);
},

createeditor: function (row, value, editor) {
// construct the editor.
editor.jqxDropDownList({
checkboxes: false,
//selectedIndex: 1,
source: representanteAdapter,
displayMember: ‘Nome’,
valueMember: ‘RepresentanteId’,
height: 30,
theme: ‘office’,
selectionRenderer: function () {
return “<span style=’top:4px; position: relative;’>Informe os Representantes:</span>”;
}

});
},
initeditor: function (row, value, editor) {
//set the editor’s current value. The callback is called each time the editor is displayed.

var items = editor.jqxDropDownList(‘getItems’);

editor.jqxDropDownList(‘uncheckAll’);

var values = cellvalue.split(/,\s*/);

for (var j = 0; j < values.length; j++) {
for (var i = 0; i < items.length; i++) {
if (items[i].label === values[j]) {
editor.jqxDropDownList(‘checkIndex’, i);
}
}
}

},
geteditorvalue: function (row, value, editor) {
// return the editor’s value.
return editor.val();
}

},

//Benefícios
{
text: ”,
datafield: ‘Beneficios’,
columngroup: ‘BENEFICIO’,
columntype: ‘textbox’,
cellclassname: cellclass,
width: 200,
editable: false,
createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);

return inputTag;
},
initEverPresentRowWidget: function (datafield, htmlElement) { },
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {

var value = htmlElement.val();
return value;
},
resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
htmlElement.val(null);
},

createeditor: function (row, value, editor, htmlElement) { },
initeditor: function (row, value, editor) { },
geteditorvalue: function (row, value, editor) { return editor.val(); }

},

//Button Editar Beneficio
{
text: ”,
columngroup: ‘BENEFICIO’,
datafield: ‘Edit’,
width: 100,
columntype: ‘button’,
cellsrenderer: function () {
return “Editar”;
},
createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
var inputTag = $(“<div style=’border: none;’></div>”).appendTo(htmlElement);
return inputTag;
},
initEverPresentRowWidget: function (datafield, htmlElement) { },
getEverPresentRowWidgetValue: function (datafield, htmlElement, validate) {

var value = htmlElement.val();
return value;
},
resetEverPresentRowWidgetValue: function (datafield, htmlElement) {
htmlElement.val(null);
},

buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
//var offset = $(“.P100D-Solicitacao”).offset();
$(“#popupWindow”).jqxWindow({
showCollapseButton: true, maxHeight: 400, maxWidth: 700, minHeight: 200, minWidth: 200, height: 300, width: 500

});
// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“.P100D-Solicitacao”).jqxGrid(‘getrowdata’, editrow);

$(“#Beneficios”).val(dataRecord.Beneficios);

// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
}, {
datafield: ‘addButtonColumn’,
text:”,
width: 50
}
],
columngroups: [
{ text: ‘Benefícios’, align: ‘center’, name: ‘BENEFICIO’ }
]
});

// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({
width: 250, resizable: true, isModal: true, theme: ‘office’, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
});
$(“#popupWindow”).on(‘open’, function () {
$(“#Beneficios”).jqxInput(‘selectAll’);
});

$(“#Cancel”).jqxButton({ theme: ‘office’ });
$(“#Save”).jqxButton({ theme: ‘office’ });

// update the edited row when the user clicks the ‘Save’ button.
$(“#Save”).click(function () {
if (editrow >= 0) {
var row = {

Beneficios: $(“#Beneficios”).val()

};
var rowID = $(‘.P100D-Solicitacao’).jqxGrid(‘getrowid’, editrow);
$(‘.P100D-Solicitacao’).jqxGrid(‘updaterow’, rowID, row);
$(“#popupWindow”).jqxWindow(‘hide’);
}
});

//Event Bind
$(“.P100D-Solicitacao”).bind(‘bindingcomplete’, function () {

$(“.P100D-Solicitacao”).bind(‘cellbeginedit’, function (event) {
var args = event.args;
var columnDataField = args.datafield;
var rowIndex = args.rowindex;
var cellValue = args.value;
});

$(“.P100D-Solicitacao”).bind(‘cellendedit’, function (event) {
var args = event.args;
var columnDataField = args.datafield;
var rowIndex = args.rowindex;
var cellValue = args.value;
var oldValue = args.oldvalue;
});

$(“.P100D-Solicitacao”).jqxGrid(‘sortby’, ‘NomeProjeto’, ‘asc’);

});

//Cria um contexto de menu para a Grid
var contextMenu = $(“#Menu”).jqxMenu({ width: 200, height: 35, autoOpenPopup: false, mode: ‘popup’ });

//Desabilita o contexto do menu do Windows na Grid
$(“.P100D-Solicitacao”).on(‘contextmenu’, function () {
return false;
});

// handle context menu clicks.
$(“#Menu”).on(‘itemclick’, function (event) {
var args = event.args;
$(“#excluirRegistroGrid”).modal(‘show’);
});
$(“.P100D-Solicitacao”).on(‘rowclick’, function (event) {
if (event.args.rightclick) {
$(“.P100D-Solicitacao”).jqxGrid(‘selectrow’, event.args.rowindex);
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu(‘open’, parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
return false;
}
});

$(“#excluirRegistro”).click(function () {
var rowindex = $(“.P100D-Solicitacao”).jqxGrid(‘getselectedrowindex’);
var rowid = $(“.P100D-Solicitacao”).jqxGrid(‘getrowid’, rowindex);
$(“.P100D-Solicitacao”).jqxGrid(‘deleterow’, rowid);
});

}

//Limitar escrita Beneficios MaxChar = ‘500’
function countChar(val) {
var len = val.value.length;
if (len >= 500) {
val.value = val.value.substring(0, 500);
} else {
$(‘#charNum’).text(500 – len);
}
};

function toolBarJQWidgets() {

var localizationobj = {};
localizationobj.pagergotopagestring = “Página:”;
localizationobj.pagershowrowsstring = “Mostrando:”;
localizationobj.pagerrangestring = ” de “;
localizationobj.pagernextbuttonstring = “Próximo”;
localizationobj.pagerpreviousbuttonstring = “Anterior”;
localizationobj.sortascendingstring = “Classificar do Menor para o Maior”;
localizationobj.sortdescendingstring = “Classificar do Maior para o Menor”;
localizationobj.sortremovestring = “Limpar Classificação”;
localizationobj.groupsheaderstring = “Arraste a coluna e solte-o aqui para grupo por essa coluna”;
localizationobj.groupbystring = “Grupo por esta coluna”;
localizationobj.groupremovestring = “Remover de grupos”;
localizationobj.firstDay = 1;
localizationobj.percentsymbol = “%”;
localizationobj.emptydatastring = “Não existem Lançamentos cadastrados”;
//localizationobj.currencysymbol = “R$”;
localizationobj.currencysymbolposition = “before”;
localizationobj.decimalseparator = “,”;
localizationobj.thousandsseparator = “.”;
localizationobj.filterclearstring = “Limpar”;
localizationobj.filterstring = “Filtrar”;
localizationobj.filterselectallstring = “(Selecione Todos)”,
localizationobj.filtershowrowstring = “Mostrar linhas onde”;
localizationobj.filterorconditionstring = “ou”;
localizationobj.filterandconditionstring = “e”;
localizationobj.filterchoosestring = “Por Favor Escolha:”;
localizationobj.filterstringcomparisonoperators = [
‘vazio’, ‘não está vazio’, ‘conter (caso partida) ‘,
‘não contém’, ‘não contém (caso partida)’, ‘começa com’, ‘começa com (caso partida)’,
‘termina com’, ‘termina com (caso partida)’, ‘igual’, ‘(caso partida) igual’, ‘nulo’, ‘não nulo’
];
localizationobj.filternumericcomparisonoperators = [‘igual’, ‘não é igual’, ‘menos do que’, ‘menor ou igual’, ‘maior do que’, ‘maior ou Igual’, ‘nulo’, ‘não nulo’];
localizationobj.filterdatecomparisonoperators = [‘igual’, ‘não é igual’, ‘menos do que’, ‘menor ou igual’, ‘maior do que’, ‘maior ou Igual’, ‘nulo’, ‘não nulo’];
localizationobj.filterbooleancomparisonoperators = [‘igual’, ‘não é igual’];
localizationobj.validationstring = “Valor inserido não é válido”;
localizationobj.emptydatastring = “Nenhuma informação”;
localizationobj.filterselectstring = “Selecionar Filtros”;
localizationobj.loadtext = “Carregando …”;
localizationobj.clearstring = “Limpar”;
localizationobj.todaystring = “Hoje”;

var days = {
// full day names
names: [“Domingo”, “Segunda”, “Terça”, “Quarta”, “Quinta”, “Sexta”, “Sabado”],
// abbreviated day names
namesAbbr: [“Dom”, “Seg”, “Ter”, “Qua”, “Qui”, “Sex”, “Sab”],
// shortest day names
namesShort: [“D”, “S”, “T”, “Q”, “Q”, “S”, “S”]
};
localizationobj.days = days;
var months = {
// full month names (13 months for lunar calendards — 13th month should be “” if not lunar)
names: [“Janeiro”, “Fevereiro”, “Março”, “Abril”, “Maio”, “Junho”, “Julho”, “Agosto”, “Setembro”, “Outubro”, “Novembro”, “Dezembro”, “”],
// abbreviated month names
namesAbbr: [“Jan”, “Fev”, “Mar”, “Abr”, “Mai”, “Jun”, “Jul”, “Ago”, “Set”, “Out”, “Nov”, “Dez”, “”]
};
localizationobj.months = months;

var patterns = {
d: “dd/MM/yyyy”,
D: “dddd, d. MMMM yyyy”,
t: “HH:mm”,
T: “HH:mm:ss”,
f: “dddd, d. MMMM yyyy HH:mm”,
F: “dddd, d. MMMM yyyy HH:mm:ss”,
M: “dd MMMM”,
Y: “MMMM yyyy”
};
localizationobj.patterns = patterns;
//localizationobj.months = months;
var allEra = {
eras: [{ “name”: “A.D.”, “start”: null, “offset”: -543 }]
};
localizationobj.eras = allEra;

// apply localization.
return localizationobj;

}

[DimitarParticipant]

Hi paulo.junior,

As I said in my previous post, we would need some sample data from both sources to be able to test your first example and determine why the issue occurs. Your second code sample is too extensive for us to review in detail.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[paulo.juniorParticipant]

Hello Dimitar,

  Thanks for the help, we can solve the Combobox loading issue with Checkbox. And now that the items are selected but in the view of the Grid, the combo is only coming with a checked item. How can I display all selected on the line, separating with “,”.

———————Solution———————————–

var items = editor.jqxDropDownList(‘getItems’);
editor.jqxDropDownList(‘uncheckAll’);
var values = $(‘.P100D-Solicitacao’).jqxGrid(‘getrowdata’, row).RepresentantesId; //Solution
for (var j = 0; j < values.length; j++) {
for (var i = 0; i < items.length; i++) {
if (items[i].value === values[j]) {
editor.jqxDropDownList(‘checkIndex’, i);
}
}
}

[DimitarParticipant]

Hi paulo.junior,

I think what you require can be seen in the demo Custom Column Editor (column “Products”).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts