In Details Template an event in ClientHeaderTemplate is not triggered

4 posts, 0 answers
  1. Nimita
    Nimita avatar
    8 posts
    Member since:
    Oct 2019

    Posted 08 Apr 2020 Link to this post

    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>);
  2. Tsvetomir
    Admin
    Tsvetomir avatar
    790 posts

    Posted 13 Apr 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Nimita
    Nimita avatar
    8 posts
    Member since:
    Oct 2019

    Posted 13 Apr 2020 Link to this post

    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())

  4. Tsvetomir
    Admin
    Tsvetomir avatar
    790 posts

    Posted 16 Apr 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top