Create column of buttons in Flex Grid

Create column of buttons in Flex Grid

Posted by: pablo on 8 November 2021, 8:11 pm EST

• 

  pablo

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 November 2021, 8:11 pm EST

  I have a question related to the Flex Grid and the cell template. I’m trying to create a button in each cell from a column, with the aim of showing a view. I’ve already done it, however, I need to bind a different value from the model in each cell. To explain myself, I have a model defined in the view (where I’m creating the Flex Grid) like this:

   @model IEnumerable<C1MvcApplication1.Models.Clients>
  

  And the Flex Grid is defined in this way:

  <c1-flex-grid id="theFlexGrid"
                auto-generate-columns="false"
                is-read-only="true"
                sorting-type="SingleColumn"
                class="grid"
                pinning-type="SingleColumn"
                auto-search="true"
                default-column-size="100"
                default-row-size="47">
  <c1-flex-grid-column binding="clientCode" header="Code"></c1-flex-grid-column>
  <c1-flex-grid-column binding="clientName" header="Name" width="200"></c1-flex-grid-column>
  <c1-flex-grid-column is-read-only="false" align="center" width="70">
          <c1-flex-grid-cell-template>
              <a id="edit" asp-controller="clients" asp-action="Edit" class="btn btn-default" asp-route-clientCode="xxxx" style="background-color:none;"><img src="~/lib/icons/Edit.png" /></a>
          </c1-flex-grid-cell-template>
         </c1-flex-grid-column>
  <c1-items-source source-collection="@Model"></c1-items-source>
  </c1-flex-grid>
  
  

  In this example I have defined an asp-route-clientName with a single value “xxxx”. Nevertheless, what I’m trying to do is to define a value like “@Model.clientCode”. I know that’s something we can’t do with the type IEnumerable<> but I need a solution to select each value from this variable.

• 

  dushyant.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 9 November 2021, 7:06 pm EST

  Hello,

  Please refer to the following points for the resolution of the above query:

  • Instead of using an anchor tag, we may add a click event listener to the set template and may implement the following functionality in the handler.

  • To get the dataItem for the selected row, we may use the hitTest and dataItem property of FlexGrid Row, to get the required information.

  • After which we may redirect the user to the next view with the above information accordingly.

  Please refer to the sample below.
  
  FlexGrid.zip

  Regards
  
  Dushyant Sharma