One of the default actions of KendoUI Master Detail Grid is to display the Detail Grid, even in the absence of data records. In this blog you will learn how to make the Detail Grid visible only when data record is present. You will also become familiar with how to add data to the Detail Grid by clicking on a newly created button (which will also eventually replace the default Add New Availability Button) which we will place on the toolbar of the Master Grid.

Requirement:

We want to display the Soccer Locations Availability listing in KendoUI Master Grid.

For this purpose we will create a new Availability button on the Master Grid toolbar and also hide the default Detail Grid Add button.

We want to add availability to Location by clicking on the newly created custom Add New Availability button placed on the right corner of the Location Master Grid toolbar.

Also, the value for toolbar of Detail Grid will be set to visible false, as we will now onwards Add Availability from the newly created Add New Availability button placed on the Detail Grid.

Now, whenever there is at least a single Location available, the relevant details for that location will be shown in the Detail Grid. If no location is available, the Detail Grid will become invisible.

 

Default Behavior:

By default, records are added to the Master Grid by clicking on the default Add New Availability button of the Detail Grid toolbar. Our new requirement is to add availability by clicking on the newly created Add Availability button placed on the right side of the Location Master Grid toolbar (that will replace the default Detail Grid Add Button).

http://demos.telerik.com/kendo-ui/web/grid/editing-inline.html
http://demos.telerik.com/kendo-ui/web/grid/detailtemplate.html 
http://demos.telerik.com/kendo-ui/grid/rowtemplate

Proposed Solution:

1. First, we will set the value of the Detail Grid toolbar to visible false.
2. Next, the DetailInit event of Master Grid will trigger and check if DataSource data length is less or equal to 0, if yes, then it will set the display to none.
3. To add new records, we will now have to click on the newly created Master Grid custom Add Availability button that we will do by calling the Detail Grid Add command (“.k-grid-add”) click event dynamically. This will make the new customized button to work as if the actual (i.e. default) (“.k-grid-add”) button is clicked.
4. When a record is added to the detail grid, the detail grid value will be set to visible true and when a record is deleted (and if it’s the last remaining record to be removed) then the detail grid value is set to visible false.

 

View:

Our solution involves an MVVM Grid that contains row templates. The template for Master Grid (“locationGrid”) uses row and alternate row template.

  

 

ViewModel:

DetailInit Event:

The Master Grid contains the detailInit event which is bound to the locationDetailInit event handler of AvailabilityViewModel ViewModel.

The Detail Grid element (“.k-detail-cell”) is searched by the locationDetailInit event handler, which then calls the createDetailGrid function. This function generates the Detail Grid template for events such as save and delete.

Here’s the snippet that makes the Detail Grid toolbar visible false:

$(".availabilityGrid .k-toolbar.k-grid-toolbar").css("display", "none");

This code makes the Detail Grid visible false when no data present:

if (resourceDataSource.data().length <= 0) {

$(detailCell).hide();
}

Delete Event:

After deleting record from Detail Grid, it checks to see whether no record is present, and if so, the value for Detail Grid is set to visible false:

if (resourceDataSource.view().length <= 0) {
$(detailCell).hide();
}

Save Event:

The below script sets the Detail Grid value to visible true when a record is saved.
 
save: function (saveEvent) {
                  $(detailCell).show();
            }

Add New Availability Button Event:

Clicking the (".k-grid-add") button on the Detail Grid by clicking Master Grid customized button “Add New Availability”.

 

Conclusion

Now you know how to override the default behaviour of KendoUI Grid by making the Detail Grid conditionally visible, how to hide the toolbar, and add records to detail grid without clicking on default Add command button directly.

In summary, this simple collection of codes offers you with step by step instructions on how to accomplish easy customization of KendoUI Master Detail Grid. Well, happy coding!

For your convenience, we have provided a link where you can look at the fully functional custom editor for KendoUI Master Detail Grid demo. Just click on the link below:

http://jsfiddle.net/vdnY3/2/
http://jsfiddle.net/Fb2P2/28/