Thursday, May 30, 2013

Kendo UI MVC: Display Detail/Child records for each Grid row using Detail Templates

 

Kendo has good feature to display the detail of any row or relevant child records using detail template. The example already exists in Kendo UI demo site.

example http://demos.kendoui.com/web/grid/detailtemplate.html

There have three different ways to display detail template for grid rows.

1. Server detail template:

If you make server binding in main grid using MVC wrapper then Server Detail Template  is very good option to display child records or detail element for each grid row. Here it is very similar to adding a child control inside a grid using DetailTemplate(…) action. It also gives expression to write as razor MVC syntax.

Example :

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/server-detail-template

2. Client Detail Template :

Some cases you need to display grid records on ajax call.  Example of Datasource ajax call is:

   1: .DataSource(dataSource => dataSource
   2:           .Ajax()
   3:           .Read(read => read.Action("Products_Read", "Home"))
   4:        )

In this case Server Detail Template will not work. Because main grid records are loaded by ajax call dynamically. To display detail template for ajax read call you need to use Client Detail Template . 


Example: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/client-detail-template


The problem is that you need to know some kendo client template syntax. Here has example to write client template scripts ( if-else condition, for loop ) using kendo expression http://docs.kendoui.com/getting-started/framework/templates/overview


But You can still write MVC wrapper widget and at the end you have to call ToClientTemplate to use it inside client template.


 


3. Hybrid Solution:


It is a mix solution of client detail template and using server call to render HTML . So I called this hybrid solution. Inside client script you can also make Javascript ajax call.



   1: <script id="client-template" type="text/x-kendo-template">
   2: <div id="placeholder">
   3: <script>
   4: $.get("url",function(data){
   5:  // do somethings
   6: $(document.getElementById("placeholder)).html(data);
   7: });
   8: </script>
   9: </script>

 


In this example I am making an simple Javascript ajax call to get data from server side ( calling MVC controller action). In server side through Partial View I am getting the html which is rendered in server side. Using this way you are getting full freedom to write code in MVC razor syntax and Kendo MVC wrapper though you are using client template. After getting html from server side the placeholder div is populated with the resultant HTML.


Note: Jquery element select option “$(‘#placeholder’) does not work as # is used also for Kendo syntax. so that I used  document.getElementById.

18 comments:

  1. For those that are interested, you can still use the jquery selector for this.

    Instead of using: $(document.getElementById("placeholder")).html(data);

    Use: $("\\#placeholder").html(data);

    Using "\\" escapes the hash key character in the kendo controls. Other than that, thanks for this. I was trying to using @Html.RenderPartial() and it was constantly giving me errors, but this works just as well.

    ReplyDelete
  2. Hi Syed,
    I liked the approach.. can u paste a full working code here or any other site like jsfiddle.net.
    I need to know how to figure out the Id of the parent row.
    Thanks in advance

    ReplyDelete
  3. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.
    I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    Java training in Chennai
    Java training in Bangalore
    Java online training
    Java training in Pune


    ReplyDelete
  4. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.
    I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    Java training in Chennai
    Java training in Bangalore
    Java online training
    Java training in Pune






    ReplyDelete
  5. Thank you for taking the time and sharing this information with us. It was indeed very helpful and insightful while being straight forward and to the point.
    python Online training in chennai
    python training institute in marathahalli
    python training institute in btm
    Python training course in Chennai

    ReplyDelete
  6. Hmm, it seems like your site ate my first comment (it was extremely long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog. I as well as an aspiring blog writer, but I’m still new to the whole thing. Do you have any recommendations for newbie blog writers? I’d appreciate it.
    AWS Course Interview Questions and Answers for Freshers | AWS Interviews Questions and Answers for Devops
    AWS Interview questions and answers for Sysops |AWS Interview Question and Answers BlogSpot

    ReplyDelete
  7. The knowledge of technology you have been sharing thorough this post is very much helpful to develop new idea. here by i also want to share this.
    AWS Training in Bangalore

    ReplyDelete
  8. Enjoyed every bit of your blog. Really looking forward to read more. Awesome.
    DevOps Training in Hyderabad
    DevOps Course in Hyderabad

    ReplyDelete
  9. Wow, that was informative. Thank you for sharing this. We are a Master MSP (simply put, IT Service and Support Providers) based in India and we have partnered with and served 75+ MSPs globally in the past 6 years. You can know more about us by visiting our
    infrassist
    outlook rules not working
    80090016
    powershell script
    script hub
    join Microsoft Teams Meeting

    ReplyDelete