Forums Ignite UI for ASP.NET MVC
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Rohit Rawat
515
Regarding fetching value of any column of the selected/checked rows.
posted

Hello everyone , 

So, I Want to get the id column value of the checked rows either by jquery or ignite(jquery would be good if it is possible). i want to get those if and pass them into a function so that i can export them into excel. Could anyone please explain me how could i do that?

Here's my code:

html>
<head>

</head>
<body>


<div>
<table id="grid">

</table>
</div>

<div class="text-center">
<button id="savechanges" class="btn btn-primary">Save</button>
</div>
<form asp-action="Export" style="display:inline" ;>
<!-- Form content goes here -->
<button type="submit" id="b2" class="btn btn-primary">Export</button>
</form>




</body>
</html>

@section scripts{

@*Batch Update*@
<script>
$(function () {
$("#grid").igGrid({
primaryKey: "id",
renderCheckboxes: true,
autoGenerateColumns: false,
updateUrl: "/Student/put/",
width: "100%",

columns: [
{ headerText: "Student ID", key: "id", dataType: "number", width: "15%" },
{ headerText: "Student Name", key: "name", dataType: "string", width: "30%" },
{ headerText: "Marks", key: "marks", dataType: "number", width: "30%" },
{
headerText: "Image",
key: "imagepath",
dataType: "string",
width: "15%",
template: "<img src='${imagepath}' width='50' height='50' />"
},
{ headerText: "Subject", key: "subject", dataType: "string", width: "15%" }
],
dataSourceUrl: "/Student/Data12",
dataSource: "/Student/Data",


features: [
{
name: "Selection",
mode: "row",
multipleSelection: true
},
{
name: "RowSelectors",

enableRowNumbering: true
},
{
name: "GroupBy"
},
{
name :"Paging",
type:"local",
pageSize : 7
},

{
name: "Filtering",
columnSettings: [
{
columnKey: "selectColumn",
allowFiltering: false
}
]
},
{
name: "Sorting",
type: "remote",
// sortUrlKey: 'sort',
// sortUrlKeyAscValue: 'asc',
// sortUrlKeyDescValue: 'desc'
},
{
name: "Updating",
enableAddRow: true,
editMode: "row",
validation: true,
enableDeleteRow: true,
rowAdded: function (evt, ui) {
// Custom logic to execute when a row is added
console.log("Event arguments (ui):", ui);
console.log("Row data:", ui.rowId);
console.log(typeof (ui.values));
},
columnSettings: [
{
columnKey: "id",
readOnly: true

},

{
columnKey: "name",
editorType: "text",
validation: true,
editorOptions: {

validatorOptions:
{
required: {
errorMessage: "You must enter a value to submit."

},
custom: function(ui,evt){
var validator = $("#grid").igGridUpdating("editorForKey", "name").data("igValidator").element;

console.log(validator);
if (ui == "rohit") {

$(validator).igValidator("option", "errorMessage", "cant enter name rohit");

return false;
}
return true;

}

}
}
},
{
columnKey: "marks",
editorType: "combo",
validation: true,

editorOptions: {
mode: "dropdown",
dataSource: [
{ "ID": 0, "Name": "Food" },
{ "ID": 1, "Name": "Beverages" },
{ "ID": 200, "Name": "Electronics" }
],
textKey: "Name",
valueKey: "ID",
validatorOptions: {
required: {
errorMessage: "You must enter a value to submittt."

},
custom:function(ui,evt){
console.log(ui);
console.log("hi");
if (ui >= 50) {
console.log(ui);
var validator1 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator").element;
// console.log(validator1);
console.log("inside if");
// var validator11 = $("#grid").igGridUpdating("editorForKey", "imagepath");

$(validator1).igValidator("option", "required", true);

$(validator1).igValidator("option", "errorMessage", 'This field is required for marks between 50-100');

return true;
}
else {
// var validator1 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator").element;
// var validator11 = $("#grid").igGridUpdating("editorForKey", "imagepath");
console.log("else");
var validatorElement = $("#grid").igGridUpdating("editorForKey", "imagepath");
console.log(validatorElement);
if (validatorElement) {
var validator = validatorElement.data("igValidator").element;
$(validator).igValidator("option", "required", false);

} else {
console.log("Imagepath editor element is null");
}

// console.log(validator11);

//Set

return true;
}
}
}
}
}
]
}
]
});

$("#savechanges").on("click", function () {
alert("Save button clicked");
// Save changes when the button is clicked
$("#grid").igGrid("saveChanges");
});
});

</script>

Parents
  • 460
    Offline posted

    Hello,

    I have been looking into your question and what I understand is that you want to export to excel only the selected rows from your igGrid.

    What I can suggest as an approach is to use ig.GridExcelExporter. You will handle the rowExporting event of the GridExcelExporter, which is fired for each exported row from the grid to Excel.

    $.ig.GridExcelExporter.exportGrid($("#grid"),{
       fileName: "igGrid",
},
{
   rowExporting: function (sender, args) {
   }
});

    First you will get the id of each exported row from the grid.

    var id = args.rowId;

    Then you will get all the selected rows with igGridSelection and the selectedRows method.

    var selectedRows = $("#grid").igGridSelection("selectedRows");

    You will go through the selected rows and check if the taken id of the exported row currently matches the id of the selected rows and if so then the row is selected then you will export this row and if it does not match the id then this row is not selected, and you will not export it.

    for (var i = 0; i < selectedRows.length; i++) {
      if (selectedRows[i].id === id) {
            return true;
       }
}
return false;

    This will happen when the export button is pressed.

    $("#export").igButton( {
                labelText: $("#saveChanges").val(),
                click: function(e)
                {
                     $.ig.GridExcelExporter.exportGrid($("#grid"),{
                            fileName: "igGrid",
                      },
                      {
                            rowExporting: function (sender, args) {
                             var id = args.rowId;
                             var selectedRows = $("#grid").igGridSelection("selectedRows");
                             for (var i = 0; i < selectedRows.length; i++) {
                                 if (selectedRows[i].id === id) {
                                    return true;
                                  }
                              }
                              return false;
                            }
                      }
                      );
               }
          });

    The described scenario could be observed here:

     

    In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

    If you require any further assistance on the matter, please let me know.

    Regards,

    Georgi Anastasov

    Entry Level Software Developer

    Infragistics

Reply Children