No Data to display after grid reload twice!!

[cemgsParticipant]

Hi,

We are using jqxGrid in asp.net mvc project. We are binding grid with async ajax post method and editing rows in same way(ajax). The description of issue is as:
*After we edit the popup, we’re saving data and hiding popup. But grid shows no data to display warning after second popup editing.

Our source codes are below:

var gridSource =
{
url: ‘/Group/GetAllGroups’,
//localdata: data,
datatype: “json”,
id: ‘Id’,
datafields:
[
{ name: ‘Id’, type: ‘number’ },
{ name: ‘Description’, type: ‘string’ },
{ name: ‘CreateDate’, type: ‘date’ }

]
};

var dataAdapter = new $.jqx.dataAdapter(gridSource);
var editrow = -1;

// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: ‘100%’,
source: dataAdapter,
pageable: true,
autoheight: true,
columns: [
{ text: ‘Grup Adı’, datafield: ‘Description’, width: ‘40%’ },
{ text: ‘Oluşturma Tarihi’, datafield: ‘CreateDate’, width: ‘40%’ , cellsformat: ‘dd/MM/yyyy’},
{ text: ”, datafield: ‘Edit’, columntype: ‘button’, width: ‘10%’, cellsrenderer: function () {
return ‘Grup Görüntüle’;
},
buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#grupgoruntule”).jqxWindow({ position: { x: 0, y: 0 }, animationType: ‘fade’, position: ‘center’ });
var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);

loadGroupDetails(rowID);

$(“#popupwindow”).jqxWindow(‘open’);

}
}

]
});

function loadGroupDetails(groupId) {
$.ajax({
url: ‘@Url.Action(“_GroupDetails”, “Group”)’,
data: { groupId: groupId },
type: “POST”,
success: function (data) {
$(“#grupgoruntule > .client-form”).html(data);
$(“#SelectedRoleIds”)[0].selectedIndex = -1;
},
error: function () {
alert(“Error!”);
}
});
}

<div id=”popupwindow” hidden>
<div><i class=”fa fa-user”></i> Grup Görüntüleme</div>
<div class=”padding-10 smart-form client-form” style=”height: 225px;”>

</div>
</div>
————– Popup in partial View

@using (Ajax.BeginForm(“SaveGroupDetails”, “Group”, new AjaxOptions { HttpMethod = “POST”, OnSuccess = “successGroupDetails()”, OnFailure = “errorGroupDetails()” }, new { target = “form-iframe”, id = “GroupDetailForm” }))
{
<input type=”hidden” name=”GroupId” id=”GroupId” value=”@Model.GroupId.ToString()” />
<div class=”col-md-4 col-xs-12″>
<label class=”label”>Grup Adı</label>
<label class=”input inline-right-margin”>
@Html.TextBoxFor(model => model.GroupName)
@Html.ValidationMessageFor(model => model.CreateDate)
</label>
</div>
<div class=”col-md-4 col-xs-12″>
<label class=”label”>Oluşturma Tarihi</label>
@*<div id=”CreateDate”></div>*@
<label class=”input inline-right-margin”>

<input type=”date” name=”CreateDate” id=”CreateDate” value=”@Model.CreateDate.ToString(“yyyy-MM-dd”)”>
@Html.ValidationMessageFor(model => model.CreateDate)
</label>
</div>
<div class=”col-md-4 col-xs-12″>
<label class=”label”>Son Güncelleme Tarihi</label>
@*<div id=”LastCreateDate”></div>*@
<label class=”input inline-right-margin”>

<input type=”date” name=”UpdateDate” id=”UpdateDate” value=”@Model.UpdateDate.Value.ToString(“yyyy-MM-dd”)”>

</label>
</div>
<section class=”col-lg-5 col-md-5 col-sm-5 col-xs-5 margin-bottom-10 margin-top-10 text-align-center”>
<label class=”label”>Rol</label>
<label class=”select select-multiple”>

@Html.ListBox(“UnSelectedRoles”, (Model.AllRoles.FindAll(p => !Model.SelectedRoleIds.Contains(p.Id))).Select(p => new SelectListItem() { Value = p.Id.ToString(), Text = p.Description }).ToList())

</label>
</section>
<section class=”col-lg-2 col-md-2 col-sm-2 margin-top-10 col-xs-2 text-align-center”>
<br><br>
<i class=”fa fa-arrow-right”></i><br>
<i class=”fa fa-arrow-left”></i>
</section>
<section class=”col-lg-5 col-md-5 col-sm-5 col-xs-5 margin-bottom-10 margin-top-10 text-align-center”>
<label class=”label”>Atanan Rol</label>
<label class=”select select-multiple”>
@Html.ListBoxFor(m => m.SelectedRoleIds, new MultiSelectList((Model.AllRoles.FindAll(p => Model.SelectedRoleIds.Contains(p.Id))), “Id”, “Description”))
</label>
</section>
<div class=”col-md-12 col-xs-12 margin-top-10″>
<button class=”btn btn-success btn-sm”><i class=”fa fa-save”></i> Kaydet</button>
</div>
}

function successGroupDetails() {
$(“#popupwindow”).jqxWindow(‘hide’);
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
}

Note: In server side events such as data transfer methods, there is no problem. And other odd thing is, grid shows constantly ‘no data to display’ warning even we refresh the browser and trigger the server functions.

Please advise any pointer to fix these issues.

[Peter StoevKeymaster]

Hi cemgs,

It will display “No Data to display” only if you’re binding fails and your server returns no data to the client. The dataAdapter simply makes Ajar request. If it returns data it displays it in the Grid. If it does not, then the Grid does not display data. You are also not using Async POST method, you’re using “GET” method. “POST” is not specified in the dataAdapter

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[wsafaParticipant]

hi,
i used to edit jqxgrid in jqxwindow and save it(data is remote at sql server)
using ajax : $.ajax({
url: ‘/reqresturant/UpdateReqResturant’,
data: rowdata,
type:”Post”,
success: function (data, status, xhr) {

commit(true);
},
all colunms at grid is updated as i set only ones with jqx combo box are not updated at grid and was empty
any help?

[Peter StoevKeymaster]

Hi wsafa,

To learn how to bind the Grid, look at: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts