Flexgrid. createbutton function

Flexgrid. createbutton function

Posted by: jvilaret on 25 November 2023, 12:33 pm EST

• 

  jvilaret

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 November 2023, 12:33 pm EST - Updated 25 November 2023, 12:35 pm EST

  When adding the 4th column that has the TemplateFunction(“createButton”), the flexgrid is not seen and in the browser console it gives this error: Uncaught ReferenceError: createButton is not defined. I have followed this website: https://demos.componentone.com/ASPNET/MvcExplorer/FlexGrid/CustomCells but I don’t know where the problem is.

  @model IEnumerable<Procedimiento>
  
  @{
      ViewData["Title"] = "Listado de Procedimientos";
  }
  
  <div class="mb-3 d-flex justify-content-between align-items-center">
      <h2 class="text-primary">@ViewData["Title"]</h2>
  </div>
  
  <div class="p-4 border rounded bg-light">
   
      @*https://demos.componentone.com/ASPNET/MVCExplorer/FlexGrid/Filter*@
      @(
          Html.C1().FlexGrid<Procedimiento>()
              .Id("tblIndex")
              .CssClass("tblIndex")
              .Width("100%")
              .PageSize(10)
              .AutoGenerateColumns(false)
              .SelectionMode(SelectionMode.Cell)
              .SortingType(AllowSorting.SingleColumn)
              .SelectionMode(SelectionMode.Row)
              .Bind(Model)
  
              .Columns(c =>
              {
                  c.Add(c => c.Binding("IdProcedimiento"));
                  c.Add(c => c.Binding("Número").Header("Nº"));
                  c.Add(c => c.Binding("Fecha"));
                  c.Add(c => c.Binding("IdProcedimiento").Header("Editar").TemplateFunction("createButton"));
              })
  
              .Filterable(f => f.DefaultFilterType(FilterType.Value))
      )
  
      @(Html.C1().Pager().Owner("tblIndex").Width("100%"))
  
  </div>
  
  @section Scripts {
  
      <script>
  
          function createButton(CellMaker) {
              return CellMaker.makeButton({
                  text: '<b>${item.IdProcedimiento}</b> Button',
                  click: function (e, ctx) {
                      alert('Clicked Button ** ' + ctx.item.IdProcedimiento + ' **');
                  }
              });
          }
      </script>
  }

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 25 November 2023, 3:31 pm EST

  Hi,
  
  All the code is correct, but the possible reason is that the createButton method defined in the script section is not available while the FlexGrid is trying to call this method.
  
  So please, try the following code:

  <script>
  
          function createButton(CellMaker) {
              return CellMaker.makeButton({
                  text: '<b>${item.IdProcedimiento}</b> Button',
                  click: function (e, ctx) {
                      alert('Clicked Button ** ' + ctx.item.IdProcedimiento + ' **');
                  }
              });
          }
      </script>
  <div class="mb-3 d-flex justify-content-between align-items-center">
      <h2 class="text-primary">@ViewData["Title"]</h2>
  </div>
  ....
  @(
          Html.C1().FlexGrid<Procedimiento>() 
  .... 

  Hope it helps!

  Regards,
  
  Manish Gupta

• 

  jvilaret

  • Post Options:
  • Link
    Copy

  Posted 26 November 2023, 11:58 am EST

  Thanks for your help, Manish.
  
  Works correctly.