resizing unbound column according to content width

[Carlo]

Greetings. I have a grid with an unbound column, which contains some buttons, using the following syntax:

...

col.HeaderText("MyUnboundColumn").Commands(command =>

            {

                command.Type("buttonOne")

                       .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()

                       {

                           Text = "buttonOne",

                           Width = "100px",

                           ContentType = ContentType.TextAndImage,

                           Click = "onClickPartecipaAttivita",

                           PrefixIcon = "e-hyperlink",

                       }).Add();

                command.Type("buttonTwo")

                       .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()

                       {

                           Text = "buttonTwo",

                           Width = "100px",

                           ContentType = ContentType.TextAndImage,

                           Click = "onClickAssegnaAttivita",

                           PrefixIcon = "e-edit",

                       }).Add();

                command.Type("buttonThree")

                       .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()

                       {

                           Text = "buttonThree",

                           Width = "100px",

                           ContentType = ContentType.TextAndImage,

                           Click = "onClickGetUtentiAttivita",

                           PrefixIcon = "e-userlogin",

                       }).Add();

            })

            .Width(340).IsUnbound(true).Add();

...

Now, I have the following requirement to met: according to each row model value, only some of these buttons should be shown for each row. Column width should resize according to the row which contains more buttons. For instance, the rule may be the following:

if (Model.MyCondition == 0)

-> on that row show buttonOne and buttonTwo

else if (Model.MyCondition == 1)

-> on that row show only buttonOne

else

-> show all 3 buttons

According to this rule, if I had 3 rows in my grid with the following model value:

ROW 1: MyCondition = 0

ROW 2: MyCondition = 1

ROW 3: MYCondition = 1

=> Then "MyUnboundColumn" should resize its width to contain 2 buttons (because of ROW 1 model value); in the first row I should have 2 buttons, one button in the second row and one button in the third row.

If, for instance, I had also ROW 4: MyCondition = 2 then this last row should contain all the 3 buttons, so the unbound column width should change in order to contain all these 3 buttons.

I hope I've been able to explain myself. If you have some doubts about my requirement just let me know and I'll prepare some pics to further narrow down my question.

[Prasanna Kumar Viswanathan]

Hi Carlo,

Thanks for contacting Syncfusion support.

Your requirement has been achieved by the querycellInfo and Create events of ejGrid. 

The querycellInfo event triggers every time a request is made to access particular cell information and we can get row data in the arguments. Using data of EmployeeID, we remove the button of the command column.

The create event triggers, when the Grid is rendered completely and we can find the buttons length of every cell using grid object. Using for loop, we find the maximum length and set width to the command column.


Please find the code example and sample:

@(Html.EJ().Grid<object>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

         .AllowPaging()

        .EnableAutoSaveOnSelectionChange(false)

        .PageSettings(page => { page.PageSize(10); })

        .EnableRowHover(false)

        .EditSettings(edit => { edit.AllowDeleting().AllowEditing().AllowEditOnDblClick(false); })

        .ClientSideEvents( eve => eve.QueryCellInfo("rowdata").Create("create"))

        .Columns(col =>

            {

                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

                col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();

                col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();

                col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();

                col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right).Width(80).Format("{0:MM/dd/yyyy}").Add();

                col.HeaderText("Manage Records").Commands(command =>

            {

                command.Type(UnboundType.Edit)

                       .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()

                       {

                           Text = "Edit"

                       }).Add();

                command.Type(UnboundType.Delete)

                       .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()

                        {

                            Text = "Delete"

                        }).Add();

                command.Type("Button 3")

                       .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()

                        {

                            Text = "Save"

                        }).Add();

                command.Type("Button 4")

                      .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()

                      {

                          Text = "Cancel"

                      }).Add();

            }).IsUnbound(true).Width(100).Add();

            })

        )

<script>

    function rowdata(args) {

        if (args.data.EmployeeID == 5) {

            var buttons = $($(args.cell).siblings()[4]).find('button');

            for( var i = 0 ; i < buttons.length ; i++)

            {

                if ($(buttons[i]).attr("value") == "delete") {

                    $(buttons[i]).remove();

                }

                if ($(buttons[i]).attr("value") == "Button 3") {

                    $(buttons[i]).remove();

                }

            }

        }

        else if (args.data.EmployeeID == 4) {

            var buttons = $($(args.cell).siblings()[4]).find('button');

            for (var i = 0 ; i < buttons.length ; i++) {

                if ($(buttons[i]).attr("value") == "edit") {

                    $(buttons[i]).remove();

                }

            }

        }

    }

   

    function create(args) {

        var j = 0, length, first = 0, buttons;

        for (var i = 0; i < this.element.find(".e-unboundcell").find(".e-unboundcelldiv").length ; i++) {

            length = $(this.element.find(".e-unboundcell").find(".e-unboundcelldiv")[i]).children().length

            if (length > first)

                buttons = $(this.element.find(".e-unboundcell").find(".e-unboundcelldiv")[i]).children().length;

            first = $(this.element.find(".e-unboundcell").find(".e-unboundcelldiv")[i]).children().length;

        }

        var buttons;

        if (buttons == 4) {

            $(this.getContentTable().find("colgroup col")[5]).width(150);

            $(this.getHeaderTable().find("colgroup col")[5]).width(150);

        }

    }
</script>

Refer to the Help documents for the create and querycellInfo event

http://help.syncfusion.com/js/api/ejgrid#events:create

http://help.syncfusion.com/js/api/ejgrid#events:querycellinfo

Sample: http://www.syncfusion.com/downloads/support/forum/121609/ze/Sample145862450719617

Regards,
Prasanna Kumar N.S.V

[Carlo]

Thanks for the kind reply, as always. In the following days I'll take the time to test your solution and I'll let you the results. Stand by. 

[Prasanna Kumar Viswanathan]

Hi Carlo,

Thanks for the reply.

Please test the solution and update the result to us.

Regards,
Prasanna Kumar N.S.V