Regarding fetching value of any column of the selected/checked rows.

515

Rohit Rawat posted over 1 year ago

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>

</table>
</div>

<div class="text-center">
<button id="savechanges" class="btn btn-primary">Save</button>
</div>
<form asp-action="Export" style="display:inline" ;>

<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 Georgi Anastasov posted over 1 year ago

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

515

Offline Rohit Rawat posted over 1 year ago in reply to Georgi Anastasov

i m confused with the starting 3 lines. for the below code:

$("#export").igButton( {
labelText: $("#saveChanges").val(),
click: function(e)
{
$.ig.GridExcelExporter.exportGrid($("#grid"),{
fileName: "igGrid",
}

1) file name means the name by which file will be downloaded?

2) what the use of lavelText : ... line adnd what does igButton does?

3) Please can you provide some api reference like about igbutton. They are really hard to find.
Cancel
Reply

Cancel

Reply

515

Offline Rohit Rawat posted over 1 year ago in reply to Rohit Rawat

Also can you please provide cdn of these file as i cannot fine them.I m getting this error.

(index):292 Uncaught TypeError: Cannot read properties of undefined (reading 'exportGrid')
Cancel
Reply

Cancel

Children

460

Offline Georgi Anastasov posted over 1 year ago in reply to Rohit Rawat
Hello,

I have been looking into your questions and what I can provide you as information is the following:

1) File name means the name by which file will be downloaded?

Regarding your first question, yes, you are right with the fileName property you set the name of the excel file that you will download after exporting the grid to excel.

$.ig.GridExcelExporter.exportGrid($("#grid"),{ fileName: "Your file name" });

2) What the use of labelText: line and what does igButton does?

Regarding your second question, igButton is an Ignite UI jQuery control that creates a button from an html element by selecting it with its selector and the labelText property sets the text that will be displayed in the button.

$("#saveChanges").igButton( { labelText: “Click me” });

3) Please can you provide some api reference like about igButton?

Regarding your third question, you can find all the Ignite UI jQuery controls and all the information you need as well as additional information here from our official documentation.

4) Also can you please provide cdn of these file as I cannot fine them?

Regarding your fourth question, All the necessary links are in the sample I provided in my previous answer. However, what you need to add are the following links:

<script src="https://igniteui.com/js/external/FileSaver.js"></script> <script src="https://igniteui.com/js/external/Blob.js"></script> <script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.excel-bundled.js"></script> <script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/infragistics.gridexcelexporter.js"></script>

In addition, what I want to specify is that according to our support policy, we handle only one question per support case/forum thread and not many and differently directed questions. This helps us ensure that all your issues are addressed correctly and please keep this in mind.

Thank you for your cooperation.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics
Cancel
Reply

Cancel