Tuesday, May 12, 2015

Using a Kendo Window like a javascript prompt to get input

Create the following div:



 <div id="inputWindow">  
   <label for="userinput">Save Search as Name:</label>  
   <input type="text" name="userinput" id="userinput" title="Search Name" />  
 </div>  

Call showSaveAsDialog()

If the user does not enter a value in the textbox, the function exits.  If they do and close the popup window, the function continues, writing data to the controller via ajax:


 var saveName = '';  
   var handleUserInput = function () {  
     var userinput = ($("#userinput").val());  
     if (userinput.length == 0) {  
       alert('A name for the saved filter is required.');  
       return;  
     }  
     else {  
       saveName = userinput;  
       //  
       var list = [];//The final output list  
       $('.formFieldWrapper').each(function () {  
         //get the id of the parent DIV containter:  
         var parentid = this.id;  
         var index = parentid.lastIndexOf("_");  
         //Get the ID for the parent as stored in db table TableList  
         var FilterTableID = parentid.substr(index + 1);  
         //Foreach checkbox checked in this parent:  
         $('#' + parentid + ' input:checked').each(function () {  
           //Populate Object Literal with the uid of the selected table ( into FilterTableID),  
           list.push({ id: this.id.replace('ck', ''), FilterTableID: FilterTableID });  
         });  
       });  
       var userid = "@User.Identity.GetUserId()";  
     var url = "@Url.Action("SaveFilter", "SaveFilter", new { id = -1 , SavedName = -2, jsonData = -3 })";  
       //Replace -1 with the id of the selected item, input parameter of the controller action method:  
       url = url.replace("-1", userid);  
       url = url.replace("-2", saveName);  
       url = url.replace("-3", $.toJSON(list));  
       $.ajax({  
         cache: false,  
         type: "POST",  
         dataType: "html",  
         contentType: "application/json; carset=utf-8",  
         url: url,  
         success: function (data) {  
           alert('saved');  
         },  
         error: function (xhr, ajaxOptions, thrownError) {  
           customMsg(' Save Search', 'Oh Oh, An error occurred while attempting to save your search. The Administrator has been notified.' + thrownError);  
         }  
       });  
     }  
   }  
   function showSaveAsDialog() {  
     var win = $("#inputWindow")  
   .kendoWindow({  
     actions: ["Maximize", "Close"],  
     animation: {  
       open: {  
         effects: "slideIn:down fadeIn",  
         duration: 500  
       },  
       close: {  
         effects: "slide:up fadeOut",  
         duration: 500  
       }  
     },  
     minWidth: 300,  
     modal: true,  
     resizable: true,  
     title: "Name to save the Filter As",  
     visible: false,  
     close: handleUserInput  
   })  
   .data("kendoWindow")  
   .center();  
     var wrapper = win.wrapper;  
     wrapper.css({ top: 25 });  
     win.open();  
   }  

No comments:

Post a Comment