Create column of buttons in Flex Grid

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

  • 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.
  • Marked as Answer

    Replied 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels