We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

resizing unbound column according to content width

Thread ID:

Created:

Updated:

Platform:

Replies:

121609 Jan 7,2016 03:07 AM Jan 13,2016 05:05 AM ASP.NET MVC 3
loading
Tags: Grid
Carlo
Asked On January 7, 2016 03:07 AM

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 [Syncfusion]
Replied On January 8, 2016 08:17 AM

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
Replied On January 12, 2016 05:39 AM

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 [Syncfusion]
Replied On January 13, 2016 05:05 AM

Hi Carlo,

Thanks for the reply.

Please test the solution and update the result to us.

Regards,
Prasanna Kumar N.S.V


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;