title: Why do I get periodic Uncaught TypeError: Cannot read property 'value' of undefined when setting the value of multiple dropdownlists?
body: <p>I posted a question the other day about this type of error and have been looking for solutions and causes for this error and am not finding a suitable solution or cause for the issue I am running into, one of the causes and solutions I came across is this one</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot set property ‘foo’ of null, Uncaught TypeError: Cannot set property ‘foo’ of undefined
    Related errors: TypeError: someVal is undefined, Unable to set property ‘foo’ of undefined or null reference</p>
    
    <p>Attempting to write null or undefined as if it was an object. For example:</p>
    
    <p>var someVal = null;
    someVal.foo = 1;
    How to fix this error: This too is usually caused by typos. Check the variable names near the line the error points to.</p>
  </blockquote>
  
  <p>I have been over my html and variables that I have and I have no typos.</p>
  
  <p>I then added a try catch in my function that populates my dropdownlists and here it is</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'value' of undefined
        at MaterialUpdateData (eval at  (<a href="http://localhost:23289/Scripts/jquery-1.10.2.min.js:21:4994" rel="nofollow">http://localhost:23289/Scripts/jquery-1.10.2.min.js:21:4994</a>), :254:45)
        at Object.success (eval at  (<a href="http://localhost:23289/Scripts/jquery-1.10.2.min.js:21:4994" rel="nofollow">http://localhost:23289/Scripts/jquery-1.10.2.min.js:21:4994</a>), :290:13)
        at c (<a href="http://localhost:23289/Scripts/jquery-1.10.2.min.js:21:26036" rel="nofollow">http://localhost:23289/Scripts/jquery-1.10.2.min.js:21:26036</a>)
        at Object.fireWith [as resolveWith] (<a href="http://localhost:23289/Scripts/jquery-1.10.2.min.js:21:26840" rel="nofollow">http://localhost:23289/Scripts/jquery-1.10.2.min.js:21:26840</a>)
        at k (<a href="http://localhost:23289/Scripts/jquery-1.10.2.min.js:23:14258" rel="nofollow">http://localhost:23289/Scripts/jquery-1.10.2.min.js:23:14258</a>)
        at XMLHttpRequest.r (<a href="http://localhost:23289/Scripts/jquery-1.10.2.min.js:23:18646" rel="nofollow">http://localhost:23289/Scripts/jquery-1.10.2.min.js:23:18646</a>)</p>
  </blockquote>
  
  <p>Here is the function for at MaterialUpdateData (eval at  (<a href="http://localhost:23289/Scripts/jquery-1.10.2.min.js:21:4994" rel="nofollow">http://localhost:23289/Scripts/jquery-1.10.2.min.js:21:4994</a>), :254:45)</p>
  
  <pre><code>    $("#Type").data('kendoDropDownList').value(parseInt(Material[0].MaterialTypeID));
  </code></pre>
  
  <p>Here is the function for Object.success (eval at  (<a href="http://localhost:23289/Scripts/jquery-1.10.2.min.js:21:4994" rel="nofollow">http://localhost:23289/Scripts/jquery-1.10.2.min.js:21:4994</a>), :290:13)</p>
  
  <pre><code>function GetMaterialDataByID(id) {
      $.ajax({
          type: "GET",
          url: URLParam.GetMaterialForUpdate + "?id=" + id,
          contentType: "application/json; charset=utf-8",
          success: function (data, textStatus, jqXHR) {
              MaterialUpdateData(data);
          }
      })
  }
  </code></pre>
  
  <p>Now the odd thing is that the error never happens at the exact same place, sometimes it points to this</p>
  
  <pre><code>$("#Category").data('kendoDropDownList').value(parseInt(Material[0].MaterialCategoryID));
  </code></pre>
  
  <p>or this</p>
  
  <pre><code>$("#ddBuyUOM").data('kendoDropDownList').value(parseInt(Material[0].PurchaseUOMID));
  </code></pre>
  
  <p>or this</p>
  
  <pre><code>$("#ddSellUOM").data('kendoDropDownList').value(Material[0].SellUOMID);
  </code></pre>
  
  <p>I have no idea what is happening with this and I been looking for solutions  and or causes since yesterday and since this morning but am not getting any closer to a fixing my issue.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>So upon further investigation, I have noticed that my returned data sometimes is an array or sometimes its an object and have added my controls to a var and a typeof to each of my control vars and sometimes they come back as undefined.</p>
  
  <p>To me this isn't making sense to me, sometimes I have to reselect the record multiple times before everything works right. Its safe to say my code is broken.</p>
  
  <p><strong>MaterialJS file</strong>
  This is the file that is pertaining to all my issues, my apologies if its a little messy</p>
  
  <pre><code>$(document).ready(function () {
      // Validation
      MaterialValidation();
  
      // Loading of dropdownlists
      LoadCategoryDropdownlist();
      LoadTypeDropdownlist();
      //LoadSubTypeDropdownlist(1);
      LoadActiveVendorDropdownlist();
  
      GlobalScript.GetAllUOM("BuyUOM");
      GlobalScript.GetAllUOM("SellUOM");
  
      if (HomeStorage.Keys.AddOrEdit == "Add") {
          console.log("Add");
      }
      else {
          GetMaterialDataByID(HomeStorage.Keys.CurrentID);
      }
  });
  
  
  function NewMaterialForVendor() {
  
  }
  
  // #region DropdownLists
  
  // Category
  function LoadCategoryDropdownlist() {
      $.ajax({
          type: "GET",
          url: URLParam.GetMaterialCategory,
          contentType: "application/json; charset=utf-8",
          success: function (data, textStatus, jqXHR) {
              ShowCategoryDropdownlist(data);
          }
      });
  
  }
  function ShowCategoryDropdownlist(catData) {
      $("#Category").kendoDropDownList({
          dataTextField: "MaterialCategory1",
          dataValueField: "MaterialCategoryID",
          dataSource: catData,
          index: 0,
          optionLabel: "Select Category"
      });
  }
  
  // Type
  function LoadTypeDropdownlist() {
      $.ajax({
          type: "GET",
          url: URLParam.GetMaterialType,
          contentType: "application/json; charset=utf-8",
          success: function (data, textStatus, jqXHR) {
              ShowTypeDropdownlist(data);
          }
      });
  }
  function ShowTypeDropdownlist(typeData) {
      $("#Type").kendoDropDownList({
          dataTextField: "MaterialType1",
          dataValueField: "MaterialTypeID",
          dataSource: typeData,
          index: 0,
          optionLabel: "Select Type",
          change: function (e) {
              //var dd = $("#SubType").data("kendoDropDownList");
              //dd.enable(true);
              //console.log(this.value());
              LoadSubTypeDropdownlist(this.value());
          }
      });
  }
  
  // SubType
  function LoadSubTypeDropdownlist(id) {
      $.ajax({
          type: "GET",
          url: URLParam.GetMaterialSubType + "?id=" + id,
          contentType: "application/json; charset=utf-8",
          success: function (data, textStatus, jqXHR) {
              ShowSubTypeDropdownlist(data);
          }
      });
      //ShowSubTypeDropdownlist(data);
  }
  function ShowSubTypeDropdownlist(subData) {
      $("#SubType").kendoDropDownList({
          dataTextField: "MaterialSubType1",
          dataValueField: "MaterialSubTypeID",
          dataSource: subData,
          index: 0,
          optionLabel: "Select SubType",
          change: function (e) {
              //console.log(this.value());
          }
      });
  }
  
  // Active Vendors
  function LoadActiveVendorDropdownlist() {
      $.ajax({
          type: "GET",
          url: URLParam.GetActiveVendors,
          contentType: "application/json; charset=utf-8",
          success: function (data, textStatus, jqXHR) {
              ShowActiveVendorDropdownlist(data);
          }
      });
  }
  function ShowActiveVendorDropdownlist(typeData) {
      $("#DefaultVendor").kendoDropDownList({
          dataTextField: "VendorName",
          dataValueField: "VendorID",
          dataSource: typeData,
          index: 0,
          optionLabel: "Select Vendor"
      });
  }
  
  
  // #endregion
  
  // #region New Material Data
  
  function NewMaterialToSubmit() {
      var mv = {
          MaterialCategoryID: $("#Category").val(),
          MaterialTypeID: $("#Type").val(),
          MaterialSubTypeID: $("#SubType").val(),
          DLength: $("#txtLength").val(),
          DWidth: $("#txtWidth").val(),
          DHeight: $("#txtSize").val(),
          PurchaseUOMID: $("#ddBuyUOM").val(),
          SellUOMID: $("#ddSellUOM").val(),
          VendorID: $("#DefaultVendor").val(),
          MaterialDetail: null,
          Description: $("#txtDescription").val(),
          PurchaseItemQuantity: $("#txtPurchaseQuantity").val(),
          SellItemQuantity: $("#txtSellQuantity").val(),
          NewPrice: null,
          RemodelPrice: $("#txtRemodel").val(),
          ServicePrice: $("#txtRemodel2").val()
      };
      console.log(mv);
      return mv;
  }
  
  // #endregion
  
  // #region Save Material
  
  function SubmitNewMaterial() {
      var newMaterial = NewMaterialToSubmit();
      $.ajax({
          type: "POST",
          url: URLParam.AddNewMaterial,
          dataType: "json",
          contentType: "application/json; charset=utf-8",
          data: JSON.stringify(newMaterial),
          success: function (data, textStatus, jqXHR) { },
          complete: function (e) {
              ClearMaterialFields();
              GetMaterialGridData();
              //CloseTheWindow();
          }
      })
  }
  
  // #endregion
  
  // #region Update Material By ID
  
  function UpdateMaterial(id) {
      var updatedMaterial = NewMaterialToSubmit();
      $.ajax({
          type: "POST",
          url: URLParam.UpdateMaterial + "?id=" + id,
          dataType: "json",
          contentType: "application/json; charset=utf-8",
          data: JSON.stringify(updatedMaterial),
          success: function (data, textStatus, jqXHR) { },
          complete: function (e) {
              ClearMaterialFields();
              GetMaterialGridData();
              //CloseTheWindow();
          }
      })
  }
  
  // #endregion
  
  // #region Get Material UpdateData
  
  function MaterialUpdateData(Material) {
  
      try{
          //var categoryDropdown = $("#Category").data('kendoDropDownList');
          //console.log(typeof (categoryDropdown));
          //console.log(categoryDropdown);
          $("#Category").data('kendoDropDownList').value(parseInt(Material[0].MaterialCategoryID));
  
          $("#Type").data('kendoDropDownList').value(parseInt(Material[0].MaterialTypeID));
  
          $("#ddBuyUOM").data('kendoDropDownList').value(parseInt(Material[0].PurchaseUOMID));
          bu.text(Material[0].UnitOfMeasure);
  
          $("#ddSellUOM").data('kendoDropDownList').value(Material[0].SellUOMID);
          su.text(Material[0].UnitOfMeasure2);
  
          var dv = $("#DefaultVendor").data('kendoDropDownList');//.value(Material[0].VendorID);
          dv.text(Material[0].VendorName);
  
  
          $("#txtDescription").val(Material[0].Description);
          $("#txtWidth").val(Material[0].DWidth);
          $("#txtLength").val(Material[0].DLength);
          $("#txtSize").val(Material[0].DHeight);
  
          $("#txtRemodel").val(Material[0].RemodelPrice);
          $("#txtRemodel2").val(Material[0].ServicePrice);
  
          $("#txtPurchaseQuantity").val(Material[0].PurchaseItemQuantity);
          $("#txtSellQuantity").val(Material[0].SellItemQuantity);
      }
      catch (e) {
          //alert(e);
          console.log(e);
      }
  
  }
  
  function GetMaterialDataByID(id) {
      $.ajax({
          type: "GET",
          url: URLParam.GetMaterialForUpdate + "?id=" + id,
          contentType: "application/json; charset=utf-8",
          success: function (data, textStatus, jqXHR) {
              MaterialUpdateData(data);
          }
      })
  }
  
  // #endregion 
  
  // #region Clear Material
  
  function ClearMaterialFields() {
      // Dropdowns 
  
      //$("#ddState").val(-1);
  
      // End Dropdowns
  
      $("#txtDescription").val("");
      $("#txtDetail").val("");
      $("#txtWidth").val("");
      $("#txtLength").val("");
      $("#txtSize").val("");
  
      $("#txtPurchaseQuantity").val("");
      $("#txtSellQuantity").val("");
  
  
  }
  
  // #endregion
  
  // #region Validation
  
  function ResetMaterialForm() {
      $("#MaterialData").data("bootstrapValidator").resetForm();
  }
  
  function MaterialValidation() {
      var validator = $("#MaterialData").bootstrapValidator({
          //excluded: ':disabled',
          //container: 'tooltip',
          //feedbackIcons: {
          //    valid: "glyphicon glyphicon-ok",
          //    invalid: "glyphicon glyphicon-remove",
          //    validating: "glyphicon glyphicon-refresh"
          //},
          fields: {
              description: {
                  message: "Description is required",
                  validators: {
                      notEmpty: {
                          message: "Please add Description"
                      }
                  }
              },
              detail: {
                  message: "Detail is required",
                  validators: {
                      notEmpty: {
                          message: "Please add Detail"
                      }
                  }
              },
              width: {
                  message: "Width is required",
                  validators: {
                      notEmpty: {
                          message: "Please add Width"
                      }
                  }
              },
              length: {
                  message: "Length is required",
                  validators: {
                      notEmpty: {
                          message: "Please add Length"
                      }
                  }
              },
              size: {
                  message: "Size is required",
                  validators: {
                      notEmpty: {
                          message: "Please add Size"
                      }
                  }
              },
              new1: {
                  message: "New is required",
                  validators: {
                      notEmpty: {
                          message: "Please add New"
                      }
                  }
              },
              new2: {
                  message: "New is required",
                  validators: {
                      notEmpty: {
                          message: "Please add New"
                      }
                  }
              },
              remodel: {
                  message: "Remodel is required",
                  validators: {
                      notEmpty: {
                          message: "Please add Remodel"
                      }
                  }
              },
              remodel2: {
                  message: "Remodel is required",
                  validators: {
                      notEmpty: {
                          message: "Please add Remodel"
                      }
                  }
              },
              quantity: {
                  message: "Quantity is required",
                  validators: {
                      notEmpty: {
                          message: "Please add Quantity"
                      }
                  }
              },
              quantity2: {
                  message: "Quantity2 is required",
                  validators: {
                      notEmpty: {
                          message: "Please add Quantity2"
                      }
                  }
              },
              uom: {
                  message: "UOM is required",
                  validators: {
                      notEmpty: {
                          message: "Please add UOM"
                      }
                  }
              },
              uom2: {
                  message: "UOM2 is required",
                  validators: {
                      notEmpty: {
                          message: "Please add UOM2"
                      }
                  }
              }
          }
      });
  }
  
  // #endregion
  
  function CloseTheWindow() {
      $("#window").data("kendoWindow").destroy();
      localStorage.clear();
  }
  
  $("#btnCloseMaterialEditor").click(function () {
      ClearMaterialFields();
      CloseTheWindow();
      GetMaterialGridData();
  });
  
  $("#btnSaveMaterial").click(function () {
  
      var validator = $("#MaterialData").data("bootstrapValidator");
      validator.validate();
      if (validator.isValid()) {
  
          if (HomeStorage.Keys.AddOrEdit == "Add") {
              SubmitNewMaterial();
              ResetMaterialForm();
              CloseTheWindow();
          }
          else if (HomeStorage.Keys.AddOrEdit == "Edit") {
              UpdateMaterial(HomeStorage.Keys.CurrentID);
              ResetMaterialForm();
              CloseTheWindow();
          }
      }
  });
  </code></pre>
  
  <p><strong>My GlobalMethods script</strong>
  This is a just in case anyone wanted to see where my populating of the BuyUOM and SellUOM is coming from </p>
  
  <pre><code>// #region Get IDS from Grid
  
  var GlobalScript = {
      GetAllStates: function () {
          var self = this;
          $.ajax({
              type: "GET",
              url: URLParam.GetStatesForDropdown,
              contentType: "application/json; charset=utf-8",
              success: function (data, textStatus, jqXHR) {
                  self.ShowStates(data);
                  // or this way
                  // GlobalScript.ShowStates(data);
              }
          })
  
      },
      ShowStates: function (stateData) {
          $("#acVendorState").kendoDropDownList({
              dataSource: stateData,
              dataTextField: "StateName",
              dataValueField: "StateID",
              animation: false,
              optionLabel: {
                  StateName: "-- Select State --"
              }
          });
      },
  
      GetAllUOM: function (whichDropdown) {
          var self = this;
          $.ajax({
              type: "GET",
              url: URLParam.GetUOMForDropdown,
              contentType: "application/json; charset=utf-8",
              success: function (data, textStatus, jqXHR) {
                  self.ShowUOM(data, whichDropdown);
                  // or this way
                  // GlobalScript.ShowStates(data);
              }
          });
      },
      ShowUOM: function (uomData, whichDropdown) {
          $("#dd"+whichDropdown).kendoDropDownList({
              dataSource: uomData,
              dataTextField: "UnitOfMeasure1",
              dataValueField: "UnitOfMeasureID",
              animation: false,
              index: 0,
              optionLabel: {
                  UnitOfMeasure1: "Select"
              }
              //change: function (e) {
              //    var value = this.value();
              //    alert(value);
              //}
          });
      },
      GetGridCheckboxIDs: function (gridName, idToGet) {
          var idsToSend = [];
          var grid = $("#" + gridName).data("kendoGrid")
          var ds = grid.dataSource.view();
  
          for (var i = 0; i &lt; ds.length; i++) {
              var row = grid.table.find("tr[data-uid='" + ds[i].uid + "']");
              var checkbox = $(row).find(".checkbox");
              if (checkbox.is(":checked")) {
                  idsToSend.push(ds[i].idToGet);
              }
          }
          HomeStorage.KeysAssignmentIDString = idsToSend;
      }
  }
  </code></pre>
  
  <p><strong>Html</strong>
  here is all my html for this script</p>
  
  <pre><code>@{
      Layout = null;
  }
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;MaterialEditor&lt;/title&gt;
      &lt;style&gt;
          .max-size {
              max-width: 100%;
          }
  
          .nav-tabs &gt; li.active &gt; a,
          .nav-tabs &gt; li.active &gt; a:hover,
          .nav-tabs &gt; li.active &gt; a:focus {
              color: white;
              background-color: #347AB6;
          }
  
          .panel-heading {
              border-top-left-radius: 0px;
              border-top-right-radius: 0px;
          }
  
          .panel {
              border-radius: 0px;
          }
  
          .k-window div.k-window-content {
              overflow: hidden;
          }
      &lt;/style&gt;
      &lt;script src="~/Scripts/Customjs/GlobalMethods/GlobalMethodsJS.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="form-horizontal"&gt;
          &lt;ul class="nav nav-tabs"&gt;
              &lt;li class="active"&gt;&lt;a href="#MaterialData" data-toggle="tab"&gt;Material Data&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#MaterialColorAssignment" data-toggle="tab"&gt;Material Color Assignment&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;div class="tab-content"&gt;
  
              &lt;div class="tab-pane active" id="MaterialData"&gt;
                  &lt;div class="panel panel-primary"&gt;
                      &lt;div class="panel panel-heading"&gt;&lt;strong&gt;Add/Edit Material&lt;/strong&gt;&lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;div class="col-md-12"&gt;
                              &lt;fieldset class="Myfieldset"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;div class="col-md-4"&gt;
                                          @*&lt;select class="form-control max-size" name="categories" id="Category"&gt;&lt;/select&gt;*@
                                          &lt;input id="Category" class="form-control max-size" /&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-md-4"&gt;
                                          @*&lt;select class="form-control" name="type" id="Type"&gt;&lt;/select&gt;*@
                                          &lt;input id="Type" class="form-control max-size" /&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-md-4" id="myDropdown"&gt;
                                          &lt;select class="form-control" name="subtype" id="SubType"&gt;&lt;/select&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="txtDescription" class="control-label col-md-2" id="lblDetail"&gt;&lt;b&gt;Description&lt;/b&gt;&lt;/label&gt;
                                      &lt;div class="col-md-9"&gt;
                                          &lt;input id="txtDescription" type="text" class="form-control max-size" name="description" /&gt;
                                      &lt;/div&gt;
                                      @*&lt;label for="txtDetail" class="control-label col-md-1" id="lblDetail"&gt;&lt;b&gt;Detail&lt;/b&gt;&lt;/label&gt;
                                      &lt;div class="col-md-3"&gt;
                                          &lt;input id="txtDetail" type="text" class="form-control" name="detail" /&gt;
                                      &lt;/div&gt;*@
                                  &lt;/div&gt;
                              &lt;/fieldset&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="panel panel-heading"&gt;&lt;strong&gt;Material Information&lt;/strong&gt;&lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="txtWidth" class="control-label col-md-1 col-md-offset-1" id="lblWidth"&gt;&lt;b&gt;Width&lt;/b&gt;&lt;/label&gt;
                              &lt;div class="col-md-2"&gt;
                                  &lt;input id="txtWidth" type="text" class="form-control" name="width" /&gt;
                              &lt;/div&gt;
  
                              &lt;label for="txtLength" class="control-label col-md-1" id="lblLength"&gt;&lt;b&gt;Length&lt;/b&gt;&lt;/label&gt;
                              &lt;div class="col-md-2"&gt;
                                  &lt;input id="txtLength" type="text" class="form-control" name="length" /&gt;
                              &lt;/div&gt;
  
                              &lt;label for="txtSize" class="control-label col-md-1" id="lblSize"&gt;&lt;b&gt;Size&lt;/b&gt;&lt;/label&gt;
                              &lt;div class="col-md-2"&gt;
                                  &lt;input id="txtSize" type="text" class="form-control" name="size" /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;br /&gt;
                      &lt;fieldset class="Myfieldset"&gt;
  
                          &lt;div class="panel panel-primary col-md-6"&gt;
                              &lt;div class="panel-heading"&gt;Pricing and Labor Cost&lt;/div&gt;
                              &lt;div class="panel-body"&gt;
                                  &lt;div class="row"&gt;
                                      &lt;label for="txtDescription" class="control-label col-md-offset-5" id="lblDetail"&gt;&lt;b&gt;Sell&amp;nbsp;Price&lt;/b&gt;&lt;/label&gt;
                                      &lt;label for="txtDescription" class="control-label col-md-offset-2" id="lblDetail"&gt;&lt;b&gt;Labor&amp;nbsp;Cost&lt;/b&gt;&lt;/label&gt;
                                  &lt;/div&gt;&lt;!-- end row --&gt;
  
                                  @*&lt;div class="row"&gt;
                                      &lt;label for="txtNew" class="control-label col-md-2" id="lblNew"&gt;New&lt;/label&gt;
                                      &lt;div class="col-md-4 col-md-offset-2"&gt;
                                          &lt;input id="txtNew" type="text" class="form-control" name="new1" /&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class="col-md-4"&gt;
                                          &lt;input id="txtNew2" type="text" class="form-control" name="new2" /&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;*@ &lt;!-- end row --&gt;
  
                                  &lt;br /&gt;
  
                                  &lt;div class="row"&gt;
                                      &lt;label for="txtRemodel" class="control-label col-md-2" id="lblRemodel"&gt;Remodel&lt;/label&gt;
                                      &lt;div class="col-md-4 col-md-offset-2"&gt;
                                          &lt;input id="txtRemodel" type="text" class="form-control" name="remodel" /&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class="col-md-4"&gt;
                                          &lt;input id="txtRemodel2" type="text" class="form-control" name="remodel2" /&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt; &lt;!-- end row --&gt;
                                  &lt;div class="row"&gt;
                                      &lt;br /&gt;
                                      &lt;br /&gt;
                                  &lt;/div&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
  
                          &lt;div class="panel panel-primary col-md-6"&gt;
                              &lt;div class="panel-heading"&gt;Purchasing and Sales&lt;/div&gt;
                              &lt;div class="panel-body"&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="row"&gt;
                                          &lt;label for="txtDescription" class="control-label col-md-offset-5" id="lblDetail"&gt;&lt;b&gt;Purchase&lt;/b&gt;&lt;/label&gt;
                                          &lt;label for="txtDescription" class="control-label col-md-offset-2" id="lblDetail"&gt;&lt;b&gt;Sell&lt;/b&gt;&lt;/label&gt;
                                      &lt;/div&gt;&lt;!-- end row --&gt;
  
                                      &lt;div class="row"&gt;
                                          &lt;label for="txtQuantity" class="control-label col-md-2" id="lblQuantity"&gt;Quantity&lt;/label&gt;
                                          &lt;div class="col-md-4 col-md-offset-2"&gt;
                                              &lt;input id="txtPurchaseQuantity" type="text" class="form-control" name="purchasequantity" /&gt;
                                          &lt;/div&gt;
  
                                          &lt;div class="col-md-4"&gt;
                                              &lt;input id="txtSellQuantity" type="text" class="form-control" name="sellquantity" /&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt; &lt;!-- end row --&gt;
  
                                      &lt;br /&gt;
  
                                      &lt;div class="row"&gt;
                                          &lt;label for="txtUOM" class="control-label col-md-2" id="lblUOM"&gt;U.O.M&lt;/label&gt;
                                          &lt;div class="col-md-1 col-md-offset-2"&gt;
                                              &lt;select class="form-control" name="buyuom" id="ddBuyUOM" style="width:100px;"&gt;&lt;/select&gt;
                                          &lt;/div&gt;
  
                                          &lt;div class="col-md-1 col-md-offset-3"&gt;
                                              &lt;select class="form-control" name="selluom" id="ddSellUOM" style="width:100px;"&gt;&lt;/select&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt; &lt;!-- end row --&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="form-group"&gt;
                              &lt;label for="ddDefaultVendor" class="control-label col-md-2" id="lblDefaultVendor"&gt;Default Vendor&lt;/label&gt;
                              &lt;div class="col-md-9"&gt;
                                  &lt;select class="form-control" name="defaultvendor" id="DefaultVendor"&gt;&lt;/select&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/fieldset&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!--End Material Data--&gt;
              &lt;div class="tab-pane" id="MaterialColorAssignment"&gt;
                  &lt;div class="panel panel-primary"&gt;
                      &lt;div class="panel panel-heading"&gt;&lt;strong&gt;Add/Edit Material Color Assignment&lt;/strong&gt;&lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;div id="MaterialColorAssignmentGrid"&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!--End Material Assignment--&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group col-md-12"&gt;
              &lt;button id="btnCloseMaterialEditor" type="button" class="btn btn-primary pull-right"&gt;Close&lt;/button&gt; &amp;nbsp;
              &lt;button id="btnSaveMaterial" type="button" class="btn btn-primary pull-right"&gt;Save&lt;/button&gt;
              @*&lt;button id="btnTest" type="button" class="btn btn-danger pull-right"&gt;Test&lt;/button&gt;*@
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;script src="~/Scripts/Customjs/Material/MaterialEditorJS.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>