[MarcParticipant]

Thank you Pete for your timely answer,

In fact, to be more specific, I’m trying to have a dropdown list work in a grid, with a classical value/label, one being stored, the other one displayed.

I’m trying to transpose a demo example to my code (jqWidget site / Demo / jqxGrid / Editing / Custom DropDownList Column / ViewCode – I’m providing this path, because the url doesn’t work).

As you can see, there is an autoBind:true in this code snippet :

            var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
                autoBind: true
            });

and I was just trying to figure out if I need to include it or not.

Just for info, for the moment, the dropdown doesn’t work : value not being displayed when grid loads, update code not triggered when dropdown value selected. But I’ll keep on investigating, and open a new post if I can’t sort it out by myself.

Best regards.

[MarcParticipant]

Hi,

Sorry to re-open this old thread.

[Context info]
Some of the jqx documentation (eg. dataAdapter and Grid Data Sources) have an “autoBind: true” property setting.

They are not documented in the API. I understand from this post that this is because they are internal properties, meant to be used only internally. Which is a bit puzzling, because conversely, they are part of the examples, and examples are normally meant to be used

[The question]
The question is : does that mean than we should not use these properties, or that we should copy them as provided in the examples, without particularly caring about what they do ?

Thank you.

Marc.

[MarcParticipant]

tl;dr : this post shows how to format a grid date field before sending it to the server. Doing it is mandatory, because the default date format that get sent cannot generally be understood by the code server-side.

Hi Pete,

Thank you for the pointer to the DataAdapter, I eventually could sort it out.

Please note, I could not use the link to the demo, because if I understand well, it showed formatting the displayed date, while my question was to format the date before it get passed to the server.

Your pointer to the DataAdapter drove me to the jwxDataAdapter documentation. Since it is a 20+ pages doc,
not necessarily the clearer of the jqWidget documentation set (but let’s be positive, jqWidget is providing a whole 20 pages description, not bad), it took me some research to find my way out. Here is, as a feedback to readers who might need it, what worked, and what didn’t.

I first saw the formatData function. The doc says :

formatData: A callback function which is called before the data is sent to the server. You can use it to fully override the data sent to the server. If you define a ‘formatData’ function, the result that the function returns will be sent to the server.

So I tried :

var dataAdapter = new $.jqx.dataAdapter(source, {
  formatData: function (data) {
    data.DateStart = Date.parse(data.DateStart); // Or whatever other data formatting you might think of
    data.DateEnd = Date.parse(data.DateEnd);     // Or whatever other data formatting you might think of
    return data;
    },
  // loadError: etc.
  });

Unfortunately, and this may be due to a mistake or a typo, the data.DateStart and data.DateEnd that were passed to the server remained inchanged.

So here is the code that worked (focusing on the relevant parts of the code). Please note :

• It uses a dataAdapter.formatDate that follows the jqWdiget format string convention, which differs from JavaScript’s one.
• The date formatting code is inserted just before the ajax POST call in the updaterow property of the grid’s source

var dateFormat = "dd-MM-yyyy";

  var source =
    {
      datatype: "json",
      datafields: [
        // . . . extra code here . . . 
      	{ name: 'DateStart', type: 'date', format: dateFormat },
      	{ name: 'DateEnd', type: 'date', format: dateFormat },
        // . . . extra code here . . . 
        ],

      updaterow: function (rowid, rowdata, commit) {
        // synchronize with the server - send update command
        rowdata.DateStart = dataAdapter.formatDate(rowdata.DateStart, dateFormat);
        rowdata.DateEnd = dataAdapter.formatDate(rowdata.DateEnd, dateFormat);

        $.ajax({
          cache: false,
          dataType: 'json',
          url: 'Mission/Update',
          data: rowdata,
          type: "POST",
          success: function (data, status, xhr) {
            // update command is executed.
            commit(true);
          },
          error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
            commit(false);
          }
        });
      }
        // . . . extra code here . . . 
    };

  var dataAdapter = new $.jqx.dataAdapter(source, {
    loadError: function (xhr, status, error) {
      alert(error);
    }
  });

  // initialize Grid
  $("#gMissions").jqxGrid(
    {
        // . . . extra code here . . . 
      columns: [
        // . . . extra code here . . . 
              { text: 'Début', datafield: 'DateStart', width: 150, cellsformat: dateFormat, columntype: 'datetimeinput' },
              { text: 'Fin', datafield: 'DateEnd', width: 150, cellsformat: dateFormat, columntype: 'datetimeinput' },
          ]
    });
        // . . . extra code here . . . 

[MarcParticipant]

Hi Pete,

“Not implemented yet” is still an answer I’ll know I don’t need to spend time investigating further.

Thank you for taking the time to reply.

Best regards

[MarcParticipant]

Hi Peter,

Thank you for helping,

Actually, I was aware of the selectRow and unselectRow methods in the treeGrid API. Thank you for the pointer anyway.

Maybe it has to do with my way of asking questions (presenting the context first : this was the first section of my post – and then asking the actual question : this was the second section), but my true question is : “is there a way of navigating (previous / next) the tree grid ?”.

Maybe I’m missing something obvious, and sorry about that, I’m just getting started with jqWidgets. The issue I’m having is that, in the treeGrid that I’ve coded, bound to a table in an SQL Server database, the rowid is the ID in the database table. And they are displayed in the grid in random sequence, eg. 5, 3, 45, 11, etc., depending on the hierarchical sorting.

So I cannot assume that rowid-- will return the previous row, and rowid++ the next one.

Is there a way of getting the previous/next row, in the order rows are displayed in the grid ?

Thank you, and please don’t hesitate to let me know if my question is not clear enough.

Best regards.

[MarcParticipant]

Thank you Peter, that’s perfect.

Best regards.

[MarcParticipant]

Cool Pete, cool…

Your posts are *very* unfriendly, but I’l be indulgent because :

– Answering all the forum’s questions as you seem to be doing it must be sometime a true bore and…
– … I need the help of guys like you anyway to get up to speed with jqWidgets

Just kidding…

[MarcParticipant]

Come on Pete, are you really suggesting that, before posting, I should read the dozens of methods, events, properties, of this single widget (not to speak about the others) ?

Not really my way of learning, sorry…

Thanks for the answer, anyway…

[MarcParticipant]

Hi Pete,

I see, you seem to have been confused by this sentence. This was not the question, just context info. I was not expecting an answer on this one. The question was in the last line, as well as in the post title.

I’ll try to be clearer in my next posts.

Cheers.

[MarcParticipant]

tl;dr : makes sense. Won’t make it easy though to get all say level 5 children of a level 4 parent. No way to get a flat list ?

Hi Pete,

Thank you for your quick answer.

Your reply makes sense. And I agree that if I had taken the time to look at the records array field in my browser’s debugger, I would have guessed the hierarchical ordering of the rows.

Shall I understand from your reply that there is no way to get an unordered (flat) list of all rows ? It would make it easier to parse for a given parent.

To make myself clearer, assuming I’m on a level 4 row, and want to get all (level 5) children, and unless I’m missing something, I understand I would have to write the following code :
– From level 4, store somewhere the sequence of all 3 levels parent rows
– Get the hierarchically ordered set of rows with ‘getRows’
– Walk down step by step the returned array, using the stored sequence of parents, to find back the level 4.
– From there, eventually, get the children.
Am I missing something ?

And please :
– if your answer deals with flat list, please feel free to post it here.
– if your answer deals with children, please feel free to reply to my next post.

As you see, the questions are distinct, even if the replies may collapse. And please remember, before shooting me down in your posts, that I don’t know the reply when I ask the question. Otherwise I wouldn’t ask

Best regards.

[MarcParticipant]

Hi Peter,

Thank you for your replies.

But now, isn’t *your* statement being incorrect ?

My first question was to get *all* rows…

This one is to get *children* rows of a given row.

The next one is get a given row depending on criteria.

I’m intentionnally splitting the questions, so that it helps other readers to find the very answer they’re looking for…

Thanks for your help, and let me know if I’m missing something.

Best regards.

[MarcParticipant]

Hi,

Here is the detailed procedure, for those who might be interested :

1. Server-side, in the CSharp controller, the last line in the HTTP POST Add method should be :

return Json(Activity.ActivityID, JsonRequestBehavior.AllowGet);

2. Client-side, in the grid ‘source’ code, addrow property, the second parameter of the commit callback function has to be named ‘data’. Data is an object that matches whatever you sent from the server, that is in the first parameter of the Json() function above. So the commit function call is:

commit(true, data);

Everything works fine then.

Thanks Peter for your help.

Best regards.

[MarcParticipant]

Hi Peter,

Thank you again.

I had your link in my list of readings, I will check it in details.

From a first reading, it also uses, but with different parameters, the Json() MVC .Net function, in the C# controller, to return json data to the client. What I seem to be missing now, actually, is a proper documentation of this function. Despite extensive googgle searches, I could not find any so far. But I guess I should now post a question in MS forums, not here.

Thanks again for your help, I’ll check your link, and see if I can sort it out.

Best regards.

[MarcParticipant]

Hi Peter,

Thanks for your timely answer.

I first fixed the issue with passing the “null” ID. In C#, more precisely the Entity Framework, which is .Net Entity-Relational-Mapping layer, the ID was defined as int, which in C# does not accept null values. The correct type had to be int? (not required int), which basically means ‘int or null’. Now, the record is correctly inserted in the database with null ID, which then lets the database autogenerate the ID. The new ID is sent back to C# in Activity.ActivityID. This works fine. But I’m not yet quite clear about how to implement your answer.

Here is my C# code, directly derived from a sample in jqwidget site :

    [HttpPost]
    public ActionResult Add(Activity Activity)
    {
      if (ModelState.IsValid)
      {
        db.Activities.Add(Activity);
        db.SaveChanges();

        return Json("true");
      }
      return Json("false");
    }

So, I still see three questions :

• How do I pass back the ID to the JS client-side ? Neither return Json(Activity.ActivityID); nor return Json("true",Activity.ActivityID) work.
  The first one does not set newId in the commmit(true, newId) callback.
  The second one generates an error server-side in C# : invalid parameter.
  But maybe this is a question to the MS guys ?
• Assuming I eventually correctly set back the commit(true, newId) callback, how do I use it to fix the ActivityId in the grid ? Would it be something like : commit(true, newId){$("#jqxgrid").jqxGrid('setcellvalue', <rowid>, 'ActivityID', newId);}
• And finally, where do I get the rowid in the above code ? Is it somewhere in the data parameter of the success: function ? Otherwise where else ?

Sorry if these questions from a newbie are obvious, they are not yet for me

Thank you and best regards.

[Author]

Posts