View with master / detail entry form

[Laurentiu LAZAR]

Hi,

I just won for a while a Syncfusion license and I wonder what can be appropriate for my scenario:

I started a MVC application (I must state that I am very new to MVC) where I have to deal with some "Create" views that must have an entry form for a main master model and one ore more child models in which I want to and one or more records in each, and all to be saved in related tables in one submit (anyway I think at an inline approach for being able to implement as a wizard style interface (e.g. step 1 a regular form for master model, step 2 a kind of editable grid (add new record) for first child model and so on). So since I am new also to MVC, also to Syncfusion I am here to ask:

what is the most suitable in Syncfusion MVC suite to my scenario?

where I found some relevant resources about how to deal with this master/detail scenario?

For accuracy I have to explain that the skeleton of my application is scaffold with Entity Framework (my models are made by the database first approach), the main controllers and views are the default one scaffold by VisualStudio (so I have all bunch of index, create, edit etc views).

I made also several ViewModels where I encapsulate several models by purpose of using them, and also I do some tweaks to controllers to reflect some customisation.

If relevant and permitted I will also post sample code.

I will add also a printscreen about what I hope to obtain at the end:

[Sellappandi Ramu]

Hi Laurentiu,

Thanks for using Syncfusion products.

We have analyzed your requirement based on that we have created a sample and it can be downloaded from following link location.

Sample link: http://www.syncfusion.com/downloads/support/forum/119130/MVCGrid1855375813.zip

In the above sample we have used two forms and two different tables. First form have the three input element as per your mentioned requirement, in second form we have render our Syncfusion grid control. We are able to perform CRUD operation in grid control. Here we are using grid toolbar items to perform the CRUD operation on the grid. After perform the operation in grid then press the save sales button to save the changes in table.

For your convenience we have attached online documentation link for CRUD operation in grid.

Online UG Documentation Link: http://help.syncfusion.com/ug/js/Documents/urladaptor.htm

Please refer the following solution for save the two forms value in two different table at single click button.

Form#1:

<div style="width:60%;margin:auto">

<div>

<h2>Create</h2>

@using (Html.BeginForm())

{

<fieldset>

<legend>SalesMain</legend>

<p>

<label for="ReferenceNo">ReferenceNo</label><br />

@*Input Control*@

@Html.EJ().MaskEdit("ReferenceNo").MaskFormat("").InputMode(InputMode.Text)

</p>

<p>

<label for="SalesDate">SalesDate</label><br />

@*DatePicker Control*@

@Html.EJ().DatePicker("SalesDate").Value("2/12/2013")

</p>

<p>

<label for="SalesPersion">SalesPersion</label><br />

@*Input Control*@

@Html.EJ().MaskEdit("SalesPersion").MaskFormat("").InputMode(InputMode.Text)

</p>

</fieldset>

}

</div><br />

Form#2:

<div>

@using (Html.BeginForm())

{

<fieldset>

<legend>Add Item</legend>

<p>

@*Render the grid controll*@

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

.Datasource(ds => ds.URL("BatchDataSource").BatchURL("BatchUpdate").Adaptor(AdaptorType.UrlAdaptor))

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

.ToolbarSettings(toolbar =>

{

toolbar.ShowToolbar().ToolbarItems(items =>

{

items.AddTool(ToolBarItems.Add);

items.AddTool(ToolBarItems.Edit);

items.AddTool(ToolBarItems.Delete);

});

})

.Columns(col =>

{

….

}))

</p>

</fieldset>

}

</div><br />

<div>

@*Rendering the button controll*@

@Html.EJ().Button("Save").Text("Sales Save").ClientSideEvents(e => e.Click("btnClick"))

</div>

</div>

<script>

//Here we are appending the first form value befor send the second form value to controller

$(document).ajaxSend(function (arg1, arg2, arg3) {

var No = $("#ReferenceNo").ejMaskEdit("get_StrippedValue");

var Persion = $("#SalesPersion").ejMaskEdit("get_StrippedValue");

var Date = $("#SalesDate").ejDatePicker("getValue");

var data = JSON.parse(arg3.data);

if (No != "")

data.Form = [{ ReferenceNo: No, SalesPersion: Persion, SalesDate: Date }];

arg3.data = JSON.stringify(data)

})

// Button click event for perform the save operation

function btnClick(args) {

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

grid.batchSave();

}

</script>

Please find the output screen shot for above attached sample.

Please try the above sample, if we misunderstood your query and provide us clear information regarding your requirements. The information provided would be more helpful for us to analyze the issue and provide you the response as early as possible.

Regards,
Sellappandi R

[Laurentiu LAZAR]

Hi

Thank you for reply.

This is exactly what I want to implement, indicating that the second table (items) must have as foreign-key ID field in the first table.
In fact, the two models that interests me (master and detail) are simplified as follows:
Jobs => IdJob, Title, Description and so on
JobSkills => IdSkill, IdJob, Title, Level, Description and so on
So it's important that the IdJob (not saved yet?!) To reach the parameter to JobSkills

To explain that interests me, to think of such a recruitment process: Jobs have a table and one or more tables to say JobSkill details, JobRequirements, JobLanguages etc.
When we want to add a new job in the first table we saved one summary record which includes for example the title, description, date added and which should receive as parameter current user ID.
Before we add the saving additional information in three tables for details (but now can be more recordings, eg for a particular job have the distinct requirements for instance, driving license, work permit and availability to work 12 h)
Only after this can we save the entire form.

Anyway I will check the example that you provide to me, and then and I will come back with more questions.

Btw, since I am new to this, please tell me if necessary, what assemblies to reference in project, and also what JS to reference in cshtml files

[Laurentiu LAZAR]

Also I forgot to say: I made my application using Entity Framework so the models are bind to their tables by EF.

[Sellappandi Ramu]

Hi Laurentiu,

Thanks for the update.

Query #1: “what assemblies to reference in project, and also what JS to reference in cshtml files”.

We would like to let you know that we have online documentation for manually MVC sample creation and required assembly references to project and also the step by step creation.

Please refer the following online documentation link.

Online Documentation link: http://help.syncfusion.com/ug/js/Documents/createmanually.htm

Please refer the below online documentation link for MVC grid creation and also provided the concepts and features for grid control.

Create Grid MVC Link: http://help.syncfusion.com/ug/js/Documents/createyourfirstgridinmvc.htm

Concepts And Features Link: http://help.syncfusion.com/ug/js/Documents/conceptsandfeatures22.htm

Query #2: “I made my application using Entity Framework so the models are bind to their tables by EF”

The provided sample we have used Entity Framework to perform the CRUD operation in our previous update of this incident.

Please try the above provided documentation link and let us know if you need further assistance on this.

Regards,
Sellappandi R

[Laurentiu LAZAR]

Hi,

I am still not able to run the sample you provide last week. After the header of grid is rendered, I have the gif for waiting that is rolling forever. If I inspect the page I have a "URL Protocol Method Result Type Received Taken Initiator Wait‎‎ Start‎‎ Request‎‎ Response‎‎ Cache read‎‎ Gap‎‎
/BatchDataSource HTTP POST 404 text/html 3.45 KB 46 ms XMLHttpRequest 844 0 15 31 0 23"

error. I created the sample database and I modified the entity connection in web.config for reflecting the correct connect information.

[Laurentiu LAZAR]

It seems that I am still not able to bind correct the data.

[Laurentiu LAZAR]

On the other hand, if I create from scratch controllers for the 3 entities (sales, salesdetails and suppliers) all is ok, I can see the data on their corresponding views.

In of the sample you provide for me I did not touch nothing of existing, except the connexion string in web.config (metadata for simpledbEntities2)

[Laurentiu LAZAR]

I found:

In :

.Datasource(ds => ds.URL("Home/BatchDataSource").BatchURL("Home/BatchUpdate").Adaptor(AdaptorType.UrlAdaptor))

you forgot the "controller" part of the URL  (it was eg BatchDataSource instead of Home/BatchDataSource).

But now I think that Detail grid must be (initially empty) . And after I click button "+" (add new item) and enter some data, the left top corner of editbox is red, and it saves nothing (yet!)

If I inspect page and take a look at the "BatchDataSource" the Params looks like:   {"requiresCounts":true,"Form":[{"ReferenceNo":"666","SalesPersion":"JohnyBravo","SalesDate":"2/12/2013"}]}

and the Response present the JSON for the existing 2 records.

So still not clear.

[Sellappandi Ramu]

Hi Laurentiu,

Thanks for the update.

We are happy to hear that your issues have been resolved.

We have used batch editing to grid, because in your first update you have mentioned like “all to be saved in related tables in one submit”. In batch editing modified records will not save to database until click the save button. In our provided sample we have used Sales Save button to store the modified records to data base. Please refer the screen shot below.

For your convenience we have attached online documentation link and also online sample link for batch editing in below.

Online Document Link: http://help.syncfusion.com/ug/js/Documents/batchediting.htm

Online Sample Link: http://mvc.syncfusion.com/demos/web/grid/batchediting

Please refer the above and get back to us if you have any concerns.

Regards,
Sellappandi R

[Laurentiu LAZAR]

Hi,

Thank you for reply.

It's true that what is proposed is what I need, but as I said in last message, still don't work for me. It does not save data.

It is true that when I hit "Add" button on grid it creates rows that I can edit, but Save still does nothing. Please see in my last message what I obtained from inspecting headers. By my knowledge it seems that is the JSON object for filling the grid with pre-existent data, but nothing about sending data from grid to controller (and from there to tables).

The only thing that I was able to solve was what I discovered about wrong spelled data source. But above this, I am not able to do more progress. I don't understand (yet) why nothing is saved.

Also as I stated in my last comment, I wonder if possible that initially the grid to display nothing (now it display all records in "SalesDetails" table). Anyway it was more desirable to me to be empty at start and to see only the added rows when I create a new record set).

[Sellappandi Ramu]

Hi Laurentiu,

We regret for the inconvenience caused.

Could you please share the following information to us to sort out the cause of the issue and provide the prompt solution?

1. Please set the break point in HomeController BatchUpdate method if it fires, when we press the Sales Save button.
2. Share the adopter details that you are using. In our provided sample we have used UrlAdaptor.
3. Share your controller and cshtml codes to us, it will help us to found the cause of the issue.

For your convenience we have attached video demonstration of the provided sample. Please refer it in the below link.

Video Link: http://www.syncfusion.com/downloads/support/forum/119130/Demo381947044.zip

Please get back to us with mentioned details.

Regards,
Sellappandi R

[Laurentiu LAZAR]

Hi Laurentiu,

We regret for the inconvenience caused.

Could you please share the following information to us to sort out the cause of the issue and provide the prompt solution?

1. Please set the break point in HomeController BatchUpdate method if it fires, when we press the Sales Save button.
2. Share the adopter details that you are using. In our provided sample we have used UrlAdaptor.
3. Share your controller and cshtml codes to us, it will help us to found the cause of the issue.

For your convenience we have attached video demonstration of the provided sample. Please refer it in the below link.

Video Link: http://www.syncfusion.com/downloads/support/forum/119130/Demo381947044.zip

Please get back to us with mentioned details.

Regards,
Sellappandi R

Hi,

Thank you for reply

I follow the advice, and I set some breaking points. Now I can say that it works. Anyway I try to slightly change the example to be more suitable for real life. I added a print screen of what I want to obtain at final:

So what I want to obtain at final:

1.) If possible to not load the existing records of SalesDetails table at the first load of page

2.) Somehow to prefill a new added field in this table with the (estimated) value of SalesID field from Sales table: I mean that I want that the record or records of SalesDetails that I will save to be bonded to the ID of record in Sales that also I will create

3.) To provide in SalesDetails grid a kind of lookup control prefilled with values from Suppliers table

In this way it will be more realistic, and I will be able then to adapt to my various scenarios.

For this I changed the SalesDetails table adding as follows:

//

[SalesID] int NULL,
[SupplierID] int NULL,

CONSTRAINT [SalesDetail_fk] FOREIGN KEY ([SalesID])
  REFERENCES [dbo].[Sales] ([SalesID])
  ON UPDATE NO ACTION
  ON DELETE NO ACTION,
CONSTRAINT [SalesDetail_fk2] FOREIGN KEY ([SupplierID])
  REFERENCES [dbo].[Suppliers] ([Id])
  ON UPDATE NO ACTION
  ON DELETE NO ACTION

//

Please consider the diagram provided:

Subsequently I modified the relevant models, repository, controllers and the view.

So please help me with some hints about how to achieve this behaviour that I intent.

I provide in archive the modified version of your sample, with actual DB script. I stripped out the packages folder for size of archive reason.

Attachment: MVCGrid_f02eef4a.rar

[Laurentiu LAZAR]

I come back here because I can't edit previous post.

Since I implement in a basic way some of my requirements, I have some issues:

because first is saved the detail data and then the master data, first of all I don't have the ID of SalesID so I have obvious an foreign key exception. So I think that first come to be save the Sales Order and then Sales Item.

supposing that solve, how to transmit this to the grid? Now I made the column visible for testing purpose and I fill manually the value (but since it not exist yet, it comes the exception).

supplementary to this I did not find a way that the editable field that I made as dropdown to have the value from Id, and the text from CompanyName (both in Suppliers table)

Anyway manually providing the SalesID I noticed that in Sales and subsequently in SalesDetail records are saved more than one time when exceptions occurs. Otherwise when providing an existing ID it save correct.

Attachment: MVCGrid_7bf54707.rar

[Laurentiu LAZAR]

Ok, now I save first the Sales, I have to find a way to put the value of ID in the grid of SalesDetail in it's column but at save moment because at add still don't have the value.

[Laurentiu LAZAR]

Now I was able to obtain from SalesRepository

in GetAllRecords() :

var lastID = orders.Last();

and respectively in Add():

var nextID = s.SalesID;

but I did not found how to pass this value to OrderRepository in Add():

s.SalesId = nextID //this is the value I want to assign

instead of:

s.SalesID = temp.SalesID;

[Sellappandi Ramu]

Hi Laurentiu,

We regret for the inconvenience caused. We are unable to get the attached sample, because the updates files are get corrupted.

Based on your requirement we have created a sample and it can be downloaded from following link location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119130/MVCGrid-238562256.zip

In the above sample we have used three tables Sales, SalesDetails and SupplierDetails and we have used ajaxSend method to store the Sales table reference number to the SalesDetails table reference number. Please refer the following code snippet.

$(document).ajaxSend(function (arg1, arg2, arg3) {

var No = $("#ReferenceNo").ejMaskEdit("get_StrippedValue");

var Persion = $("#SalesPersion").ejMaskEdit("get_StrippedValue");

var Date = $("#SalesDate").ejDatePicker("getValue");

var data = JSON.parse(arg3.data);

if (data.added)

data.added[0].ReferenceNo = No;

if (No != "")

data.Form = [{ ReferenceNo: No, SalesPersion: Persion, SalesDate: Date }];

arg3.data = JSON.stringify(data)
})

Query: To provide in SalesDetails grid a kind of lookup control prefilled with values from Suppliers table

In this way it will be more realistic, and I will be able then to adapt to my various scenarios.

We can achieved dropdown in grid column while editing by set EditType as dropdown. We have used DataSource method of column to bind SupplierDetails table to dropDown list. By using this way to bind the existing supplier to table dropdown. Please refer the following code snippet.

.Columns(col =>

{

col.Field("ReferenceNo").HeaderText("Item Number").IsPrimaryKey(true).Visible(false).Add(); col.Field("SupplierID").HeaderText("Supplier").EditType(EditingType.Dropdown).DataSource((List<object>)ViewData["SupplierID"]).Add();

col.Field("ItemName").HeaderText("Item Name").Add();

col.Field("Quantity").HeaderText("Quantity").Add();

col.Field("UnitPrice").HeaderText("Unit Price").Add();

}))

[Controller]

public ActionResult Index()

{

ViewData["SupplierID"] = SupplierID;

return View();

}

public List<object> SupplierID

{

get

{

var supplierID = new simpledbEntities3().SupplierDetails.Select(e => e.SupplierID).Distinct().ToList();

var SupplierID = new List<object>();

foreach (var id in supplierID)

{

SupplierID.Add(new { value = id, text = id });

}

return SupplierID;

}

}

Please try the above sample and get back to us if you have any concerns.

Regards,
Sellappandi R

[Laurentiu LAZAR]

Thank you again for reply.

Still not able to have a working sample. If I F11 into your last sample, I can find that still ReferenceNo is NULL when we have to save the data in second table. In what concerns the dropdown editor for Supplier I was already able to mimic but I think that is not the most desired behaviour since it bind the SupplierID (what is correct), but also display the same SupplierID , but in common usage is not practical, for end user is more natural to bind SupplierID and display SupplierName (or any other relevant text field).

I slightly modified the solution in respect to mimic a more realistic usage, so I copied all from Home/Index to for example Sales/Create. (I just keep also in Home/Index for having a reference that works).

In this scenario is odd that when I add a new row in grid it seems to be not editable and here I am stuck (it creates an empty row but I don't see any  controls in it).

Also as in my previous post, in BatchUpdate action I move first the call of:

SalesRepository.Add(Form);

since for being able to have in OrderRepository.Add(added) the ID of just created Sale, it must be saved before. But still don't understand how to pass the value (that is already saved) to corresponding column in grid before save the grid rows in second table.

I try again to attach the archive of sample (again I stripped the package folder for size of archive reason)

Attachment: MVCGrid_1bfc18b8.rar

[Laurentiu LAZAR]

Hi again,

I start a new sample from scratch, in which I will try to have more than one child grids related to main form. Please correct me if I am wrong, but I supposed that I have to create for each of them distinct "BatchdataSource" and "BatchUpdate" methods.

Anyway at this moment I still not able to send the value of last inserted ID.

In fact I don't understand here:

<script>
    //Here we are appending the first form value befor send the second form value to controller
    $(document).ajaxSend(function (arg1, arg2, arg3) {
        var No = $("#ReferenceNo").ejMaskEdit("get_StrippedValue");
        var Persion = $("#SalesPersion").ejMaskEdit("get_StrippedValue");
        var Date = $("#SalesDate").ejDatePicker("getValue");
        var data = JSON.parse(arg3.data);
        if (data.added)
            data.added[0].ReferenceNo = No;
        if (No != "")
            data.Form = [{ ReferenceNo: No, SalesPersion: Persion, SalesDate: Date }];
        arg3.data = JSON.stringify(data)
    })
    // Button click event for perform the save operation
    function btnClick(args) {
        var grid = $("#FlatGrid").ejGrid("instance");
        grid.batchSave();
    }
</script>

what is ReferenceNo? Is the value from filed of first form , or the value to be set to the filed of second form? In fact I don't understand exactly the AjaxSend(function(), meaning what comes in the 3 parameters (arg1, arg2, arg3)?

Because of this I don't know how to deal with, supposing that first form have let say 10 fields (for convenience, IdField1, Field2, Field3, ... Field10) and the grid of second form let say IdGridField1, IdField1, GridField2, GridField3.

[Sellappandi Ramu]

Hi Laurentiu,

Please find the response in below table.

Query	Response
1. Still not able to have a working sample. If I F11 into your last sample, I can find that still ReferenceNo is NULL when we have to save the data in second table.	For your kind information, we are setting the ReferenceNo value in ajaxSend method only. So initially the value of ReferenceNo will be Null. As we set ReferenceNo column visible property as false, we will not be able to give any value for ReferenceNo field while adding. Please refer the following output screen. Step 1: Before setting the ReferenceNo it will be zero. Step 2: After setting the ReferenceNo in ajaxSend method
2. In what concerns the dropdown editor for Supplier I was already able to mimic but I think that is not the most desired behaviour since it bind the SupplierID (what is correct), but also display the same SupplierID , but in common usage is not practical, for end user is more natural to bind SupplierID and display SupplierName (or any other relevant text field).	Based on your requirement, we have created a sample and it can be downloaded from following link: Sample Link: http://www.syncfusion.com/downloads/support/forum/119130/MVCGrid-1902642332.zip In the above sample we have used ForeignKeyValue to display the supplier name in the grid and dropdown. When we change the dropdown value, the corresponding supplierID value will be saved. Please refer the following code snippet. Note: When we use ForeignKeyField in column, it is not requiredto enable editType as dropDown. Because in ForeignKeyField the default edit type is dropDown. .Columns(col => { …. col.Field("SupplierID").HeaderText("Supplier").ForeignKeyField("SupplierID").ForeignKeyValue("text").DataSource((List<object>)ViewData["Supplier"]).Add(); …. })) [Controller] public List<object> Supplier { get { var supplier = new simpledbEntities3().SupplierDetails.Distinct().ToList(); var SupplierID = new List<object>(); foreach (var id in supplier) { SupplierID.Add(new { SupplierID = id.SupplierID, text = id.SupplierName }); } return SupplierID; } }
3. since for being able to have in OrderRepository.Add(added) the ID of just created Sale, it must be saved before. But still don't understand how to pass the value (that is already saved) to corresponding column in grid before save the grid rows in second table. I try again to attach the archive of sample (again I stripped the package folder for size of archive reason)	Since the attached sample is requesting for password, we were unable to extract the sample in our end. So please provide the sample in zip format, which will help us to provide the prompt solution.
4. what is ReferenceNo? Is the value from filed of first form , or the value to be set to the filled of second form? In fact I don't understand exactly the AjaxSend(function(), meaning what comes in the 3 parameters (arg1, arg2, arg3)?	For your kind information, the ReferenceNo is the one field of the both form tables (Sales and SalesDetail). 1. First form ReferenceNo, which is given by customer will be saved in both tables ReferenceNo field as your requirement. 2. The Grid table does not display the ReferenceNo column in run time when we are adding the new record to grid. We are setting the SalesMain(First Form) RefernceNo to AddItem(Second Form) ReferenceNo. 3. AjaxSend method used to merge values of two forms before sending the request to controller. Because we are unable to get the form value in server side, we are sending the grid updated value in args3 (third parameter). We can get the all data in third parameter and we can customize the value based on our requirement before sending to the controller.

Please let us know if you have any concerns.

Regards,
Sellappandi R

[Sourav Mondal]

you can check the complete source code with step by step guidelines + video tutorial here 

http://dotnetawesome.blogspot.com/2015/09/how-to-create-master-detail-entry-form-in-aspnet-mvc4.html

www.youtube.com/watch?v=ir9cMbNQP4w

 

[Balaji Marimuthu]

Hi Sourav,

We have analyzed the provided video, images and URL link (How to create master detail entry form in ASP. NET MVC 4), but we are unsure about your requirement.

So, please explain your requirement clearly that will be helpful to analyze and provide prompt solution at the earliest.

Regards,
Balaji Marimuthu

[Chintan Gandhi]

HI

Laurentiu LAZAR,

Can you send me the working example of Sale, SalesDetail and Supplier.

I Attached the edmx Design view.

Attachment: edmx_fdbb6a14.rar

[Jayaprakash Kamaraj]

Hi Chintan, 

We believe that Laurentiu Lazar, will update you the requested details. 

 

Regards, 

 

Jayaprakash K. 

[Laurentiu LAZAR]

I have to check in my archives, is there, but have to find.

[Ramya Jayapandi]

Hi Laurentiu Lazar, 

  

 

Thanks for the update. 

  

Regards,  

Ramya J 

[Carlos Palomino]

Hi Laurentiu, please if you can share the information.

Thank you.

Greetings.

[Muhammad Nasheed]

Hi Laurentiu,

Please find the response in below table.

Query	Response
1. Still not able to have a working sample. If I F11 into your last sample, I can find that still ReferenceNo is NULL when we have to save the data in second table.	For your kind information, we are setting the ReferenceNo value in ajaxSend method only. So initially the value of ReferenceNo will be Null. As we set ReferenceNo column visible property as false, we will not be able to give any value for ReferenceNo field while adding. Please refer the following output screen. Step 1: Before setting the ReferenceNo it will be zero. Step 2: After setting the ReferenceNo in ajaxSend method
2. In what concerns the dropdown editor for Supplier I was already able to mimic but I think that is not the most desired behaviour since it bind the SupplierID (what is correct), but also display the same SupplierID , but in common usage is not practical, for end user is more natural to bind SupplierID and display SupplierName (or any other relevant text field).	Based on your requirement, we have created a sample and it can be downloaded from following link: Sample Link: http://www.syncfusion.com/downloads/support/forum/119130/MVCGrid-1902642332.zip In the above sample we have used ForeignKeyValue to display the supplier name in the grid and dropdown. When we change the dropdown value, the corresponding supplierID value will be saved. Please refer the following code snippet. Note: When we use ForeignKeyField in column, it is not requiredto enable editType as dropDown. Because in ForeignKeyField the default edit type is dropDown. .Columns(col => { …. col.Field("SupplierID").HeaderText("Supplier").ForeignKeyField("SupplierID").ForeignKeyValue("text").DataSource((List<object>)ViewData["Supplier"]).Add(); …. })) [Controller] public List<object> Supplier { get { var supplier = new simpledbEntities3().SupplierDetails.Distinct().ToList(); var SupplierID = new List<object>(); foreach (var id in supplier) { SupplierID.Add(new { SupplierID = id.SupplierID, text = id.SupplierName }); } return SupplierID; } }
3. since for being able to have in OrderRepository.Add(added) the ID of just created Sale, it must be saved before. But still don't understand how to pass the value (that is already saved) to corresponding column in grid before save the grid rows in second table. I try again to attach the archive of sample (again I stripped the package folder for size of archive reason)	Since the attached sample is requesting for password, we were unable to extract the sample in our end. So please provide the sample in zip format, which will help us to provide the prompt solution.
4. what is ReferenceNo? Is the value from filed of first form , or the value to be set to the filled of second form? In fact I don't understand exactly the AjaxSend(function(), meaning what comes in the 3 parameters (arg1, arg2, arg3)?	For your kind information, the ReferenceNo is the one field of the both form tables (Sales and SalesDetail). 1. First form ReferenceNo, which is given by customer will be saved in both tables ReferenceNo field as your requirement. 2. The Grid table does not display the ReferenceNo column in run time when we are adding the new record to grid. We are setting the SalesMain(First Form) RefernceNo to AddItem(Second Form) ReferenceNo. 3. AjaxSend method used to merge values of two forms before sending the request to controller. Because we are unable to get the form value in server side, we are sending the grid updated value in args3 (third parameter). We can get the all data in third parameter and we can customize the value based on our requirement before sending to the controller.

Please let us know if you have any concerns.

Regards,
Sellappandi R

Hi,

I have similar requirement. I downloaded sample application  http://www.syncfusion.com/downloads/support/forum/119130/MVCGrid-238562256.zip.

[Muhammad Nasheed]

Hi,

I have similar requirement. I download sample application. I downloaded sample code from  http://www.syncfusion.com/downloads/support/forum/119130/MVCGrid-238562256.zip. I am using VS 2105 and Syncfusion MVC 5(V. 14.2.0.28). The application runs but grid does not populate. Ajax circle keeps on running on the grid. BatchDataSource() function is not reached as I put a breakdown on first line. Please guide how to fix it.

Ashhar

[Jayaprakash Kamaraj]

Hi Muhammad, 

 

We were unable to reproduce the issue at our end. Please share the following information to find the cause of the issue.    

                                                                                                                

1.       Is there any script error or exception thrown in your project? If so, attach the screenshot of your stack trace.      

2.       Did you face the issue in initial rendering or any actions performed in Grid?    

3.       Share the video to show the issue. 

4.       Issue replication procedure. 

5.       An issue reproducing sample if possible or replicate the issue in the following sample.   

Sample: http://www.syncfusion.com/downloads/support/forum/119130/ze/MVCGrid1872640628 

Regards, 

Jayaprakash K. 

[Laurentiu LAZAR]

For who asked above, unfortunately I am not able to find in this moment the archive of project (because the project is stalled) but I come back when I find it or when I have time to reproduce it.

[Jayaprakash Kamaraj]

Hi Laurentiu, 

 

Thanks for the update. 

 

Regards, 

 

Jayaprakash K. 

[Muhammad Nasheed]

Hi Muhammad, 

 

We were unable to reproduce the issue at our end. Please share the following information to find the cause of the issue.    

                                                                                                                

1.       Is there any script error or exception thrown in your project? If so, attach the screenshot of your stack trace.      

2.       Did you face the issue in initial rendering or any actions performed in Grid?    

3.       Share the video to show the issue. 

4.       Issue replication procedure. 

5.       An issue reproducing sample if possible or replicate the issue in the following sample.   

Sample: http://www.syncfusion.com/downloads/support/forum/119130/ze/MVCGrid1872640628 

Regards, 

Jayaprakash K. 

Hi,

Please find flash file for the steps I am following. This time even grid could not render properly:

1. Initially reference of Syncfusion assemblies were void.

2. I converted application to Syncfusion Application It add valid references to project of version  Syncfusion MVC 5(V. 14.2.0.28)

3. Ran project it showed error version 13 refernces in web.config

4. Updated references to 14 in web.config and removed old references.

5. Ran project is showd error following error.

syncfusion unhandled . . . exception at line 22 column 8860 in jquery-1.10.2.min.js avascript member not found

Attachment: SFMVCGridIssue_toolbar_54507eda.zip

[Muhammad Nasheed]

Hi Muhammad, 

 

We were unable to reproduce the issue at our end. Please share the following information to find the cause of the issue.    

                                                                                                                

1.       Is there any script error or exception thrown in your project? If so, attach the screenshot of your stack trace.      

2.       Did you face the issue in initial rendering or any actions performed in Grid?    

3.       Share the video to show the issue. 

4.       Issue replication procedure. 

5.       An issue reproducing sample if possible or replicate the issue in the following sample.   

Sample: http://www.syncfusion.com/downloads/support/forum/119130/ze/MVCGrid1872640628 

Regards, 

Jayaprakash K. 

Hi,

Please find flash file for the steps I am following. This time even grid could not render properly:

1. Initially reference of Syncfusion assemblies were void.

2. I converted application to Syncfusion Application It add valid references to project of version  Syncfusion MVC 5(V. 14.2.0.28)

3. Ran project it showed error version 13 refernces in web.config

4. Updated references to 14 in web.config and removed old references.

5. Ran project is showd error following error.

syncfusion unhandled . . . exception at line 22 column 8860 in jquery-1.10.2.min.js avascript member not found

Attachment: SFMVCGridIssue_toolbar_54507eda.zip

Hi,

Update:

The browser was in compatible mode that's why it was not rendering the grid.

Now please view video to see the circling ajax icon without populating data.

Ashhar

Attachment: SFMVCGridIssue1_d58b47b4.zip

[Muhammad Nasheed]

Hi,

Please find flash file for the steps I am following.

1. Initially reference of Syncfusion assemblies were void.

2. I converted application to Syncfusion Application It add valid references to project of version  Syncfusion MVC 5(V. 14.2.0.28)

3. Ran project it showed error version 13 refernces in web.config

4. Updated references to 14 in web.config and removed old references.

5. Ran projectf. The grid is rendered but not populated.

Attachment: SFMVCGridIssue1_8c83a1ba.zip

[Muhammad Nasheed]

Progress :)

After some R&D added following two lines at top of the index.cshtml and got data in the grid.

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

But its not over yet. On editing data in the grid got following error message.

Unhandled exception at line 16, column 4815 in http://localhost:50498/Scripts/jquery.validate.min.js

0x800a138f - JavaScript runtime error: Unable to get property 'settings' of undefined or null reference

Please advise.

[Jayaprakash Kamaraj]

Hi Muhammad, 

Query 1: The grid is rendered but not populated. 

The reported issue has occurred since the URL path wasn’t relative in the project. Please refer to the below knowledge base documentation where we have discussed about this.   

 

https://www.syncfusion.com/kb/3013/how-to-change-the-url-action-path-for-the-grid-crud-operations 

Please find the sample and code example.  

Sample: http://www.syncfusion.com/downloads/support/forum/119130/ze/MVCGrid281453156 

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

                    .Datasource(ds => ds.URL("/Home/BatchDataSource").BatchURL("/Home/BatchUpdate").Adaptor(AdaptorType.UrlAdaptor)) 

.. 

                   })) 

Query 2: But its not over yet. On editing data in the grid got following error message. 

Unhandled exception at line 16, column 4815 in http://localhost:50498/Scripts/jquery.validate.min.js 

0x800a138f - JavaScript runtime error: Unable to get property 'settings' of undefined or null reference 

We analyzed the above issue and found the cause of the issue is that validating a form within another form. While editing/adding a record in grid, we have created a form to have the input elements corresponding to edited/added records.

So only the reported issue has occurred. It is a not possible to validate a form which contains another form. So we suggest you to render the grid outside the form element. 

 

Please refer to the below online links where this query has been discussed.  

 

http://stackoverflow.com/questions/379610/can-you-nest-html-forms 

 

http://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form 

 

Regards, 

 

Jayaprakash K. 

[Daniel]

Hi Laurentiu,

Thanks for using Syncfusion products.

We have analyzed your requirement based on that we have created a sample and it can be downloaded from following link location.

Sample link: http://www.syncfusion.com/downloads/support/forum/119130/MVCGrid1855375813.zip

In the above sample we have used two forms and two different tables. First form have the three input element as per your mentioned requirement, in second form we have render our Syncfusion grid control. We are able to perform CRUD operation in grid control. Here we are using grid toolbar items to perform the CRUD operation on the grid. After perform the operation in grid then press the save sales button to save the changes in table.

For your convenience we have attached online documentation link for CRUD operation in grid.

Online UG Documentation Link: http://help.syncfusion.com/ug/js/Documents/urladaptor.htm

Please refer the following solution for save the two forms value in two different table at single click button.

Form#1:

<div style="width:60%;margin:auto">

<div>

<h2>Create</h2>

@using (Html.BeginForm())

{

<fieldset>

<legend>SalesMain</legend>

<p>

<label for="ReferenceNo">ReferenceNo</label><br />

@*Input Control*@

@Html.EJ().MaskEdit("ReferenceNo").MaskFormat("").InputMode(InputMode.Text)

</p>

<p>

<label for="SalesDate">SalesDate</label><br />

@*DatePicker Control*@

@Html.EJ().DatePicker("SalesDate").Value("2/12/2013")

</p>

<p>

<label for="SalesPersion">SalesPersion</label><br />

@*Input Control*@

@Html.EJ().MaskEdit("SalesPersion").MaskFormat("").InputMode(InputMode.Text)

</p>

</fieldset>

}

</div><br />

Form#2:

<div>

@using (Html.BeginForm())

{

<fieldset>

<legend>Add Item</legend>

<p>

@*Render the grid controll*@

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

.Datasource(ds => ds.URL("BatchDataSource").BatchURL("BatchUpdate").Adaptor(AdaptorType.UrlAdaptor))

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

.ToolbarSettings(toolbar =>

{

toolbar.ShowToolbar().ToolbarItems(items =>

{

items.AddTool(ToolBarItems.Add);

items.AddTool(ToolBarItems.Edit);

items.AddTool(ToolBarItems.Delete);

});

})

.Columns(col =>

{

….

}))

</p>

</fieldset>

}

</div><br />

<div>

@*Rendering the button controll*@

@Html.EJ().Button("Save").Text("Sales Save").ClientSideEvents(e => e.Click("btnClick"))

</div>

</div>

<script>

//Here we are appending the first form value befor send the second form value to controller

$(document).ajaxSend(function (arg1, arg2, arg3) {

var No = $("#ReferenceNo").ejMaskEdit("get_StrippedValue");

var Persion = $("#SalesPersion").ejMaskEdit("get_StrippedValue");

var Date = $("#SalesDate").ejDatePicker("getValue");

var data = JSON.parse(arg3.data);

if (No != "")

data.Form = [{ ReferenceNo: No, SalesPersion: Persion, SalesDate: Date }];

arg3.data = JSON.stringify(data)

})

// Button click event for perform the save operation

function btnClick(args) {

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

grid.batchSave();

}

</script>

Please find the output screen shot for above attached sample.

Please try the above sample, if we misunderstood your query and provide us clear information regarding your requirements. The information provided would be more helpful for us to analyze the issue and provide you the response as early as possible.

Regards,
Sellappandi R

Hi,

I have a requirement very similar, I tried to use the code but this example is for EJ controls, I using EJS controls, How can I implement it for EJS controls?

Thanks,

[Sujith Kumar Rajkumar]

Hi Daniel, 

We have prepared a similar sample with the EJ2 controls based on your requirement. You can download it from the below link, 

Sample: https://www.syncfusion.com/downloads/support/forum/153376/ze/EJ2GridApplication1793494257  

Let us know if you have any concerns. 

Regards, 

Sujith R