add dynamic column and row_?

[tayfun uyrun]

Hello there.

  You have fixed fields in the grid.

In addition to this, I want to dynamically add a row to the table that the user will select from a dropdown. How do I do this?

I tried to explain in the picture. How to add the feature selected from the dropdown ?

[Vignesh Natarajan]

Hi Tayfun, 

 

Thanks for using Syncfusion products. 

 

We have analyzed your query and we suspect that you want to add columns by selecting the value from the dropdownlist. We have achieved your requirement using the Columns method of the grid.  

 

Refer the below code snippet 

 

@Html.EJ().DropDownList("DropDownList1").Datasource((IEnumerable<object>)ViewData["DropDownSource"]).DropDownListFields(Df => Df.Text("Text").Value("Value")).ShowCheckbox(true) 

 

@Html.EJ().Button("button").ClientSideEvents(e => e.Click("add")).Text("AddColumns") 

 

 

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

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

         .          .           .  

                         })) 

     

<script type="text/javascript"> 

    function add(args) { 

        var DDl = $("#DropDownList1").ejDropDownList("instance"); 

        var list = DDl.getSelectedValue().split(","); 

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

            $("#grdSample").ejGrid("columns", list[i],"add"); 

    } 

</script> 

 

For your convenience we have prepared a sample which can be downloaded from below link 

 

Sample: https://www.syncfusion.com/downloads/support/forum/137324/ze/SyncfusionMvcApplication40-512147309  

 

Refer our API documentation for your reference 

 

 

https://help.syncfusion.com/api/js/ejgrid#methods:columns  

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan 

 

 

  

 

 

[tayfun uyrun]

thanks for the answer.

but I would like to do exactly as DropDownList inserts both the selected table as a column and refreshes the data source when the column is added. I would like to bring the values for a newly added column with an ajax ...

There is no example of dynamically extracting and populating data when I examine it. There are examples of adding and listing columns that have already been drawn and not shown

var selectedvalue=tayfun; ///dropdown selected value

$.ajax({
           type: "POST",
           url: url,
           data: selectedvalue, // serializes the form's elements.
           success: function(data)
           {
                 $("#grdSample").ejGrid({ datasource:data });

           }
         });

[Sathyanarayanamoorthy Eswararao]

Hi Tayfun, 

We suspect that you are trying to add particular columns details to the dataSource of the grid through an ajax post which is not feasible. Hence we suggest you to add the columns using columns method and change the dataSource for the grid which includes the values of the newly added columns. 

We have achieved this requirement in the below code example using the dataSource method. 

Refer the below code example. 

 

@Html.EJ().DropDownList("DropDownList1").Datasource((IEnumerable<object>)ViewBag.datasource1) 

.DropDownListFields(Df => Df.Text("text").Value("value")).ShowCheckbox(true) 

 

@Html.EJ().Button("button").ClientSideEvents(e => e.Click("addcolumn")).Text("AddColumns") 

 

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

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

            .Columns(col => 

        { 

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add(); 

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

        }) 

        )   

 

<script> 

    function addcolumn() { 

 

        var DDl = $("#DropDownList1").ejDropDownList("instance");  

        var list = DDl.getSelectedValue().split(","); 

        var obj = $("#FlatGrid").ejGrid("instance"); 

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

            obj.model.columns.push({field:list[i]}); 

 

        $.ajax({ 

            type: "post", 

            url: "/Home/DataSource", 

            dataType: "json", 

            contentType: "application/json; charset=utf-8", 

            data: JSON.stringify({ columns: JSON.stringify(list) }), 

            success: function (data) {              

                obj.dataSource(data, true); 

            } 

        }); 

    } 

</script> 

 

Also in the provide code example the dataSource property is not spelled correctly. The ‘s’ letter must be in uppercase for the dataSource property. 

We have prepared a sample for your convenience which can be downloaded from below location. 

Sample: https://www.syncfusion.com/downloads/support/forum/137324/ze/Grid1643504416.zip  

If you misunderstood your query please get back to us with more details. 

Regards, 

Sathyanarayanamoorthy 

[tayfun uyrun]

man you are great!

thank you :)

[Sathyanarayanamoorthy Eswararao]

Hi Tayfun, 

We are happy to hear that your issue has been resolved. 

If you need any further assistance please get back to us. 

  

Regards, 

Sathyanarayanamoorthy