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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Queries on syncfusion MVC Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

120714 Oct 7,2015 02:42 PM UTC Oct 12,2015 07:40 AM UTC ASP.NET MVC 5
loading
Tags: Grid
sinha
Asked On October 7, 2015 02:42 PM UTC

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 [Syncfusion]
Replied On 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.

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

sinha
Replied On 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)
        {

}

Ragavee U S [Syncfusion]
Replied On 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.

sinha
Replied On 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

Ragavee U S [Syncfusion]
Replied On 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.

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.

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

;