I have prepared a new test page with a grid and two dropdown columns with two specific sqldatasources and wrote the select queries in so you can see them.
Please help me with the code behind inorder to make this function correctly, I have tried multiple times but failed.
<%@ Master Language="VB" CodeFile="HelpDeskMaster.master.vb" Inherits="HelpDeskMaster" %>
<%@ Register Assembly="Syncfusion.EJ.Web, Version=14.2460.0.26, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<!--Bootstarp Style Sheet -->
<link rel='nofollow' href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!--SyncFusion Style Sheet -->
<link rel='nofollow' href="SyncFusion/Content/default-theme/ej.web.all.min.css" rel="stylesheet" />
<link rel='nofollow' href="SyncFusion/Content/default-theme/ej.widgets.all.min.css" rel="stylesheet" />
<script src="Scripts/ej/ej.webform.min.js"></script>
<!--Animation Style Sheet -->
<link rel='nofollow' href="Animation/animate.min.css" rel="stylesheet" />
<!--SyncFusion(Java) Scripts -->
<script src="SyncFusion/Scripts/jquery-2.1.4.min.js"></script>
<script src="SyncFusion/Scripts/jquery.easing.1.3.min.js"></script>
<script src="SyncFusion/Scripts/jsrender.min.js"></script>
<script src="SyncFusion/Scripts/ej.web.all.min.js"></script>
<!--Bootstarp Script -->
<script src="Bootstrap/js/bootstrap.min.js"></script>
<title></title>
<style>
.J1
{
background-image:url(Images/Helpdesk.png);
background-size: cover;
text-decoration-color: deepskyblue;
background-repeat: no-repeat;
text-align:center;
background-position: 0px -50px;
margin-bottom:0px;
color:cornflowerblue;
text-shadow: black 0.3em 0.3em 0.3em;
}
.J2
{
background-image:url(Images/MagnifyGIF.GIF);
background-position:left;
background-repeat: no-repeat;
text-align:center;
background-position: 0px 0px;
background-size:10%;
margin-bottom:0px;
color:cornflowerblue;
margin-bottom:500px;
}
.J3
{
background-image:url(Images/GearsGIF.GIF);
background-position:left;
background-repeat: no-repeat;
text-align:center;
margin-bottom:500px;
background-position: 0px 0px;
background-size:20%;
color:cornflowerblue;
}
.J4
{
background-image:url(Images/TypingOnLaptopGIF.GIF);
background-position:left;
background-repeat: no-repeat;
text-align:center;
background-position: 0px 0px;
background-size:20%;
color:cornflowerblue;
margin-bottom:500px;
}
.btn1 {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
animation: bounce 2s ease 5s normal;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn1:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
body
{
background-image:url(Images/BG-3.jpg);
background-repeat: no-repeat;
background-position:center;
background-size: cover;
height:100%;
background-size:100% 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron J1">
<h1 class="animated bounce">Helpdesk Dashboard</h1>
</div>
</div>
<div class="container">
<div =class="jumbotron">
<ej:Menu ID="Menu1" runat="server">
<Items>
<ej:MenuItem ID="EmployeePage" Text="Employees" Url="Employee.aspx">
<Items>
<ej:MenuItem ID="EmployeeSub1" Text="Quick Find" Url="Employee.aspx">
<Items>
<ej:MenuItem ID="EmployeeSubSub1" Text="Create New Employee" Url="Employee.aspx">
</ej:MenuItem>
<ej:MenuItem ID="EmployeeSubSub2" Text="Remove Employee" Url="Employee.aspx">
</ej:MenuItem>
</Items>
</ej:MenuItem>
</Items>
</ej:MenuItem>
<ej:MenuItem ID="DepartmentPage" Text="Departments" Url="Department.aspx">
<Items>
<ej:MenuItem ID="DepartmentSub" Text="Quick Find" Url="Department.aspx">
<Items>
<ej:MenuItem ID="DepartmentSubSub1" Text="Create New Department" Url="Department.aspx">
</ej:MenuItem>
<ej:MenuItem ID="DepartmentSubSub2" Text="Remove Department" Url="Department.aspx">
</ej:MenuItem>
</Items>
</ej:MenuItem>
</Items>
</ej:MenuItem>
<ej:MenuItem ID="CatagoryPage" Text="Catagory" Url="Catagory.aspx">
<Items>
<ej:MenuItem ID="CatagorySub1" Text="Quick Find" Url="Catagory.aspx">
<Items>
<ej:MenuItem ID="CatagorySubSub1" Text="Create New Catagory" Url="Catagory.aspx">
</ej:MenuItem>
<ej:MenuItem ID="CatagorySubSub2" Text="Remove Catagory" Url="Catagory.aspx">
</ej:MenuItem>
</Items>
</ej:MenuItem>
</Items>
</ej:MenuItem>
</Items>
</ej:Menu>
</div>
</div>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
<%@ Page Title="" Language="VB" MasterPageFile="~/HelpDeskMaster.master" AutoEventWireup="false" CodeFile="GridDROP.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="Syncfusion.EJ.Web, Version=14.2460.0.26, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>
<%@ Register assembly="Syncfusion.EJ, Version=14.2460.0.26, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" namespace="Syncfusion.JavaScript.Models" tagprefix="ej" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
<ej:Grid ID="Grid1" runat='server' CssClass="" DataSourceCachingMode="None" DataSourceID="GridSource" MinWidth="0" AllowPaging="True">
<Columns>
<ej:Column AllowEditing="False" DataType="number" Field="EmployeeID" IsIdentity="True" IsPrimaryKey="True" Visible="False">
</ej:Column>
<ej:Column DataType="number" Field="DepartmentID" Visible="False" AllowEditing="False">
</ej:Column>
<ej:Column DataType="number" Field="EmployeeTypeID" Visible="False" AllowEditing="False">
</ej:Column>
<ej:Column DataType="number" Field="InActiveFlag" Visible="False" HeaderTextAlign="Center">
</ej:Column>
<ej:Column DataType="string" Field="FirstName" HeaderTextAlign="Center">
</ej:Column>
<ej:Column DataType="string" Field="LastName" HeaderTextAlign="Center">
</ej:Column>
<ej:Column DataType="string" Field="Email" HeaderTextAlign="Center">
</ej:Column>
<ej:Column DataType="string" Field="Department" EditType="Dropdown" HeaderTextAlign="Center" ForeignKeyField="DepartmentDescription" ForeignKeyValue="DepartmentID">
<EditTemplate Create="create" Read="read" Write="write" />
</ej:Column>
<ej:Column DataType="string" Field="PhoneExt" HeaderTextAlign="Center">
</ej:Column>
<ej:Column DataType="string" Field="EmployeeType" EditType="Dropdown" HeaderTextAlign="Center" ForeignKeyField="EmployeeType" ForeignKeyValue="EmployeeTypeID">
<EditTemplate Create="create" Read="read" Write="write" />
</ej:Column>
</Columns>
<PageSettings></PageSettings>
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
<RowDropSettings></RowDropSettings>
<SearchSettings></SearchSettings>
<ScrollSettings EnableTouchScroll="False"></ScrollSettings>
</ej:Grid>
</div>
<asp:SqlDataSource ID="GridSource" runat="server" ConnectionString="<%$ ConnectionStrings:HelpDeskConnectionString %>" SelectCommand="sp_EmployeeDetailSelect" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
<asp:SqlDataSource ID="DepartmentDropDownSource" runat="server" ConnectionString="<%$ ConnectionStrings:HelpDeskConnectionString %>"
SelectCommand="SELECT D.DepartmentID
,D.Description AS 'DepartmentDescription'
FROM Department D
WHERE D.InActiveFlag = 0
ORDER BY DepartmentDescription"></asp:SqlDataSource>
<asp:SqlDataSource ID="EmployeeTypeDropDownSource" runat="server" ConnectionString="<%$ ConnectionStrings:HelpDeskConnectionString %>"
SelectCommand="SELECT ET.EmployeeTypeID
,ET.Description'EmployeeType'
FROM dbo.EmployeeType ET
WHERE ET.InActiveFlag = 0
ORDER BY ET.Description"></asp:SqlDataSource>
<script type="text/javascript">
function create() {
return $("<input>");
}
function write(args) {
args.element.ejDropDownList({ width: "100%", dataSource: args.column[5].dataSource, fields: { text: "DepartmentDescription", value: "DepartmentDescription" }, selectedItemIndex:0 });
}
function read(args) {
return args.ejDropDownList("getSelectedValue");
}
</script>
</asp:Content>
