In Details Template an event in ClientHeaderTemplate is not triggered

[Nimita]

In the Details Template of the Master Grid , in the first Tab Item grid , I have added a column id with ClientHeaderTemplate as a Check box .

When clicked on the checkbox the event is not triggered.


<script id="secattributes" type="text/kendo-tmpl">

    @(Html.Kendo().TabStrip()
     .Name("tabStrip_#=SecurityMasterId#")
     .SelectedIndex(0)
     .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
     .Items(items =>
     {
     items.Add().Text("Security Attributes").Content(@<text>

                   @( Html.Kendo().Grid<CoreMaster.Models.SecurityAttributeView>()
                  .Name("securityMaster_#=SecurityMasterId#")
                  .ToolBar(toolbar =>
                  {
                      toolbar.Create().Text("Add new Attribute");
                  })
                  .Editable(editable =>
                  {
                      editable.Mode(GridEditMode.PopUp).TemplateName("secattribute");
                  })
                  .Columns(cols =>
                  {

//This Check box event is not triggered

                      cols.Bound(y => y.Id).ClientHeaderTemplate("<label><input id='myId' type='checkbox' value='#= getAllData #' onchange='getAllRecords(#=id#)'>Display all records</label>");
                      cols.Bound(y => y.Name).Title("Name");                 
                  })
                  .DataSource(dataSource => dataSource
                  .Ajax().ServerOperation(true).PageSize(10)
                  .Model(model =>
                  {
                      model.Id(p => p.Id);                    
                  })                  
                  )
                  .Sortable()
                  .Pageable(p => p.Enabled(true)).Events(e => e.Edit("onEditGrid")) .ToClientTemplate() ) </text>);

[Tsvetomir]

Hi Nimita,

In general, the values that have to be passed in the inline jQuery events could be either "event" or "this". If you would like to pass any other values, they have to be passed as strings:

.ClientHeaderTemplate("<input id='myId_' type='checkbox' onchange='getAllRecords(\"#=Id#\")'>")

It is important to point out that the header row is not associated with and data item. Therefore, the "Id" in the current case will be undefined. And the passed value in the change event handler will probably be "#=Id#" as a string and not as an evaluated template. 

Could you share more details on what value would you like to pass to the event handler?

 

Regards,
Tsvetomir
Progress Telerik

[Nimita]

Hi Tsvetomir,

The Id in the current case is the Master Grid's Selected Row ID .

The ClientHeaderTemplate is added to the column of the Child Grid which is present in the TabItem of the Tabstrip associated to the Master Grid.

 

<script id="secattributes" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
             .Name("tabStrip_#=SecurityMasterId#")
             .SelectedIndex(0)
             .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
             .Items(items =>
             {
                 items.Add().Text("Security Attributes").Content(@<text>
                    @(Html.Kendo().Grid<CoreMaster.Models.SecurityAttributeView>()
                      .Name("securityMaster_#=SecurityMasterId#")
                      .ToolBar(toolbar =>
                      {
                          toolbar.Create().Text("Add new Attribute");
                      })
                      .Editable(editable =>
                      {
                          editable.Mode(GridEditMode.PopUp).TemplateName("secattribute");
                      })
                      .Columns(cols =>
                      {
                          cols.Bound(y => y.SecurityMasterId).ClientHeaderTemplate("<label><input id='SecurityMasterIDChk' type='checkbox' value='#= getAllData #' onchange='getAllRecords(\"#=SecurityMasterId#\")'>Display all records</label>");
                          cols.Bound(y => y.AttributeName).Title("Attribute");                     
                          cols.Command(command => command.Edit().UpdateText("Update").Text("Edit"));
                      })
                      .DataSource(dataSource => dataSource
                      .Ajax().ServerOperation(true).PageSize(10).Events(e => e.Sync("refreshSecurityAttribute")
                      .Error("Attribute_Error").RequestEnd("requestEnd"))
                      .Model(model =>
                      {
                          model.Id(p => p.SecurityAttributeId);
                          model.Field(p => p.SecurityAttributeId);
                          model.Field(p => p.SecurityMasterId);
                          model.Field(p => p.AttributeId);                        
                      })                   
                      .Read(read => read.Action("Security_Attributes_Read", "SecurityMaster").Data("paramters(#=SecurityMasterId#)"))     
                      )                  
                      .ToClientTemplate() ) </text>);

  }).ToClientTemplate())

[Tsvetomir]

Hi Nimita,

Thank you for the provided clarifications.

Indeed, the event is consumed by the sorting of the grid. It wraps the whole cell inside an anchor tag. What I can recommend is that you set the anchor tag to be outside of the checkbox:

.Columns(columns =>
             {
                 columns.Bound(p => p.ShipName).ClientHeaderTemplate("<div><label><input id='SecurityMasterIDChk#=OrderID#' type='checkbox' class='kur' onclick='getAllRecords(\"#=OrderID#\")'>Display all records</label><a class='k-link'></a></div>");
             })

I hope you find this helpful.

 

Regards,
Tsvetomir
Progress Telerik