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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Fill EJ.Grid after submit without refreshing page

Thread ID:

Created:

Updated:

Platform:

Replies:

149449 Nov 26,2019 10:19 PM UTC Dec 6,2019 01:04 PM UTC ASP.NET MVC 3
loading
Tags: Grid
Bart
Asked On November 26, 2019 10:19 PM UTC

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 [Syncfusion]
Replied On November 28, 2019 03:15 AM UTC

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
Replied On December 5, 2019 10:29 AM UTC

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 [Syncfusion]
Replied On December 6, 2019 01:04 PM UTC

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

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon