CODEWITHSUNDEEP
kendo-uikendo-grid
Nixoderm
Nixoderm

Reputation: 355

Kendo UI Grid passed data to another form

I had this demo that relate with my situation, how to bind an additional data in dataSource into my popup form. A popup form will appear if outletType = rest. Appreciate your helps.

DEMO IN DOJO

Upvotes: 0

Views: 116

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

You do not need to set additional data, all dataSource's data will be available to be used in the modal, you don't need to show them in the grid.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script> 
</head>
<body>
<style>
  #additionalVariables #lbl{width: 150px; display: inline-block; padding-bottom: 15px;
</style>
  
<div id="grid"></div>  
  
<div id="additionalVariables" style="display:none">
  <label id="lbl" for="capacity">Capacity</label>: 
  <input type="text" class="k-textbox" name="capacity" id="capacity" data-bind="value: selected.capacity" style="width:120px; text-align:center;"> 
  <br>
  <label id="lbl" for="roomservice">Room Service</label>:
  <input class="k-radio" type="radio" name="roomservice" id="yes2" value="y" checked="checked"/> 
  <label class="k-radio-label" for="yes2" >Yes</label>&nbsp;&nbsp;&nbsp;
  <input class="k-radio" type="radio" name="roomservice" id="no2" value="n" /> 
  <label class="k-radio-label" for="no2" >No</label>
  <br>
  <label id="lbl" for="fastfood">Fast Food</label>:
  <input class="k-radio" type="radio" name="fastfood" id="yes3" value="y" checked="checked"/> 
  <label class="k-radio-label" for="yes3" >Yes</label>&nbsp;&nbsp;&nbsp;
  <input class="k-radio" type="radio" name="fastfood" id="no3" value="n" /> 
  <label class="k-radio-label" for="no3" >No</label>
</div>
  
<script>
$(document).ready(function () {  
  
  var dataSource = [{
		'capacity': '',
		'roomservice': 'y',
		'fastfood': 'y',
		'outletType': 'retail',
		'name': 'Data 1',
    'additionalData': {
      'a': 1
    }
	},
	{
		'capacity': 888,
		'roomservice': 'n',
		'fastfood': 'n',
		'outletType': 'rest',
		'name': 'Data 2',
    'additionalData': {
      'a': 2
    }
	},
	{
		'capacity': '',
		'roomservice': 'y',
		'fastfood': 'y',
		'outletType': 'theme',
		'name': 'Data 3',
    'additionalData': {
      'a': 3
    }
	},
	{
		'capacity': '1232',
		'roomservice': 'y',
		'fastfood': 'y',
		'outletType': 'rest',
		'name': 'Data 4',
    'additionalData': {
      'a': 4
    }
	},
];

  grid = $('#grid').kendoGrid({
    dataSource: dataSource,
    editable: "inline",
    toolbar: [{ name: "create", text: "Add" }],
    columns: [
      { field: "outletType", title: "Outlet Type", width: 150, editor: outletType,
       template: data => data.outletType == "rest" ? "Rest" : (data.outletType == "retail") ? "Retail" : (data.outletType == "spa") ? "Spa" : "Theme" },

      { field: "name", title: "name", width: 75 },

      { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
    ],
    edit: openOutType
  });
});    
  
 
function openOutType(e){
    if(e.model.outletType == 'rest'){
      console.log(e.model.additionalData);
      
      var additionalForm = $("#additionalVariables");
      additionalForm.kendoWindow({
        visible: false, 	
        modal: true, 		
        width: "350px",
        height: "200px",
        iframe: false,
        resizable: false,	
        title: "Addtional Information" 
      });
			additionalForm.data("kendoWindow").center().open(); 
    }
}
  
  
function outletType(container, options) {	
  $('<input class="k-radio" id="radio1" name="outletType" type="radio" value="rest" >').appendTo(container);
  $('<label class="k-radio-label" for="radio1">Rest&nbsp;&nbsp;&nbsp;&nbsp;</label>').appendTo(container); 

  $('<input class="k-radio" id="radio2" name="outletType" type="radio" value="spa" >').appendTo(container);
  $('<label class="k-radio-label" for="radio2">Spa&nbsp;&nbsp;&nbsp;&nbsp;</label>').appendTo(container);

  $('<input class="k-radio" id="radio3" name="outletType" type="radio" value="retail" >').appendTo(container);
  $('<label class="k-radio-label" for="radio3">Retail&nbsp;&nbsp;&nbsp;&nbsp;</label>').appendTo(container);

  $('<input class="k-radio" id="radio4" name="outletType" type="radio" value="theme" >').appendTo(container);
  $('<label class="k-radio-label" for="radio4">Theme</label>').appendTo(container);
  
  
  $('input:radio[name="outletType"]').change(function(){
    if($(this).val() == 'rest'){

      var additionalForm = $("#additionalVariables");
      additionalForm.kendoWindow({
        visible: false, 	
        modal: true, 		
        width: "350px",
        height: "200px",
        iframe: false,
        resizable: false,	
        title: "Addtional Information" 
      });
			additionalForm.data("kendoWindow").center().open(); 
    }
  });

}

   
</script>
</body>
</html>

Updated Dojo

Upvotes: 1

Related Questions