Cascading Combobox with noneditable field

[RedantJParticipant]

My requirements are: I have two columns, one editable, the other one is not editable. When you change the value of one, the other changes automatically.

This is a solution that I came up with:

columns: [
              {
              text: 'Country', datafield: 'Country', width: 150, columntype: 'combobox',
              cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
                  if (newvalue == "USA") {
                         $("#jqxgrid").jqxGrid('setcellvalue', row, "City", "Los Angeles");
                  } else if (newvalue == "Paris") {
                         $("#jqxgrid").jqxGrid('setcellvalue', row, "City", "Paris");
                  } else if (newvalue == "Belgium") {
                         $("#jqxgrid").jqxGrid('setcellvalue', row, "City", "Brussels");
                  } else {
                         $("#jqxgrid").jqxGrid('setcellvalue', row, "City", "None");
                  }
              }
              },
              {
              text: 'City', datafield: 'City', width: 150, columntype: 'textbox', editable: false}
 ]

While this is not wrong, is there a better way to do this?

[ivailoParticipant]

Hi RedantJ,

You can try this approach:

                columns: [
                              {
                              text: 'Country', datafield: 'Country', width: 150, columntype: 'combobox',
                              cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
                                  var dataPairs = {"Belgium":"Brussels", "France":"Paris", "USA":"Los Angeles"};
                                  var newValue = data[newvalue] || "None";
                                  $("#jqxgrid").jqxGrid('setcellvalue', row, "City", newValue);
                              }
                              },
                              {
                              text: 'City', datafield: 'City', width: 150, columntype: 'textbox', editable: false}
                 ]

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[RedantJParticipant]

Thank you very much, this is a lot better!

[RedantJParticipant]

For:

`var newValue = data[newvalue] || “None”;’

Did you mean to write:

var newValue = dataPairs[newvalue] || "None"; ?

[RedantJParticipant]

Sorry to trouble you again:

I’ve made some mistakes with the code posted, but it gave me an idea.

                columns: [
                              {
                              text: 'Country', datafield: 'Country', width: 150, columntype: 'combobox',
                              cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
                                  var dataPairs = {"Belgium":"Brussels", "France":"Paris", "USA":"Los Angeles"};
                                  var newValue = dataPairs[newvalue] || "None";
                                  $("#jqxgrid").jqxGrid('setcellvalue', row, "City", newValue);
                              }
                              },
                              {
                              text: 'City', datafield: 'City', width: 150, columntype: 'textbox', editable: false}
                 ]

With this line:
$("#jqxgrid").jqxGrid('setcellvalue', row, "City", newValue);
When I changed the value from “France” to “Belgium”, the value switched from “Paris” to “None”.

However, when I typed it in like this:
$("#jqxgrid").jqxGrid('setcellvalue', row, "City", newvalue);
When I changed the value from “France” to “Belgium”, the value switched from “Paris” to “Belgium”.

Also, when I try the line:
alert (dataPairs["France")]);

“Paris” does come out as expected.

This tells me newvalue is working the way it’s supposed to.

[RedantJParticipant]

Crap, that meant to read:

alert (dataPairs["France"]);

[RedantJParticipant]

Oh my…I think my answer is here.

[RedantJParticipant]

This fills my requirements:

               columns: [
                              {
                              text: 'Country', datafield: 'Country', width: 150, columntype: 'combobox',
                              },
                              {
                              text: 'City', datafield: 'City', width: 150, columntype: 'textbox', editable: false}
                                 cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
                                    var valCountry = rowdata.City;

                                    if (valCounty == "France") {
                                       return "<div style='margin: 4px;' class='jqx-left-align'>Paris</div>";
                                    }
                                    if (valCounty == "Belgium") {
                                       return "<div style='margin: 4px;' class='jqx-left-align'>Brussels</div>";
                                    }
                                    if (valCounty == "USA") {
                                       return "<div style='margin: 4px;' class='jqx-left-align'>Los Angeles</div>";
                                    }

                 ]

But now I have a new problem: My boss wants the “City” row sortable. My boss doesn’t want “City” row in the server database, so that row only needs to be sortable on the client side.

[ivailoParticipant]

Hi RedantJ,

Your grid can be sortable on client side or server side, but not in both sides unfortunately.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[RedantJParticipant]

Hello Ivailo,

I am going back to your suggestion

                columns: [
                              {
                              text: 'Country', datafield: 'Country', width: 150, columntype: 'combobox',
                              cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
                                  var dataPairs = {"Belgium":"Brussels", "France":"Paris", "USA":"Los Angeles"};
                                  var newValue = dataPairs[newvalue] || "None";
                                  $("#jqxgrid").jqxGrid('setcellvalue', row, "City", newValue);
                              }
                              },
                              {
                              text: 'City', datafield: 'City', width: 150, columntype: 'textbox', editable: false}
                 ]

This seems to be the closest I can get to satisfying all requirements.

I just need to get

var newValue = dataPairs[newvalue] || "None";

to behave the way it was intended to.

Any thoughts?

[RedantJParticipant]

A-ha! Breakthrough:

The mistake I’ve been making all along was treating newvalue like a string.

It isn’t.

newvalue is an object. Either convert it to a string to do the comparison. Or treat newvalue as a JSON object. This only applies when dealing with strings.

[RedantJParticipant]

Okay! This works and I’m really happy about it. 🙂

                columns: [
                              {
                              text: 'Country', datafield: 'Country', width: 150, columntype: 'combobox',
                              cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
                                  var dataPairs = {"Belgium":"Brussels", "France":"Paris", "USA":"Los Angeles"};
                                  var compValue = newvalue.value
                                  var newValue = dataPairs[compValue] || "None";
                                  $("#jqxgrid").jqxGrid('setcellvalue', row, "City", newValue);
                              }
                              },
                              {
                              text: 'City', datafield: 'City', width: 150, columntype: 'textbox', editable: false}
                 ]

[Author]

Posts