Queries on syncfusion MVC Grid

5 Replies
2 Participants

Created by
SI sinha

Platform
ASP.NET MVC

Platform
ASP.NET MVC

Control
Grid

Created On
Oct 7, 2015 02:42 PM UTC

Last Activity On
Oct 12, 2015 07:40 AM UTC

Want to subscribe?
SIGN IN

Hi guys,

I have some doubts on following requirements... Pls guide me through.

1)I could read Country_of_Origin as args.ejDropDownList("model.text"); in grid. But i need the model.value on dropdown selection.

2)I need TrackNumber value, which doesn't come from database and this is available dynamically during saving in InlineForm editing.

3) I want to assign Qty value in grid as '1' by default

.Columns(col =>

{

col.Field("AUTO_ID").HeaderText("AUTO ID").IsPrimaryKey(true).Visible(false).Width(40).Add();

col.Field(" ").HeaderText("TrackNumber").Width(55).Add();

col.Field(" ").HeaderText("Qty").Width(80).Add();

col.Field(Html.NameFor(m => m.Country_of_Origin).ToString()).HeaderText(Html.DisplayNameFor(m => .Country_of_Origin).ToString()).TextAlign(TextAlign.Right).EditType(EditingType.Dropdown).Width(70)

.EditTemplate(t => t.Create("create").Read("read").Write("writeCountry")).Add();

}

var cooData = @Html.Raw(Json.Encode((IEnumerable<object>)ViewBag.Country))

function create() {

return "<input>";

}

function read(args) {

return args.ejDropDownList("model.text");

}

function writeCountry(args) {

args.element.ejDropDownList({

width: "100%",

dataSource: cooData,

allowGrouping: true,

fields: { text: "countryname", value: "country_code", category: "country" },

value: args.rowdata !== undefined ? args.rowdata["countryname"] : "",

});

}

Thanks,

Sinha

5 Replies

RU Ragavee U S Syncfusion Team October 8, 2015 09:53 AM UTC

Hi Sinha,

Query #1: I could read Country_of_Origin as args.ejDropDownList("model.text"); in grid. But i need the model.value on dropdown selection.

We can get the dropdown value upon selection using the “Select” event of the ejDropDownList. Please refer to the following code example.

function writeCountry(args) {

args.element.ejDropDownList({

width: "100%",

dataSource: cooData,

allowGrouping: true,

fields: { text: "ShipCountry", value: "CountryCode", category: "country" },

value: args.rowdata !== undefined ? args.rowdata["ShipCountry"] : "",

select: "select" //binding the select event of the dropdownlist to select function

});

}

function select(args) {

alert(args.value); //get the dropdown list selected value

}

</script>

Query #2: I need TrackNumber value, which doesn't come from database and this is available dynamically during saving in InlineForm editing

Since we have processed the editing/add operation by binding the FieldName as “id” attribute of the input element, it is essential to specify the Field property of the Grid Columns. Even though the column value is not obtained from dataBase, we can bind a dummy field as “FieldName” for the column.

Also, if you need to perform grid action such as CRUD, sorting, grouping etc. on a column, then it is essential to specify the FieldName for that column where the corresponding field should be present in the grid dataSource. Else if you want to simply display the column in grid, it is not necessary to define the Field property for the column.

We can get the value of the TrackNumber column using the id of the edited input element in the ActionBegin event of the Grid while the requestType is “save”. Please refer to the following code example.

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

. . . . .

.Columns(col =>

{

col.Field("OrderID").IsPrimaryKey(true).Add();

col.Field("CusID").HeaderText("CustomerID").TextAlign(TextAlign.Left).Add();//CusID field is not present in grid dataSource

. . . .

})

.ClientSideEvents(eve=>eve.ActionBegin("begin"))

)

</div>

function begin(args) {

if (args.requestType == "save")

alert($("#GridCusID").val());//Grid – Grid id, CusID - FieldName

}

</script>

Query #3: I want to assign Qty value in grid as '1' by default

We need few clarifications from your end on the above query. Could you please tell if you are expecting,

1. To display value for the “Qty” column initially as 1

2. Or to maintain the value in grid dataSource such that while CRUD operations, the value gets updated accordingly.

3. Or while adding a record to grid, the default value of the Qty column to be “1”

For your convenience, we have created a sample, which can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/120714/ze/Sample524368822

Regards,
Ragavee U S.

SI sinha October 8, 2015 02:31 PM UTC

Hi Ragavee,

Thanks for the Query #1, Query #2, works great at my side.

For Query #3, Initially i want to display Qty as 1. After saving on editing it should reflect the same in grid.

I would also like to know that how would i pass multiple parameters to controller from view. As in below case i could only pass either grid data

or GridTNumber, ReceiptType but not all. Can u just check on this?

function save(args) {

if (args.requestType == "save" && flag) {

flag = true;

var record = args.data;

var obj = {};

obj.DReceipts = record;

obj.GridTNumber = $("#GridTNumber").val();

obj.ReceiptType = receiptType;

args.cancel = false;

$.ajax({

url: "/Receipts/ReceiptsUpdate",

type: "POST",

data: obj,

success: function (data) {

alert('Update Success');

error: function (e) {

args.cancel = true;

}

});

}

if (flag == false)

flag = true;

}

public ActionResult ReceiptsUpdate(DReceipts value, string GridTNumber, string ReceiptType)

{

}

RU Ragavee U S Syncfusion Team October 9, 2015 06:27 AM UTC

Hi Sinha,

Query #1: Initially i want to display Qty as 1. After saving on editing it should reflect the same in grid.

We can achieve the above requirement using the “Template” property of Grid. The “Template” property is used to customize the column content. Please refer the below code example.

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

. . . .

.Columns(col =>

{

. . . . .

col.Field("EmpID").HeaderText("Employee ID").Template("1").Add();//the content rendered within the column will be 1 for all rows

. . . .

})

)
</div>

Query #2: how would i pass multiple parameters to controller from view

We went through the code snippet shared. We suggest you to pass the parameter as stringified JSON data in the AJAX POST operation. Please refer to the following code example.

function begin(args) {

if (args.requestType == "save") {

var record = args.data;

var obj = {};

obj.value = record;

obj.GridTNumber = $("#GridCusID").val();

obj.ReceiptType = $("#GridEmpID").val();

args.cancel = false;

$.ajax({

url: "/Home/Update",

type: "POST",

contentType: "application/json",

data: JSON.stringify(obj),

success: function (data) {

alert('Update Success');

error: function (e) {

args.cancel = true;

}

});

}
}

[controller]

public ActionResult Update(EditableOrder value, string GridTNumber, string ReceiptType)
{
}

We have modified the previously updated sample with the above solutions, which can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/120714/ze/Sample_modified-2022233347

Regards,
Ragavee U S.

SI sinha October 9, 2015 07:27 AM UTC

Hi Ragavee,

For query 2, I have tried a lot with Json.stringify(obj) but contentType: "application/json"

has done the magic. Thank a ton for that.

In query1,

The EmpID as 1 by default serves my partial requirement, but I'm not able to edit in inlineform editing. Here, i want to edit and save the modified value such as 2 or 3 or anything.

Thanks,

Sinha

RU Ragavee U S Syncfusion Team October 12, 2015 07:40 AM UTC

Hi Sinha,

Query: The EmpID as 1 by default serves my partial requirement, but I'm not able to edit in inlineform editing. Here, i want to edit and save the modified value such as 2 or 3 or anything.

In the sample provided in last update, we used Template property to bind value for the “EmpID” column as 1 by default. Editing feature is not supported for template column and also in order to make changes, save and maintain the edited value, the corresponding field should be present in the grid dataSource.

We have achieved your requirement using the Load event of the Grid. In the Load event of the Grid, we have added a new column “EmpID” to the grid dataSource and stored the value as 1 by default. So initially while rendering the grid, the value for the “EmpID” will be displayed as 1 by default. Also upon editing this “EmpID” column, the modified value will be saved in the grid dataSource accordingly.

Please refer to the following code example.

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

. . . .

.Columns(col =>

{

. . . .

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

. . . . .

})

.ClientSideEvents(eve=>eve.ActionBegin("begin").Load("load"))

)

</div>

function load(args) {

for (var i = 0; i < this.model.dataSource.length; i++)

this.model.dataSource[i].EmpID = 1;

}

</script>

For your convenience, we have modified the previopusly updated sample with the above solution, which can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/120714/ze/Sample_updated668164808

Regards,
Ragavee U S.

Need More Help?

Get personalized assistance from our support team.

Contact Support

5 Replies
2 Participants
Want to subscribe?
SIGN IN
Created by
SI sinha
Platform
ASP.NET MVC
Control
Grid
Created On
Oct 7, 2015 02:42 PM UTC
Last Activity On
Oct 12, 2015 07:40 AM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support