ASP.Net Kendo UI Grid Calculated column

4 posts, 1 answers
  1. Armulator
    Armulator avatar
    3 posts
    Member since:
    Sep 2013

    Posted 26 Sep 2013 Link to this post

    I need to create a calculated column in Kendo Grid within ASP.Net. Something like this: http://jsbin.com/ojomul/89/edit where Full name is a calculated column. I tried doing this using using kendo server controls but unable to make it work. Here is my code:What I need is have the Total column calculated by the javascript function and update the UI automatically. Thanks

    @(Html.Kendo().Grid(Model)   
      .Name("Grid")
      .Columns(columns =>
      {
          columns.Bound(p => p.ProductId).Groupable(false);
          columns.Bound(p => p.ProductName);
          columns.Bound(p => p.UnitPrice);
          columns.Bound(p => p.Quantity);
          columns.Bound(p => p.Tax);
          columns.Bound(p => p.Total).ClientTemplate("#= calculate() #");
     
      })
      .Groupable()
      .Pageable()
      .Sortable()
      .Scrollable()
      .Filterable()
      .Editable(e=>e.Mode(GridEditMode.InCell))
     
      .DataSource(dataSource => dataSource
          .Ajax()
          .Read(read => read.Action("Products_Read", "Product"))
          .PageSize(20)
          .Model(model =>
          {
              model.Id(p => p.ProductId);
              model.Field(p => p.ProductName);
              model.Field(p => p.UnitPrice);
              model.Field(p => p.Quantity);
              model.Field(p => p.Tax);
     
     
          })
     
     
      ))
     
    <script type="text/javascript">
     
    function calculate(e) {
     
        var result = p.UnitPrice * p.Quantity * p.Tax;
        return result;
    }
    </script>
  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 30 Sep 2013 Link to this post

    Hi Armulator,

     
    You can define Template column and set it's ClientTemplate to call function which returns the full name - please check the example below: 

    .Columns(columns =>
    {
        columns.Template(c => { }).ClientTemplate("#=calculateField(data)#");

    //Passed data contains current row model
    function calculateField(data) {
      return data.first + " " + data.last;
    }
    Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Ernest
    Ernest avatar
    1 posts
    Member since:
    Nov 2014

    Posted 05 Oct 2015 in reply to Vladimir Iliev Link to this post

    Hi Vladimir,

    Thanks for the help but I wanna know how to do it in the child grid.

    I have a parent and child grid and want to do it in the child grid for every row.

    Can you please give me a hint for it?
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 07 Oct 2015 Link to this post

    Hi Ernest,

    The same approach can be used for the child Grid as well - you should just escape the template syntax with double backslash (as mentioned in point 11 in this help article) as demonstrated below:

    .Columns(columns =>
    {
        columns.Template(c => { }).ClientTemplate("\\#=calculateField(data)\\#");

    Regards,
    Vladimir Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready