[Amar KansaraParticipant]

Dear Hristo,
Sorry for the late reply.. So far I was working with earlier version of jqxWidgets. Just today I have downloaded latest version and I going to try the same with new version.

I hope it will work. I will check set loaderror call back in new test project.

Thank you

Amar Kansara

[Amar KansaraParticipant]

Hello Hristo,

I tried that too with no luck.

I even tried to convert the webservice to output data in JSON format, but still no result.
Thanks

[Amar KansaraParticipant]

Dear Hristo,

Thank you for the reply. But this is not what I am looking for. This examples I already have consumed in several pages in my test projects. I even have successfully tried several projects by collecting data in xml format into dataAdapter and bind it with several widgets using webmethods.

Now, I want to do the same by writing the webmethods in a webservice.

Following is my WebService Code;

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Data;
using System.Web.Script.Services;
using System.Configuration;

/// <summary>
/// Summary description for GenDataService
/// </summary>
[WebService(Namespace = “http://pppl.com/webservices/”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class GenDataService : System.Web.Services.WebService {

public GenDataService () {

//Uncomment the following line if using designed components
//InitializeComponent();
}

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Xml)]
public string GetUsers()
{
string Sql = “Select UserName, UserID From NIFUsers”;
SqlCommand cmd = new SqlCommand(Sql);

DataSet ds = GetData(cmd);

System.IO.StringWriter writer = new System.IO.StringWriter();
ds.Tables[0].WriteXml(writer, XmlWriteMode.WriteSchema, false);
return writer.ToString();
}

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Xml)]
public string GetMI()
{
string Sql = “SELECT MenuID, Posturl FROM NIFMenuSystem”;
SqlCommand cmd = new SqlCommand(Sql);
// Populate the DataSet.
DataSet ds = GetData(cmd);
// return the Customers table as XML.
System.IO.StringWriter writer = new System.IO.StringWriter();
ds.Tables[0].WriteXml(writer, XmlWriteMode.WriteSchema, false);
return writer.ToString();
}

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Xml)]
public string getMenu()
{
string Sql;
Sql = “SELECT MenuID As id, ParentID, MenuText, SubmenuWidth, Posturl From NIFMenuSystem Where MenuID <> ‘-1’ Order By MenuID”;
SqlCommand cmd = new SqlCommand(Sql);
// Populate the DataSet.
DataSet data = GetData(cmd);
// return the Customers table as XML.
System.IO.StringWriter writer = new System.IO.StringWriter();
data.Tables[0].WriteXml(writer, XmlWriteMode.WriteSchema, false);
return writer.ToString();
}

private static DataSet GetData(SqlCommand cmd)
{
string strConnString = ConfigurationManager.ConnectionStrings[“PPPL”].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
try
{
sda.Fill(ds);
}
catch (Exception ex)
{
RecordError(“GetData”, ex.Message);
}
return ds;
}
}
}
}

private static void RecordError(string ErrLoc, string ErrMsg)
{
string Sql;
string conStr = ConfigurationManager.ConnectionStrings[“PPPL”].ConnectionString;
using (SqlConnection con = new SqlConnection(conStr))
{
Sql = “INSERT INTO ErrorLog VALUES(‘” + ErrLoc + “‘, ‘” + ErrMsg + “‘)”;
using (SqlCommand InsCmd = new SqlCommand(Sql))
{
InsCmd.CommandType = CommandType.Text;
InsCmd.Connection = con;
con.Open();
InsCmd.ExecuteNonQuery();
}
con.Close();
}
}
}

This webservice is hosted successfully on localhost (IIS) and working as expected.

Following is my script.
<script type=”text/javascript”>
$(document).ready(function() {
// prepare the data
var SrcMI =
{
datatype: “xml”,
datafields: [
{ name: ‘MenuID’ },
{ name: ‘Posturl’ }
],
async: false,
record: ‘Table’,
url: ‘http://localhost/PPPLWebService/GenDataService.asmx/GetMI’
};
var mDA = new $.jqx.dataAdapter(SrcMI, { contentType: ‘application/json; charset=utf-8’ });
mDA.dataBind();

$(“#jqxDropDown”).jqxDropDownList({
selectedIndex: 0, source: mDA, displayMember: “Posturl”, valueMember: “MenuID”, width: 100, height: 25
});

var sourceM =
{
datatype: “xml”,
datafields: [
{ name: ‘id’ },
{ name: ‘ParentID’ },
{ name: ‘MenuText’ },
{ name: ‘SubmenuWidth’ },
{ name: ‘Posturl’ }
],
id: ‘id’,
async: false,
record: ‘Table’,
url: ‘http://localhost/PPPLWebService/GenDataService.asmx/getMenu’
};

// create MenuDA data adapter.
var MenuDA = new $.jqx.dataAdapter(sourceM, { contentType: ‘application/json; charset=utf-8’ });
MenuDA.dataBind();

var records = MenuDA.getRecordsHierarchy(‘id’, ‘ParentID’, ‘items’, [{ name: ‘MenuText’, map: ‘label’}]);
$(‘#jqxMenu’).jqxMenu({ source: records, height: 30, width: ‘650px’ });
$(‘#jqxMenu’).jqxMenu({clickToOpen: true});
$(‘#jqxMenu’).jqxMenu({autoOpen: true});
$(“#jqxMenu”).on(‘itemclick’, function(event)
{
var item = $(“#jqxDropDown”).jqxDropDownList(‘getItemByValue’, event.args.id);
//alert(item.label);
if (item.label != ”)
{
window.open(‘<%= ResolveUrl(“‘+ item.label + ‘”) %>’, ‘_top’);
}
});
});
</script>

My Database is in SQLServer 2005. And it was working perfectly good with earlier project.

[Amar KansaraParticipant]

Hello Mangeshsingh,

I guess here is what you are looking for and it might help you out..

https://onedrive.live.com/redir?resid=87158B565031B24B%21152

Hopefully it will let you download the project. Otherwise please write me on amar.kansara@gmail.com

Amar

[Amar KansaraParticipant]

Here is the link for Dynamic Menu project..

https://onedrive.live.com/redir?resid=87158B565031B24B%21152

Hopefully it will let you download the project. Otherwise please write me on amar.kansara@gmail.com

[Amar KansaraParticipant]

Hello Zorgoz,

Thanks for all efforts in solving the problem. I solved it different way. Actually, the problem was with my data, the resulting table contains some junk characters, which was effecting the XML result pushed to Source and hence DataAdaptor.

Regards
Amar

[Amar KansaraParticipant]

Hello Zorgoz,

In connection to your reply, I’ve checked the topics on the link supplied by you, but nothing has helped me.

Amar

[Amar KansaraParticipant]

Hello Dimitar,

Please guide me how to share my project on this Forum. Further, my project have following features;
1. Adding up Roles and Users in database table
2. Administrator can specify which menu should be allocated to particular role, so that a user login with specific role have only allocated menu visible to him/her.

Amar

[Amar KansaraParticipant]

Hello Zorgoz,

Thanks for the reply. My problem still persists.

My Web Method that caters data
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Xml)]
public static string GetCustomer()
{
string query = “SELECT Top 7200 Histrycode, ChsNo, RegNo, CustNm, Address, CITY FROM History”;
SqlCommand cmd = new SqlCommand(query);
// Populate the DataSet.
DataSet data = GetData(cmd);
// return the Customers table as XML.
System.IO.StringWriter writer = new System.IO.StringWriter();
data.Tables[0].WriteXml(writer, XmlWriteMode.WriteSchema, false);
return writer.ToString();
}

My Code to generate Grid is;

var SourceR =
{
datatype: “xml”,
datafields: [
{ name: ‘Histrycode’ },
{ name: ‘ChsNo’ },
{ name: ‘RegNo’ },
{ name: ‘CustNm’ },
{ name: ‘Address’ },
{ name: ‘CITY’ }
],
async: false,
record: ‘Table’,
url: “DataColl.aspx/GetCustomer”
};
var CustDA = new $.jqx.dataAdapter(SourceR,
{
contentType: ‘application/json; charset=utf-8’
});
CustDA.dataBind();
var editrow = -1;

// initialize jqxGrid
$(“#jqxDet”).jqxGrid(
{
theme: ‘energyblue’,
width: 800,
source: CustDA,
showfilterrow: true,
filterable: true,
selectionmode: ‘multiplecellsextended’,
columns: [
{ text: ‘Select’, filtertype: ‘none’, datafield: ‘Edit’, columntype: ‘button’, cellsrenderer: function() { return “Edit”; },
buttonclick: function(row) {
editrow = row;
}
},
{ text: ‘Hist Code’, datafield: ‘Histrycode’, width: 90, hidden: true },
{ text: ‘Chassis No’, columntype: ‘textbox’, filtertype: ‘input’, datafield: ‘ChsNo’, width: 150 },
{ text: ‘Reg. No’, columntype: ‘textbox’, filtertype: ‘input’, datafield: ‘RegNo’, width: 150 },
{ text: ‘Customer Name’, columntype: ‘textbox’, filtertype: ‘input’, datafield: ‘CustNm’, width: 250 },
{ text: ‘Address’, filtertype: ‘none’, datafield: ‘Address’, width: 150 },
{ text: ‘City’, filtertype: ‘none’, datafield: ‘CITY’, width: 150 }
]
});

Setting virtualmode to true didn’t solved the problem.

I will check the rest soon and revert.

Amar

[Amar KansaraParticipant]

Hello Dimitar,

I got the solution. I find out that the clearfilters is causing the problem. I commented the area from both grid script as if I don’t need clear filter buttons on each columns.

// $(‘#clrItemFilter’).jqxButton({ height: 25 });
// $(‘#clrItemFilter’).click(function() {
// $(“#jqxItemGrid”).jqxGrid(‘clearfilters’);
// });

// $(‘#clrSuppFilter’).jqxButton({ height: 25 });
// $(‘#clrSuppFilter’).click(function() {
// $(“#jqxSuppGrid”).jqxGrid(‘clearfilters’);
// });

Thanks and best regards
Amar

[Amar KansaraParticipant]

Hello Dimitar,

Thanks for prompt reply, I actually have did it already, without result. I even have merge the code of both script into one. But same result.

FYI: Earlier I was using this on content page called from Master page. May be this could be the problem.

Later I tried with individual page, result is still same;

[Amar KansaraParticipant]

I tried it by changing stuff as suggested by Dimitar. But not succeed. I am pasting code here for your reference..

Divisions to display grids. This gets visible as relevant controls gets focus on page.

<div id=’jqxWidget’ style=”width:100%”>
<div id=”Items” style=”display:none;height:50%; background-color:Aqua”>
<div id=”jqxItemGrid”></div>
</div>
<div id=”Supp” style=”display:none;height:50%; background-color:Blue”>
<div id=”jqxSuppGrid”></div>
</div>
</div>

Script to load supplier grid on <div ID=’Supp’>
<script type=”text/javascript”>
$(document).ready(function()
{
var ItemUrl = ‘data/ItemList.txt’;
var sourceI =
{
datatype: “csv”,
datafields: [
{ name: ‘MCode’, type: ‘string’ },
{ name: ‘SDesc’, type: ‘string’ },
{ name: ‘MName’, type: ‘string’ }
],
url: ItemUrl
};
var ItemDA = new $.jqx.dataAdapter(sourceI);
$(“#jqxItemGrid”).jqxGrid(
{
width: 500,
height: 300,
source: ItemDA,
showfilterrow: true,
filterable: true,
selectionmode: ‘singlerow’,
rowsheight: 20,
columns: [
{ text: ‘Material Name’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’, datafield: ‘MName’, width: 300 },
{ text: ‘Short Desc’, filtertype: ‘none’, datafield: ‘SDesc’, width: 120 },
{ text: ‘Code’, filtertype: ‘none’, datafield: ‘MCode’, width: 60, visible: ‘false’ }
]
});
$(‘#jqxItemGrid’).on(‘rowclick’, function(event) {
var ItemData = $(‘#jqxItemGrid’).jqxGrid(‘getrowdata’, event.args.rowindex);
document.getElementById(“<%= txtMatCode.ClientID %>”).value = ItemData.MCode;
document.getElementById(“<%= txtMatName.ClientID %>”).value = ItemData.MName;
});
$(‘#clrItemFilter’).jqxButton({ height: 25 });
$(‘#clrItemFilter’).click(function() {
$(“#jqxItemGrid”).jqxGrid(‘clearfilters’);
});
});
</script>

Script to load Items grid in <div id=’Items’>
<script type=”text/javascript”>
$(document).ready(function() {
var SuppUrl = ‘data/SuppList.txt’;
var sourceS =
{
datatype: “csv”,
datafields: [
{ name: ‘SCode’, type: ‘string’ },
{ name: ‘SName’, type: ‘string’ }
],
url: SuppUrl
};
var SuppDA = new $.jqx.dataAdapter(sourceS);

$(“#jqxSuppGrid”).jqxGrid(
{
width: 500,
height: 300,
source: SuppDA,
showfilterrow: true,
filterable: true,
selectionmode: ‘singlerow’,
rowsheight: 20,
columns: [
{ text: ‘Supplier Name’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘contains’, datafield: ‘SName’, width: 300 },
{ text: ‘Code’, filtertype: ‘none’, datafield: ‘SCode’, width: 60, visible: ‘false’ }
]
});

$(‘#jqxSuppGrid’).on(‘rowclick’, function(event) {
var SuppData = $(‘#jqxSuppGrid’).jqxGrid(‘getrowdata’, event.args.rowindex);
//alert(data.MName + ” ” + data.MCode);
document.getElementById(“<%= txtAcCode.ClientID %>”).value = SuppData.SCode;
document.getElementById(“<%= txtSupp.ClientID %>”).value = SuppData.SName;
alert(ItemDA.toString);
});
$(‘#clrSuppFilter’).jqxButton({ height: 25 });
$(‘#clrSuppFilter’).click(function() {
$(“#jqxSuppGrid”).jqxGrid(‘clearfilters’);
});
});
</script>

Right now the supplier grid is displaying correctly but not the Item Grid.
But if I change the order of script i.e. if I write Item Grid script first
Item Grid will be display correctly but not the Supplier grid..

[Author]

Posts