Create a Table inside of a Popup Window and sending data back!Urgent Please

[dmitribodiu]

Hello everyone! I 'm new to this plugin and my problem is when I press Add a new record, I want to display a popup window with a new grid , populated with data from database, then I select a couples of rows in that table click copy button and all rows from there will be copied to my main grid. Is that possible to do? Is yes, please tell me where to start my search, cause am noob in jQuery, but I have to do that job .. Please , If you know something how to do that tell me everything possible...Thanks in advance!

[shekharquexst]

try this-> HTML->

i am unable to put html code here so i put this image please refer it

Script-> $("div-id").jtable({ title:'', toolbar: { items: [{ icon: '/images/copy.png', text: 'Copy Records', click: function () { $("#pop-up-div").jtable({ selectingCheckboxes: true, actions:{ listAction:url, deleteAction:url }, fields:{ //your fields here } }); $("#pop-up-div").jtable('load'); $("#popup-container").dialog({ modal:true, autoOpen:true //mode attributes for popup if you need it.. }); $("div-id").jtable('reload');//jtable behind popup } }] }, actions:{ listAction:url, deleteAction:url }, fields:{ //your fields here }

});

$("div-id").jtable('load');

$("#copy").click(function () { var $selectedRows = $("#pop-up-div").jtable('selectedRows'); //alert($selectedRows); $("#pop-up-div").jtable('deleteRows', $selectedRows); });

you will get id of each record. you can delete from where the data is loading in popup grid and add into the table which is behind the popup.

you will have to do this at server side...best luck

[dmitribodiu]

Haai! Thank you very much for your help! but I still have one more question. I need my tooldar to be in childtable(I Have done that) and every time new dialog box appears I need to pass there the Id from the parent table, so I can download data specifically for that Id. How to achieve that, please? I can see that there is a default data.record which sends to child table, I used it but it works only 1 time, the second time it sends the same id to dialogbox...

[shekharquexst]

hi dmitribodiu, i am not getting the scenario..so can u please paste your code and some snapshots here?

[dmitribodiu]

Sure... I will try to explain a bit better. I have a parent table called "Interfaces", and a chiltable called "Modules".

here we have 2 interfaces and every interface has 1 module. First interface has module1, second interface has module 2.

when I click button "Add data from DB" a popup appears , and there is a table inside with data from database. It takes all modules from db except those which the selected interface has. So, if Interface one has module1, there should be only module2 in popup displayed for it. it works..

the problem appears when i go to second interface and try to add modules for it. It still displays the same popup window(module2 ). what I do is I send InterfaceId to modules, then in listAction for modules I do listAction: '/admin/Interfaces.aspx/GetModulesForInterface?InterfaceId=' + interfaceData.record.InterfaceId. but when I open a child table for another interface to add modules again it makes the same call to server with the same ID. It makes a call to server every time i press Add data to DB, but with the same Ids...

my code is here , but it has 1 difference , Instead of InterfaceId key, I have 3 keys(BankId, FilialeId,Operation), (composite key), so I send all three keys to server, i guess it doesnt change the sence of the problem...

$(document).ready(function() { $('#InterfacesContainer').jtable({ title: 'GSC Interfaces', paging: true, pageSize: 10, sorting: true, defaultSorting: 'Operation ASC', openChildAsAccordion: true, actions: { listAction: '/admin/Interfaces.aspx/GetGscInterfaces' }, fields: {

             Modules: {
                    title: '',
                    width: '1%',
                    sorting: false,
                    edit: false,
                    create: false,
                    listClass: 'child-opener-image-column',
                    display: function (interfaceData) {
                        //Create an image that will be used to open child table
                        var $img = $('<img class="child-opener-image" src="/Content/jtable/images/expand.png" title="View Modules" />');
                        //Open child table when user clicks the image
                        $img.click(function () {
                            $('#InterfacesContainer').jtable('openChildTable',
                                $img.closest('tr'),
                                {
                                        title: 'Modules',
                                        toolbar: {
                                        items: [{
                                            icon:'/Content/jtable/images/expand.png',
                                            text: 'Add Data From DB',
                                            click: function () {
                                                $("#pop-up-div").jtable({
                                                    selecting: true, //Enable selecting
                                                    multiselect: true,
                                                    selectingCheckboxes: true,
                                                    actions: {
             listAction: '/admin/Interfaces.aspx/GetModulesForInterface?bankId=' + interfaceData.record.BankId+ '&filialeId='+interfaceData.record.FilialeId+'&operation='+interfaceData.record.Operation,
                                                        deleteAction: '/admin/Interfaces.aspx/CreateModule?bankId=' + interfaceData.record.BankId+ '&filialeId='+interfaceData.record.FilialeId+'&operation='+interfaceData.record.Operation,
                                                    },

                                                    fields: {
                                                           Id:{
                                                                    key: true,
                                                                    create: false,
                                                                    edit: false,
                                                                    list: false
                                                                },
                                                         ModuleTitle: {
                                                                    title: 'ModuleTitle',
                                                                    width: '30%',

                                                                },
                                                                Description: {
                                                                    title: 'Description',
                                                                    width: '30%'
                                                                },
                                                    }
                                                });
                                                $("#pop-up-div").jtable("load");
                                                $("#popup-container").dialog({
                                                    modal: true,
                                                    autoOpen: true,
                                                    buttons: {
                                                        "Add Selected Data": function () {
                                                            var $selectedRows = $("#pop-up-div").jtable('selectedRows');
                                                            $("#pop-up-div").jtable('deleteRows', $selectedRows);
                                                            $(this).dialog("close");
                                                           // $('#PersonTableContainer').jtable("reload");
                                                        },
                                                        Cancel: function () {
                                                            $(this).dialog("close");
                                                            // $('#PersonTableContainer').jtable("reload");
                                                        }
                                                    }
                                                });

                                            }
                                        }]
                                    },

[dmitribodiu]

And also I m selecting rows, then add data to parent table though ''deleteRows", cause I didnt find any another method in jquery. Cause I have deleteAction , delete icons appear in popup table, if its possible to get rid of them... Thank you !

[DiomedesDominguez]

Hi folks, today I had the same issue, I can't see my toolbar. To resolve this, I had to assign the title property and that's it.

        $("#tbClientes").jtable({
            title: " ",
            defaultSorting: "Nombres ASC",
            selecting: true,
            selectOnRowClick: true,
            selectingCheckboxes: true,
            actions: {
                listAction: GetjTableActions("/Clientes/").listAction
            },
            toolbar: {
                items: [
                    {
                        icon: GetjTableImage("refresh.png"),
                        text: "Refrescar",
                        click: function () {
                            $("#tbClientes").jtable("reload");
                        }
                    }
                ]
            },
            fields: {
                Id: {
                    title: "Id",
                    key: true,
                    list: true,
                    width: "5%"
                },
                Nombres: {
                    title: "Nombres",
                    width: "25%"
                },
                Direccion: {
                    sorting: false,
                    title: "Dirección"
                }
            }
        });

Look that I use " " (with a space in the middle) instead of "" (without the space)

[dgraghava]

please share the sample code we are unable to do it

[dgraghava]

please share a sample code

[DiomedesDominguez]

Sorry for my delay, I resolved the problem of the toolbar just by setting title: " ".

        $("#tbClientes").jtable({
            title: " ",
            selecting: true,
            selectOnRowClick: true,
            selectingCheckboxes: true,
            columnResizable: false,
            columnSelectable: false,
            defaultSorting: "Nombres ASC",
            actions: {
                listAction: GetjTableActions("/Clientes/").listAction
            },
            toolbar: {
                items: [
                    {
                        icon: GetjTableImage("refresh.png"),
                        text: "Refrescar",
                        click: function () {
                            $("#tbClientes").jtable("reload");
                        }
                    }
                ]
            },
            fields: {
                Id: {
                    title: "Id",
                    key: true,
                    list: true,
                    width: "5%"
                },
                Nombres: {
                    title: "Nombres",
                    width: "15%"
                },
                DireccionNombre: {
                    sorting: false,
                    title: "Dirección",
                    width: "80%"
                }
            }
        });

This is my jTable file, I make some modifications to let create the forms using bootstrap instead of jquery-ui.