[paulo.juniorParticipant]

Hi Hristo Hristov,
Thanks again for the quick response, but it wouldn’t be the kind of customization I want. And my problem would not be a customization on the grid page, but a behavior that is happening when a filter is performed on it.
I used your configuration and found out that the problem is in the pagesize, because using your personalization I put the display of 500 items per page, and when I filtered a column it returned me 281 and the grid mounted the screen with 500 lines, even I having 281 filto record.

pagerrenderer: pagerrenderer,
pagesize: 500,

Hugs,
Paulo Junior

[paulo.juniorParticipant]

Hi Hristo Hristov,
Thanks for the quick response, yes, as I am doing on the project, it is the same as your ASP.Net documentation, except that I use a single method to do everything. But I see that when I get the result of the Filter if it has and the sorting, even if I say that I want to display only the result, what happens is that the function .Take (pagesize), is giving some conflict that in Javascript side of the component.
Because in the backend it passes the correct result of the Filter, but for some reason as I say that I want to display X lines to see the entire result of the filter in the grid, the jqxGrid is not having the expected behavior. It does not present any error, it just is not behaving as expected. And with respect to the DataTable example you showed me, it does not fit what I’m using, because I have the option to display the number of rows on the grid, and that’s where I’m having the problem.
Right now, I redid the display of a filter where I have a result in the BackEnd of 219 items, and I chose to display 1000 lines, then the Grid took the result of 219 that comes from C # and played it for the component, only the same it did not discard 781 blank lines, it displayed in the jqxGrid on screen, so that would be my problem, the discard that the grid is not doing.

Best Regards,
Paulo Junior

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

[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;

}

[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]

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,

[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,

[paulo.juniorParticipant]

Hello Dimitar,
    I’m sorry but it was changed to translate the code’s orders, because my English is not there great things. Sorry, but anyway I got to see the problem here was that I was not instantiating the creation of the elements in the code. Type:

{
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”
});
}
},

Thank you for your help …
Paulo Junior

[Author]

Posts