Queries on syncfusion MVC Grid

[sinha]

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();

       }

<script>

    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

[Ragavee U S]

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.

<script type="text/javascript">

   

    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.

<div style="margin-top:30px">

    @(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>

<script type="text/javascript">

   

    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.

<div style="margin-top:30px">

    @(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.

<div style="margin-top:30px">

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

            . . . .

           .Columns(col =>

            {

                . . . .               

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

                . . . . .

            }) 

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

    )

</div>

<script type="text/javascript">

    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.

[sinha]

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)

        {

}

[Ragavee U S]

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.

<div style="margin-top:30px">

    @(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.

[sinha]

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

[Ragavee U S]

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.

<div style="margin-top:30px">

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

            . . . .

           .Columns(col =>

            {

                . . . .               

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

                . . . . .

            }) 

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

    )

</div>

<script type="text/javascript">

    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.