Binding .MVC Grid to Grid objects using JSON on button click

@(Html.Infragistics()
.Grid(Model)
.ID("Grid")
.Height("500px")
.Width("100%")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.RenderCheckboxes(true)
.PrimaryKey("DEPT_CODE")
.Columns(column =>
{
column.For(x => x.DEPT_CODE).HeaderText("DEPT_CODE").Width("160");
column.For(x => x.DEPT_GRP).HeaderText("DEPT_GRP").Width("160");
column.For(x => x.DEPT_NAME).HeaderText("DEPT_NAME").Width("160");
column.For(x => x.DEPT_TYPE).HeaderText("DEPT_TYPE").Width("160");
column.For(x => x.LCTN_CODE).HeaderText("LCTN_CODE").Width("160");
})
.Features(feature =>
{
feature.Updating().ColumnSettings(cs =>
{
cs.ColumnSetting().ColumnKey("DEPT_CODE").ReadOnly(true);
cs.ColumnSetting().ColumnKey("DEPT_GRP").Required(true);
cs.ColumnSetting().ColumnKey("DEPT_NAME").Required(true);
cs.ColumnSetting().ColumnKey("DEPT_TYPE").Required(true);
cs.ColumnSetting().ColumnKey("LCTN_CODE").Required(true);
});
feature.Sorting().Mode(SortingMode.Single).ApplyColumnCss(true);
feature.Selection().MouseDragSelect(false).MultipleSelection(false).Mode(SelectionMode.Row);
feature.Selection().Activation(false);
feature.Sorting();
feature.Paging().PageSize(25);
feature.Filtering().Mode(FilterMode.Simple);
})
.ClientDataSourceType(ClientDataSourceType.JSON)
.DataSourceUrl(Url.Action("DeptIndex"))
.UpdateUrl(Url.Action("OrdersSaveData"))
.DataBind()
.DefaultColumnWidth("100px")
.Height("500px")
.Render()
)

Please help me to rebind the grid on button click event using jquery

Hello thangabalu,

You can rebind the grid by calling something like this inside your button click event:

$("#grid").igGrid('option', 'dataSource', yourDataSourceObject); 
$("#grid").igGrid('dataBind');

Please let me know if you have further questions.

Regards,
Tsanna

Here is the source Code

@(Html.Infragistics()
        .Grid(Model)
        .ID("GridPart")
        .Height("500px")
        .Width("100%")
        .RenderCheckboxes(true)
        .Features(feature =>
        {
            feature.Sorting().Mode(SortingMode.Single).ApplyColumnCss(true);
            feature.Sorting();
            feature.Paging().PageSize(25);
            feature.Resizing();
        })
            .DataSourceUrl(Url.Action("DeptIndex"))
        .UpdateUrl(Url.Action("OrdersSaveData"))
        .DataBind()
        .Height("500px")
        .Render()
)

Script Code:

 $("#txtPartCodeExisting").blur(
            function () {
                var partCode = $("#txtPartCodeExisting").val();
                var _plantData = "";
                $('input[id="chkPlant"]:checked').each(function (data, value) {
                    _plantData = _plantData + ':' + value.name;
                }); debugger;
                $.ajax({
                    url: "../..@Url.Action("GetPartDescByPartCode", "NewRequest")",
                    dataType: 'json',
                    type: 'post',
                    data: { partCode: partCode },
                    success: function (data) {
                        $("#txtPartDesc").val(data.partDesc);
                     
                        $.ajax({
                            url: "../../NewRequest/Test",
                            dataType: 'json',
                            type: 'post',
                            success: function (data) {
                                debugger;
                                $("#GridPart").igGrid({
                                    columns: [
                              { headerText: "PRT_ID", key: "PRT_ID", dataType: "string" },
                              //{ headerText: "PRT_NAME", key: "PRT_NAME", dataType: "string" },
                              //{ headerText: "DEPT_NAME", key: "DEPT_NAME", dataType: "string" },
                              //{ headerText: "DEPT_TYPE", key: "DEPT_TYPE", dataType: "string" },
                              { headerText: "isCheck", key: "isCheck", dataType: "bool" }
                                    ],
                                    dataSource: data
                                });
                                $("#Grid").igGrid("dataBind");
                            },
                            error: function (xhr, ajaxOption, thrownError) {
                                swal({
                                    text: "Respose Status:" + xhr.status + "\nError Type :" + ajaxOption + "\nResponse Text: " + xhr.responseText + "\nError: " + thrownError,
                                    type: "warning",
                                    title: "Warning"
                                });
                            },
                            cache: false
                        });
                        
                    },
                    error: function (xhr, ajaxOption, thrownError) {
                        swal({
                            text: "Respose Status:" + xhr.status + "\nError Type :" + ajaxOption + "\nResponse Text: " + xhr.responseText + "\nError: " + thrownError,
                            type: "warning",
                            title: "Warning"
                        });
                    },
                    cache: false
                });
            }
            );

Please send email any sample source

Hello Thangabalu E,

Since you've verified my previous response, I'm not sure whether you still need any further assistance. Does this code, that you posted, work properly per your requirements or you're encountering issues with it? Did you have a chance to try my suggestion? If you need further assistance, please send me a sample that you're currently working on, so that I have a starting point.

Regards,

Tsanna

Thanks for your response… Please solve the below issue.

After rebind the grid using jquery,two header will display. Please help me to solve the issue

Hello Thangabalu E,

Please send me an isolated sample that demonstrates the issue, so that I can run it on my side and be able to assist you further.

Regards,
Tsanna

Hai,

Please verify my below coding part for binding data using AJAX. If any error, Please suggest me.

 In controller(C#)

       public ActionResult Test(string partCode = "", string plantCode = "")
        {

partList = (List<BOM_M_PARTS>)Session["SelectPart"];
return new JsonResult() { Data = partList, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

}

Ajax call

 $.ajax({
                                url: "../../NewRequest/Test",
                                dataType: 'json',
                                data: { partCode: partCode, plantCode: _plantData },
                                type: 'post',
                                success: function (data) {
                                    if (data.length > 0) {
                                        $("#GridPart").igGrid('option', 'dataSource', data);
                                        $("#GridPart").igGrid("dataBind");
                                    }}});

Please suggest me that above source code is correct or not

Hello Thangabalu,

Did you try this code on your side? Does it work according your scenario and requirement? I'm not able to tell you whether it's correct or not without testing it on my side. If you can provide me with a runnable sample project that I could test, then I will give you a feedback about it.

Regards,
Tsanna

Thanks for your response… Please solve the below issue.

After rebind the grid using jquery,two header will display. Please help me to solve the issue