پياده سازي Header CheckBox و Row CheckBox براي GridView

[Milad Mohseny]

از اساتيدي كه اين روش رو بلدند عذر خواهي ميكنم.
پياده سازي Header CheckBox و Row CheckBox براي GridView
1)
يه Literal آخر صفحه aspx بزارين اگه از master page استفاده ميكنين قبل از اتمام asp:Content
<asp:Literal ID="CheckBoxIDsArray" runat="server"></asp:Literal>
2)
اين TemplateField رو به GridView تون اضافه كنين:
<asp:TemplateField InsertVisible="False">
<HeaderTemplate>
<asp:CheckBox ID="HdChk" runat="server"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkRow" runat="server" />
</ItemTemplate>
<ItemStyle />
<HeaderStyle Width="30px" />
</asp:TemplateField>
3)
حالا سمت سرور بايد DataBound مربوط به GridView رو به صوت زير پياده سازي كنيم:
protected void GridView1_DataBound(object sender, EventArgs e)
{
CheckBox cbHeader = GridView1.HeaderRow.FindControl("HdChk") as CheckBox;
cbHeader.Attributes.Add("onclick", "ChangeAllCheckBoxStates(this.checked);");
List<string> ArrayValues = new List<string>();
ArrayValues.Add(String.Concat("'", cbHeader.ClientID, "'"));

foreach (GridViewRow gvr in GridView1.Rows)
{
CheckBox cb = gvr.FindControl("chkRow") as CheckBox;
cb.Attributes.Add("onclick", "ChangeHeaderAsNeeded();");
ArrayValues.Add(String.Concat("'", cb.ClientID, "'"));
}

CheckBoxIDsArray.Text = "<script type=\"text/javascript\">" +
String.Concat("var CheckBoxIDs = new Array(", String.Join(",", ArrayValues.ToArray()), ");") +
"</script>";
}

4)
حالا سمت كلاينت بايد اين توابع جاوا اسكريپت رو براي تغيير وضعيت checkbox ها قرار بديم:
function ChangeCheckBoxState(id, checkState) {
var cb = document.getElementById(id);
if (cb != null)
cb.checked = checkState;
}

function ChangeAllCheckBoxStates(checkState) {
if (CheckBoxIDs != null) {
for (var i = 0; i < CheckBoxIDs.length; i++)
ChangeCheckBoxState(CheckBoxIDs[i], checkState);
}
}

function ChangeHeaderAsNeeded() {
if (CheckBoxIDs != null) {
for (var i = 1; i < CheckBoxIDs.length; i++) {
var cb = document.getElementById(CheckBoxIDs[i]);
if (!cb.checked) {
ChangeCheckBoxState(CheckBoxIDs[0], false);
return;
}
}
ChangeCheckBoxState(CheckBoxIDs[0], true);
}
}
5)
حالشو ببر

[SAMARE]

دوست عزيز ميشه كدي كه در قسمت DataBound نوشتيد توضيح بديد /هم چنين توابع جاوا اسكريپت !!!
مثلا اينكه شما تابع
ChangeAllCheckBoxStates رو با دو ورودي فراخواني كرديد


cbHeader.Attributes.Add("onclick", "ChangeAllCheckBoxStates(this.checked,CheckBoxIDs) ;");
در صورتيكه تابع مذكور فقط يك ورودي ميگيره


function ChangeAllCheckBoxStates(checkState) {

if (CheckBoxIDs != null) {

for (var i = 0; i < CheckBoxIDs.length; i++)

ChangeCheckBoxState(CheckBoxIDs[i], checkState);

}

}

[Milad Mohseny]

cbHeader.Attributes.Add("onclick", "ChangeAllCheckBoxStates(this.checked,CheckBoxIDs) ;");
اصلاح شد.


دوست عزيز ميشه كدي كه در قسمت DataBound نوشتيد توضيح بديد /هم چنين توابع جاوا اسكريپت !!
با سلام.
اين كد خيلي ساده است چيزه خاصي نداره. روش كار اينجوريه كه شما يه checkbox تو header ميزاري با id
HdChk كارش اينه كه وقي روي اون كليك ميكني ChangeAllCheckBoxStates رو صدا ميكنه و كار اين تابع اينه كه تمام checkbox هارو يكي يكي check=true قرارميده يعني اينكه همه select ميشن.
ولي مشكل كلي اينجاست كه ما id هر كدوم از checkbox هايي كه تو هر سطر هست رو نداريم براي رفع اين مشكل id هارو سمت سرور و در DataBound مربوط به GridView داخل يه آرايه به اسم ArrayValues ميريزيم و لازم هست كه اون id هارو به صورت يه آرايه جاوا اسكريپتي (CheckBoxIDs) به سمت كلاينت بفرستيم يعني اين قسمت
List<string> ArrayValues = new List<string>();
ArrayValues.Add(String.Concat("'", cbHeader.ClientID, "'"));

foreach (GridViewRow gvr in GridView1.Rows)
{
CheckBox cb = gvr.FindControl("chkRow") as CheckBox;
cb.Attributes.Add("onclick", "ChangeHeaderAsNeeded();");
ArrayValues.Add(String.Concat("'", cb.ClientID, "'"));
}

CheckBoxIDsArray.Text = "<script type=\"text/javascript\">" +
String.Concat("var CheckBoxIDs = new Array(", String.Join(",", ArrayValues.ToArray()), ");") +
"</script>";

خوب حالا چجوري به سمت كلاينت بفرستيم؟ با استفاده از همون Literal يعني مرحله 1. كه ArrayValues ها رو يكي يكي داخل آرايه CheckBoxIDs (اين آرايه براي استفاده در سمت كلاينت هست) ميريزيم.
با اين كد زير هم مشخص ميكنيم هر وقت checkbox كليك شد تابع js براي تغيير وضعيت آن fire شود:
cb.Attributes.Add("onclick", "ChangeHeaderAsNeeded();");
تابع ChangeHeaderAsNeeded يكي يكي id هاي checkbox ها رو از آرايه CheckBoxIDs ميخونه و checkbox هارو در صفحه پيدا ميكنه و اگه همه چك باكس ها انتخاب شده بودند HdChk يعني هموني كه تو header هست رو هم check ميكنه.
اگه بازم جايي نامفهوم بود يا بد توضيح دادم بگو. :لبخندساده:

[SAMARE]

دوست عزيز من كد شما رو اجرا كردم ولي نميدونم چرا با انتخاب چك باكس هدر همه چك باكس ها انتخاب نميشن؟؟؟

من همه مراحل رو دقيق انجام دادم!!!

يه سوال ديگه اينكه ‍CheckBoxIDs چجوري براي توابع جاوااسكريت ارسال ميشه؟؟؟
در ضمن دوست عزيز مقادير چك ها در صفحه بندي گريدويو از بين ميرن!!!

[Milad Mohseny]

يه سوال ديگه اينكه ‍CheckBoxIDs چجوري براي توابع جاوااسكريت ارسال ميشه؟؟؟
با asp:Literal و به شكل زير
CheckBoxIDsArray.Text = "<script type=\"text/javascript\">" +
String.Concat("var CheckBoxIDs = new Array(", String.Join(",", ArrayValues.ToArray()), ");") +
"</script>";

نمونه كد در همون پست اول ضميمه كردم ببين.