how to display different grids with different dataSource dynamically - asp.net-mvc

Question

I have to display KendoUI splitters dynamically depending upon the records in the database.
If i have n records in my database,I have to display "n-1" splitters.and in each partition I have to display KendoGrid with different dataSource.
I have implemented ajax to get the records from database,In the success function depending upon the length I am able to display required number of splitters.
In each splitter I put a grid like,
success: function (json) {
for (var i = 0; i < json.length; i++) {
var div = document.createElement('div');
var griddatSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Home/splitter",
type: "POST",
dataType: "json"
}
},
batch: false,
schema: {
model: {
id: "iD",
fields: {
iD: { type: "number" },
name: { type: "string" },
email: { type: "string" }
}
}
}
});
$('<div id = ' + json[i].name + '>').appendTo("#splitter");
$("#" + json[i].name).kendoGrid({
dataSource: griddatSource,
selectable: "multiple",
columns: [{ field: "name", title: "Name" },
{ field: "email", title: "Email"}],
editable: false
}).data("kendoGrid");
}
$("#splitter").kendoSplitter({
orientation: "horizontal"
});
}
Now,I am able to display splitters dynamically and in each splitters I am able to load the grid,but I want to know how to use different different dataSources for different grids.
Thanks

Answer 1

Just use a variable :
var div = $('<div/>');
div.appendTo('#splitter');
div.someStuff();

Answer 2

I think you can get a short idea from this.
<script type="text/javascript">
function fnc()
{
el=document.createElement('div');
el.style.backgroundColor="red";
el.innerHTML="aaa";
document.getElementById("adiv").appendChild(el);
//document.getElementById("adiv").innerHTML=var1;
}
</script>
<div id="adiv">
qwerty
</div>
<input type="button" value="click me" onclick="fnc();">

Answer 3

I think this is what you mean?
function (json) {
for (var i = 0; i < json.length ; i++) {
//alert(json[i].name);
var divTag = document.createElement('div');
divTag.setAttribute('id', json[i].name);
var newAddedDiv = $('<div>').appendTo("#splitter");
newAddedDiv.html('fooooo');
}
}

Answer 4

In the success of ajax function,I have implemented like
success: function (json) {
for (var i = 0; i < json.length; i++) {
var j = i+1;
var div = document.createElement('div');
$('<div id = ' + json[i].prj '>').appendTo("#splitter");
----------------code for loading grid with different datasource--------------
}
$("#splitter").kendoSplitter({
orientation: "horizontal"
});
**code for loading grid with different datasource**
In the datasource read I gave like
transport: {
//passing values to the controller to display grid with different dataSource
read: {
url: function (options) {
return kendo.format("/Project/Display?selectedId=" + j + "");
}
}
}