Full Sample

This is a very common sample in most of the web applications.

                        

                            

                                

                                    

                                        Search
                                        
                                    

                                    

                                         
                                        
                                    
                                    


                                    
                                    

                                         
                                        
                                    
                                
                            

                            

                        


                        
                        

                            

                                

                                    

                                        

                                            ID
                                            
                                        

                                        

                                            Name
                                            
                                        
                                    
                                    

                                        

                                            E-mail
                                            
                                        
                                        

                                            Birthday
                                            
                                        
                                    
                                    

                                        

                                            Phone Number
                                            

                                                
                                                
                                            
                                        
                                        

                                            Gender
                                            
                                                Male
                                                Female
                                            
                                        
                                        

                                            Status
                                            
                                            Active
                                        
                                    
                                
                            
                        
                    

                        $(document).ready(function () {
                            //-- initialize default ninjaCore settings
                            _ncore.initialize();

                            var columnsModel = new Array();
                            columnsModel.push({ header: "", width: 70, buttons: ["edit", "delete"] });
                            columnsModel.push({ header: "ID", property: "ID", width: 50, sort: true });
                            columnsModel.push({ header: "Name", property: "Name", width: 200, sort: true });
                            columnsModel.push({ header: "Birthday", property: "Birthday", width: 100, sort: true, align: "center", isDate:true });
                            columnsModel.push({ header: "E-mail", property: "Email", width: 250, sort: true });
                            columnsModel.push({header: "Phone", property: "Phone", width: 110, sort: true, format: "phone"});
                            columnsModel.push({
                                header: "Gender", property: "Gender", width: 80, sort: true, format: function (p, obj) {
                                    switch (p) {
                                        case 1: return 'Male';
                                        case 2: return 'Female';
                                    }
                                }
                            });
                            columnsModel.push({
                                header: "Active", property: "Active", width: 100, sort: true, format: function (p, bj) {
                                    if (p) 
                                        return 'Active';
                                    return 'Inactive';
                                }
                            });

                            grid = $("#customerGrid").ninjaGrid({
                                url: '/Sample/getCustomers',
                                type: 'GET',
                                autoLoad:true,
                                columns: columnsModel,
                                pageSize: 5,
                                sortColumn: 'ID',
                                sortOrder: 'desc',
                                minHeight: 150,
                                maxHeight: 400,
                                onRowDoubleClick: function (tr,obj) {
                                    AddCustomer(obj);
                                },
                                events: {
                                    'edit': AddCustomer,
                                    'delete': DeleteCustomer
                                }
                            });
                        });

                        function SearchCustomers() {
                            var model = $("#frmSample").readForm();
                            $("#customerGrid").ninjaGridUpdate(true, model);
                        }

                        function AddCustomer(obj) {
                            $("#formCustomer").clearForm();

                            if (obj) {
                                $("#formCustomer").writeForm(obj);
                            }

                            ninjaModal({
                                title: 'Customer',
                                element: '#modalCustomer',
                                width: 600,
                                onLoad: function () {
                                    $("#txtName").focus();
                                },
                                buttons: [
                                    {
                                        text: 'Cancel',
                                        callback: null
                                    },
                                    {
                                        text: 'Save',
                                        callback: function (modal) {
                                            //-- validating
                                            if ($("#formCustomer").valid()) {
                                                var model = $("#formCustomer").readForm();
                                                var result = callAjaxPost('/Sample/saveCustomer', model);

                                                if (result) {
                                                    modal.close();
                                                    SearchCustomers();

                                                    //-- show success message
                                                    showBubble('Success!', 'Customer has been successfully saved.', 'success', 'top-right', 4);
                                                }
                                                else {
                                                    //-- show error message
                                                    showBubble('Oops!', 'An error occurred while saving the customer.', 'error', 'top-right', 4);
                                                }
                                            }
                                            else {
                                                //-- show error message
                                                showBubble('Atention!', 'There are some fields with an invalid value.', 'alert', 'top-right', 4);
                                            }
                                        }
                                    }
                                ]
                            });
                        }

                        function DeleteCustomer(obj) {
                            ninjaModal({
                                title: 'Confirmation!',
                                html: 'Do you really want to Delete this record?',
                                buttons: [
                                    {
                                        text: 'No',
                                        callback: null
                                    },
                                {
                                    text: 'Yes',
                                    callback: function (modal) {
                                        var param = {ID : obj.ID};
                                        var result = callAjaxPost('/Sample/deleteCustomer', param);

                                        if (result) {
                                            modal.close();
                                            SearchCustomers();

                                            //-- show success message
                                            showBubble('Success!', 'Customer has been successfully deleted!', 'success', 'top-right', 4);
                                        }
                                        else {
                                            //-- show error message
                                            showBubble('Oops!', 'An error occurred while deleting the customer.', 'error', 'top-right', 4);
                                        }
                                    }
                                }]
                            });
                        }