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