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
515
Regarding adding a dropdown option (cascading and normal one both) in iggrid
posted

Hello everyone,

So i populated my grid with some data using my mvc. Now i want to add a dropdown (nommal and cascading one ) . I m confused how to do that. Also theres one condition if i select some value from dropdown i want to make other column required and optional on the basis of that.

Here's the code:


@*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",
enableCheckBoxes: true,
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: "number",
validation: true,
editorOptions: {
validatorOptions: {
required: {
errorMessage: "You must enter a value to submittt."

},
custom:function(ui,evt){
console.log(ui);
console.log("hi");
if (ui >= 50 && ui<= 100) {
var validator1 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator").element;
console.log("hi333");
var validator12 = $("#grid").igGridUpdating("editorForKey", "imagepath").data("igValidator");

console.log(validator12);

//Set
$(validator1).igValidator("option", "required", true);
return true;
}
}
}
}
}
]
}
]
});
var editor = $("#grid").igGridUpdating("editorForKey", "id");
alert(editor);

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

</script>


}

I haven't added dropdown as i don't know how to do it. So, please help me out with this.

  • 0
    Offline posted

    retro bowl combines the best of classic football games with new management features. Explore our website to learn how you can become the best coach in the league!

  • 0
    Offline posted

    Thanks to the developer's reply, I operated successfully after using the half body sexdoll method you provided, thanks for your contribution!

  • 0
    Offline posted

    Thank you for all your responses. I'd also want to offer a really informative website.
    See More: slice masters

  • 0
    Offline posted

    columnKey: "marks",
    editorType: "number",
    validation: true,
    editorOptions: {
    validatorOptions: {
    required: {
    errorMessage: "You must enter a value to submittt."

    Can you explain this for me plz? super mario bros

  • 460
    Offline posted

    Hello,

    I have been looking into your question and what I can offer you as an approach is to use the columnSettings property of the Updating feature and define the column you want to be edited with a drop down by handling the editorType property and set it to a combo. In this way, the column according to your requirements will be edited with a drop down, and in the future you will also handle the editorOptions to handle the dataSource to provide the data from which to choose when editing with the drop down.

     

    {
                          columnKey: "City",
                          editorType: "combo",
                          validation: true,
                          editorOptions: {
                            dataSource: cities,
                            }
       }

    In addition, to meet your requirements, you must set the validation property to true to enable dropdown validation. After that, you will handle the validatorOptions and the custom function, as when selecting an item from the drop down menu, you can check the value of the selected item and, accordingly, make the next cell from the next column required. This will be achieved by accessing the next cell's validator with igGridUpdating and the grid's selector by passing the column key for the editorForKey option. With the validator igValidator you can handle the required option and set it to true to make the cell according to your requirements required.

    {
                          columnKey: "City",
                          editorType: "combo",
                          validation: true,
                          editorOptions: {
                            dataSource: cities,
                            validatorOptions:
    												{
    													required: true,
    													custom: function (ui, fieldOptions) {
    														var cityValidator = $("#grid").igGridUpdating("editorForKey", "City").data("igValidator").element;
    														var addressValidator = $("#grid").igGridUpdating("editorForKey", "Address").data("igValidator").element;
                                                            if(ui !== ""){
                                                              	$(addressValidator).igValidator("option", "required", true);
    															$(addressValidator).igValidator("option", "errorMessage", 'Enter Address too!');
    															return true;
                                                              } else {
                                                              	$(addressValidator).igValidator("option", "required", false);
                                                                return true;
                                                              }
    														return true;
    												}
    											}
                          }
                      },

    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