devexpress
DevExpress GridView में ग्रिड पंक्तियों के सशर्त चयन को लागू करना
खोज…
टिप्पणियों
आशा है कि ऊपर दिया गया नमूना चित्रण किसी ऐसे व्यक्ति की मदद करता है जो पंक्तियों को सशर्त रूप से चयन करने के लिए संघर्ष करता है, जैसे कि DevExpress की डिफ़ॉल्ट कार्यक्षमता सभी पंक्तियों के बावजूद चाहे वह 'चेकबॉक्स' हो या न हो (जब आप ASPxGridView1 .electAllRowsOnPage () या ASPxGridView1.SelectRows का उपयोग करते हैं या नहीं। ), 'चेकबॉक्स' कॉलम को लागू करने के तरीके के कारण)। हालांकि DevExpress समर्थन साइट पर विभिन्न उदाहरण हैं, मैं एक कार्य नमूना या परिदृश्य नहीं दिखा सकता, जो इस आवश्यकता को समझाता हो।
ASP.Net वेब प्रपत्रों का उपयोग करके नमूना चित्रण
ASPX पृष्ठ पर ग्रिड व्यू परिभाषा
जैसा कि नीचे दिखाया गया है, ग्रिड के पहले कॉलम को एक चेकबॉक्स कॉलम के रूप में परिभाषित किया गया है, जिसे सशर्त रूप से साफ़ कर दिया गया है जैसा कि नीचे दिए गए अन्य उदाहरणों में दिखाया गया है (हेडर चेकबॉक्स केवल वर्तमान पृष्ठ पर सभी पंक्तियों को चुनने / अन-चयन करने के लिए है, लेकिन सभी के लिए समान बढ़ाया जा सकता है आसानी से ग्रिड पर):
<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="True" ClientInstanceName="ASPxGridView1" KeyFieldName="CustomerID" Width="100%"
OnHtmlRowCreated="ASPxGridView1_HtmlRowCreated" OnCustomJSProperties="ASPxGridView1_CustomJSProperties">
<SettingsPager PageSize="30" />
<Settings VerticalScrollBarMode="Visible" VerticalScrollableHeight="350" />
<Paddings Padding="0px" />
<Border BorderWidth="0px" />
<BorderBottom BorderWidth="1px" />
<Columns>
<dx:GridViewDataTextColumn Caption="#" VisibleIndex="0">
<DataItemTemplate>
<dx:ASPxCheckBox ID="cbCheck" runat="server" AutoPostBack="false" CssClass="chkSelDgProdRow" OnLoad="ASPxGridView1_cbCheck_Load" />
</DataItemTemplate>
<HeaderTemplate>
<dx:ASPxCheckBox ID="cbPageSelectAll" runat="server" ToolTip="Select/Unselect all rows on the page" ClientInstanceName="cbPageSelectAll"
ClientSideEvents-CheckedChanged="function(s, e) { checkUncheckSelectableRowsOnPage(s.GetChecked()); }" OnLoad="ASPxGridView1_cbPageSelectAll_Load" />
</HeaderTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="ContactName" VisibleIndex="2">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="CompanyName" VisibleIndex="1">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="ContactTitle" VisibleIndex="3">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="City" VisibleIndex="5">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Country" VisibleIndex="6">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Phone" VisibleIndex="9">
</dx:GridViewDataTextColumn>
</Columns>
<ClientSideEvents BeginCallback="OnGridCallBackBegin" />
</dx:ASPxGridView>
एसक्यूएल टेबल संरचना
डेटा SQL तालिका 'ग्राहकों' से लोड किया गया है जिसकी संरचना नीचे है (कृपया ध्यान दें कि तालिका नॉर्थविंड डेटाबेस से मानक संरचना है, जिसमें 'सशर्त' चयन कार्यक्षमता प्रदर्शित करने के लिए अतिरिक्त 'IsRegistered' कॉलम है):
CREATE TABLE [dbo].[Customers] (
[CustomerID] NCHAR (5) NOT NULL,
[CompanyName] NVARCHAR (40) NOT NULL,
[ContactName] NVARCHAR (30) NULL,
[ContactTitle] NVARCHAR (30) NULL,
[Address] NVARCHAR (60) NULL,
[City] NVARCHAR (15) NULL,
[Region] NVARCHAR (15) NULL,
[PostalCode] NVARCHAR (10) NULL,
[Country] NVARCHAR (15) NULL,
[Phone] NVARCHAR (24) NULL,
[Fax] NVARCHAR (24) NULL,
[IsRegistered] BIT NULL
);
पृष्ठ लोड घटना (.CS पृष्ठ)
Page_Load () इवेंट और संबंधित .CS पृष्ठ पर संबंधित कोड। कृपया ध्यान दें कि DevExpress के लिए कस्टम JS गुण 'cp' का एक उपसर्ग होना चाहिए।
private const string _selectableRowsKey = "cp_SelectableRows";
private const string _selectedRowsCountKey = "cp_SelectedRowsCount";
protected void Page_Load(object sender, EventArgs e)
{
PopulateGrid();
}
private void PopulateGrid()
{
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["NWindConnectionString"].ConnectionString;
conn.Open();
using (SqlCommand cmd = new SqlCommand("SELECT * FROM [Customers]", conn))
{
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
ASPxGridView1.DataSource = dt;
ASPxGridView1.DataBind();
}
conn.Close();
}
}
HtmlRowCreated ईवेंट (.CS पृष्ठ)
यह घटना डेटा-बाइंडिंग पर ग्रिड व्यू पर बनाए गए प्रत्येक रो के लिए है। इसका उपयोग सशर्त रूप से जांचने के लिए किया जाता है यदि 'IsRegistered' को 'true' पर सेट किया जाता है, तो पहले कॉलम पर 'चेकबॉक्स' साफ़ हो जाता है। इसके अलावा, ग्रिड के लिए एक कस्टम JS प्रॉपर्टी सेट करने के लिए भी इसका उपयोग किया जाता है जिसमें यूआई पर चयन / अन-चयन के लिए अनुमत पंक्तियों की # अलग सूची होगी।
protected void ASPxGridView1_HtmlRowCreated(object sender, ASPxGridViewTableRowEventArgs e)
{
if (e.RowType == GridViewRowType.Data)
{
if (e.GetValue("IsRegistered") != null)
{
if (e.GetValue("IsRegistered") != DBNull.Value && (bool)e.GetValue("IsRegistered"))
e.Row.Cells[0].Controls.Clear();
else
{
string selectableRows = string.Empty;
if (ASPxGridView1.JSProperties.ContainsKey(_selectableRowsKey))
selectableRows = (string)ASPxGridView1.JSProperties[_selectableRowsKey];
selectableRows += "#" + e.VisibleIndex.ToString();
ASPxGridView1.JSProperties[_selectableRowsKey] = selectableRows;
}
}
}
}
ग्रिड चेकबॉक्स लोड इवेंट (.CS पृष्ठ)
यह घटना प्रत्येक चेकबॉक्स के लिए लागू की जाती है जब वह UI पर लोड होता है। इसका उपयोग यह सेट करने के लिए किया जाता है कि चेक बॉक्स की पंक्ति का चयन / चयन करने के लिए जावास्क्रिप्ट कोड संलग्न करें।
protected void ASPxGridView1_cbCheck_Load(object sender, EventArgs e)
{
ASPxCheckBox cb = (ASPxCheckBox)sender;
GridViewDataItemTemplateContainer container = (GridViewDataItemTemplateContainer)cb.NamingContainer;
cb.ClientInstanceName = string.Format("cbCheck{0}", container.VisibleIndex);
cb.Checked = ASPxGridView1.Selection.IsRowSelected(container.VisibleIndex);
cb.ClientSideEvents.CheckedChanged = string.Format("function (s, e) {{ ASPxGridView1.SelectRowOnPage({0}, s.GetChecked()); updateSelectedKeys(s.GetChecked()); }}", container.VisibleIndex);
}
लोड घटना (.CS पेज) पर पेज चेकबॉक्स पर सभी का चयन करें
इस ईवेंट का उपयोग उनके चयन की स्थिति के आधार पर, पृष्ठों को नेविगेट करते समय 'सभी का चयन करें पृष्ठ पर' चेकबॉक्स का चयन करने के लिए किया जाता है।
protected void ASPxGridView1_cbPageSelectAll_Load(object sender, EventArgs e)
{
ASPxCheckBox cb = (ASPxCheckBox)sender;
ASPxGridView grid = (cb.NamingContainer as GridViewHeaderTemplateContainer).Grid;
bool cbChecked = true;
int start = grid.VisibleStartIndex;
int end = grid.VisibleStartIndex + grid.SettingsPager.PageSize;
end = (end > grid.VisibleRowCount ? grid.VisibleRowCount : end);
for (int i = start; i < end; i++)
{
DataRowView dr = (DataRowView)(grid.GetRow(i));
if (!grid.Selection.IsRowSelected(i))
{
if (dr["IsRegistered"] == DBNull.Value || !(bool)dr["IsRegistered"])
{
cbChecked = false;
break;
}
}
}
cb.Checked = cbChecked;
}
ग्रिड CustomJS गुण सेटअप घटना (.CS पृष्ठ)
इस घटना का उपयोग वर्तमान पृष्ठ की GridView की 'चयनित पंक्तियों की गणना' के लिए किया जाता है। इसका उपयोग जावास्क्रिप्ट में ऑटो-हेडर चेकबॉक्स के लिए किया जाता है।
protected void ASPxGridView1_CustomJSProperties(object sender, ASPxGridViewClientJSPropertiesEventArgs e)
{
ASPxGridView grid = sender as ASPxGridView;
int start = grid.VisibleStartIndex;
int end = grid.VisibleStartIndex + grid.SettingsPager.PageSize;
int selectNumbers = 0;
end = (end > grid.VisibleRowCount ? grid.VisibleRowCount : end);
for (int i = start; i < end; i++)
if (grid.Selection.IsRowSelected(i))
selectNumbers++;
e.Properties[_selectedRowsCountKey] = selectNumbers;
}
क्लाइंट घटनाओं और संबंधित कार्यक्षमता को संभालने के लिए जावास्क्रिप्ट कोड
यह जावास्क्रिप्ट फ़ंक्शन 'चेकबॉक्स' चेक किए गए परिवर्तन ईवेंट के दौरान, जैसा कि ASPX पृष्ठ में परिभाषित किया गया है:
function checkUncheckSelectableRowsOnPage(isChecked) {
var selectableRowIndexes = ASPxGridView1.cp_SelectableRows;
var grdStartIndex = ASPxGridView1.visibleStartIndex;
var grdEndIndex = grdStartIndex + ASPxGridView1.pageRowCount;
if (selectableRowIndexes != null && selectableRowIndexes != '') {
var rowIdxes = selectableRowIndexes.split("#");
var selectedRowsCount = 0;
if (rowIdxes != null) {
try {
for (var i = 0; i < rowIdxes.length; i++) {
if (rowIdxes[i] != "") {
var rowIndex = parseInt(rowIdxes[i]);
if (rowIndex != NaN && rowIndex >= 0 && rowIndex >= grdStartIndex && rowIndex < grdEndIndex) {
if (ASPxClientControl.GetControlCollection().GetByName("cbCheck" + rowIdxes[i]) != null) {
if (isChecked) {
ASPxGridView1.SelectRowOnPage(rowIdxes[i]);
selectedRowsCount++;
}
else
ASPxGridView1.UnselectRowOnPage(rowIdxes[i]);
ASPxClientControl.GetControlCollection().GetByName("cbCheck" + rowIdxes[i]).SetChecked(isChecked);
}
}
}
}
//updateSelectedKeys(); // Can be used if the selected keys needs to be saved separately in a Hidden field
ASPxGridView1.cp_SelectedRowsCount = selectedRowsCount;
currentSelectedRowsCount = selectedRowsCount;
}
finally {
}
}
}
}
इस जावास्क्रिप्ट कोड का उपयोग हेडर पर सभी पेजों पर, 'ग्रिड व्यू के वर्तमान पृष्ठ पर चयनित पंक्तियों के आधार पर चेकबॉक्स पर चयन करें' के लिए किया जाता है।
var currentSelectedRowsCount = 0;
function updateSelectedKeys(isChecked) {
var selKeys = ASPxGridView1.GetSelectedKeysOnPage();
if (selKeys != null) {
var cpIDsList = '';
try {
for (var i = 0; i < selKeys.length; i++) {
cpIDsList += selKeys[i] + ',';
}
}
finally {
}
//$("#hdnSelectedCatProdIDs").val(cpIDsList);
if (isChecked) {
currentSelectedRowsCount++;
cbPageSelectAll.SetChecked(selKeys.length == ASPxGridView1.cp_SelectedRowsCount);
}
else {
cbPageSelectAll.SetChecked(selKeys.length == currentSelectedRowsCount);
currentSelectedRowsCount--;
}
}
}
यह जावास्क्रिप्ट क्लाइंट ईवेंट हैंडलर वर्तमान में चयनित पंक्तियों को सेट करने के लिए उपयोग किया जाता है जो सर्वर से सेट किए गए हैं।
function OnGridCallBackBegin(s, e) {
currentSelectedRowsCount = ASPxGridView1.cp_SelectedRowsCount;
}