Ticket Q459368
Visible to All Users

GridView - How to define Button inside grid

created 12 years ago

Can you add button controls in an mvc3 grid view? I have a grid - two coloumns containing data and 5 columns that need to be buttons to cotnrol the next action for the data in the first two columns. Is this possible?

Answers approved by DevExpress Support

created 12 years ago (modified 12 years ago)

Hello Nancy,
Yes, it is possible to use the MVCxGridViewColumn.SetDataItemTemplateContent method to define the (Button) content of the required column.
Take a look at the E4236 - How to implement the multi-row editing feature in the GridView Code Central example to see this method in action.
UPDATED:
It is possible to use the same technique to define the required number of columns and accomplish this task. I have attached a sample project that may be helpful.

C#
settings.Columns.Add(column => { column.FieldName = ... column.SetDataItemTemplateContent(c => { Html.DevExpress().Button(settingsBtn => { settingsBtn.Name = "btn" + c.KeyValue; settingsBtn.Text = "Price Value: " + c.Text; settingsBtn.ClientSideEvents.Click = string.Format("function(s, e) {{ alert('{0}'); }}", c.KeyValue); settingsBtn.RouteValues = new { Controller = "Home", Action = "ButtonClickAction", rowKeyValue = c.KeyValue }; }).Render(); }); });
C#
public ActionResult ButtonClickAction(int? rowKeyValue) { return ... }
    Comments (2)

      Thank you Mike; but this does not help me very much. The example shows a grid with two columns - a textbox and a combobox. What next? My grid needs to look like this:
      data field data field button button button button button - for as many rows are retrieved from the database
      Each button need to contain the same ID number from the data retrieved for the first two columns and to trigger the creation of a different partial view when each of four of the buttons are clicked by the user and the last button needs to update the database when clicked. Does some sort of a template need to be created for the button columns?

        Hello Nancy,
        Yes, it is possible to use the same technique to define the required number of columns and accomplish this task. I have attached a sample project that may be helpful.

        C#
        settings.Columns.Add(column => { column.FieldName = ... column.SetDataItemTemplateContent(c => { Html.DevExpress().Button(settingsBtn => { settingsBtn.Name = "btn" + c.KeyValue; settingsBtn.Text = "Price Value: " + c.Text; settingsBtn.ClientSideEvents.Click = string.Format("function(s, e) {{ alert('{0}'); }}", c.KeyValue); settingsBtn.RouteValues = new { Controller = "Home", Action = "ButtonClickAction", rowKeyValue = c.KeyValue }; }).Render(); }); });
        C#
        public ActionResult ButtonClickAction(int? rowKeyValue) { return ... }

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.