ASP.Net Kendo UI Grid Calculated column

7 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
    2206 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. 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?
  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 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
  5. Erik
    Erik avatar
    15 posts
    Member since:
    Jun 2018

    Posted 14 May 2020 Link to this post

    This does not seem to work anymore.

    Template(c => { }) results in error Cannot convert lambda expression to type 'string' because it is not a delegate type

    How should I define a calculated column?

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 18 May 2020 Link to this post

    Hi, Eric,

    I tested the snippet provided by my colleague with an Ajax() bound MVC grid and it works well.

    However, the error that you are sharing sounds like it could come from the ASP.NET Core Grid which requires a slightly different syntax and features only a string overload:

    So for ASP.NET Core, you can use this:

    columns.Template("#=calculateField(data)#");
    
    function calculateField(data) {
            return data.UnitPrice * data.UnitsInStock;
        }

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  7. Erik
    Erik avatar
    15 posts
    Member since:
    Jun 2018

    Posted 18 May 2020 in reply to Alex Hajigeorgieva Link to this post

    Hi Alex,

    Thx for that.

    You are right, I was trying to get this to work in ASP.NET Core.

    I sometimes get confused between forum posts on the different versions, my bad.

    Erik

Back to Top