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. Image for the cookie policy date

dropdown and validationrules in treegrid

Hi,

I have couple questions about treegrid in ASP.NET MVC project.
In my treegrid, one of the columns is the month data. When user edit the data in this column, I'd like to show them a dropdownlist populated with Jan, Feb....Dec, so they can choose one of these months.
Another question: Another column is for numeric data, but  I'd like to restrict the number user input within 1 to 100.
How can I accomplish these in treegrid?
Thank you,

Harry

6 Replies

HZ Harry Zheng September 24, 2015 08:22 PM UTC

Another question: In some columns, the HeaderText is too long (such as "This is a long header text"). Is there any way we can separate the header text into two rows? in that way, user can see all the text without increasing column size. It's kind of like the function of "wrap text" in excel.

Thanks,

Harry



DK Dinesh Kumar Nagarathinam Syncfusion Team September 25, 2015 02:48 PM UTC

Hi Harry,
Thanks for using Syncfusion products.

Query

Syncfusion Comment

1.      In my treegrid, one of the columns is the month data. When user edit the data in this column, I'd like to show them a dropdownlist populated with Jan, Feb....Dec, so they can choose one of these months.

We can achieve this by setting editType as “dropdownedit” for the particular month colum.

Code Snippet:

@(Html.EJ().Gantt("Gantt")

//…

.ClientSideEvents(eve =>

{

 eve.Load("load");})

.Datasource(ViewBag.dataSource)

 )

<script type="text/javascript">

        var months = [

           { text: "Jan", value: "Jan" },

           { text: "Feb", value: "Feb" },

           { text: "Mar", value: "Mar" },

           { text: "Apr", value: "Apr" },

           { text: "May", value: "May" },

           { text: "Jun", value: "Jun" },

           { text: "Jul", value: "Jul" },

           { text: "Aug", value: "Aug" },

           { text: "Sep", value: "Sep" },

           { text: "Oct", value: "Oct" },

           { text: "Nov", value: "Nov" },

           { text: "Dec", value: "Dec" }


        ];

    function load(args) {

        var columns = this.model.columns;

        columns.splice(2, 0,

           {

               field: "month",

               headerText: "Month Column",

               editType: "dropdownedit",

               dropdownData:months,

               width: "80px"

           });

    }

    </script>


We have prepared a sample based on this and you can find the sample under the following location:

Sample: http://www.syncfusion.com/downloads/support/forum/120550/ze/TreeGridSampleMVC1518107429

 



2.     Another column is for numeric data, but  I'd like to restrict the number user input within 1 to 100.How can I accomplish these in treegrid?

We can achieve this by Using “EndEdit” clientside event.


Code Snippet:

@(Html.EJ().Gantt("Gantt")

//…

.ClientSideEvents(eve =>

{

 eve.EndEdit("endEdit");})

.Datasource(ViewBag.dataSource)

 )

<script type="text/javascript">


    function endEdit (args) {

           if (args.value > 100 || args.value < 1)

                    args.cancel = true;

    }

    </script>





3.      Is there any way we can separate the header text into two rows? in that way, user can see all the text without increasing column size. It's kind of like the function of "wrap text" in excel.

At Present there is no support to wrap a column text. For this we have already logged a feature request regarding this.

A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents




 

Please let us know if you require further assistance on this.

Regards,

Dinesh kumar.N



HZ Harry Zheng September 25, 2015 08:25 PM UTC

Hi Dinesh,

Thank you for the solution. It works well in your sample.

For the question 1,  if I do not want to create new month column, how should I accomplish the same goal?
Since in my treegrid, I firstly need retrieve data from database (including the data in month column), then user can use dropdown menu to change the data in month column.
I created json data as @ViewBag.month on server side and pass it to treegrid.
Here is my setting  of the month column in treegrid:

        col.Field("StartMonth").HeaderText("First Month of Sale").EditType(TreeGridEditingType.Dropdown).DropDownData(ViewBag.months).Width(60).Add();


But it did not work, how should I change the setting to get it work?

Thanks,

Harry







MK Mahalakshmi Karthikeyan Syncfusion Team September 28, 2015 01:20 PM UTC

Hi Harry,

Query 1:  if I do not want to create new month column, how should I accomplish the same goal?

Solution: We can render the drop down data with the data base column value, for that we need separate table with text and value field in it. Please refer the below code example for details.

[CS]

public class TreeGridController : Controller

    {

SqlCommand comm1 = new SqlCommand("SELECT * FROM Month", conn);

            SqlDataReader reader1 = comm1.ExecuteReader();

            DataTable dt1 = new DataTable();

            dt1.Load(reader1);


            conn.Close();



            Data data = new Data();


            MonthTable = data.GetMonthRows(dt1);


            ViewBag.month = MonthTable;

}


public class MonthData

    {

        public string Id { get; set; }

        public string text { get; set; }

        public string value { get; set; }      

    }


Here we have populated the drop down data with other table named “Month” to the TreeGrid Column.


[CSHTML]

@ (Html.EJ().TreeGrid("TreeGridContainer")

    .Columns(co =>         

                     

       co.Field("Month").HeaderText("Month").EditType(TreeGridEditingType.Dropdown)

       .DropDownData((IEnumerable<object>) ViewBag.month).Add();


    }))


We have also prepared a sample based on this and you can find the sample under the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/120550/ze/DropDownData2071115962

Regards,

Mahalakshmi K.



HZ Harry Zheng September 28, 2015 08:06 PM UTC

Hi Mahalakshmi,

Thank you for the solution. It works well.

Regards,

Harry


MK Mahalakshmi Karthikeyan Syncfusion Team September 29, 2015 03:57 AM UTC

Hi Harry,

Thanks for the update.

Please let us know if you need further assistance on this.

Regards,

Mahalakshmi K.


Loader.
Live Chat Icon For mobile
Up arrow icon