1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Populate grid on button click

Populate grid on button click

Hi,

I would like to load the page with an empty grid (this is easy enough and already done). Then I would like to have a few text fields and drop down controls for user input as well as a button to fetch the data. I would also like to rather use a modal popup to show these user input fields. Once all the user input has been populated, the user will click the button and I would then need to fetch the data from SQL Database using a stored procedure and passing the user inputs as parameters. Once the data is fetched, the grid needs to populate. 

Does anyone have any examples of how to achieve this?

I know this is probably very trivial, but I have no idea how to achieve this in MVC using Syncfusion controls. 

13 Replies 1 reply marked as answer
SK Sujith Kumar Rajkumar Syncfusion Team April 7, 2021 12:10 PM UTC

Hi Eddie, 
 
Greetings from Syncfusion support. 
 
Based on the provided information we could understand that your requirement is to bind dynamic data to the Grid by fetching it from back-end based on values sent in the request. You can achieve it using ajax call to send request to your back end along with the required input values, return back the data to the client and then parse the returned data to JSON format and bind it to the Grid’s dataSource property. 
 
This is demonstrated in the below code snippets, 
 
View page 
// Button click event function 
document.getElementById('update').addEventListener('click', function (args) { 
    var inputValue = document.getElementById('inputVal').value; 
    // Ajax request is made to fetch data from back end 
    var ajax = new ej.base.Ajax({ 
        url: "/Home/GetGridData", 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        // Required input values can be sent along with the request 
        data: JSON.stringify({ inputValue: inputValue }), 
    }); 
    ajax.onSuccess = result => { 
        // Grid instance 
        var gridObj = document.getElementById('Grid').ej2_instances[0]; 
        // The returned result is parsed to JSON format and set as Grid’s data source 
        gridObj.dataSource = ej.data.DataUtil.parse.parseJson(result); 
    } 
    ajax.send(); 
}) 
 
Controller page 
public JsonResult GetGridData([FromBody]string inputValue) 
{ 
    // Here you can return the data based on the input received 
    return Json(OrdersDetails.GetAllRecords()); 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
 
This use-case of binding data through ajax request is documented in the below link which you can check for reference, 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 


Marked as answer
EW Eddie Willcox April 8, 2021 06:49 AM UTC

Thank you for the response. I have been able to populate the grid (using your example) on button click.

Now I need the ability to show a modal popup on another button to enter data into some user controls (there will be around 40 possible entries) and then use the data in these controls as parameters. The reason for the popup is so that the users can save their data entries as a template for when they need to rerun the grid in subsequent sessions without having to retype all the parameters

SK Sujith Kumar Rajkumar Syncfusion Team April 9, 2021 12:28 PM UTC

Hi Eddie, 
 
You’re welcome. As for this query – “Now I need the ability to show a modal popup on another button to enter data into some user controls”, we could understand that you need to open a modal popup with input controls and on clicking the dialog button the entered data needs to be passed to the controller method and then data needs to he returned and loaded in the Grid. The steps for achieving this requirement is explained below, 
 
You can use the EJ2 Dialog control to display a modal popup on button click. So initially render the EJ2 Dialog control with the required properties(including buttons with click event), render the required input controls inside it using the Dialog’s ContentTemplate property and set its visibility as false(so that it is not displayed on initial page load). This is demonstrated in the below code snippets, 
 
View page 
<div id="target"></div> 
@Html.EJS().Dialog("defaultDialog").Visible(false).Header("Get values").ContentTemplate(@<div> 
    <div> 
    @Html.EJS().TextBox("inputVal1").Placeholder("Enter value").Render() 
    </div><div> 
    @Html.EJS().TextBox("inputVal2").Placeholder("Enter value").Render() 
</div> 
</div>).ShowCloseIcon(true).IsModal(true).Target("#target").Buttons(ViewBag.DefaultButtons).Width("300px").Render() 
</div> 
 
Controller page 
public ActionResult Index() 
{ 
    // The dialog button model is defined with click event 
    List<DialogDialogButton> buttons = new List<DialogDialogButton>() { }; 
    buttons.Add(new DialogDialogButton() { Click = "dlgButtonOKClick", ButtonModel = new DefaultButtonModels() { content = "OK", isPrimary = true } }); 
    buttons.Add(new DialogDialogButton() {  ButtonModel = new DefaultButtonModels() { content = "CANCEL" } }); 
    ViewBag.DefaultButtons = buttons; 
    return View(); 
} 
 
public class DefaultButtonModels 
{ 
    public string content { get; set; } 
    public bool isPrimary { get; set; } 
} 
 
Now the code for opening this dialog is written in a button click event as demonstrated in the below code snippet, 
 
View page 
@Html.EJS().Button("normalbtn").Content("Open dialog").Render() 
 
<script> 
document.getElementById('normalbtn').onclick = function () { 
    // EJ2 Dialog instance is retrieved and the dialog is opened using its ‘show’ method 
    var dialogObj = document.getElementById('defaultDialog').ej2_instances[0]; 
    dialogObj.show(); 
}; 
</script> 
  
Finally in the EJ2 Dialog’s button click event, the input values(rendered inside the dialog) are retrieved, passed to the controller method(using ajax call) and data is returned back for binding in the Grid. This is demonstrated in the below code snippets, 
 
View page 
// Dialog button click event handler 
function dlgButtonOKClick(args) { 
    // The input values are retrieved 
    var inputValue1 = document.getElementById('inputVal1').value; 
    var inputValue2 = document.getElementById('inputVal2').value; 
    // Request is sent to fetch data from service 
    var ajax = new ej.base.Ajax({ 
        url: "/Home/GetGridData", 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        data: JSON.stringify({ inputValue1: inputValue1, inputValue2: inputValue2 }), 
    }); 
    ajax.onSuccess = result => { 
        var gridObj = document.getElementById('Grid').ej2_instances[0]; 
        // The returned JSON result is set as Grid’s data source 
        gridObj.dataSource = ej.data.DataUtil.parse.parseJson(result); 
    } 
    ajax.send(); 
    // The dialog is hidden 
    var dialogObj = document.getElementById('defaultDialog').ej2_instances[0]; 
    dialogObj.hide(); 
} 
 
Controller page 
public JsonResult GetGridData([FromBody]string inputValue1, [FromBody]string inputValue2) 
{ 
    // Here you can return the data based on the input received 
    return Json(OrdersDetails.GetAllRecords()); 
} 
 
We have modified the previously shared sample base on this for your reference. You can find it below, 
 
 
More details on the EJ2 Dialog control can be checked in the below documentation links, 
 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


EW Eddie Willcox April 12, 2021 01:12 PM UTC

Hi Sujith,

This is perfect thank you.

One last question, can the dialog be bound to a data source?

Just to make it clear for what I am trying to achieve:
I have a Syncfusion dropdownlist on the page that is bound to a SQL table and it displays the "template name" from the database. When I click the button to open the dialog, I need the dialog to show the data saved in the database table for this template. I also need to be add new records from here. Once the data is saved from the dialog, the user will then click the button to load the grid data.

The most important part is to use the dialog in a CRUD fashion and then use the data saved from the CRUD actions as values to pass to SQL to retrieve grid data and display the grid.

SK Sujith Kumar Rajkumar Syncfusion Team April 13, 2021 11:58 AM UTC

Hi Eddie, 
 
We are not able to clearly understand your requirement from the last query. So please confirm us the following information t understand it better, 
 
  • Is your requirement to display the content in EJ2 Dialog from controller action method?
  • Do you wish to retrieve the value entered in the dialog input in the controller action method? If so, in the previous update we had explained on how to access the input value(from the dialog) in the controller action method so please check it.
  • Elaborate on your requirement with pictorial or video demonstration(if possible).
 
Regards, 
Sujith R 


EW Eddie Willcox April 13, 2021 12:10 PM UTC

Hi Sujith,

What I have:
View:
  1. Syncfusion dropdownlist that is populated from the controller. 
  2. Syncfusion button to edit the data populated from the dropdownlist
  3. Syncfusion button to add more data to the database and should then be passed back to the dropdownlist
  4. Syncfusion button to populate the (this currently works perfectly if I manually populate the text fields)
Basically what I need is to first get the ID of the data in the dropdownlist once an item is selected in the dropdownlist. When I have the ID, I then need to press the button in number 2 above which must then show the dialog and populate fields in he dialog based on the item selected in the dropdownlist. These fields will then be used to populate the grid using the button in 4 above.

Similarly, when i press the button in 3 above, i need to be able to manually populate fields. These values must then save to the database and must then be used to populate the grid when the button in 4 above is pressed. 
I hope this makes sense.


SK Sujith Kumar Rajkumar Syncfusion Team April 14, 2021 12:05 PM UTC

Hi Eddie, 
 
Thanks for the update. 
 
From your query we could understand that your requirement is to show dropdown value from controller and on opening dialog modal update the dialog input controls value based on the selected dropdown value(by passing the dropdown value to the controller and returning input value based on that). The steps for achieving this are mentioned below, 
 
Initially define EJ2 Dropdown with view bag data. 
 
View 
@Html.EJS().DropDownList("dropdown").Placeholder("Select a value").Width("300px").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.DropData).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Value = "ID", Text = "CustomerID" }).Render() 
 
Now on button click(which opens the EJ2 Dialog), retrieve the dropdown value, send it to controller action method through ajax call, return dialog input controls value(based on the dropdown value) back to the client and then update the value in the input elements. 
 
View 
function onBeforeOpen(args) { 
    // EJ2 Dropdown value is retrieved 
    var dropVal = document.getElementById('dropdown').ej2_instances[0].text; 
    // Request is sent to fetch data from service 
    var ajax = new ej.base.Ajax({ 
        url: "/Home/GetDialogValue", 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        data: JSON.stringify({ dropValue: dropVal }), 
    }); 
    ajax.onSuccess = result => { 
         // The returned result is bound to the input elements 
        var parsedRes = JSON.parse(result); 
        document.getElementById('inputVal1').value = parsedRes["input1"]; 
        document.getElementById('inputVal2').value = parsedRes["input2"]; 
    } 
    ajax.send(); 
} 
 
Controller 
public JsonResult GetDialogValue([FromBody]string dropValue) 
{ 
    DialogValues res = new DialogValues(); 
    res.input1 = dropValue; 
    res.input2 = dropValue; 
    // Here you can return dialog input data based on the dropdown value received 
    return Json(res); 
} 
 
public class DialogValues 
{ 
    public string input1 { get; set; } 
    public string input2 { get; set; } 
} 
 
And on dialog ‘ok’ button click the input values will be sent to the controller action method from where the Grid data will be returned(Solution provided in the previous update). 
 
We have modified the previously shared sample based on this for your reference. You can find it below, 
 
 
But we are not able to understand your requirement from this query – “Similarly, when i press the button in 3 above, i need to be able to manually populate fields. These values must then save to the database and must then be used to populate the grid when the button in 4 above is pressed”. So for this, please share more details with video demonstration in order to clearly understand it. 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


EW Eddie Willcox April 14, 2021 12:56 PM UTC

Absolutely perfect. Thank you Sujith! This is exactly what I wanted.

SK Sujith Kumar Rajkumar Syncfusion Team April 15, 2021 05:40 AM UTC

Hi Eddie, 

You’re welcome. We are glad to hear that your query has been resolved. 

Regards, 
Sujith R 


EW Eddie Willcox April 15, 2021 01:43 PM UTC

Sorry, one final question on this. One of the controls I use is a checkbox. The database stores true or false for this checkbox. Can I mark the checkbox as checked from the JSON result that is returned from this if the result is true?:

function onBeforeOpen(args) { 
    // EJ2 Dropdown value is retrieved 
    var dropVal = document.getElementById('dropdown').ej2_instances[0].text; 
    // Request is sent to fetch data from service 
    var ajax = new ej.base.Ajax({ 
        url: "/Home/GetDialogValue", 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        data: JSON.stringify({ dropValue: dropVal }), 
    }); 
    ajax.onSuccess = result => { 
         // The returned result is bound to the input elements 
        var parsedRes = JSON.parse(result); 
        document.getElementById('inputVal1').value = parsedRes["input1"]; 
        document.getElementById('inputVal2').value = parsedRes["input2"]; 
    } 
    ajax.send(); 
} 

SK Sujith Kumar Rajkumar Syncfusion Team April 16, 2021 08:59 AM UTC

Hi Eddie, 
 
Yes, you can also return and set the checked state for the checkbox control rendered in the modal dialog of your application scenario. This is demonstrated in the below code snippets, 
 
Controller 
public JsonResult GetDialogValue([FromBody]string dropValue) 
{ 
    DialogValues res = new DialogValues(); 
    ... 
    // Here the required Boolean value can be returned 
    res.isChecked = true; 
    return Json(res); 
} 
 
public class DialogValues 
{ 
    public string input1 { get; set; } 
    public string input2 { get; set; } 
    public bool isChecked { get; set; } 
} 
 
View 
// Dialog beforeOpen event handler 
function onBeforeOpen(args) { 
    var dropVal = document.getElementById('dropdown').ej2_instances[0].text; 
    // Request is sent to fetch data from service 
    var ajax = new ej.base.Ajax({ ... }); 
    ajax.onSuccess = result => { 
        var parsedRes = JSON.parse(result); 
        ... 
        // The check value(returned from controller) is set as the ‘checked’ property value of the EJ2 Checkbox 
        document.getElementById('isChecked').ej2_instances[0].checked = parsedRes["isChecked"]; 
    } 
    ajax.send(); 
} 
 
Please find the modified sample below for your reference, 
 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


EW Eddie Willcox April 16, 2021 09:43 AM UTC

Great! This works exactly as I need it to.

SK Sujith Kumar Rajkumar Syncfusion Team April 19, 2021 06:01 AM UTC

Hi Eddie, 

Thanks for the update. We are glad to hear that the provided solution worked for you. 

Regards, 
Sujith R 


Loader.
Up arrow icon