Unbound columns

[Bernard Jurlina]

What is the best way to do something like this:

I have one table in database and this is also one entity in EF model in the project. Let's say there is 10 columns in that table.

On the page I bind the grid on datasource from that table and it's working normally. Now, I want to add 3 unbound columns in the grid and I want to set their values for every row  by calling some service which is outside of the project. I'm using signalR connection from controller to page to pass the values which I want to set in the grid, and that's working fine.

Is it better to render the grid with columns in javascript, get the signalR message and then loop through the rows and set the values in unbound columns (by the way, how can I loop grid rows in javascript?), or is it better to render it on server-side in controller and set the values for these columns there, and pass the grid properties to the view?

Thanks.

[Seeni Sakthi Kumar Seeni Raj]

Hi Bernard, 

We could see you would like to pass the unbound column changes to the another page on the basis of SignalR concepts. We have achieved this by using the template columns which will also be treated as an unbound column. In the template columns, we have rendered the ejNumericTextBoxes. On the change event of them, server modify method has been called to update the Grid rendered on the another page. Refer to the following code example. 

@(Html.EJ().Grid<object>("Grid") 

    .Datasource((IEnumerable<object>)ViewBag.dataSource) 

    .AllowPaging() 

    .AllowFiltering() 

    .ClientSideEvents( 

        d => 

        { 

            d.TemplateRefresh("refreshtemplate"); 

        }) 

    .Columns(col => 

        { 

                 . . .. .  

        col.HeaderText("temp1").Template("<input class='numeric' type='text' />").Add(); 

        col.HeaderText("temp2").Template("<input class='numeric' type='text' />").Add(); 

        col.HeaderText("temp3").Template("<input class='numeric' type='text' />").Add(); 

    }) 

) 

<!--Reference the SignalR library. --> 

<script src="~/Scripts/jquery.signalR-2.1.2.js"></script> 

<!--Reference the autogenerated SignalR hub script. --> 

<script src="~/signalr/hubs"></script> 

<script> 

    function refreshtemplate(args) { 

        $(args.cell).find(".numeric").ejNumericTextbox({ 

            value: 10, 

            change: "change" 

        }).attr("id", args.column.headerText + args.rowIndex); 

    } 

    $(function () { 

        window.signal = $.connection.signalRTestHub; 

        window.signal.client.modify = function (userIp, action, details) { 

            $("#" + action).ejNumericTextbox({ 

                value: details.value 

            }); 

        } 

        $.connection.hub.start().done(function () { 

            window.change = function (args) { 

                window.signal.server.modify($("#userName").text(), this.element.attr("id"), args); 

            } 

        }); 

    }); 

</script> 

Note: Since we have update the template column’s value in the change event of the ejNumericTextBoxes, there is no need to iterate the Grid rows.  

We have also prepared a sample that can be downloaded from the following location. 

Sample: http://www.syncfusion.com/downloads/support/forum/125766/ze/F125766-313998842.zip 

Regards, 

Seeni Sakthi Kumar S. 

[Bernard Jurlina]

Great,

I'll give it a try.

Thanks a lot!

Bernard.

[Ragavee U S]

Hi Bernard, 

  

Thanks for your update. 

  

Regards, 

Ragavee U S.