Fill EJ.Grid after submit without refreshing page

[Bart]

Hi, I have a simple asp net mvc application with bootstrap and I have a problem with filling ej grid after form submit without refreshing page.

I tried to do it with onSuccess method, innerHtml and partialview, but it doesn't work. 

My html code:

<div class="form-group col-md-2">

            @Html.LabelFor(m => m.DateTimeFrom)

            @Html.EJ().DateTimePicker("DateTimeFrom").Value(Model.DateTimeFrom).TimePopupWidth(150).TimeDisplayFormat("HH:mm").Width("100%").DateTimeFormat("yyyy-MM-dd HH:mm")

        </div>

        <div class="form-group col-md-2">

            @Html.LabelFor(m => m.DateTimeTo)

            @Html.EJ().DateTimePicker("DateTimeTo").Value(Model.DateTimeTo).TimePopupWidth(150).TimeDisplayFormat("HH:mm").Width("100%").DateTimeFormat("yyyy-MM-dd HH:mm")

        </div>

        <div class="form-group col-md-3">

            @Html.LabelFor(m => m.Companies)

            @(Html.EJ().DropDownList("CompanyId").EnableFilterSearch()

                                                          .Datasource((IEnumerable<Company>)Model.Companies)

                                                          .DropDownListFields(Df => Df.Text("Name").Selected("Selected").Value("CompanyId"))

                                                          .Width("100%")

                                                          .Value(Model.CompanyId.ToString())

            )

        </div>

        <div class="form-group col-md-offset-1 col-md-2 col-xs-6 ">

            <br />

            <button class="btn btn-block btn-primary">Show data</button>

        </div>

        <div class="form-group col-md-2 col-xs-6">

            <br />

            <a rel='nofollow' href="#" class="btn btn-block btn-info js-export-excel">Export to XML</a>

        </div>

<div>

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

                                        .Datasource((IEnumerable<IssueViewModel>)@Model.Issues)

                                        .AllowPaging()

                                        .PageSettings(p => p.PageCount(3).PageSize(20))

                                        .AllowTextWrap()

                                        .ShowSummary(true)

                                        .IsResponsive(true)

                                        .EnableResponsiveRow(true)

                                        .ScrollSettings(col => col.EnableTouchScroll(true))

                                        .SummaryRow(row =>

                                        {

                                            row.Title("Razem godzin:").SummaryColumns(col => { col.SummaryType(SummaryType.Custom).CustomSummaryValue("TimeSpanCounter").DisplayColumn("SpendTime").Format("{0:D2}").Add(); }).Add();

                                        })

                                        .Columns(col =>

                                        {

                                            col.Field("Subject").HeaderText("Tytuł").Add();

                                            col.Field("Author").HeaderText("Autor").TextAlign(TextAlign.Right).Add();

                                            col.Field("Company").HeaderText("Firma").TextAlign(TextAlign.Right).Add();

                                            col.Field("Category").HeaderText("Kategoria").TextAlign(TextAlign.Right).Add();

                                            col.Field("Status").HeaderText("Status").TextAlign(TextAlign.Left).Add();

                                            col.Field("SpendTime").HeaderText("Czas spędzony").Template("{{value:SpendTime.TotalHours}}:{{value:SpendTime.Minutes}}:{{value:SpendTime.Seconds}}").Add();

                                            col.Field("ActionDateTime").HeaderText("Ostatnia modyfikacja").Format("{0:yyyy-MM-dd}").Add();

                                            col.Field("Technic").HeaderText("Technik").TextAlign(TextAlign.Left).Add();

                                        }))

</div>

Thanks for help :) Regardsss

[Padmavathy Kamalanathan]

Hi Bart,

Thanks for contacting Syncfusion Forums.

QUERY: Fill grid after submit without refreshing page

You have mentioned that you are filling grid after form submit. But you have assigned data source to grid with "DataSource" property. Also you have button "show data". But we can't get what you are doing in button click. 

Please share us below details so that we could help you to resolve your issue,

1) Please explain us your requirement with more clarity( whether you need to render grid in form submit or bind data  to it in form submit.

2) Please share us your complete grid rendering code zipped (if possible)

3) Screenshot of error (if any)

4) version details

If you have further queries, please get back to us.

Regards,

Padmavathy Kamalanathan

[Bart]

Hi Bart,

Thanks for contacting Syncfusion Forums.

QUERY: Fill grid after submit without refreshing page

You have mentioned that you are filling grid after form submit. But you have assigned data source to grid with "DataSource" property. Also you have button "show data". But we can't get what you are doing in button click. 

Please share us below details so that we could help you to resolve your issue,

1) Please explain us your requirement with more clarity( whether you need to render grid in form submit or bind data  to it in form submit.

2) Please share us your complete grid rendering code zipped (if possible)

3) Screenshot of error (if any)

4) version details

If you have further queries, please get back to us.

Regards,

Padmavathy Kamalanathan

Hi Padmavathy Kamalanathan, ok I will try to explain.

I am using 15.4450.0.17 syncfusion version in this project.

I really would like to get the following effect:

1) when I open this page the grid doesn't have to be rendered. This grid can be rendered after form submitting, of course with data.

If the first option is not possible:

2) when I open this page the grid is empty and will be filled after submit.

The code which I would like to improve is in the attachment.

Regards

Attachment: excod_19d4e941.7z

[Rajapandi Ravi]

Hi Bart, 

 

Thanks for the update. 

 

From analyzing your query we understand you want to render the grid after the form submit. We suggest you to follow the below way to achieve your requirement. Please refer the below code example for more information. 

Index.cshtml 

 

<form> 

    OrderID: <br> <input type="text" name="OrderID" /> 

    <br> 

    CustomerName: <br> <input type="text" name="CustomerName" /> 

    <br> 

    <button type="button" id="button">Submit</button> 

</form> 

 

 

 

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

                .AllowPaging().PageSettings(page => page.PageSize(12)) 

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

                       .Columns(col => 

                       { 

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

                           col.Field("EmployeeID").HeaderText("Employee ID").Add(); 

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

                           col.Field("ShipCity").HeaderText("Ship City").EditType(EditingType.DropdownEdit).Add(); 

                       }) 

) 

 

<script> 

    document.getElementById('button').onclick = function()  { 

        var data = @Html.Raw(Json.Encode(ViewData["datasource"]));  //It helps to get the data from server side 

        $("#Grid").ejGrid("dataSource", data);                      //Set data to the datasource property of grid. 

    } 

</script> 

HomeController.cs 

 

public ActionResult Index() 

        { 

            if (order.Count() == 0) 

                BindDataSource(); 

           ViewBag.datasource = order; 

            ViewData["datasource"] = order; 

            return View(); 

        } 

public void BindDataSource() 

        { 

            if (order.Count() == 0) 

            { 

                int code = 10000; 

                for (int i = 1; i < 10; i++) 

                { 

                    order.Add(new OrderDetails(code + 1, "ALFKI", i + 0, 2.3 * i, new string[] { "Berlin" }, new DateTime(2019, 12, 12, 23, 40, 20))); 

                    order.Add(new OrderDetails(code + 2, "ANATR", i + 2, 3.3 * i, new string[] { "Madrid" }, new DateTime(2019, 12, 11, 23, 50, 20))); 

                    order.Add(new OrderDetails(code + 3, "ANTON", i + 1, 4.3 * i, new string[] { "Cholchester" }, new DateTime(2019, 12, 10, 23, 30, 50))); 

                    order.Add(new OrderDetails(code + 4, "BLONP", i + 3, 5.3 * i, new string[] { "Marseille" }, new DateTime(2019, 12, 13, 23, 50, 50))); 

                    order.Add(new OrderDetails(code + 5, "BOLID", i + 4, 6.3 * i, new string[] { "Tsawassen" }, new DateTime(2019, 12, 14, 23, 55, 55))); 

                    code += 5; 

                } 

            } 

 

        } 

Regards, 

Rajapandi R