dropdown and validationrules in treegrid

[Harry Zheng]

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

[Harry Zheng]

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

[Dinesh Kumar Nagarathinam]

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

[Harry Zheng]

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

[Mahalakshmi Karthikeyan]

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.

[Harry Zheng]

Hi Mahalakshmi,

Thank you for the solution. It works well.

Regards,

Harry

[Mahalakshmi Karthikeyan]

Hi Harry,

Thanks for the update.

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

Regards,

Mahalakshmi K.