Master Details - Passing date & userId to detail grid and query for date range

[Megatron]

Hi,

I am looking for a sample, where I can fliter by userId clicked & Date range...

@section ScriptSection{
    <script src="~/Scripts/jsondata.min.js"></script>
    <script type="text/javascript">
        $(function () {           
            window.rowSelected = function (args) {
                var employeeID = args.data.EmployeeID;                                                                 //How to filter 1o days of records

            var detaildata = ej.DataManager(window.gridData).executeLocal(ej.Query().where("EmployeeID", ej.FilterOperators.equal, employeeID, false).take(10)); 
                var gridObj = $("#ChildGrid").ejGrid("instance");
                gridObj.dataSource(ej.DataManager(detaildata.slice(0, 5)));  

// how to get all records for that date range 

            }
        });
    </script>
}

The master grid has 4 cols:   Date Col, UserID Col, Approve/Reject Button Col,

1. How Pass & Filter child grid data -  userId & date+7days to the child grid, i.e. refresh the child grid with the data filtered by userId & date range using the date + 1o days or 1 week of data for the user.
2. How to update CRUD Master & Child when Button Approve/Reject in the master Grid is clicked. When the Approve or Reject button is pressed, the Child grid should also refresh/show approved or rejected or approved status in the child status.

[Vignesh Natarajan]

Hi Megatron, 

Thanks for using Syncfusion products. 

According to your query we suspect that you want to filter the Detail grid based on Master Grid’s date column value and to enable editing on clicking the approve button & cancel editing on clicking reject button. We have achieved your requirement through Command column and in the Row-selected event of the Grid. We have updated the detail grid data Source using dataSource method.  

Refer the below code snippet 

     col.HeaderText("Employee Details").Commands(command => 

                                { 

                                    command.Type("Approve") 

                                   .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties() 

                                   { 

                                       Text = "Approve", 

                                       Width = "100px", 

                                       Click = "onClick1" 

                                   }).Add(); 

                                    command.Type("Reject") 

                                .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties() 

                                { 

                                    Text = "Reject", 

                                    Width = "100px", 

                                    Click = "onClick2" 

                                }).Add(); 

                                }) 

                             .TextAlign(TextAlign.Center) 

                             .Width(150) 

                             .Add(); 

 

                            }) 

 

                         . 

                         . 

                         . 

<script type="text/javascript"> 

        $(function () { 

            window.rowSelected = function (args) {                

                var old = args.data.OrderDate; 

                var fut = new Date(old); 

                fut = fut.setDate(fut.getDate() + 20); 

                var detaildata = ej.DataManager(window.gridData).executeLocal(ej.Query().where(ej.Predicate("OrderDate", ej.FilterOperators.greaterThanOrEqual, new Date(old), false).and("OrderDate", ej.FilterOperators.lessThanOrEqual, new Date(fut), false))); 

                var gridObj = $("#DetailGrid").ejGrid("instance"); 

                gridObj.dataSource(ej.DataManager(detaildata)); 

            } 

        }); 

           function onClick1(args) { 

                $("#DetailGrid").ejGrid("option", { "editSettings": { allowEditing: true, allowDeleting: true, allowAdding: true } }); // updating the editiSettings through setmodel 

            } 

            function onClick2(args) { 

                $("#DetailGrid").ejGrid("option", { "editSettings": { allowEditing: false, allowDeleting: false, allowAdding: false } }); 

            }        

        </script> 

     

   

Refer the below screenshot for the output 

 

For your convenience we have prepared a sample which can be downloaded from below link  

Sample: http://www.syncfusion.com/downloads/support/forum/135090/ze/SyncfusionMvcApplication402139810631  

If we misunderstood your query please get back to us with more details 

Regards, 

Vignesh Natarajan