How to represent details in tree grid with tab format

[Vikash Kumar]

Hi,

I want to display tree grid which contain tab details like the attachament.   Means when user click on any tree grid item then he will get expanded result in tab format like this which you can see in attached documents.

If we can do it then please help me.It's urgent

Thanks

Attachment: maint_archiv_8f2efe5b.rar

[Farveen Sulthana Thameeztheen Basha]

Hi Vikash, 

Thanks for contacting Syncfusion Support. 

We have checked your query and placed the childGrid inside the Tab using DetailsDataBound event of the Grid.  In the JS render we have defined the Tab in script Template id DetailsTemplate and rendered the Tab control on DetailsDataBound event of the Grid 

Please refer to the code example:- 

<script id="tabGridContents" type="text/x-jsrender"> 

    <div class="tabcontrol" id="Test"> 

        <ul> 

            <li><a rel='nofollow' href="#gridTab{{:EmployeeID }}">Stock Grid</a></li> 

        </ul> 

        <div id="gridTab{{:EmployeeID }}"> 

            <div id="detailGrid"> 

            </div> 

        </div> 

        <div class="tabcontrol2" id="Test1"> 

            <ul> 

                <li><a rel='nofollow' href="#gridTab{{:EmployeeID }}">Stock Grid</a></li> 

            </ul> 

            <div id="gridTab{{:EmployeeID }}"> 

                <div id="detailGrid1"> 

                </div> 

            </div> 

        </div> 

    </div> 

</script> 

 

<script src="~/Scripts/jsondata.min.js"></script> 

<script type="text/javascript"> 

    function detailGridData(e) { 

        var filteredData = e.rowData["EmployeeID"]; 

        // the datasource "window.ordersView" is referred from jsondata.min.js 

        var data = ej.DataManager(window.ordersView).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true).take(5)); 

        e.detailsElement.find("#detailGrid").ejGrid({ 

            dataSource: data, 

            columns: [ 

                          { field: "OrderID" }, 

                          { field: "EmployeeID" }, 

                          .   .   .  

            ] 

        }); 

        e.detailsElement.find(".tabcontrol").ejTab(); 

        e.detailsElement.find(".tabcontrol2").ejTab(); 

    } 

</script> 

@(Html.EJ().Grid<OrdersView>("Grid") 

                        .Datasource(ds => ds.URL("/Grid/DataSource") 

                        .Adaptor(AdaptorType.UrlAdaptor)) 

                        .DetailsTemplate("#tabGridContents") 

                        .ClientSideEvents(eve => { eve.DetailsDataBound("detailGridData"); }) 

                       .Columns(col => 

                       { 

                        col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 

                        col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add(); 

                        col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(90).Add(); 

                        

                        .  .  . 

                        

                         

                    }) 

) 

     

 

Please refer to the sample:- 

http://www.syncfusion.com/downloads/support/forum/136780/ze/SA82FB~11884482774.zip 

Please refer to the documentation Link:- 

https://mvc.syncfusion.com/demos/web/grid/detailtemplate 

https://help.syncfusion.com/aspnetmvc/grid/row?cs-save-lang=1&cs-lang=razor 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Vikash Kumar]

Hey ,  Thank you so much. this will solve my problem.   I have one more question that if I want to call schedule in a partial view in mvc then how can I do that??

I tried to do it many times it shows asyn: true or false issue. 

I need to call schedule via. ajax call this is my requirement. 

Thanks

[Nevitha Ravi]

Hi Vikash, 

Thanks for your update. 

We have prepared a sample to load schedule in partial view on ajax call for your reference which can be downloaded from the following location. 

http://www.syncfusion.com/downloads/support/forum/136780/ze/sample250750074  

Please do refer the below code example used in the above sample. 

Index.html 

    $('#btn1').click(function () { 

        var scheduleDiv = $("#test"); 

        $.ajax({ 

            cache: false, 

            type: "GET", 

            url: "/Home/GetSchedule", 

            success: function (data) { 

                scheduleDiv.html(''); 

                scheduleDiv.html(data); 

            }, 

            error: function (xhr, ajaxOptions, thrownError) { 

                alert('Failed to retrieve schedule.'); 

            } 

        }); 

    }); 

Controller: 

        public ActionResult GetSchedule() 

        { 

            List<DataSource> data = new List<DataSource>(); 

            data.Add(new DataSource(11, "Meeting1", "", new DateTime(2018, 4, 12, 9, 0, 0), new DateTime(2018, 4, 12, 10, 0, 0), false, false)); 

            data.Add(new DataSource(12, "Meeting2", "", new DateTime(2018, 4, 11, 10, 0, 0), new DateTime(2018, 4, 11, 11, 0, 0), false, false)); 

            data.Add(new DataSource(13, "Meeting3", "", new DateTime(2018, 4, 13, 9, 30, 0), new DateTime(2018, 4, 13, 11, 30, 0), false, false)); 

            ViewBag.datasource = data; 

            return PartialView("test", ViewBag); 

        } 

Schedule code in partial view(test.cshtml): 

@(Html.EJ().Schedule("Schedule1") 

            .Width("100%") 

            .Height("525px") 

            .CurrentDate(new DateTime(2018, 4, 13)) 

            .AppointmentSettings(fields => fields.Datasource((System.Collections.IEnumerable)ViewBag.datasource) 

                .ApplyTimeOffset(false) 

                .Id("Id") 

                .Subject("Subject") 

                .StartTime("StartTime") 

                .EndTime("EndTime") 

                .AllDay("AllDay") 

                .Recurrence("Recurrence") 

                .RecurrenceRule("RecurrenceRule")) 

                 

) 

Please try out the above sample and revert us back, if you face any problem with rendering the schedule in partial view. 

Regards, 

Nevitha 

 

[Vikash Kumar]

Hey Thanks Nevitha.......  It's really working fine. Thank you so much. I need same thing for Grid (Detail Templet ) also.

here is the reference link : https://mvc.syncfusion.com/demos/web/grid/detailtemplate 

I need to call this grid via Ajax call in partial View. Will you please create for me one sample for this grid also..

Thanks.

[Kuralarasan Muthusamy]

Hi Vikash, 

As per your requirement we have prepared the sample to load the Grid in partial view on ajax call. We have attached that prepared sample with this update. 

Please refer the following link to sample: 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/DetailTemplate-857934655.zip 

Please refer the following link to know about Grid partial views: 

https://help.syncfusion.com/aspnetmvc/grid/how-to?cs-save-lang=1&cs-lang=razor#work-with-partial-views 

Regards, 

Kuralarasan M. 

[Vikash Kumar]

Hi...   I want to use the report writer and viewer in my project, I'm working with Asp.Net MVC project and using the syncfusion version Ej1 ,  as per my requirement I need to take the data from database for report and in view the date filter is there in asp.net mvc form.

Will you please create for me one same for using report. It is urgent please help me.

Thanks

[Mahendran Shanmugam]

Hi Vikash, 

We can achieve your requirement to filter the data using date parameters in RDL report file and we have prepared a ReportViewer and ReportWriter sample for rendering the report using date parameter in MVC and it can be downloaded from below location. 

Viewer Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/MVCReportViewerDemo1264765473. 

Writer Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ReportWriter-1447849481. 

For your reference we have made the video and it can be downloaded from below location. 

Video: http://www.syncfusion.com/downloads/support/directtrac/general/ze/video1500160455. 

Can you please find the below links for creating the MVC sample in ReportViewer and ReportWriter. 

https://help.syncfusion.com/aspnetmvc/reportviewer/getting-started. 

https://help.syncfusion.com/aspnetmvc/reportwriter/getting-started. 

If we have miss understood your requirement, then share more information about your scenario to validate and prepare the sample.   

Regards, 

Mahendran S.