Issue in combination of filtering and partialview

[ducpmParticipant]

Hi community,
Im using jqwidgets version 3.5.0 in .net MVC project. My view display a data grid (with context menu) and a partial view below but when I activate the attribute “Filterable:true”, the view’s structure will be destroyed: the grid disapear and the components of partialview will be pushed up. When I remove the attribute filterable, the view will be ok with partialview (the grid cannot filter ).
Please, give me some advises. Thanks in advance!

http://imageshack.com/a/img661/1249/sB4vdY.png
http://imageshack.com/a/img661/4100/WUwOMq.png
http://imageshack.com/a/img673/5827/wN3NIe.png

It’s my code for the view:

<script type=”text/javascript”>

//========================================================== Load dropdownlist for popup========================================
$(document).ready(function () {
var dataDropdownlist = @Html.Raw(ViewBag.DocTypeList);

var sourceDropdownlist =
{
localdata: dataDropdownlist,
datatype: “array”,
datafields: [
{ name: ‘DocTypeID’ },
{ name: ‘DocTypeName’ }
]
//,async: false
};

var dataAdapterDropdownlist = new $.jqx.dataAdapter(sourceDropdownlist);

// Create a jqxDropDownList

$(“#popupDocType”).jqxDropDownList({
selectedIndex: 0,
theme:’ui-start’,
source: dataAdapterDropdownlist,
dropDownHorizontalAlignment: ‘right’,
displayMember: “DocTypeName”,
valueMember: “DocTypeID”,
dropDownWidth: 300,
width: 180, height: 25});

});
//=========================================================Load Grid ===========================================================================

$(document).ready(function ReloadGrid() {
var dataGrid = @Html.Raw(ViewBag.DocList);

var sourceGrid =
{
localdata: dataGrid,
datatype: “array”,
datafields:
[
{ name: ‘DocID’, type: ‘string’ },
{ name: ‘DocName’, type: ‘string’ },
{ name: ‘DocNote’, type: ‘string’ },
{ name: ‘DocType’, type: ‘string’ },
{ name: ‘DocLocation’, type: ‘string’ },
{ name: ‘UploadDate’, type: ‘string’ },
{ name: ‘UserUpload’, type: ‘string’ },
{ name: ‘LastUserUpdate’, type: ‘string’ },
{ name: ‘Active’, type: ‘string’ }
//{ name: ‘Active’, type: ‘string’ }
],
updaterow: function (rowid, newdata, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
}
};

var addfilter = function () {
var filtergroup = new $.jqx.filter();

var filter_or_operator = 1;
var filtervalue = ‘1’;
var filtercondition = ‘chứa’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);

filtervalue = ‘2’;
filtercondition = ‘bắt đầu bằng’;
var filter2 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);

filtergroup.addfilter(filter_or_operator, filter1);
filtergroup.addfilter(filter_or_operator, filter2);
// add the filters.
$(“#jqxgrid”).jqxGrid(‘addfilter’, ‘firstname’, filtergroup);
// apply the filters.
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
}
var dataAdapterGrid = new $.jqx.dataAdapter(sourceGrid);

$(“#jqxgrid”).jqxGrid(
{
width: 1250,
source: dataAdapterGrid,
altrows: true,
filterable: true,
//showfilterrow: true,
sortable: true,
ready: function () {
addfilter();
},
selectionmode: ‘multiplerowsextended’,
theme: ‘fresh’,
autoshowfiltericon: true,
columns: [
{ text: ‘Mã số’, datafield: ‘DocID’, width: 70, align: ‘center’ },
{ text: ‘Tên văn bản’, datafield: ‘DocName’, width: 200, align: ‘center’ },
{ text: ‘Loại’, datafield: ‘DocType’, width: 200, align: ‘center’ },
{ text: ‘Tên file’, datafield: ‘DocLocation’, width: 100, align: ‘center’ },
{ text: ‘Người upload’, datafield: ‘UserUpload’, width: 150, align: ‘center’ },
{ text: ‘Ngày upload’, datafield: ‘UploadDate’, width: 100, align: ‘center’ },
{ text: ‘Người update cuối’, datafield: ‘LastUserUpdate’, width: 150, align: ‘center’ },
{ text: ‘Ghi chú’, datafield: ‘DocNote’, width: 270, align: ‘center’ },
{ text: ‘Tình trạng’, datafield: ‘Active’, width: 80, align: ‘center’ }
]
});

//$(‘#events’).jqxPanel({ width: 300, height: 80 });

//$(“#jqxgrid”).on(“filter”, function (event) {
// $(“#events”).jqxPanel(‘clearcontent’);
// var filterinfo = $(“#jqxgrid”).jqxGrid(‘getfilterinformation’);

// var eventData = “Triggered ‘filter’ event”;
// for (i = 0; i < filterinfo.length; i++) {
// var eventData = “Filter Column: ” + filterinfo[i].filtercolumntext;
// $(‘#events’).jqxPanel(‘prepend’, ‘<div style=”margin-top: 5px;”>’ + eventData + ‘</div>’);
// }
//});

// create context menu
var contextMenu = $(“#Menu”).jqxMenu({ width: 200, height: 58, autoOpenPopup: false, mode: ‘popup’});
$(“#jqxgrid”).on(‘contextmenu’, function () {
return false;
});
// handle context menu clicks.
$(“#Menu”).on(‘itemclick’, function (event) {
var args = event.args;
var rowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
if ($.trim($(args).text()) == “Sửa đổi thông tin”) {
editrow = rowindex;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
// get the clicked row’s data and initialize the input fields.

var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#popupDocID”).val(dataRecord.DocID);
$(“#popupDocName”).val(dataRecord.DocName);
$(“#popupDocType”).val(dataRecord.DocType);
$(“#popupDocNote”).val(dataRecord.DocNote);
// show the popup window.

$(“#popupWindow”).jqxWindow(‘show’);
}
else {
var data = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, rowindex);

Download(data.DocID);
}
});

$(“#jqxgrid”).on(‘rowclick’, function (event) {
if (event.args.rightclick) {
$(“#jqxgrid”).jqxGrid(‘selectrow’, event.args.rowindex);
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu(‘open’, parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
return false;
}
});
// initialize the popup window and buttons.
$(“#popupWindow”).jqxWindow({ width: 300, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01 });

// update the edited row when the user clicks the ‘Save’ button.

$(“#Save”).click(function () {

if (editrow >= 0) {

var row = { DocID: $(“#popupDocID”).val(), DocName: $(“#popupDocName”).val(), DocType: $(“#popupDocType”).val(),
DocNote: $(“#popupDocNote”).val()
};
var rowid = $(“#jqxgrid”).jqxGrid(‘getrowid’, editrow);
$(“#popupWindow”).jqxWindow(‘hide’);
UpdateDocInfo(row);

}
});

$(“#jqxgrid”).jqxGrid({ autoshowfiltericon: !event.args.checked });

});
//=================================================== POST GET DATA =================================================================================

function PostData(DocID) {
var url=”/DocManagement/Test”;

$.get(url, {DocID:DocID});

};

function Download(DocID)
{
var data= DocID ;
var getUrl = ‘@Url.Action(“Test”, “DocManagement”)’;

$.ajax(getUrl, {
//contentType: ‘application/json;charset=utf-8′,
//dataType:’json’,
type:’GET’,
data: {DocID: data},

success: function(d){
if(d.success){
Window.location = getUrl + “?DocID=” +d.DocID;
}
}
});

};

function UpdateDocInfo(row)
{
var data= JSON.stringify(row) ;
var getUrl = ‘@Url.Action(“Edit”, “DocManagement”)’;

$.ajax(getUrl, {
contentType: ‘application/json;charset=utf-8′,
dataType:’json’,
type:’POST’,
data: data,

});

};

</script>

<body class=’default’>
<table id=”tableData”>
<tr>
<td>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”>1234</div>
<div style=’margin-top: 20px;’> </div>
<div style=”margin-top: 30px;”>
<div id=”cellbegineditevent”></div>
<div style=”margin-top: 10px;” id=”cellendeditevent”></div>
</div>

<div id=”popupWindow”>
<div>Edit</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td align=”right”>Mã văn bản</td>
<td align=”left”><input id=”popupDocID” name=”DocID” readonly=”true” /></td>
</tr>
<tr>
<td align=”right”>Tên văn bản</td>
<td align=”left”><input id=”popupDocName” name=”DocName” /></td>
</tr>
<tr>
<td align=”right”>Loại văn bản</td>
<td align=”left”><div id=”popupDocType” type=”text” name=”DocType”></div></td>
</tr>
<tr>
<td align=”right”>Ghi chú</td>
<td align=”left”><input id=”popupDocNote” name=”DocNote” /></td>
</tr>
<tr>
<td align=”right”></td>
<td style=”padding-top: 10px;” align=”right”>
<input style=”margin-right: 5px;” type=”submit” id=”Save” value=”Save” />
<input id=”Cancel” type=”button” value=”Cancel” />
</td>
</tr>

</table>
</div>
</div>
<div id=’Menu’>

• Sửa đổi thông tin
• Tải về

</div>
</td>
</tr>
</table>
<div>
<section id=”Upload”>
@{ Html.RenderAction(“UploadFile”, “DocManagement”); }
</section>
</div>

</body>

[Peter StoevKeymaster]

Hello ducpm,

I would suggest you to check for missing required javascript references like jqxgrid.filter.js, jqxlistbox.js, jqxdropdownlist.js.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ducpmParticipant]

Thanks for your support. I’ve just found out that when I removed all of javascript references in partial view (which are the same in the view), my app totally runs well. I don’t know why, maybe there were some interupted between the javascript references.

Thanks again,

[Author]

Posts