ASP.NET

Having troubles trying to implement a flexigrid and Modal forms for Add / Edit RSS

2 replies

Last post Dec 14, 2012 01:07 PM by Naom

‹ Previous Thread|Next Thread ›

Naom

All-Star

36004 Points

7901 Posts

Having troubles trying to implement a flexigrid and Modal forms for Add / Edit

Dec 10, 2012 07:29 PM|LINK

Hi everybody,

I want to be able to Add/Edit currently selected row in a grid (I am using flexigrid) using a modal form. So far I found, that the close button on that form at the top right corner does nothing.

I am wondering how can I make this work - do you see what should I adjust in my views / js files?

Here is the main view which contains the grid and also contains the _ClientForm partial view, although it is not invoked:

@model CardNumbers.Objects.Client

@{
    ViewBag.Title = "Clients";
}

@section scripts {
    <script src="@Url.Content("~/Scripts/Clients.js")" type="text/javascript" ></script>
}

<form id="frmClientsSearch">
    <label for="clientNo">Client No: </label>
    <input type="number" name="searchClientNo" class="numericOnly" /><br />
    <label for="clientName">Client Name: </label>
    <input type="text" size="25" value="Please enter the search value" class="SelectOnEntry"
        name="searchClientName" />

    <input type="button" id="btnClientsSearch" value="Find / Refresh" />
</form>
<div style="padding-left: 150px; padding-top: 50px; padding-bottom: 50px;" id="ClientsResults">
    <table id="flexClients" style="display: none">
    </table>
</div>

<div id="editor" style="visibility: hidden">
     @Html.Partial("_ClientForm", Model)
</div>

This is my _ClientForm partial view (note, that the form is named sform)

@using WebDemo.Helper
@model CardNumbers.Objects.Client
   @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "sform", title = "Client Info" }))
   { 
<fieldset>
    <legend>Client Info</legend>

    @Html.ValidationSummary(true)

    <input type="hidden" id="fntype" name="fntype">
    @Html.HiddenFor(m => m.Id)
    @Html.EditorFor(m => m.Number, EditorTemplate.TextBox)

    @Html.EditorFor(m => m.Name, EditorTemplate.TextBox)

    @Html.EditorFor(m => m.Address, EditorTemplate.EditBox)
        
    <div id="ContactsInfo">        
        
        <div id="Contact1">
            
         @Html.EditorFor(m=>m.Contact1)
         
        </div>
        
        <div id="Contact2">
            
           @Html.EditorFor(m => m.Contact2)
        </div>
    </div>
  
    <div id="SaveCancel" class="float-right">
        <button  id="btnSave">Save</button>
        <button  id="btnCancel">Cancel</button>
    </div>
</fieldset>
}

and finally, this is my Clients.js file. Please note the Edit code, this is what I am trying to make to work right now, but it's not working for the x button and also the modal dialog could not be resized:

$(document).ready(function () {
    if ($('#frmClientsSearch').length === 1) {
        
        $("input[name=searchClientName]").focus();
        $("input[name=searchClientName]").select();
    }

    var scope = $('#sform');
    var currentId = 0;

    $('input[type=submit]', scope).click(function (e) {
        try {
            e.preventDefault();

            if (!scope.valid()) {
                 alert('has invalid');
                return;
            }

            save(scope);
           
        } catch (e) {
            alert("Error " + e);
        }

    });
   
    $("input[name=searchClientName]").keyup(function (event) {
        
        if (event.keyCode === 13) {
            $("#btnClientsSearch").click();
        }
    });
});

// http://www.ienablemuch.com/2011/11/flexigrid-crudinline-form-with-aspnet.html
var formHtml = "";

function canRender() {
    return _canRender;
}

$(function () {
    _canRender = false;
});

$("#flexClients").flexigrid({
    url: '/Client/Client/',
    dataType: 'json',
    colModel: [
    { display: 'Client Id', name: 'Id', width: 100, sortable: true, align: 'center', hide: true },
    { display: 'Client #', name: 'Number', width: 100, sortable: true, align: 'center' },
    { display: 'Name', name: 'Name', width: 350, sortable: true, align: 'center' },
    { display: 'Contact 1', name: 'Contact1', width: 350, sortable: true, align: 'center' },
    ],
    buttons: [
    { name: 'Add', bclass: 'add', onpress: add },
    { name: 'Edit', bclass: 'edit', onpress: edit },
    { name: 'Delete', bclass: 'delete', onpress: del },
    { separator: true }
    ],
    searchitems: [
    { display: 'Client Name', name: 'Name' }
    ],
    sortname: "Name",
    sortorder: "asc",
    usepager: true,
    title: 'Clients',
    useRp: true,
    rp: 15,
    rpOptions: [5, 10, 15, 20, 25, 40],
    showTableToggleBtn: true,
    width: 900,
    onSuccess: bindDblClick,
    onSubmit: addFormData,
    hideOnSubmit: false,
    height: 'auto',
    singleSelect: true
});

//$('.flexigrid').on('dblclick', 'tr[id*="row"]', function () {
//    // console.log('mouseenter rowId: ' + $(this).attr('id').substr(3));
//    alert($(this).attr('id').substr(3));
//    //Edit();
//});

function bindDblClick()
{
    $('#flexClients tr').dblclick(function () {          
       edit('Edit');
    });
}

//This function adds parameters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit			
function addFormData() {

    //passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
    var dt = $('#sform').serializeArray();
    dt = dt.concat($('#frmClientsSearch').serializeArray());
  
    $("#flexClients").flexOptions({ params: dt });
    return true;
};

$('#sform').submit(function () {

    $('#flexClients').flexOptions({ newp: 1 }).flexReload();
 
    return false;
});

function del(com, grid) {
    try {
        var clientName = $('.trSelected td:eq(2)').text();
        if (clientName) //Variable is defined and not empty
        {
            if (confirm("Are you sure you want to delete " + $.trim(clientName) + "?")===false)
                return false;            

            $('.trSelected', grid).each(function () {
                var id = $(this).attr('id');
                id = id.substring(id.lastIndexOf('row') + 3);

                addFormData(); $('#flexClients').flexOptions({ url: '/Client/Delete/'+ id }).flexReload();
            });
        }
    }
    catch(e) {
        alert('Error ' + e);
    }
}

function add(com, grid){
    $("#sform").dialog({
        autoOpen: false,
        show: "blind",
        width: 1000,
        height: 600
    });
    $("#sform").dialog("open");

    clearForm();
    $('#fntype').val('Add');
}
 
function edit(com, grid)
{
        $('.trSelected', grid).each(function () {
          
                var id = $(this).attr('id');
                id = id.substring(id.lastIndexOf('row') + 3);
                currentId = id;
                $('#fntype').val('Edit');
            //  var url = '/Client/Edit/' + id;            
                var url = "/Home/About/";
           //     $("#sform").load(url).dialog({ modal: true, width: 1200, height: 750, resizable: true, close: function (event, ui) { alert('Closed'); } });

                $('#sform').dialog({
                    autoOpen: false,
                    width: 1200,
                    height:750,
                    
                    resizable: true,
                    modal: true,
                    open: function (event, ui) {
                        $(this).load(url);
                    },
                });

                $('#sform').dialog('open');
        });

    }

function clearForm() {

    $("#sform input").val("");
}

$(function () {
    $('#btnSave').click(function () {
   //     addFormData();
        $('#flexClients').flexOptions({ url: '/Client/Edit/'+ currentId }).flexReload();
        clearForm();
        $('#sform').dialog('close');
        return false;
    });
});

$(function () {
    $('#btnCancel').click(function () {

        //clearForm();
        $('#sform').dialog('close');
        return;
    });
});

$(function () {
    $('#btnClientsSearch').click(function () {
        addFormData();
        $('#flexClients').flexOptions({ url: '/Client/Client/' }).flexReload();
      
    });
});

As you can see, for now I am just trying to display something in that modal form and be able to close it. I commented out the original url (which by itself seems to work except for the Save which is not working) and playing with unrelated url for now.

Thanks a lot in advance.

Beware of bugs in the above code; I have only proved it correct, not tried it.
(Donald Knuth)

Visit my blog

Microsoft Community Contributor 2011-12

- Reply
ra00l

Member

300 Points

28 Posts

Re: Having troubles trying to implement a flexigrid and Modal forms for Add / Edit

Dec 14, 2012 05:53 AM|LINK
Naom, what I do in this case is to have an "action"column when I feed data into the flexigrid. This column will have an edit link, which contains the ID of the row. You can then attach a click event to the link, which opens the pop-up

[EOF]
- Reply
Naom

All-Star

36004 Points

7901 Posts

Re: Having troubles trying to implement a flexigrid and Modal forms for Add / Edit

Dec 14, 2012 01:07 PM|LINK

Have you been successful in implementing modal dialogs for editing? I've been trying to use jquery dialog and load content on the fly, but it is not really working for me.

If I keep the form on the main page, I can open it for Add functionality fine.

If I try instead to use, say, div and p in the view to load the dialog, then it never opens :(

I am not sure what am I doing wrong, I spent lots of time on one simple page and I am not progressing :(

Beware of bugs in the above code; I have only proved it correct, not tried it.
(Donald Knuth)

Visit my blog

Microsoft Community Contributor 2011-12

‹ Previous Thread|Next Thread ›

Having troubles trying to implement a flexigrid and Modal forms for Add / Edit RSS

2 replies

Naom

Having troubles trying to implement a flexigrid and Modal forms for Add / Edit

ra00l

Re: Having troubles trying to implement a flexigrid and Modal forms for Add / Edit

Naom

Re: Having troubles trying to implement a flexigrid and Modal forms for Add / Edit

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft