Grid -->Tabstrip --> Editor --> Save

[Matthew]

I have a grid.  In the grid row I have a tabstrip.  In the tabstrip I have an editor.  The editor is dynamically created as follows:

items.Add().Text(

 

"myTabName").LoadContentFrom("myPartialView", "myView", new { PartId = "<#= PartId #>", StationId = 1 });

 In the partial view I have a submit button which calls the SaveEditor action in my controller.  In the SaveEditor action I save the contents of the editor in the database. 

The problem is what to do after I save the data.  Right now I simply:

return view("index")

That works, but it essentially reloads my grid and I lose the state of the grid and have to renavigate down to the correct row in the grid.  What I would prefer is a "save" button in the Editor's toolbar that saves the data to the database, but doesn't affect the current state of the grid/tabstrip.

I know how to use client events to display a "Saved" alert, but I don't know how to save the data to the database using Javascript.  Suggestions?  I'm very new to MVC.

 

[Daniel]

Hello Matthew,

To achieve this you should add a click event to either a custom tool in the Editor`s toolbar or to a button and make an Ajax post request in the handling function, to the SaveEditor action. For example :

function saveToDateBase(id) {
        var editorName = "editor" + id;
        var editor = $("#" + editorName).data("tEditor");

        var data ={stationID: id, value: editor.value() };
        $.ajax({
            url: "Home/SaveEditor",
            data: data,
            type: "POST"
        });
    }

For your convenience, I attached sample project which implements this.

Best wishes,
Daniel
the Telerik team

[Matthew]

You guys amaze me.  This is perfect.  In fact I was able to add a custom button (<input type=image...) and match the standard location, theme, and behavior of the new button so you would never know it wasn't a standard "save" button.  Awesome.

For others, here are some notes -- the standard buttons are 24px by 24px.  I'm using the Metro theme so I modifide the site CSS file with the following:

input[type="image"]
{
    vertical-align:bottom;
    border: 1px solid #25a0da;
    cursor: hand;
}

input[type="image"]:hover
{
    border: 1px solid white;
}

I have one question, because I'm completely ignorant of javascript and jquery...  How can I capture the success or failure of the "save" function and provide an appropriate alert?

Here is my current script, but it simply assumes the save was successful:

function saveToDatabase(_PartId, _StationId) {
    var editorName = "Editor_" + _PartId + "_" + _StationId
    var editor = $("#" + editorName).data("tEditor");

    var data = { PartId: _PartId, StationId: _StationId, instruction: editor.value() };
    $.ajax({
        url: "Parts/Save2DB",
        data: data,
        type: "POST"
    });
    alert("Saved");
}

[Justis]

Hello Matthew,
 You can capture whether or not your ajax call completed successfully by adding the 'success' and 'error' attributes as follows:

function saveToDatabase(_PartId, _StationId) {
    var editorName = "Editor_" + _PartId + "_" + _StationId
    var editor = $("#" + editorName).data("tEditor");

    var data = { PartId: _PartId, StationId: _StationId, instruction: editor.value() };
    $.ajax({
        url: "Parts/Save2DB",
        data: data,
        type: "POST",
        success: function(result) {
             // your code here for success
        },
        error: function (xhr, ajaxOptions, thrownError){
            // your code here for failures
        }
    });
    alert("Saved");
}

The functions you see within 'success' and 'error' can be written however you wish to handle them.

Regards,
Pr3vention

[Matthew]

Thank you, this works.  I needed to add a "," (comma) after the "success" function call.  I have discovered a problem however.  Somewhere along the way I've introduced an encoding problem.  In the editor if I enter plain text everything works as it should, but if I press a carrage-return I get an "Internal Server Error".  The error shows up before I hit the Save2DB code in the controller.

I suspected an encoding problem.  I didn't really want to encode the data when writing to the database but I can live with that.  I thought the data being passed in "data: data" would have already been encoded since in the editor template I have "Encode(true)" specified, but it does not appear to be so.

I updated my script as follows and it fixed the problem.  I found the script change via Google, but I don't understand the purpose of the '<div />' .  What's that all about? 

function saveToDatabase(_PartId, _StationId) {
    var editorName = "Editor_" + _PartId + "_" + _StationId
    var editor = $("#" + editorName).data("tEditor");
    var etext = $('<div />').text(editor.value()).html();
    var data = { PartId: _PartId, StationId: _StationId, instruction: etext };

    $.ajax({
        url: "Parts/Save2DB",
        data: data,
        type: "POST",
        success: function(result) {
            alert("Saved");
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Error: " + thrownError);
        }
    });
}

[Justis]

Hello Matthew,
 You are absolutely right. When I wrote the jQuery sample, I mistakenly left a comma out. I have adjusted my previous code sample accordingly. Thank you for making note of it.

 As for your current issue, many symbols (such as & and escaped commands) generate a <div/> in memory but are not appended to the DOM. Using that jQuery statement, you are effectively looking for <div/> elements throughout the page and returning the encoded result in its place. A similar explanation of this event, as well as an example run-time link, can be found on this StackOverflow page (will open in new tab/window).

Regards,
Pr3vention

[Francesca]

I had to use System.Web.HttpUtility.HtmlDecode(EditorValue); in my controller ...
I changed my data specification in the jquery call to:   var etext = $('<div />').text(editor.value()).html();
and then in my controller i had to convert the string to System.Web.HttpUtility.HtmlDecode(EditorValue);

Now it works perfectly - thanx for feedback!

[Justis]

Hi Francesca,
 Your issue is coming from your data definition in your ajax call.

data: '{"chargeInfoTextID": "' + id + '", "EditorValue": "' + editor.value()  + '",  "chargeInfoTextName": "' + cName + '"}',

 Change the line to the following-

data: { chargeInfoTextID: id, EditorValue: editor.value(), chargeInfoTextName: cName},

Regards,
Pr3vention