[Solved] Angular: Customer Editor for Grid

[Shreesh]

Hello,

I have written a custom edit for a grid. In the controller method, I get the Id of the row of the grid.
Now , I want to initialize the editor (EditProduct.cshtml) having various kendo controls with the row values of the grid.  I can get these values from a method "GetProductForId".
I tried using a datasource (code below in EditProduct.cshtml) but could not achieve as I do not know how to assign these values to various control on EditProduct.cshtml.  I want various controls on the EditProduct.cshtml to be loaded  (when page opens) with values from a controller method like "GetProductForId". This method is given below. I cannot hard code values.

How do I achieve this? Can you share a sample code...


/********************************************************/
EditProduct.cshtml

@{
    ViewBag.Title = "Edit Product";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section HeaderSection {
 

    <link href="../../styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="../../styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />

    <script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="../../Scripts/angular.min.js" type="text/javascript"></script>
    <script src="../../Scripts/kendo.all.min.js" type="text/javascript"></script>
    <script src="../../Scripts/kendo.angular.min.js" type="text/javascript"></script>
   

}


    <div id="example" ng-app="KendoDemos">
    <div class="demo-section k-content" ng-controller="MyCtrl">
 

  <div class="details">
  <h5>Product Name </h5>
  <input kendo-masked-text-box style="width: 300px"  
            k-mask="''"
            k-options="productNameOptions"
            ng-model="initName"/>


   <h5> Price</h5>
   <input kendo-numeric-text-box k-min="0", k-max="99999"
            k-options ="priceOptions"   
            ng-model="initPrice"/>

   <h5> Select</h5>
   <input type ="checkbox"  id="checkbox1" ng-model="initValue"/>

   <h5> Choose Date</h5>
   @*<input kendo-date-picker   k-format="'dd MMMM yyyy'" ng-model="dateString" k-ng-model="dateObject"/>*@
  <pre>
@*dateString: {{ dateString }}
dateObject: {{ dateObject | date:"EEEE, MMMM d, yyyy" }}
typeof dateObject: {{ getType(dateObject) }}
dateObject instanceof Date: {{ isDate(dateObject) }}*@
</pre>
   <input id="datepicker" value style="width: 300px;"/>


    <h5>Categories </h5>
    <select id="categories1"
            kendo-drop-down-list style="width: 300px"
            k-options="customOptions"></select>

    <h5>Save Details </h5>
    <kendo-button on-click="onSave()"> Save</kendo-button>      

  </div>

  <style>
    .dropdown-header {
      font-size: 1.2em;
    }

    .dropdown-header > span {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      text-align: left;
      display: inline-block;
      border-style: solid;
      border-width: 0 0 1px 1px;
      padding: .3em .6em;
      width: 79%;
    }

    .dropdown-header > span:first-child {
      width: 82px;
      border-left-width: 0;
    }

    .selected-value {
      float: left;
      width: 20px;
      margin: 0 4px;
    }

    #customers-list .k-item > span{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      display: inline-block;
      border-style: solid;
      border-width: 0 0 1px 1px;
      vertical-align: top;
      min-height: 95px;
      width: 79%;
      padding: .6em 0 0 .6em;
    }

    #customers-list .k-item > span:first-child{
      width: 77px;
      border-left-width: 0;
      padding: .6em 0 0 0;
    }

    #customers-list img {
      -moz-box-shadow: 0 0 2px rgba(0,0,0,.4);
      -webkit-box-shadow: 0 0 2px rgba(0,0,0,.4);
      box-shadow: 0 0 2px rgba(0,0,0,.4);
      width: 70px;
      height: 70px;
    }

    #customers-list h3 {
      font-size: 1.6em;
      margin: 0;
      padding: 0;
    }

    #customers-list p {
      margin: 0;
      padding: 0;
    }
  </style>
</div>
</div>

<script>
    angular.module("KendoDemos", ["kendo.directives"]);
    function MyCtrl($scope) {

        var productName, price, select, date1, categoryId, categoryName;
        var initdate="10/10/2011";

        $scope.categoriesDataSource = {
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    dataType: "json",

                    url: "http://localhost:57795/Products/GetCategoryForDropdownList"
                }
            }
        };

        $scope.customOptions = {
            dataSource: $scope.categoriesDataSource,
            dataTextField: "CategoryName",
            dataValueField: "CategoryId",
            optionLabel: 'Select',
            autoBind: false,
            select: Category_OnSelected
        };

        function Category_OnSelected(e) {


            var dataItem = this.dataItem(e.item.index());
            var Id1 = dataItem.CategoryId;
            categoryId = Id1;
            categoryName = dataItem.CategoryName;



        }


        //Initializations
        //  $scope.initName = "";
        //$scope.initPrice = 0;
        //  $scope.initValue = false;
        //end



        $scope.productNameOptions = {

            //  change: productName_onChange
        };

        function productName_onChange(e) {
            productName = this.value();

        }

        $scope.priceOptions = {
            change: price_onChange
        };
        function price_onChange(e) {

            price = this.value();
            
        }

        //SKK: CheckBox is tricky
        $('#checkbox1').click(function () {
            if ($(this).prop('checked')) {
                select = true;
            }
            else {
                select = false;
            }
            // alert("inside check fn")

        });

        $scope.dateOptions = {

            change: date_onChange
        }

        function date_onChange() {
            //alert("date change");
            date1 = kendo.toString(this.value(), "MM/dd/yyyy");




        }

        function date_onOpen() {
            alert("date open");
            $("#datepicker").val = "10/10/2011";




        }

        $("#datepicker").kendoDatePicker({

            change: date_onChange
           // open: date_onOpen

        });

        $scope.onSave = function () {

            productName = $scope.initName;
            // price = $scope.initPrice;
            //select = select;  //SKK: html checkbox value....

            //date1 = $scope.dateString;
            //date1 = kendo.toString(($scope.dateString), "MM/dd/yyyy");
            //  date1 = kendo.toString(($scope.dateObject), "MM/dd/yyyy");

            // alert(productName);
            //alert(price);
            //alert(select);
            // alert(date1);

            //alert(categoryId);

            //        alert(" 1--Save button");
            var product2 = { ProductName: productName, Price: price, Select: select, Date: date1, CategoryId: categoryId };
            //SKK: CategoryName is not required but to avoid finding from Id in controller method, its done
            //var product1 = kendo.stringify(product2);
            var product1 = JSON.stringify(product2);
            //      alert(" Save button");
            $.ajax(
                {
                    type: 'post',
                    url: 'http://localhost:57795/Products/CreateProductForGrid',
                    dataType: 'json',
                    data: { productDetails: product1 },

                    success: function (result) {
                        alert("Success");
                    }

                }
              )


        }


    }


</script>

          <script>
                $(function () {
                    var productDataSource = new kendo.data.DataSource({
                        // type: "json",
                        serverFiltering: true,
                        serverPaging: true,
                        serverSorting: true,
                        pageSize: 10,
                        transport: {
                            //read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                            read: "http://localhost:57795/Products/GetProductsForGrid_RowMode",
                            //dataType: "json",
                            contentType: "application/json",
                            type: "Get"

                        }

                        


                    });


                    productDataSource.read();

                    var data = productDataSource.data();
                    alert(data);
                    alert(data.length);
</script>
/********************************************************/
Controller Method:

 public ActionResult EditDetails(int Id)
        {
            Product model = null;
           // model = getModel(model, SampleModel.SessionKey);
            //SampleModel oModel = model.List.Single(p => p.SampleId == Id);
            Product oModel = new Product();

            oModel.ContextId = Id;  //Store the Id in model

            //ViewBag.Title = "Edit Sample - " + oModel.SampleName;

            
            
            return View("EditProduct");
        }

 public ActionResult GetProductForId([DataSourceRequest] DataSourceRequest request)
        {

            Product product = new Product(); //getModel(model, SampleModel.SessionKey);
            // model = getModel(model, SampleModel.SessionKey);

            //get Id stored in mode
          //  long Id = model.ContextId;

            DateTime dt = new DateTime(2014, 10, 10);

            List<Product> list = new List<Product>();

            list.Add(new Product(1, "Product1", 100.25M, true, dt, "Godrej", "APAC"));
          
    //Form product object which is to be returned for the Id (from the list)

            return Json(new[] { product }.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

        }


/*********************/

[Vladimir Iliev]

Hi Shreesh,

Creating custom editor templates for the Grid using AngularJS is already discussed in the following forum post:

• Grid: Custom editor template with AngularJS

Regards,
Vladimir Iliev
Telerik