jQuery UI Widgets Forums Grid get the value of row that have a text input and file input using cellsrenderer

This topic contains 6 replies, has 2 voices, and was last updated by  Dimitar 11 years, 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • ryan paul
    Participant

    var PopulateGrid1 = function() {
    $.ajax({
    url: ‘Address1.aspx/Function1’,
    dataType: ‘json’,
    contentType: ‘application/json; charset=utf-8’,
    type: ‘POST’,
    async: false,
    success: function (data) {
    var temp = JSON.parse(data.d);

    var gridSource = { datafields: [{ name: ‘Column1’ }, { name: ‘Column2’ } ], id: ‘Column1’, datatype: ‘json’, localdata: temp.JsonString };

    var remarksrenderer = function(){ return ”; }
    var uploadrenderer = function(){ return ”; }

    $(“#Grid1″).jqxGrid({
    width: 660, theme: theme, pageable: true, pagesize: 5, height: 200, sortable: true, altrows: false, editable: false,
    source: gridSource, selectionmode: ‘singlecell’, columnsresize: true,
    columns: [
    { text: ‘Column1’, datafield: ‘Column1’, width: 100 },
    { text: ‘Column2’, datafield: ‘Column2’, width: 100 },
    { text: ‘TextColumn3’, datafield: ‘TextColumn3’, width: 100, cellsrenderer: remarksrenderer },
    { text: ‘FileColumn4’, datafield: ‘FileColumn4’, width: 100, cellsrenderer: uploadrenderer },
    {
    text: ”, datafield: ‘Submit’, columntype: ‘button’, width: 60, cellsrenderer: function() { return “Submit” },
    buttonclick: function (row) {
    var dataRecord = $(“#Grid1”).jqxGrid(‘getrowdata’, row);
    alert(“Column3 Value: ” +
    // What should i place here?
    ” Column4 Value:” +
    // What should i place here?
    );
    }
    }
    },
    });
    }
    });
    });

    // i need to get all the value of the entire row
    // specially the value of the text and file input generated using the cellsrenderer,

    // is there a way to get the value?


    ryan paul
    Participant

    var PopulateGrid1 = function() {
    $.ajax({
    url: ‘Address1.aspx/Function1’,
    dataType: ‘json’,
    contentType: ‘application/json; charset=utf-8’,
    type: ‘POST’,
    async: false,
    success: function (data) {
    var temp = JSON.parse(data.d);

    var gridSource = { datafields: [{ name: ‘Column1’ }, { name: ‘Column2’ } ], id: ‘Column1’, datatype: ‘json’, localdata: temp.JsonString };

    var remarksrenderer = function(){ return ”; }
    var uploadrenderer = function(){ return ”; }

    $(“#Grid1″).jqxGrid({
    width: 660, theme: theme, pageable: true, pagesize: 5, height: 200, sortable: true, altrows: false, editable: false,
    source: gridSource, selectionmode: ‘singlecell’, columnsresize: true,
    columns: [
    { text: ‘Column1’, datafield: ‘Column1’, width: 100 },
    { text: ‘Column2’, datafield: ‘Column2’, width: 100 },
    { text: ‘TextColumn3’, datafield: ‘TextColumn3’, width: 100, cellsrenderer: remarksrenderer },
    { text: ‘FileColumn4’, datafield: ‘FileColumn4’, width: 100, cellsrenderer: uploadrenderer },
    {
    text: ”, datafield: ‘Submit’, columntype: ‘button’, width: 60, cellsrenderer: function() { return “Submit” },
    buttonclick: function (row) {
    var dataRecord = $(“#Grid1”).jqxGrid(‘getrowdata’, row);
    alert(“Column3 Value: ” +
    // What should i place here?
    ” Column4 Value:” +
    // What should i place here?
    );
    }
    }
    },
    });
    }
    });
    });


    ryan paul
    Participant

    it seems i have a problem in showing my codes with html tags, but you get the idea. i am creating a input text for remarks and input file for the attachments using the cellsrendere. now, how can i retrieve their value?


    Dimitar
    Participant

    Hello ryan paul,

    Please provide us with your entire page and format the code as explained in the Code Formatting forum topic.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    ryan paul
    Participant

    Untitled Page

    $(function() {
    $.ajax({
    url: ‘AddressOfFileToGetJsonData.aspx/FunctionToGetJsonData’,
    dataType: ‘json’,
    contentType: ‘application/json; charset=utf-8’,
    type: ‘POST’,
    async: false,
    success: function (data) {
    var temp = JSON.parse(data.d);

    var gridSource = { datafields: [{ name: ‘Column1’ }, { name: ‘Column2’ } ], datatype: ‘json’, localdata: temp.JsonString };

    var column3renderer = function(){ return ”; }
    var column4renderer = function(){ return ”; }
    $(“#Grid1″).jqxGrid({
    width: 660, theme: theme, pageable: true, pagesize: 5, autoheight: true,
    source: gridSource, selectionmode: ‘singlecell’, columnsresize: true,
    columns: [
    { text: ‘Column1’, datafield: ‘Column1’, width: 100 },
    { text: ‘Column2’, datafield: ‘Column2’, width: 100 },
    { text: ‘Column3’, datafield: ‘Column3’, width: 100, cellsrenderer: remarksrenderer },
    { text: ‘Column4’, datafield: ‘Column4’, width: 100, cellsrenderer: uploadrenderer },
    {
    text: ”, datafield: ‘Submit’, columntype: ‘button’, width: 60, cellsrenderer: function() { return “Submit” },
    buttonclick: function (row) {
    var dataRecord = $(“#Grid1”).jqxGrid(‘getrowdata’, row);
    alert(“Column3 Value: ” +
    // What should i place here to get the value of the TextColumn3?
    ” Column4 Value:” +
    // What should i place here to get the value of the FileColumn4?
    );
    }
    }
    },
    });
    }
    });
    });


    ryan paul
    Participant
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="ExecutionManagementSystem.WebForm2" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>Untitled Page</title>
    <link rel="stylesheet" type="text/css" href="/jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="/scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/scripts/gettheme.js"></script>
    <script type="text/javascript" src="/scripts/json2.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="/jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript" src="/jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" >
    $(function() {
    $.ajax({
    url: 'AddressOfFileToGetJsonData.aspx/FunctionToGetJsonData',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    type: 'POST',
    async: false,
    success: function (data) {
    var temp = JSON.parse(data.d);
    var gridSource = { datafields: [{ name: 'Column1' }, { name: 'Column2' } ], datatype: 'json', localdata: temp.JsonString };
    var column3renderer = function(){ return '<input id="TextColumn3" name="TextColumn3" type="text" />'; }
    var column4renderer = function(){ return '<input id="FileColumn4" name="FileColumn4" type="file" />'; }
    $("#Grid1").jqxGrid({
    width: 660, theme: theme, pageable: true, pagesize: 5, autoheight: true,
    source: gridSource, selectionmode: 'singlecell', columnsresize: true,
    columns: [
    { text: 'Column1', datafield: 'Column1', width: 100 },
    { text: 'Column2', datafield: 'Column2', width: 100 },
    { text: 'Column3', datafield: 'Column3', width: 100, cellsrenderer: remarksrenderer },
    { text: 'Column4', datafield: 'Column4', width: 100, cellsrenderer: uploadrenderer },
    {
    text: '', datafield: 'Submit', columntype: 'button', width: 60, cellsrenderer: function() { return "Submit" },
    buttonclick: function (row) {
    var dataRecord = $("#Grid1").jqxGrid('getrowdata', row);
    alert("Column3 Value: " +
    // What should i place here to get the value of the TextColumn3?
    " Column4 Value:" +
    // What should i place here to get the value of the FileColumn4?
    );
    }
    }
    },
    });
    }
    });
    });
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <div id="Grid1">
    </div>
    </div>
    </form>
    </body>
    </html>

    Dimitar
    Participant

    Hello ryan paul,

    First, you should change your cellsrenderers a little bit, as follows:

                        var column3renderer = function () { return '<input class="TextColumn3" name="TextColumn3" type="text" />'; }
    var column4renderer = function () { return '<input class="FileColumn4" name="FileColumn4" type="file" />'; }

    As for the buttonclick function, it should be:

    							    buttonclick: function (row) {
    var textValue = $(".TextColumn3:eq(" + row + ")").val();
    var fileValue = $(".FileColumn4:eq(" + row + ")").val();
    alert("Column3 Value: " + textValue + " Column4 Value:" + fileValue);
    }

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.