Add New Record button in grouped items in KendoGrid

[Rama]

Hi,
     As I mentioned I want to add "Add New Record " toolbar or button which adds a new row in grouped sections of Kendo grid, I have grouped items as individual sections in kendo grid as below 

$(function () {
var data1 = [{ ProgramName: "testing", Businesssegment: "test", deliveryQuater: "FY10" }, { ProgramName: "testing", Businesssegment: "test2", deliveryQuater: "FY11" },
{ ProgramName: "testing1", Businesssegment: "test3", deliveryQuater: "FY10" }, { ProgramName: "testing1", Businesssegment: "test4", deliveryQuater: "FY11" },
{ ProgramName: "testing2", Businesssegment: "test3", deliveryQuater: "FY10" }, { ProgramName: "testing2", Businesssegment: "test4", deliveryQuater: "FY11" }];


$("#body").kendoGrid({
dataSource: {
data: data1,
group: { field: "ProgramName" }


},
resizable: true,
columns: [
{
title: "Friendly Name", field: "Businesssegment", width: 50
},
{
title: "Url", field: "deliveryQuater", width: 50
},

{ command: ["edit", "destroy"], title: " ", width: "172px" },


],
editable: "inline",
toolbar:["create"],
scrollable:true,
height: 820
});



});

When I add toolbar:["create"] property it adds as toolbar at the top of the grid but I need the same for each section which is grouped in the grid.

 Attached the current grid after implementing above code and expected grids ,Please help how to achieve the expected grid.Please ignore template.png

[Vladimir Iliev]

Hi Rama,

 
I already answered to this query in duplicated support ticket created by you. Please keep in mind that it is highly recommended that you keep related questions in one support thread or a forum post, so that we can easily keep track of your support history and provide better answers in a shorter time.

Kind Regards,
Vladimir Iliev
Telerik

[Ashish]

I am also need to implement similar kind of functionality in kendo grid. Please help me to provide demo code for this functionality.

 

Regards:

Ashish Jaiswal

[Vladimir Iliev]

Hi Ashish,

For your convenience I included my response from the duplicated ticket below:

Basically the required behavior will require custom solution, however I created small example of possible solution:

• Define groupHeaderTemplate with button for example:

  "groupHeaderTemplate": "<button onclick='addRecord()'>AddRecord</button>"

• Create function which to get current group value and set it as default value in the model property:  

  function addRecord() {
      var grid = $("#Grid").data("kendoGrid");
  
      //find the first record from current group
      var dataItem = grid.dataItem($(event.srcElement).closest("tr").next());
      //set the default value for needed column
      grid.dataSource.reader.model.fn.defaults.OrderDescription = dataItem.OrderDescription;
      //call the addRow method
      grid.addRow();
      //the new row will be created in current Group always
  }

Regards,
Vladimir Iliev
Telerik

 

 

[Vladimir Iliev]

Hi Ashish,

A quick follow up - another possible approach is to define the default values of the grouped fields to be functions - for more information you can check the following demo:

• Dynamic default values

Regards,
Vladimir Iliev
Telerik